diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 00000000000..9e4646c61cb
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,8 @@
+node_modules/
+target/
+.next/
+build/
+dist/
+
+/templates/
+/fixtures/
diff --git a/.github/workflows/prerelease-comment.yml b/.github/workflows/prerelease-comment.yml
index 7d4089ae1ac..41e7f693a25 100644
--- a/.github/workflows/prerelease-comment.yml
+++ b/.github/workflows/prerelease-comment.yml
@@ -49,7 +49,7 @@ jobs:
             A new prerelease is available for testing:
 
             ```sh
-            npx shadcn@${{ env.BETA_PACKAGE_VERSION }}
+            pnpm dlx shadcn@${{ env.BETA_PACKAGE_VERSION }}
             ```
 
       - name: "Remove the autorelease label once published"
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index f45807d242e..fd64b7878a7 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -91,6 +91,42 @@ pnpm --filter=www dev
 pnpm --filter=shadcn-ui dev
 ```
 
+## Running the CLI Locally
+
+To run the CLI locally, you can follow the workflow:
+
+1. Start by running the registry (main site) to make sure the components are up to date:
+
+   ```bash
+   pnpm www:dev
+   ```
+
+2. Run the development script for the CLI:
+
+   ```bash
+   pnpm shadcn:dev
+   ```
+
+3. In another terminal tab, test the CLI by running:
+
+   ```bash
+   pnpm shadcn
+   ```
+
+   To test the CLI in a specific app, use a command like:
+
+   ```bash
+   pnpm shadcn <init | add | ...> -c ~/Desktop/my-app
+   ```
+
+4. To run the tests for the CLI:
+
+   ```bash
+   pnpm --filter=shadcn test
+   ```
+
+This workflow ensures that you are running the most recent version of the registry and testing the CLI properly in your local environment.
+
 ## Documentation
 
 The documentation for this project is located in the `www` workspace. You can run the documentation locally by running the following command:
diff --git a/apps/www/__registry__/default/block/authentication-01.tsx b/apps/www/__registry__/default/block/authentication-01.tsx
deleted file mode 100644
index ad62585fa44..00000000000
--- a/apps/www/__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/www/__registry__/default/block/authentication-02.tsx b/apps/www/__registry__/default/block/authentication-02.tsx
deleted file mode 100644
index b4ccaddd92b..00000000000
--- a/apps/www/__registry__/default/block/authentication-02.tsx
+++ /dev/null
@@ -1,67 +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/www/__registry__/default/block/authentication-03.tsx b/apps/www/__registry__/default/block/authentication-03.tsx
deleted file mode 100644
index 65e7c939a7a..00000000000
--- a/apps/www/__registry__/default/block/authentication-03.tsx
+++ /dev/null
@@ -1,72 +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/www/__registry__/default/block/authentication-04.tsx b/apps/www/__registry__/default/block/authentication-04.tsx
deleted file mode 100644
index 1ccce939230..00000000000
--- a/apps/www/__registry__/default/block/authentication-04.tsx
+++ /dev/null
@@ -1,74 +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-balance text-muted-foreground">
-              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="hidden bg-muted lg:block">
-        <Image
-          src="/placeholder.svg"
-          alt="Image"
-          width="1920"
-          height="1080"
-          className="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
-        />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/default/block/chart-area-interactive.tsx b/apps/www/__registry__/default/block/chart-area-interactive.tsx
deleted file mode 100644
index 3044b7357a6..00000000000
--- a/apps/www/__registry__/default/block/chart-area-interactive.tsx
+++ /dev/null
@@ -1,265 +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 {
-  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 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/www/__registry__/default/block/chart-pie-label-custom.tsx b/apps/www/__registry__/default/block/chart-pie-label-custom.tsx
deleted file mode 100644
index 647712d505b..00000000000
--- a/apps/www/__registry__/default/block/chart-pie-label-custom.tsx
+++ /dev/null
@@ -1,110 +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 {
-  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]"
-        >
-          <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="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/www/__registry__/default/block/chart-pie-label-list.tsx b/apps/www/__registry__/default/block/chart-pie-label-list.tsx
deleted file mode 100644
index fa5f0038ce6..00000000000
--- a/apps/www/__registry__/default/block/chart-pie-label-list.tsx
+++ /dev/null
@@ -1,97 +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 {
-  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]"
-        >
-          <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/www/__registry__/default/block/chart-tooltip-default.tsx b/apps/www/__registry__/default/block/chart-tooltip-default.tsx
deleted file mode 100644
index a4951569374..00000000000
--- a/apps/www/__registry__/default/block/chart-tooltip-default.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 {
-  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 - 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/www/__registry__/default/block/chart-tooltip-indicator-line.tsx b/apps/www/__registry__/default/block/chart-tooltip-indicator-line.tsx
deleted file mode 100644
index c5cc9a676dc..00000000000
--- a/apps/www/__registry__/default/block/chart-tooltip-indicator-line.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-"use client"
-
-import { Bar, BarChart, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  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 - 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/www/__registry__/default/block/charts-01.tsx b/apps/www/__registry__/default/block/charts-01.tsx
deleted file mode 100644
index 806272513be..00000000000
--- a/apps/www/__registry__/default/block/charts-01.tsx
+++ /dev/null
@@ -1,871 +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 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="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 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-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 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-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 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-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 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-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 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-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 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-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 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="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/www/__registry__/default/block/dashboard-01.tsx b/apps/www/__registry__/default/block/dashboard-01.tsx
deleted file mode 100644
index 74bc72a8cde..00000000000
--- a/apps/www/__registry__/default/block/dashboard-01.tsx
+++ /dev/null
@@ -1,455 +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="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="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="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="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="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="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="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="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="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="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="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="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 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/www/__registry__/default/block/dashboard-02.tsx b/apps/www/__registry__/default/block/dashboard-02.tsx
deleted file mode 100644
index 10e217352a4..00000000000
--- a/apps/www/__registry__/default/block/dashboard-02.tsx
+++ /dev/null
@@ -1,247 +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="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="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>
-          </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
-            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-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/www/__registry__/default/block/dashboard-03.tsx b/apps/www/__registry__/default/block/dashboard-03.tsx
deleted file mode 100644
index a5bbbed32b2..00000000000
--- a/apps/www/__registry__/default/block/dashboard-03.tsx
+++ /dev/null
@@ -1,464 +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="w-5 h-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="w-5 h-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="w-5 h-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="w-5 h-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="w-5 h-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="w-5 h-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="w-5 h-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="w-5 h-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-[57px] 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="w-4 h-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="w-5 h-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="w-5 h-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="w-5 h-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="w-3.5 h-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="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="flex items-start gap-3 text-muted-foreground">
-                          <Rabbit className="w-5 h-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="w-5 h-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="w-5 h-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="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="w-4 h-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="w-4 h-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="w-3.5 h-3.5" />
-                </Button>
-              </div>
-            </form>
-          </div>
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/default/block/dashboard-04.tsx b/apps/www/__registry__/default/block/dashboard-04.tsx
deleted file mode 100644
index 991a45cc950..00000000000
--- a/apps/www/__registry__/default/block/dashboard-04.tsx
+++ /dev/null
@@ -1,223 +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="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="dashboard-04-chunk-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="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>
-            <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>
-          </div>
-        </div>
-      </main>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/default/block/dashboard-05.tsx b/apps/www/__registry__/default/block/dashboard-05.tsx
deleted file mode 100644
index f94522d7f17..00000000000
--- a/apps/www/__registry__/default/block/dashboard-05.tsx
+++ /dev/null
@@ -1,720 +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="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-5">
-          <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-5">
-          <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-[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="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>
-              <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-xs text-muted-foreground">
-                    +25% from last week
-                  </div>
-                </CardContent>
-                <CardFooter>
-                  <Progress value={25} aria-label="25% increase" />
-                </CardFooter>
-              </Card>
-              <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-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="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="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">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">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="dashboard-05-chunk-4">
-              <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/www/__registry__/default/block/dashboard-06.tsx b/apps/www/__registry__/default/block/dashboard-06.tsx
deleted file mode 100644
index 737d90c0427..00000000000
--- a/apps/www/__registry__/default/block/dashboard-06.tsx
+++ /dev/null
@@ -1,637 +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="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-5">
-          <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-5">
-          <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-[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="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-8 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-8 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="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="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 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="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 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="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 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="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 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="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 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="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/www/__registry__/default/block/dashboard-07.tsx b/apps/www/__registry__/default/block/dashboard-07.tsx
deleted file mode 100644
index 5c78dee0561..00000000000
--- a/apps/www/__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="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-5">
-          <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-5">
-          <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-[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="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="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>
-                <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="h-3.5 w-3.5" />
-                      Add Variant
-                    </Button>
-                  </CardFooter>
-                </Card>
-                <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>
-              </div>
-              <div className="grid auto-rows-max items-start gap-4 lg:gap-8">
-                <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>
-                <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="h-4 w-4 text-muted-foreground" />
-                          <span className="sr-only">Upload</span>
-                        </button>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-                <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>
-              </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/www/__registry__/default/block/login-01.tsx b/apps/www/__registry__/default/block/login-01.tsx
deleted file mode 100644
index 09809062ff2..00000000000
--- a/apps/www/__registry__/default/block/login-01.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { LoginForm } from "@/registry/default/block/login-01/components/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/www/__registry__/default/block/login-01/components/login-form.tsx b/apps/www/__registry__/default/block/login-01/components/login-form.tsx
deleted file mode 100644
index e5504442469..00000000000
--- a/apps/www/__registry__/default/block/login-01/components/login-form.tsx
+++ /dev/null
@@ -1,59 +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/www/__registry__/default/block/login-01/page.tsx b/apps/www/__registry__/default/block/login-01/page.tsx
deleted file mode 100644
index b4b8a2f7127..00000000000
--- a/apps/www/__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/www/__registry__/default/block/sidebar-01.tsx b/apps/www/__registry__/default/block/sidebar-01.tsx
deleted file mode 100644
index 335bb25e163..00000000000
--- a/apps/www/__registry__/default/block/sidebar-01.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { AppSidebar } from "@/registry/default/block/sidebar-01/components/app-sidebar"
-import {
-  SidebarLayout,
-  SidebarTrigger,
-} from "@/registry/default/block/sidebar-01/ui/sidebar"
-
-export const iframeHeight = "870px"
-
-export const containerClassName = "w-full h-full"
-
-export default async function Page() {
-  const { cookies } = await import("next/headers")
-  return (
-    <SidebarLayout
-      defaultOpen={cookies().get("sidebar:state")?.value === "true"}
-    >
-      <AppSidebar />
-      <main className="flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out">
-        <div className="h-full rounded-md border-2 border-dashed p-2">
-          <SidebarTrigger />
-        </div>
-      </main>
-    </SidebarLayout>
-  )
-}
diff --git a/apps/www/__registry__/default/block/sidebar-01/page.tsx b/apps/www/__registry__/default/block/sidebar-01/page.tsx
deleted file mode 100644
index 2a3d45f69ad..00000000000
--- a/apps/www/__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="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/www/__registry__/default/block/sidebar-02/page.tsx b/apps/www/__registry__/default/block/sidebar-02/page.tsx
deleted file mode 100644
index 58926063f60..00000000000
--- a/apps/www/__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="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/www/__registry__/default/block/sidebar-03/page.tsx b/apps/www/__registry__/default/block/sidebar-03/page.tsx
deleted file mode 100644
index 14663d4cc2a..00000000000
--- a/apps/www/__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="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/www/__registry__/default/block/sidebar-04/page.tsx b/apps/www/__registry__/default/block/sidebar-04/page.tsx
deleted file mode 100644
index d81bf6e7894..00000000000
--- a/apps/www/__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="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/www/__registry__/default/block/sidebar-05/page.tsx b/apps/www/__registry__/default/block/sidebar-05/page.tsx
deleted file mode 100644
index 396283c4114..00000000000
--- a/apps/www/__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="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/www/__registry__/default/block/sidebar-06/page.tsx b/apps/www/__registry__/default/block/sidebar-06/page.tsx
deleted file mode 100644
index d58fc8701ce..00000000000
--- a/apps/www/__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="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/www/__registry__/default/block/sidebar-07/page.tsx b/apps/www/__registry__/default/block/sidebar-07/page.tsx
deleted file mode 100644
index 9e5f2bbb271..00000000000
--- a/apps/www/__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="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/www/__registry__/default/block/sidebar-08/page.tsx b/apps/www/__registry__/default/block/sidebar-08/page.tsx
deleted file mode 100644
index 247b000b947..00000000000
--- a/apps/www/__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="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/www/__registry__/default/block/sidebar-09/page.tsx b/apps/www/__registry__/default/block/sidebar-09/page.tsx
deleted file mode 100644
index 8b06d835ec3..00000000000
--- a/apps/www/__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="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/www/__registry__/default/block/sidebar-10/page.tsx b/apps/www/__registry__/default/block/sidebar-10/page.tsx
deleted file mode 100644
index e2ea56d5c9c..00000000000
--- a/apps/www/__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="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/www/__registry__/default/block/sidebar-11/page.tsx b/apps/www/__registry__/default/block/sidebar-11/page.tsx
deleted file mode 100644
index 86a2db98e8a..00000000000
--- a/apps/www/__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="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/www/__registry__/default/block/sidebar-12/page.tsx b/apps/www/__registry__/default/block/sidebar-12/page.tsx
deleted file mode 100644
index c6d09947fd5..00000000000
--- a/apps/www/__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="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/www/__registry__/default/block/sidebar-13/page.tsx b/apps/www/__registry__/default/block/sidebar-13/page.tsx
deleted file mode 100644
index 90246ea6134..00000000000
--- a/apps/www/__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/www/__registry__/default/block/sidebar-14/page.tsx b/apps/www/__registry__/default/block/sidebar-14/page.tsx
deleted file mode 100644
index 3ef694923a4..00000000000
--- a/apps/www/__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="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/www/__registry__/default/block/sidebar-15/page.tsx b/apps/www/__registry__/default/block/sidebar-15/page.tsx
deleted file mode 100644
index f7f3966a4c1..00000000000
--- a/apps/www/__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="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/www/__registry__/default/block/chart-area-axes.tsx b/apps/www/__registry__/default/blocks/chart-area-axes.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-area-axes.tsx
rename to apps/www/__registry__/default/blocks/chart-area-axes.tsx
diff --git a/apps/www/__registry__/default/block/chart-area-default.tsx b/apps/www/__registry__/default/blocks/chart-area-default.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-area-default.tsx
rename to apps/www/__registry__/default/blocks/chart-area-default.tsx
diff --git a/apps/www/__registry__/default/block/chart-area-gradient.tsx b/apps/www/__registry__/default/blocks/chart-area-gradient.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-area-gradient.tsx
rename to apps/www/__registry__/default/blocks/chart-area-gradient.tsx
diff --git a/apps/www/__registry__/default/block/chart-area-icons.tsx b/apps/www/__registry__/default/blocks/chart-area-icons.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-area-icons.tsx
rename to apps/www/__registry__/default/blocks/chart-area-icons.tsx
diff --git a/apps/www/__registry__/default/blocks/chart-area-interactive.tsx b/apps/www/__registry__/default/blocks/chart-area-interactive.tsx
new file mode 100644
index 00000000000..16cbcca59f1
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/chart-area-interactive.tsx
@@ -0,0 +1,266 @@
+"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 {
+  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/www/__registry__/default/block/chart-area-legend.tsx b/apps/www/__registry__/default/blocks/chart-area-legend.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-area-legend.tsx
rename to apps/www/__registry__/default/blocks/chart-area-legend.tsx
diff --git a/apps/www/__registry__/default/block/chart-area-linear.tsx b/apps/www/__registry__/default/blocks/chart-area-linear.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-area-linear.tsx
rename to apps/www/__registry__/default/blocks/chart-area-linear.tsx
diff --git a/apps/www/__registry__/default/block/chart-area-stacked-expand.tsx b/apps/www/__registry__/default/blocks/chart-area-stacked-expand.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-area-stacked-expand.tsx
rename to apps/www/__registry__/default/blocks/chart-area-stacked-expand.tsx
diff --git a/apps/www/__registry__/default/block/chart-area-stacked.tsx b/apps/www/__registry__/default/blocks/chart-area-stacked.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-area-stacked.tsx
rename to apps/www/__registry__/default/blocks/chart-area-stacked.tsx
diff --git a/apps/www/__registry__/default/block/chart-area-step.tsx b/apps/www/__registry__/default/blocks/chart-area-step.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-area-step.tsx
rename to apps/www/__registry__/default/blocks/chart-area-step.tsx
diff --git a/apps/www/__registry__/default/block/chart-bar-active.tsx b/apps/www/__registry__/default/blocks/chart-bar-active.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-bar-active.tsx
rename to apps/www/__registry__/default/blocks/chart-bar-active.tsx
diff --git a/apps/www/__registry__/default/block/chart-bar-default.tsx b/apps/www/__registry__/default/blocks/chart-bar-default.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-bar-default.tsx
rename to apps/www/__registry__/default/blocks/chart-bar-default.tsx
diff --git a/apps/www/__registry__/default/block/chart-bar-horizontal.tsx b/apps/www/__registry__/default/blocks/chart-bar-horizontal.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-bar-horizontal.tsx
rename to apps/www/__registry__/default/blocks/chart-bar-horizontal.tsx
diff --git a/apps/www/__registry__/default/block/chart-bar-interactive.tsx b/apps/www/__registry__/default/blocks/chart-bar-interactive.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-bar-interactive.tsx
rename to apps/www/__registry__/default/blocks/chart-bar-interactive.tsx
diff --git a/apps/www/__registry__/default/block/chart-bar-label-custom.tsx b/apps/www/__registry__/default/blocks/chart-bar-label-custom.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-bar-label-custom.tsx
rename to apps/www/__registry__/default/blocks/chart-bar-label-custom.tsx
diff --git a/apps/www/__registry__/default/block/chart-bar-label.tsx b/apps/www/__registry__/default/blocks/chart-bar-label.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-bar-label.tsx
rename to apps/www/__registry__/default/blocks/chart-bar-label.tsx
diff --git a/apps/www/__registry__/default/block/chart-bar-mixed.tsx b/apps/www/__registry__/default/blocks/chart-bar-mixed.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-bar-mixed.tsx
rename to apps/www/__registry__/default/blocks/chart-bar-mixed.tsx
diff --git a/apps/www/__registry__/default/block/chart-bar-multiple.tsx b/apps/www/__registry__/default/blocks/chart-bar-multiple.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-bar-multiple.tsx
rename to apps/www/__registry__/default/blocks/chart-bar-multiple.tsx
diff --git a/apps/www/__registry__/default/block/chart-bar-negative.tsx b/apps/www/__registry__/default/blocks/chart-bar-negative.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-bar-negative.tsx
rename to apps/www/__registry__/default/blocks/chart-bar-negative.tsx
diff --git a/apps/www/__registry__/default/block/chart-bar-stacked.tsx b/apps/www/__registry__/default/blocks/chart-bar-stacked.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-bar-stacked.tsx
rename to apps/www/__registry__/default/blocks/chart-bar-stacked.tsx
diff --git a/apps/www/__registry__/default/block/chart-line-default.tsx b/apps/www/__registry__/default/blocks/chart-line-default.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-line-default.tsx
rename to apps/www/__registry__/default/blocks/chart-line-default.tsx
diff --git a/apps/www/__registry__/default/block/chart-line-dots-colors.tsx b/apps/www/__registry__/default/blocks/chart-line-dots-colors.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-line-dots-colors.tsx
rename to apps/www/__registry__/default/blocks/chart-line-dots-colors.tsx
diff --git a/apps/www/__registry__/default/block/chart-line-dots-custom.tsx b/apps/www/__registry__/default/blocks/chart-line-dots-custom.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-line-dots-custom.tsx
rename to apps/www/__registry__/default/blocks/chart-line-dots-custom.tsx
diff --git a/apps/www/__registry__/default/block/chart-line-dots.tsx b/apps/www/__registry__/default/blocks/chart-line-dots.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-line-dots.tsx
rename to apps/www/__registry__/default/blocks/chart-line-dots.tsx
diff --git a/apps/www/__registry__/default/block/chart-line-interactive.tsx b/apps/www/__registry__/default/blocks/chart-line-interactive.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-line-interactive.tsx
rename to apps/www/__registry__/default/blocks/chart-line-interactive.tsx
diff --git a/apps/www/__registry__/default/block/chart-line-label-custom.tsx b/apps/www/__registry__/default/blocks/chart-line-label-custom.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-line-label-custom.tsx
rename to apps/www/__registry__/default/blocks/chart-line-label-custom.tsx
diff --git a/apps/www/__registry__/default/block/chart-line-label.tsx b/apps/www/__registry__/default/blocks/chart-line-label.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-line-label.tsx
rename to apps/www/__registry__/default/blocks/chart-line-label.tsx
diff --git a/apps/www/__registry__/default/block/chart-line-linear.tsx b/apps/www/__registry__/default/blocks/chart-line-linear.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-line-linear.tsx
rename to apps/www/__registry__/default/blocks/chart-line-linear.tsx
diff --git a/apps/www/__registry__/default/block/chart-line-multiple.tsx b/apps/www/__registry__/default/blocks/chart-line-multiple.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-line-multiple.tsx
rename to apps/www/__registry__/default/blocks/chart-line-multiple.tsx
diff --git a/apps/www/__registry__/default/block/chart-line-step.tsx b/apps/www/__registry__/default/blocks/chart-line-step.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-line-step.tsx
rename to apps/www/__registry__/default/blocks/chart-line-step.tsx
diff --git a/apps/www/__registry__/default/block/chart-pie-donut-active.tsx b/apps/www/__registry__/default/blocks/chart-pie-donut-active.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-pie-donut-active.tsx
rename to apps/www/__registry__/default/blocks/chart-pie-donut-active.tsx
diff --git a/apps/www/__registry__/default/block/chart-pie-donut-text.tsx b/apps/www/__registry__/default/blocks/chart-pie-donut-text.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-pie-donut-text.tsx
rename to apps/www/__registry__/default/blocks/chart-pie-donut-text.tsx
diff --git a/apps/www/__registry__/default/block/chart-pie-donut.tsx b/apps/www/__registry__/default/blocks/chart-pie-donut.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-pie-donut.tsx
rename to apps/www/__registry__/default/blocks/chart-pie-donut.tsx
diff --git a/apps/www/__registry__/default/block/chart-pie-interactive.tsx b/apps/www/__registry__/default/blocks/chart-pie-interactive.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-pie-interactive.tsx
rename to apps/www/__registry__/default/blocks/chart-pie-interactive.tsx
diff --git a/apps/www/__registry__/default/blocks/chart-pie-label-custom.tsx b/apps/www/__registry__/default/blocks/chart-pie-label-custom.tsx
new file mode 100644
index 00000000000..4b8c616214e
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/chart-pie-label-custom.tsx
@@ -0,0 +1,107 @@
+"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 {
+  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/www/__registry__/default/blocks/chart-pie-label-list.tsx b/apps/www/__registry__/default/blocks/chart-pie-label-list.tsx
new file mode 100644
index 00000000000..6b083fb02a1
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/chart-pie-label-list.tsx
@@ -0,0 +1,97 @@
+"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 {
+  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/www/__registry__/default/block/chart-pie-label.tsx b/apps/www/__registry__/default/blocks/chart-pie-label.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-pie-label.tsx
rename to apps/www/__registry__/default/blocks/chart-pie-label.tsx
diff --git a/apps/www/__registry__/default/block/chart-pie-legend.tsx b/apps/www/__registry__/default/blocks/chart-pie-legend.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-pie-legend.tsx
rename to apps/www/__registry__/default/blocks/chart-pie-legend.tsx
diff --git a/apps/www/__registry__/default/block/chart-pie-separator-none.tsx b/apps/www/__registry__/default/blocks/chart-pie-separator-none.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-pie-separator-none.tsx
rename to apps/www/__registry__/default/blocks/chart-pie-separator-none.tsx
diff --git a/apps/www/__registry__/default/block/chart-pie-simple.tsx b/apps/www/__registry__/default/blocks/chart-pie-simple.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-pie-simple.tsx
rename to apps/www/__registry__/default/blocks/chart-pie-simple.tsx
diff --git a/apps/www/__registry__/default/block/chart-pie-stacked.tsx b/apps/www/__registry__/default/blocks/chart-pie-stacked.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-pie-stacked.tsx
rename to apps/www/__registry__/default/blocks/chart-pie-stacked.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-default.tsx b/apps/www/__registry__/default/blocks/chart-radar-default.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-default.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-default.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-dots.tsx b/apps/www/__registry__/default/blocks/chart-radar-dots.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-dots.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-dots.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-grid-circle-fill.tsx b/apps/www/__registry__/default/blocks/chart-radar-grid-circle-fill.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-grid-circle-fill.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-grid-circle-fill.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-grid-circle-no-lines.tsx b/apps/www/__registry__/default/blocks/chart-radar-grid-circle-no-lines.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-grid-circle-no-lines.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-grid-circle-no-lines.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-grid-circle.tsx b/apps/www/__registry__/default/blocks/chart-radar-grid-circle.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-grid-circle.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-grid-circle.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-grid-custom.tsx b/apps/www/__registry__/default/blocks/chart-radar-grid-custom.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-grid-custom.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-grid-custom.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-grid-fill.tsx b/apps/www/__registry__/default/blocks/chart-radar-grid-fill.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-grid-fill.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-grid-fill.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-grid-none.tsx b/apps/www/__registry__/default/blocks/chart-radar-grid-none.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-grid-none.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-grid-none.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-icons.tsx b/apps/www/__registry__/default/blocks/chart-radar-icons.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-icons.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-icons.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-label-custom.tsx b/apps/www/__registry__/default/blocks/chart-radar-label-custom.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-label-custom.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-label-custom.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-legend.tsx b/apps/www/__registry__/default/blocks/chart-radar-legend.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-legend.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-legend.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-lines-only.tsx b/apps/www/__registry__/default/blocks/chart-radar-lines-only.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-lines-only.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-lines-only.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-multiple.tsx b/apps/www/__registry__/default/blocks/chart-radar-multiple.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-multiple.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-multiple.tsx
diff --git a/apps/www/__registry__/default/block/chart-radar-radius.tsx b/apps/www/__registry__/default/blocks/chart-radar-radius.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radar-radius.tsx
rename to apps/www/__registry__/default/blocks/chart-radar-radius.tsx
diff --git a/apps/www/__registry__/default/block/chart-radial-grid.tsx b/apps/www/__registry__/default/blocks/chart-radial-grid.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radial-grid.tsx
rename to apps/www/__registry__/default/blocks/chart-radial-grid.tsx
diff --git a/apps/www/__registry__/default/block/chart-radial-label.tsx b/apps/www/__registry__/default/blocks/chart-radial-label.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radial-label.tsx
rename to apps/www/__registry__/default/blocks/chart-radial-label.tsx
diff --git a/apps/www/__registry__/default/block/chart-radial-shape.tsx b/apps/www/__registry__/default/blocks/chart-radial-shape.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radial-shape.tsx
rename to apps/www/__registry__/default/blocks/chart-radial-shape.tsx
diff --git a/apps/www/__registry__/default/block/chart-radial-simple.tsx b/apps/www/__registry__/default/blocks/chart-radial-simple.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radial-simple.tsx
rename to apps/www/__registry__/default/blocks/chart-radial-simple.tsx
diff --git a/apps/www/__registry__/default/block/chart-radial-stacked.tsx b/apps/www/__registry__/default/blocks/chart-radial-stacked.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radial-stacked.tsx
rename to apps/www/__registry__/default/blocks/chart-radial-stacked.tsx
diff --git a/apps/www/__registry__/default/block/chart-radial-text.tsx b/apps/www/__registry__/default/blocks/chart-radial-text.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-radial-text.tsx
rename to apps/www/__registry__/default/blocks/chart-radial-text.tsx
diff --git a/apps/www/__registry__/default/block/chart-tooltip-advanced.tsx b/apps/www/__registry__/default/blocks/chart-tooltip-advanced.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-tooltip-advanced.tsx
rename to apps/www/__registry__/default/blocks/chart-tooltip-advanced.tsx
diff --git a/apps/www/__registry__/default/blocks/chart-tooltip-default.tsx b/apps/www/__registry__/default/blocks/chart-tooltip-default.tsx
new file mode 100644
index 00000000000..e1ed0870752
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/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 {
+  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/www/__registry__/default/block/chart-tooltip-formatter.tsx b/apps/www/__registry__/default/blocks/chart-tooltip-formatter.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-tooltip-formatter.tsx
rename to apps/www/__registry__/default/blocks/chart-tooltip-formatter.tsx
diff --git a/apps/www/__registry__/default/block/chart-tooltip-icons.tsx b/apps/www/__registry__/default/blocks/chart-tooltip-icons.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-tooltip-icons.tsx
rename to apps/www/__registry__/default/blocks/chart-tooltip-icons.tsx
diff --git a/apps/www/__registry__/default/blocks/chart-tooltip-indicator-line.tsx b/apps/www/__registry__/default/blocks/chart-tooltip-indicator-line.tsx
new file mode 100644
index 00000000000..8f59a417cde
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/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 {
+  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/www/__registry__/default/block/chart-tooltip-indicator-none.tsx b/apps/www/__registry__/default/blocks/chart-tooltip-indicator-none.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-tooltip-indicator-none.tsx
rename to apps/www/__registry__/default/blocks/chart-tooltip-indicator-none.tsx
diff --git a/apps/www/__registry__/default/block/chart-tooltip-label-custom.tsx b/apps/www/__registry__/default/blocks/chart-tooltip-label-custom.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-tooltip-label-custom.tsx
rename to apps/www/__registry__/default/blocks/chart-tooltip-label-custom.tsx
diff --git a/apps/www/__registry__/default/block/chart-tooltip-label-formatter.tsx b/apps/www/__registry__/default/blocks/chart-tooltip-label-formatter.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-tooltip-label-formatter.tsx
rename to apps/www/__registry__/default/blocks/chart-tooltip-label-formatter.tsx
diff --git a/apps/www/__registry__/default/block/chart-tooltip-label-none.tsx b/apps/www/__registry__/default/blocks/chart-tooltip-label-none.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/chart-tooltip-label-none.tsx
rename to apps/www/__registry__/default/blocks/chart-tooltip-label-none.tsx
diff --git a/apps/www/__registry__/default/blocks/login-01/page.tsx b/apps/www/__registry__/default/blocks/login-01/page.tsx
new file mode 100644
index 00000000000..6e1c2cb4db1
--- /dev/null
+++ b/apps/www/__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/www/__registry__/default/blocks/login-02/page.tsx b/apps/www/__registry__/default/blocks/login-02/page.tsx
new file mode 100644
index 00000000000..56b73d32467
--- /dev/null
+++ b/apps/www/__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/www/__registry__/default/blocks/login-03/page.tsx b/apps/www/__registry__/default/blocks/login-03/page.tsx
new file mode 100644
index 00000000000..15a0ca451c8
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/login-03/page.tsx
@@ -0,0 +1,19 @@
+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/www/__registry__/default/blocks/login-04/page.tsx b/apps/www/__registry__/default/blocks/login-04/page.tsx
new file mode 100644
index 00000000000..d302b4fa447
--- /dev/null
+++ b/apps/www/__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/www/__registry__/default/blocks/login-05/page.tsx b/apps/www/__registry__/default/blocks/login-05/page.tsx
new file mode 100644
index 00000000000..b9baa00d537
--- /dev/null
+++ b/apps/www/__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/www/__registry__/default/blocks/sidebar-01/page.tsx b/apps/www/__registry__/default/blocks/sidebar-01/page.tsx
new file mode 100644
index 00000000000..090e3eb248d
--- /dev/null
+++ b/apps/www/__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/www/__registry__/default/blocks/sidebar-02/page.tsx b/apps/www/__registry__/default/blocks/sidebar-02/page.tsx
new file mode 100644
index 00000000000..179af7cf288
--- /dev/null
+++ b/apps/www/__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/www/__registry__/default/blocks/sidebar-03/page.tsx b/apps/www/__registry__/default/blocks/sidebar-03/page.tsx
new file mode 100644
index 00000000000..a3b34b10804
--- /dev/null
+++ b/apps/www/__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/www/__registry__/default/blocks/sidebar-04/page.tsx b/apps/www/__registry__/default/blocks/sidebar-04/page.tsx
new file mode 100644
index 00000000000..8a0dbbff759
--- /dev/null
+++ b/apps/www/__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/www/__registry__/default/blocks/sidebar-05/page.tsx b/apps/www/__registry__/default/blocks/sidebar-05/page.tsx
new file mode 100644
index 00000000000..3bfc7a8b3f1
--- /dev/null
+++ b/apps/www/__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/www/__registry__/default/blocks/sidebar-06/page.tsx b/apps/www/__registry__/default/blocks/sidebar-06/page.tsx
new file mode 100644
index 00000000000..028a7ba6209
--- /dev/null
+++ b/apps/www/__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/www/__registry__/default/blocks/sidebar-07/page.tsx b/apps/www/__registry__/default/blocks/sidebar-07/page.tsx
new file mode 100644
index 00000000000..1627996458d
--- /dev/null
+++ b/apps/www/__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/www/__registry__/default/blocks/sidebar-08/page.tsx b/apps/www/__registry__/default/blocks/sidebar-08/page.tsx
new file mode 100644
index 00000000000..052b62b38cf
--- /dev/null
+++ b/apps/www/__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/www/__registry__/default/blocks/sidebar-09/page.tsx b/apps/www/__registry__/default/blocks/sidebar-09/page.tsx
new file mode 100644
index 00000000000..6ed155ad79d
--- /dev/null
+++ b/apps/www/__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/www/__registry__/default/blocks/sidebar-10/page.tsx b/apps/www/__registry__/default/blocks/sidebar-10/page.tsx
new file mode 100644
index 00000000000..a3570860058
--- /dev/null
+++ b/apps/www/__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/www/__registry__/default/blocks/sidebar-11/page.tsx b/apps/www/__registry__/default/blocks/sidebar-11/page.tsx
new file mode 100644
index 00000000000..3e60984c5eb
--- /dev/null
+++ b/apps/www/__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/www/__registry__/default/blocks/sidebar-12/page.tsx b/apps/www/__registry__/default/blocks/sidebar-12/page.tsx
new file mode 100644
index 00000000000..ac96a460267
--- /dev/null
+++ b/apps/www/__registry__/default/blocks/sidebar-12/page.tsx
@@ -0,0 +1,41 @@
+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/www/__registry__/default/blocks/sidebar-13/page.tsx b/apps/www/__registry__/default/blocks/sidebar-13/page.tsx
new file mode 100644
index 00000000000..7bebc464af7
--- /dev/null
+++ b/apps/www/__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/www/__registry__/default/blocks/sidebar-14/page.tsx b/apps/www/__registry__/default/blocks/sidebar-14/page.tsx
new file mode 100644
index 00000000000..a299c067deb
--- /dev/null
+++ b/apps/www/__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/www/__registry__/default/blocks/sidebar-15/page.tsx b/apps/www/__registry__/default/blocks/sidebar-15/page.tsx
new file mode 100644
index 00000000000..3bf6087ecee
--- /dev/null
+++ b/apps/www/__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/www/registry/default/block/chart-area-axes.tsx b/apps/www/__registry__/default/charts/chart-area-axes.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-area-axes.tsx
rename to apps/www/__registry__/default/charts/chart-area-axes.tsx
diff --git a/apps/www/registry/default/block/chart-area-default.tsx b/apps/www/__registry__/default/charts/chart-area-default.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-area-default.tsx
rename to apps/www/__registry__/default/charts/chart-area-default.tsx
diff --git a/apps/www/registry/default/block/chart-area-gradient.tsx b/apps/www/__registry__/default/charts/chart-area-gradient.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-area-gradient.tsx
rename to apps/www/__registry__/default/charts/chart-area-gradient.tsx
diff --git a/apps/www/registry/default/block/chart-area-icons.tsx b/apps/www/__registry__/default/charts/chart-area-icons.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-area-icons.tsx
rename to apps/www/__registry__/default/charts/chart-area-icons.tsx
diff --git a/apps/www/__registry__/default/charts/chart-area-interactive.tsx b/apps/www/__registry__/default/charts/chart-area-interactive.tsx
new file mode 100644
index 00000000000..16cbcca59f1
--- /dev/null
+++ b/apps/www/__registry__/default/charts/chart-area-interactive.tsx
@@ -0,0 +1,266 @@
+"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 {
+  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/www/registry/default/block/chart-area-legend.tsx b/apps/www/__registry__/default/charts/chart-area-legend.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-area-legend.tsx
rename to apps/www/__registry__/default/charts/chart-area-legend.tsx
diff --git a/apps/www/registry/default/block/chart-area-linear.tsx b/apps/www/__registry__/default/charts/chart-area-linear.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-area-linear.tsx
rename to apps/www/__registry__/default/charts/chart-area-linear.tsx
diff --git a/apps/www/registry/default/block/chart-area-stacked-expand.tsx b/apps/www/__registry__/default/charts/chart-area-stacked-expand.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-area-stacked-expand.tsx
rename to apps/www/__registry__/default/charts/chart-area-stacked-expand.tsx
diff --git a/apps/www/registry/default/block/chart-area-stacked.tsx b/apps/www/__registry__/default/charts/chart-area-stacked.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-area-stacked.tsx
rename to apps/www/__registry__/default/charts/chart-area-stacked.tsx
diff --git a/apps/www/registry/default/block/chart-area-step.tsx b/apps/www/__registry__/default/charts/chart-area-step.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-area-step.tsx
rename to apps/www/__registry__/default/charts/chart-area-step.tsx
diff --git a/apps/www/registry/default/block/chart-bar-active.tsx b/apps/www/__registry__/default/charts/chart-bar-active.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-bar-active.tsx
rename to apps/www/__registry__/default/charts/chart-bar-active.tsx
diff --git a/apps/www/registry/default/block/chart-bar-default.tsx b/apps/www/__registry__/default/charts/chart-bar-default.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-bar-default.tsx
rename to apps/www/__registry__/default/charts/chart-bar-default.tsx
diff --git a/apps/www/registry/default/block/chart-bar-horizontal.tsx b/apps/www/__registry__/default/charts/chart-bar-horizontal.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-bar-horizontal.tsx
rename to apps/www/__registry__/default/charts/chart-bar-horizontal.tsx
diff --git a/apps/www/registry/default/block/chart-bar-interactive.tsx b/apps/www/__registry__/default/charts/chart-bar-interactive.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-bar-interactive.tsx
rename to apps/www/__registry__/default/charts/chart-bar-interactive.tsx
diff --git a/apps/www/registry/default/block/chart-bar-label-custom.tsx b/apps/www/__registry__/default/charts/chart-bar-label-custom.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-bar-label-custom.tsx
rename to apps/www/__registry__/default/charts/chart-bar-label-custom.tsx
diff --git a/apps/www/registry/default/block/chart-bar-label.tsx b/apps/www/__registry__/default/charts/chart-bar-label.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-bar-label.tsx
rename to apps/www/__registry__/default/charts/chart-bar-label.tsx
diff --git a/apps/www/registry/default/block/chart-bar-mixed.tsx b/apps/www/__registry__/default/charts/chart-bar-mixed.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-bar-mixed.tsx
rename to apps/www/__registry__/default/charts/chart-bar-mixed.tsx
diff --git a/apps/www/registry/default/block/chart-bar-multiple.tsx b/apps/www/__registry__/default/charts/chart-bar-multiple.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-bar-multiple.tsx
rename to apps/www/__registry__/default/charts/chart-bar-multiple.tsx
diff --git a/apps/www/registry/default/block/chart-bar-negative.tsx b/apps/www/__registry__/default/charts/chart-bar-negative.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-bar-negative.tsx
rename to apps/www/__registry__/default/charts/chart-bar-negative.tsx
diff --git a/apps/www/registry/default/block/chart-bar-stacked.tsx b/apps/www/__registry__/default/charts/chart-bar-stacked.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-bar-stacked.tsx
rename to apps/www/__registry__/default/charts/chart-bar-stacked.tsx
diff --git a/apps/www/registry/default/block/chart-line-default.tsx b/apps/www/__registry__/default/charts/chart-line-default.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-line-default.tsx
rename to apps/www/__registry__/default/charts/chart-line-default.tsx
diff --git a/apps/www/registry/default/block/chart-line-dots-colors.tsx b/apps/www/__registry__/default/charts/chart-line-dots-colors.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-line-dots-colors.tsx
rename to apps/www/__registry__/default/charts/chart-line-dots-colors.tsx
diff --git a/apps/www/registry/default/block/chart-line-dots-custom.tsx b/apps/www/__registry__/default/charts/chart-line-dots-custom.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-line-dots-custom.tsx
rename to apps/www/__registry__/default/charts/chart-line-dots-custom.tsx
diff --git a/apps/www/registry/default/block/chart-line-dots.tsx b/apps/www/__registry__/default/charts/chart-line-dots.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-line-dots.tsx
rename to apps/www/__registry__/default/charts/chart-line-dots.tsx
diff --git a/apps/www/registry/default/block/chart-line-interactive.tsx b/apps/www/__registry__/default/charts/chart-line-interactive.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-line-interactive.tsx
rename to apps/www/__registry__/default/charts/chart-line-interactive.tsx
diff --git a/apps/www/registry/default/block/chart-line-label-custom.tsx b/apps/www/__registry__/default/charts/chart-line-label-custom.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-line-label-custom.tsx
rename to apps/www/__registry__/default/charts/chart-line-label-custom.tsx
diff --git a/apps/www/registry/default/block/chart-line-label.tsx b/apps/www/__registry__/default/charts/chart-line-label.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-line-label.tsx
rename to apps/www/__registry__/default/charts/chart-line-label.tsx
diff --git a/apps/www/registry/default/block/chart-line-linear.tsx b/apps/www/__registry__/default/charts/chart-line-linear.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-line-linear.tsx
rename to apps/www/__registry__/default/charts/chart-line-linear.tsx
diff --git a/apps/www/registry/default/block/chart-line-multiple.tsx b/apps/www/__registry__/default/charts/chart-line-multiple.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-line-multiple.tsx
rename to apps/www/__registry__/default/charts/chart-line-multiple.tsx
diff --git a/apps/www/registry/default/block/chart-line-step.tsx b/apps/www/__registry__/default/charts/chart-line-step.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-line-step.tsx
rename to apps/www/__registry__/default/charts/chart-line-step.tsx
diff --git a/apps/www/registry/default/block/chart-pie-donut-active.tsx b/apps/www/__registry__/default/charts/chart-pie-donut-active.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-pie-donut-active.tsx
rename to apps/www/__registry__/default/charts/chart-pie-donut-active.tsx
diff --git a/apps/www/registry/default/block/chart-pie-donut-text.tsx b/apps/www/__registry__/default/charts/chart-pie-donut-text.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-pie-donut-text.tsx
rename to apps/www/__registry__/default/charts/chart-pie-donut-text.tsx
diff --git a/apps/www/registry/default/block/chart-pie-donut.tsx b/apps/www/__registry__/default/charts/chart-pie-donut.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-pie-donut.tsx
rename to apps/www/__registry__/default/charts/chart-pie-donut.tsx
diff --git a/apps/www/registry/default/block/chart-pie-interactive.tsx b/apps/www/__registry__/default/charts/chart-pie-interactive.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-pie-interactive.tsx
rename to apps/www/__registry__/default/charts/chart-pie-interactive.tsx
diff --git a/apps/www/__registry__/default/charts/chart-pie-label-custom.tsx b/apps/www/__registry__/default/charts/chart-pie-label-custom.tsx
new file mode 100644
index 00000000000..4b8c616214e
--- /dev/null
+++ b/apps/www/__registry__/default/charts/chart-pie-label-custom.tsx
@@ -0,0 +1,107 @@
+"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 {
+  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/www/__registry__/default/charts/chart-pie-label-list.tsx b/apps/www/__registry__/default/charts/chart-pie-label-list.tsx
new file mode 100644
index 00000000000..6b083fb02a1
--- /dev/null
+++ b/apps/www/__registry__/default/charts/chart-pie-label-list.tsx
@@ -0,0 +1,97 @@
+"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 {
+  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/www/registry/default/block/chart-pie-label.tsx b/apps/www/__registry__/default/charts/chart-pie-label.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-pie-label.tsx
rename to apps/www/__registry__/default/charts/chart-pie-label.tsx
diff --git a/apps/www/registry/default/block/chart-pie-legend.tsx b/apps/www/__registry__/default/charts/chart-pie-legend.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-pie-legend.tsx
rename to apps/www/__registry__/default/charts/chart-pie-legend.tsx
diff --git a/apps/www/registry/default/block/chart-pie-separator-none.tsx b/apps/www/__registry__/default/charts/chart-pie-separator-none.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-pie-separator-none.tsx
rename to apps/www/__registry__/default/charts/chart-pie-separator-none.tsx
diff --git a/apps/www/registry/default/block/chart-pie-simple.tsx b/apps/www/__registry__/default/charts/chart-pie-simple.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-pie-simple.tsx
rename to apps/www/__registry__/default/charts/chart-pie-simple.tsx
diff --git a/apps/www/registry/default/block/chart-pie-stacked.tsx b/apps/www/__registry__/default/charts/chart-pie-stacked.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-pie-stacked.tsx
rename to apps/www/__registry__/default/charts/chart-pie-stacked.tsx
diff --git a/apps/www/registry/default/block/chart-radar-default.tsx b/apps/www/__registry__/default/charts/chart-radar-default.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-default.tsx
rename to apps/www/__registry__/default/charts/chart-radar-default.tsx
diff --git a/apps/www/registry/default/block/chart-radar-dots.tsx b/apps/www/__registry__/default/charts/chart-radar-dots.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-dots.tsx
rename to apps/www/__registry__/default/charts/chart-radar-dots.tsx
diff --git a/apps/www/registry/default/block/chart-radar-grid-circle-fill.tsx b/apps/www/__registry__/default/charts/chart-radar-grid-circle-fill.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-grid-circle-fill.tsx
rename to apps/www/__registry__/default/charts/chart-radar-grid-circle-fill.tsx
diff --git a/apps/www/registry/default/block/chart-radar-grid-circle-no-lines.tsx b/apps/www/__registry__/default/charts/chart-radar-grid-circle-no-lines.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-grid-circle-no-lines.tsx
rename to apps/www/__registry__/default/charts/chart-radar-grid-circle-no-lines.tsx
diff --git a/apps/www/registry/default/block/chart-radar-grid-circle.tsx b/apps/www/__registry__/default/charts/chart-radar-grid-circle.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-grid-circle.tsx
rename to apps/www/__registry__/default/charts/chart-radar-grid-circle.tsx
diff --git a/apps/www/registry/default/block/chart-radar-grid-custom.tsx b/apps/www/__registry__/default/charts/chart-radar-grid-custom.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-grid-custom.tsx
rename to apps/www/__registry__/default/charts/chart-radar-grid-custom.tsx
diff --git a/apps/www/registry/default/block/chart-radar-grid-fill.tsx b/apps/www/__registry__/default/charts/chart-radar-grid-fill.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-grid-fill.tsx
rename to apps/www/__registry__/default/charts/chart-radar-grid-fill.tsx
diff --git a/apps/www/registry/default/block/chart-radar-grid-none.tsx b/apps/www/__registry__/default/charts/chart-radar-grid-none.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-grid-none.tsx
rename to apps/www/__registry__/default/charts/chart-radar-grid-none.tsx
diff --git a/apps/www/registry/default/block/chart-radar-icons.tsx b/apps/www/__registry__/default/charts/chart-radar-icons.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-icons.tsx
rename to apps/www/__registry__/default/charts/chart-radar-icons.tsx
diff --git a/apps/www/registry/default/block/chart-radar-label-custom.tsx b/apps/www/__registry__/default/charts/chart-radar-label-custom.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-label-custom.tsx
rename to apps/www/__registry__/default/charts/chart-radar-label-custom.tsx
diff --git a/apps/www/registry/default/block/chart-radar-legend.tsx b/apps/www/__registry__/default/charts/chart-radar-legend.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-legend.tsx
rename to apps/www/__registry__/default/charts/chart-radar-legend.tsx
diff --git a/apps/www/registry/default/block/chart-radar-lines-only.tsx b/apps/www/__registry__/default/charts/chart-radar-lines-only.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-lines-only.tsx
rename to apps/www/__registry__/default/charts/chart-radar-lines-only.tsx
diff --git a/apps/www/registry/default/block/chart-radar-multiple.tsx b/apps/www/__registry__/default/charts/chart-radar-multiple.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-multiple.tsx
rename to apps/www/__registry__/default/charts/chart-radar-multiple.tsx
diff --git a/apps/www/registry/default/block/chart-radar-radius.tsx b/apps/www/__registry__/default/charts/chart-radar-radius.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radar-radius.tsx
rename to apps/www/__registry__/default/charts/chart-radar-radius.tsx
diff --git a/apps/www/registry/default/block/chart-radial-grid.tsx b/apps/www/__registry__/default/charts/chart-radial-grid.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radial-grid.tsx
rename to apps/www/__registry__/default/charts/chart-radial-grid.tsx
diff --git a/apps/www/registry/default/block/chart-radial-label.tsx b/apps/www/__registry__/default/charts/chart-radial-label.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radial-label.tsx
rename to apps/www/__registry__/default/charts/chart-radial-label.tsx
diff --git a/apps/www/registry/default/block/chart-radial-shape.tsx b/apps/www/__registry__/default/charts/chart-radial-shape.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radial-shape.tsx
rename to apps/www/__registry__/default/charts/chart-radial-shape.tsx
diff --git a/apps/www/registry/default/block/chart-radial-simple.tsx b/apps/www/__registry__/default/charts/chart-radial-simple.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radial-simple.tsx
rename to apps/www/__registry__/default/charts/chart-radial-simple.tsx
diff --git a/apps/www/registry/default/block/chart-radial-stacked.tsx b/apps/www/__registry__/default/charts/chart-radial-stacked.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radial-stacked.tsx
rename to apps/www/__registry__/default/charts/chart-radial-stacked.tsx
diff --git a/apps/www/registry/default/block/chart-radial-text.tsx b/apps/www/__registry__/default/charts/chart-radial-text.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-radial-text.tsx
rename to apps/www/__registry__/default/charts/chart-radial-text.tsx
diff --git a/apps/www/registry/default/block/chart-tooltip-advanced.tsx b/apps/www/__registry__/default/charts/chart-tooltip-advanced.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-tooltip-advanced.tsx
rename to apps/www/__registry__/default/charts/chart-tooltip-advanced.tsx
diff --git a/apps/www/__registry__/default/charts/chart-tooltip-default.tsx b/apps/www/__registry__/default/charts/chart-tooltip-default.tsx
new file mode 100644
index 00000000000..e1ed0870752
--- /dev/null
+++ b/apps/www/__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 {
+  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/www/registry/default/block/chart-tooltip-formatter.tsx b/apps/www/__registry__/default/charts/chart-tooltip-formatter.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-tooltip-formatter.tsx
rename to apps/www/__registry__/default/charts/chart-tooltip-formatter.tsx
diff --git a/apps/www/registry/default/block/chart-tooltip-icons.tsx b/apps/www/__registry__/default/charts/chart-tooltip-icons.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-tooltip-icons.tsx
rename to apps/www/__registry__/default/charts/chart-tooltip-icons.tsx
diff --git a/apps/www/__registry__/default/charts/chart-tooltip-indicator-line.tsx b/apps/www/__registry__/default/charts/chart-tooltip-indicator-line.tsx
new file mode 100644
index 00000000000..8f59a417cde
--- /dev/null
+++ b/apps/www/__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 {
+  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/www/registry/default/block/chart-tooltip-indicator-none.tsx b/apps/www/__registry__/default/charts/chart-tooltip-indicator-none.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-tooltip-indicator-none.tsx
rename to apps/www/__registry__/default/charts/chart-tooltip-indicator-none.tsx
diff --git a/apps/www/registry/default/block/chart-tooltip-label-custom.tsx b/apps/www/__registry__/default/charts/chart-tooltip-label-custom.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-tooltip-label-custom.tsx
rename to apps/www/__registry__/default/charts/chart-tooltip-label-custom.tsx
diff --git a/apps/www/registry/default/block/chart-tooltip-label-formatter.tsx b/apps/www/__registry__/default/charts/chart-tooltip-label-formatter.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-tooltip-label-formatter.tsx
rename to apps/www/__registry__/default/charts/chart-tooltip-label-formatter.tsx
diff --git a/apps/www/registry/default/block/chart-tooltip-label-none.tsx b/apps/www/__registry__/default/charts/chart-tooltip-label-none.tsx
similarity index 100%
rename from apps/www/registry/default/block/chart-tooltip-label-none.tsx
rename to apps/www/__registry__/default/charts/chart-tooltip-label-none.tsx
diff --git a/apps/www/__registry__/default/v0/login-01.tsx b/apps/www/__registry__/default/v0/login-01.tsx
deleted file mode 100644
index c63ae1412f8..00000000000
--- a/apps/www/__registry__/default/v0/login-01.tsx
+++ /dev/null
@@ -1,70 +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 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">
-      <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/www/__registry__/icons.tsx b/apps/www/__registry__/icons.tsx
new file mode 100644
index 00000000000..3c8f028fcb3
--- /dev/null
+++ b/apps/www/__registry__/icons.tsx
@@ -0,0 +1,451 @@
+// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+// Do not edit this file directly.
+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,
+      }))
+    ),
+  },
+}
diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx
index c4d78e46f74..5b61ac36371 100644
--- a/apps/www/__registry__/index.tsx
+++ b/apps/www/__registry__/index.tsx
@@ -10,3756 +10,5254 @@ export const Index: Record<string, any> = {
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/accordion.tsx"],
+      files: [{
+        path: "registry/new-york/ui/accordion.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/accordion.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "alert": {
       name: "alert",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/alert.tsx"],
+      files: [{
+        path: "registry/new-york/ui/alert.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/alert.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "alert-dialog": {
       name: "alert-dialog",
       description: "",
       type: "registry:ui",
       registryDependencies: ["button"],
-      files: ["registry/new-york/ui/alert-dialog.tsx"],
+      files: [{
+        path: "registry/new-york/ui/alert-dialog.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/alert-dialog.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "aspect-ratio": {
       name: "aspect-ratio",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/aspect-ratio.tsx"],
+      files: [{
+        path: "registry/new-york/ui/aspect-ratio.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/aspect-ratio.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "avatar": {
       name: "avatar",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/avatar.tsx"],
+      files: [{
+        path: "registry/new-york/ui/avatar.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/avatar.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "badge": {
       name: "badge",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/badge.tsx"],
+      files: [{
+        path: "registry/new-york/ui/badge.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/badge.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "breadcrumb": {
       name: "breadcrumb",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/breadcrumb.tsx"],
+      files: [{
+        path: "registry/new-york/ui/breadcrumb.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/breadcrumb.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "button": {
       name: "button",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/button.tsx"],
+      files: [{
+        path: "registry/new-york/ui/button.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/button.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "calendar": {
       name: "calendar",
       description: "",
       type: "registry:ui",
       registryDependencies: ["button"],
-      files: ["registry/new-york/ui/calendar.tsx"],
+      files: [{
+        path: "registry/new-york/ui/calendar.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/calendar.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "card": {
       name: "card",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/card.tsx"],
+      files: [{
+        path: "registry/new-york/ui/card.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/card.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "carousel": {
       name: "carousel",
       description: "",
       type: "registry:ui",
       registryDependencies: ["button"],
-      files: ["registry/new-york/ui/carousel.tsx"],
+      files: [{
+        path: "registry/new-york/ui/carousel.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/carousel.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "chart": {
       name: "chart",
       description: "",
       type: "registry:ui",
       registryDependencies: ["card"],
-      files: ["registry/new-york/ui/chart.tsx"],
+      files: [{
+        path: "registry/new-york/ui/chart.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/chart.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "checkbox": {
       name: "checkbox",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/checkbox.tsx"],
+      files: [{
+        path: "registry/new-york/ui/checkbox.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/checkbox.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "collapsible": {
       name: "collapsible",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/collapsible.tsx"],
+      files: [{
+        path: "registry/new-york/ui/collapsible.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/collapsible.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "command": {
       name: "command",
       description: "",
       type: "registry:ui",
       registryDependencies: ["dialog"],
-      files: ["registry/new-york/ui/command.tsx"],
+      files: [{
+        path: "registry/new-york/ui/command.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/command.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "context-menu": {
       name: "context-menu",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/context-menu.tsx"],
+      files: [{
+        path: "registry/new-york/ui/context-menu.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/context-menu.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "dialog": {
       name: "dialog",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/dialog.tsx"],
+      files: [{
+        path: "registry/new-york/ui/dialog.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/dialog.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "drawer": {
       name: "drawer",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/drawer.tsx"],
+      files: [{
+        path: "registry/new-york/ui/drawer.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/drawer.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "dropdown-menu": {
       name: "dropdown-menu",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/dropdown-menu.tsx"],
+      files: [{
+        path: "registry/new-york/ui/dropdown-menu.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/dropdown-menu.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "form": {
       name: "form",
       description: "",
       type: "registry:ui",
       registryDependencies: ["button","label"],
-      files: ["registry/new-york/ui/form.tsx"],
+      files: [{
+        path: "registry/new-york/ui/form.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/form.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "hover-card": {
       name: "hover-card",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/hover-card.tsx"],
+      files: [{
+        path: "registry/new-york/ui/hover-card.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/hover-card.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "input": {
       name: "input",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/input.tsx"],
+      files: [{
+        path: "registry/new-york/ui/input.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/input.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "input-otp": {
       name: "input-otp",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/input-otp.tsx"],
+      files: [{
+        path: "registry/new-york/ui/input-otp.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/input-otp.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "label": {
       name: "label",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/label.tsx"],
+      files: [{
+        path: "registry/new-york/ui/label.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/label.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "menubar": {
       name: "menubar",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/menubar.tsx"],
+      files: [{
+        path: "registry/new-york/ui/menubar.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/menubar.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "navigation-menu": {
       name: "navigation-menu",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/navigation-menu.tsx"],
+      files: [{
+        path: "registry/new-york/ui/navigation-menu.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/navigation-menu.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "pagination": {
       name: "pagination",
       description: "",
       type: "registry:ui",
       registryDependencies: ["button"],
-      files: ["registry/new-york/ui/pagination.tsx"],
+      files: [{
+        path: "registry/new-york/ui/pagination.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/pagination.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "popover": {
       name: "popover",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/popover.tsx"],
+      files: [{
+        path: "registry/new-york/ui/popover.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/popover.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "progress": {
       name: "progress",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/progress.tsx"],
+      files: [{
+        path: "registry/new-york/ui/progress.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/progress.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "radio-group": {
       name: "radio-group",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/radio-group.tsx"],
+      files: [{
+        path: "registry/new-york/ui/radio-group.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/radio-group.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "resizable": {
       name: "resizable",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/resizable.tsx"],
+      files: [{
+        path: "registry/new-york/ui/resizable.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/resizable.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "scroll-area": {
       name: "scroll-area",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/scroll-area.tsx"],
+      files: [{
+        path: "registry/new-york/ui/scroll-area.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/scroll-area.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "select": {
       name: "select",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/select.tsx"],
+      files: [{
+        path: "registry/new-york/ui/select.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/select.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "separator": {
       name: "separator",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/separator.tsx"],
+      files: [{
+        path: "registry/new-york/ui/separator.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/separator.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "sheet": {
       name: "sheet",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/sheet.tsx"],
+      files: [{
+        path: "registry/new-york/ui/sheet.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/sheet.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "sidebar": {
       name: "sidebar",
       description: "",
       type: "registry:ui",
       registryDependencies: ["button","separator","sheet","tooltip","input","use-mobile","skeleton"],
-      files: ["registry/new-york/ui/sidebar.tsx"],
+      files: [{
+        path: "registry/new-york/ui/sidebar.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/sidebar.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "skeleton": {
       name: "skeleton",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/skeleton.tsx"],
+      files: [{
+        path: "registry/new-york/ui/skeleton.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/skeleton.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "slider": {
       name: "slider",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/slider.tsx"],
+      files: [{
+        path: "registry/new-york/ui/slider.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/slider.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "sonner": {
       name: "sonner",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/sonner.tsx"],
+      files: [{
+        path: "registry/new-york/ui/sonner.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/sonner.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "switch": {
       name: "switch",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/switch.tsx"],
+      files: [{
+        path: "registry/new-york/ui/switch.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/switch.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "table": {
       name: "table",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/table.tsx"],
+      files: [{
+        path: "registry/new-york/ui/table.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/table.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "tabs": {
       name: "tabs",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/tabs.tsx"],
+      files: [{
+        path: "registry/new-york/ui/tabs.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/tabs.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "textarea": {
       name: "textarea",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/textarea.tsx"],
+      files: [{
+        path: "registry/new-york/ui/textarea.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/textarea.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "toast": {
       name: "toast",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/toast.tsx","registry/new-york/hooks/use-toast.ts","registry/new-york/ui/toaster.tsx"],
+      files: [{
+        path: "registry/new-york/ui/toast.tsx",
+        type: "registry:ui",
+        target: ""
+      },{
+        path: "registry/new-york/hooks/use-toast.ts",
+        type: "registry:hook",
+        target: ""
+      },{
+        path: "registry/new-york/ui/toaster.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/toast.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "toggle": {
       name: "toggle",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/toggle.tsx"],
+      files: [{
+        path: "registry/new-york/ui/toggle.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/toggle.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "toggle-group": {
       name: "toggle-group",
       description: "",
       type: "registry:ui",
       registryDependencies: ["toggle"],
-      files: ["registry/new-york/ui/toggle-group.tsx"],
+      files: [{
+        path: "registry/new-york/ui/toggle-group.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/toggle-group.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "tooltip": {
       name: "tooltip",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/new-york/ui/tooltip.tsx"],
+      files: [{
+        path: "registry/new-york/ui/tooltip.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/tooltip.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "accordion-demo": {
-      name: "accordion-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["accordion"],
-      files: ["registry/new-york/example/accordion-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/accordion-demo.tsx")),
-      source: "",
-      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/new-york/blocks/sidebar-01/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-01/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-01/components/search-form.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-01/components/version-switcher.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-01/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-01/page.tsx",
+      meta: undefined,
     },
-    "alert-demo": {
-      name: "alert-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["alert"],
-      files: ["registry/new-york/example/alert-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/alert-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      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/new-york/blocks/sidebar-02/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-02/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-02/components/search-form.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-02/components/version-switcher.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-02/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-02/page.tsx",
+      meta: undefined,
     },
-    "alert-destructive": {
-      name: "alert-destructive",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["alert"],
-      files: ["registry/new-york/example/alert-destructive.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/alert-destructive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+    "sidebar-03": {
+      name: "sidebar-03",
+      description: "A sidebar with submenus.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb"],
+      files: [{
+        path: "registry/new-york/blocks/sidebar-03/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-03/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-03/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-03/page.tsx",
+      meta: undefined,
     },
-    "alert-dialog-demo": {
-      name: "alert-dialog-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["alert-dialog","button"],
-      files: ["registry/new-york/example/alert-dialog-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/alert-dialog-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+    "sidebar-04": {
+      name: "sidebar-04",
+      description: "A floating sidebar with submenus.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator"],
+      files: [{
+        path: "registry/new-york/blocks/sidebar-04/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-04/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-04/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-04/page.tsx",
+      meta: undefined,
     },
-    "aspect-ratio-demo": {
-      name: "aspect-ratio-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["aspect-ratio"],
-      files: ["registry/new-york/example/aspect-ratio-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/aspect-ratio-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+    "sidebar-05": {
+      name: "sidebar-05",
+      description: "A sidebar with collapsible submenus.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","label","collapsible"],
+      files: [{
+        path: "registry/new-york/blocks/sidebar-05/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-05/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-05/components/search-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-05/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-05/page.tsx",
+      meta: undefined,
     },
-    "avatar-demo": {
-      name: "avatar-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["avatar"],
-      files: ["registry/new-york/example/avatar-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/avatar-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      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/new-york/blocks/sidebar-06/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-06/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-06/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-06/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-06/page.tsx",
+      meta: undefined,
     },
-    "badge-demo": {
-      name: "badge-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: ["registry/new-york/example/badge-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/badge-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      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/new-york/blocks/sidebar-07/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-07/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-07/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-07/components/nav-projects.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-07/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-07/components/team-switcher.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-07/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-07/page.tsx",
+      meta: undefined,
     },
-    "badge-destructive": {
-      name: "badge-destructive",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: ["registry/new-york/example/badge-destructive.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/badge-destructive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      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/new-york/blocks/sidebar-08/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-08/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-08/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-08/components/nav-projects.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-08/components/nav-secondary.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-08/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-08/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-08/page.tsx",
+      meta: undefined,
     },
-    "badge-outline": {
-      name: "badge-outline",
+    "sidebar-09": {
+      name: "sidebar-09",
+      description: "Collapsible nested sidebars.",
+      type: "registry:block",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar","switch"],
+      files: [{
+        path: "registry/new-york/blocks/sidebar-09/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-09/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-09/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-09/page.tsx")),
+      source: "__registry__/new-york/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/new-york/blocks/sidebar-10/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-10/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-10/components/nav-actions.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-10/components/nav-favorites.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-10/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-10/components/nav-secondary.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-10/components/nav-workspaces.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-10/components/team-switcher.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-10/page.tsx")),
+      source: "__registry__/new-york/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/new-york/blocks/sidebar-11/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-11/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-11/page.tsx")),
+      source: "__registry__/new-york/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/new-york/blocks/sidebar-12/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-12/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-12/components/calendars.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-12/components/date-picker.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-12/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-12/page.tsx")),
+      source: "__registry__/new-york/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/new-york/blocks/sidebar-13/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-13/components/settings-dialog.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-13/page.tsx")),
+      source: "__registry__/new-york/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/new-york/blocks/sidebar-14/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-14/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-14/page.tsx")),
+      source: "__registry__/new-york/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/new-york/blocks/sidebar-15/page.tsx",
+        type: "registry:page",
+        target: "app/dashboard/page.tsx"
+      },{
+        path: "registry/new-york/blocks/sidebar-15/components/calendars.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-15/components/date-picker.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-15/components/nav-favorites.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-15/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-15/components/nav-secondary.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-15/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-15/components/nav-workspaces.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-15/components/sidebar-left.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-15/components/sidebar-right.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/blocks/sidebar-15/components/team-switcher.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["sidebar","dashboard"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/sidebar-15/page.tsx")),
+      source: "__registry__/new-york/blocks/sidebar-15/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/new-york/blocks/login-01/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/new-york/blocks/login-01/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["authentication","login"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/login-01/page.tsx")),
+      source: "__registry__/new-york/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/new-york/blocks/login-02/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/new-york/blocks/login-02/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["authentication","login"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/login-02/page.tsx")),
+      source: "__registry__/new-york/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/new-york/blocks/login-03/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/new-york/blocks/login-03/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["authentication","login"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/login-03/page.tsx")),
+      source: "__registry__/new-york/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/new-york/blocks/login-04/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/new-york/blocks/login-04/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["authentication","login"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/login-04/page.tsx")),
+      source: "__registry__/new-york/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/new-york/blocks/login-05/page.tsx",
+        type: "registry:page",
+        target: "app/login/page.tsx"
+      },{
+        path: "registry/new-york/blocks/login-05/components/login-form.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["authentication","login"],
+      component: React.lazy(() => import("@/registry/new-york/blocks/login-05/page.tsx")),
+      source: "__registry__/new-york/blocks/login-05/page.tsx",
+      meta: undefined,
+    },
+    "chart-area-axes": {
+      name: "chart-area-axes",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: ["registry/new-york/example/badge-outline.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/badge-outline.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-area-axes.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-area-axes.tsx")),
+      source: "__registry__/new-york/charts/chart-area-axes.tsx",
+      meta: undefined,
     },
-    "badge-secondary": {
-      name: "badge-secondary",
+    "chart-area-default": {
+      name: "chart-area-default",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: ["registry/new-york/example/badge-secondary.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/badge-secondary.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-area-default.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-area-default.tsx")),
+      source: "__registry__/new-york/charts/chart-area-default.tsx",
+      meta: undefined,
     },
-    "breadcrumb-demo": {
-      name: "breadcrumb-demo",
+    "chart-area-gradient": {
+      name: "chart-area-gradient",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/new-york/example/breadcrumb-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/breadcrumb-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-area-gradient.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-area-gradient.tsx")),
+      source: "__registry__/new-york/charts/chart-area-gradient.tsx",
+      meta: undefined,
     },
-    "breadcrumb-separator": {
-      name: "breadcrumb-separator",
+    "chart-area-icons": {
+      name: "chart-area-icons",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/new-york/example/breadcrumb-separator.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/breadcrumb-separator.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-area-icons.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-area-icons.tsx")),
+      source: "__registry__/new-york/charts/chart-area-icons.tsx",
+      meta: undefined,
     },
-    "breadcrumb-dropdown": {
-      name: "breadcrumb-dropdown",
+    "chart-area-interactive": {
+      name: "chart-area-interactive",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/new-york/example/breadcrumb-dropdown.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/breadcrumb-dropdown.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart","select"],
+      files: [{
+        path: "registry/new-york/charts/chart-area-interactive.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-area-interactive.tsx")),
+      source: "__registry__/new-york/charts/chart-area-interactive.tsx",
+      meta: undefined,
     },
-    "breadcrumb-ellipsis": {
-      name: "breadcrumb-ellipsis",
+    "chart-area-legend": {
+      name: "chart-area-legend",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/new-york/example/breadcrumb-ellipsis.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/breadcrumb-ellipsis.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-area-legend.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-area-legend.tsx")),
+      source: "__registry__/new-york/charts/chart-area-legend.tsx",
+      meta: undefined,
     },
-    "breadcrumb-link": {
-      name: "breadcrumb-link",
+    "chart-area-linear": {
+      name: "chart-area-linear",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/new-york/example/breadcrumb-link.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/breadcrumb-link.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-area-linear.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-area-linear.tsx")),
+      source: "__registry__/new-york/charts/chart-area-linear.tsx",
+      meta: undefined,
     },
-    "breadcrumb-responsive": {
-      name: "breadcrumb-responsive",
+    "chart-area-stacked-expand": {
+      name: "chart-area-stacked-expand",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/new-york/example/breadcrumb-responsive.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/breadcrumb-responsive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-area-stacked-expand.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-area-stacked-expand.tsx")),
+      source: "__registry__/new-york/charts/chart-area-stacked-expand.tsx",
+      meta: undefined,
     },
-    "button-demo": {
-      name: "button-demo",
+    "chart-area-stacked": {
+      name: "chart-area-stacked",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/new-york/example/button-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/button-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-area-stacked.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-area-stacked.tsx")),
+      source: "__registry__/new-york/charts/chart-area-stacked.tsx",
+      meta: undefined,
     },
-    "button-secondary": {
-      name: "button-secondary",
+    "chart-area-step": {
+      name: "chart-area-step",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/new-york/example/button-secondary.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/button-secondary.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-area-step.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-area"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-area-step.tsx")),
+      source: "__registry__/new-york/charts/chart-area-step.tsx",
+      meta: undefined,
     },
-    "button-destructive": {
-      name: "button-destructive",
+    "chart-bar-active": {
+      name: "chart-bar-active",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/new-york/example/button-destructive.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/button-destructive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-bar-active.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-bar-active.tsx")),
+      source: "__registry__/new-york/charts/chart-bar-active.tsx",
+      meta: undefined,
     },
-    "button-outline": {
-      name: "button-outline",
+    "chart-bar-default": {
+      name: "chart-bar-default",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/new-york/example/button-outline.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/button-outline.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-bar-default.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-bar-default.tsx")),
+      source: "__registry__/new-york/charts/chart-bar-default.tsx",
+      meta: undefined,
     },
-    "button-ghost": {
-      name: "button-ghost",
+    "chart-bar-horizontal": {
+      name: "chart-bar-horizontal",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/new-york/example/button-ghost.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/button-ghost.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-bar-horizontal.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-bar-horizontal.tsx")),
+      source: "__registry__/new-york/charts/chart-bar-horizontal.tsx",
+      meta: undefined,
     },
-    "button-link": {
-      name: "button-link",
+    "chart-bar-interactive": {
+      name: "chart-bar-interactive",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/new-york/example/button-link.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/button-link.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-bar-interactive.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-bar-interactive.tsx")),
+      source: "__registry__/new-york/charts/chart-bar-interactive.tsx",
+      meta: undefined,
     },
-    "button-with-icon": {
-      name: "button-with-icon",
+    "chart-bar-label-custom": {
+      name: "chart-bar-label-custom",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/new-york/example/button-with-icon.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/button-with-icon.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-bar-label-custom.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-bar-label-custom.tsx")),
+      source: "__registry__/new-york/charts/chart-bar-label-custom.tsx",
+      meta: undefined,
     },
-    "button-loading": {
-      name: "button-loading",
+    "chart-bar-label": {
+      name: "chart-bar-label",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/new-york/example/button-loading.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/button-loading.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-bar-label.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-bar-label.tsx")),
+      source: "__registry__/new-york/charts/chart-bar-label.tsx",
+      meta: undefined,
     },
-    "button-icon": {
-      name: "button-icon",
+    "chart-bar-mixed": {
+      name: "chart-bar-mixed",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/new-york/example/button-icon.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/button-icon.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-bar-mixed.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-bar-mixed.tsx")),
+      source: "__registry__/new-york/charts/chart-bar-mixed.tsx",
+      meta: undefined,
     },
-    "button-as-child": {
-      name: "button-as-child",
+    "chart-bar-multiple": {
+      name: "chart-bar-multiple",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/new-york/example/button-as-child.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/button-as-child.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-bar-multiple.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-bar-multiple.tsx")),
+      source: "__registry__/new-york/charts/chart-bar-multiple.tsx",
+      meta: undefined,
     },
-    "calendar-demo": {
-      name: "calendar-demo",
+    "chart-bar-negative": {
+      name: "chart-bar-negative",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["calendar"],
-      files: ["registry/new-york/example/calendar-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/calendar-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-bar-negative.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-bar-negative.tsx")),
+      source: "__registry__/new-york/charts/chart-bar-negative.tsx",
+      meta: undefined,
     },
-    "calendar-form": {
-      name: "calendar-form",
+    "chart-bar-stacked": {
+      name: "chart-bar-stacked",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["calendar","form","popover"],
-      files: ["registry/new-york/example/calendar-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/calendar-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-bar-stacked.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-bar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-bar-stacked.tsx")),
+      source: "__registry__/new-york/charts/chart-bar-stacked.tsx",
+      meta: undefined,
     },
-    "card-demo": {
-      name: "card-demo",
+    "chart-line-default": {
+      name: "chart-line-default",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["card","button","switch"],
-      files: ["registry/new-york/example/card-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/card-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-line-default.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-line-default.tsx")),
+      source: "__registry__/new-york/charts/chart-line-default.tsx",
+      meta: undefined,
     },
-    "card-with-form": {
-      name: "card-with-form",
+    "chart-line-dots-colors": {
+      name: "chart-line-dots-colors",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button","card","input","label","select"],
-      files: ["registry/new-york/example/card-with-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/card-with-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-line-dots-colors.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-line-dots-colors.tsx")),
+      source: "__registry__/new-york/charts/chart-line-dots-colors.tsx",
+      meta: undefined,
     },
-    "carousel-demo": {
-      name: "carousel-demo",
+    "chart-line-dots-custom": {
+      name: "chart-line-dots-custom",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/new-york/example/carousel-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/carousel-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-line-dots-custom.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-line-dots-custom.tsx")),
+      source: "__registry__/new-york/charts/chart-line-dots-custom.tsx",
+      meta: undefined,
     },
-    "carousel-size": {
-      name: "carousel-size",
+    "chart-line-dots": {
+      name: "chart-line-dots",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/new-york/example/carousel-size.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/carousel-size.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-line-dots.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-line-dots.tsx")),
+      source: "__registry__/new-york/charts/chart-line-dots.tsx",
+      meta: undefined,
     },
-    "carousel-spacing": {
-      name: "carousel-spacing",
+    "chart-line-interactive": {
+      name: "chart-line-interactive",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/new-york/example/carousel-spacing.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/carousel-spacing.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-line-interactive.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-line-interactive.tsx")),
+      source: "__registry__/new-york/charts/chart-line-interactive.tsx",
+      meta: undefined,
     },
-    "carousel-orientation": {
-      name: "carousel-orientation",
+    "chart-line-label-custom": {
+      name: "chart-line-label-custom",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/new-york/example/carousel-orientation.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/carousel-orientation.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-line-label-custom.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-line-label-custom.tsx")),
+      source: "__registry__/new-york/charts/chart-line-label-custom.tsx",
+      meta: undefined,
     },
-    "carousel-api": {
-      name: "carousel-api",
+    "chart-line-label": {
+      name: "chart-line-label",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/new-york/example/carousel-api.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/carousel-api.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-line-label.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-line-label.tsx")),
+      source: "__registry__/new-york/charts/chart-line-label.tsx",
+      meta: undefined,
     },
-    "carousel-plugin": {
-      name: "carousel-plugin",
+    "chart-line-linear": {
+      name: "chart-line-linear",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/new-york/example/carousel-plugin.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/carousel-plugin.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-line-linear.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-line-linear.tsx")),
+      source: "__registry__/new-york/charts/chart-line-linear.tsx",
+      meta: undefined,
     },
-    "checkbox-demo": {
-      name: "checkbox-demo",
+    "chart-line-multiple": {
+      name: "chart-line-multiple",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["checkbox"],
-      files: ["registry/new-york/example/checkbox-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/checkbox-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-line-multiple.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-line-multiple.tsx")),
+      source: "__registry__/new-york/charts/chart-line-multiple.tsx",
+      meta: undefined,
     },
-    "checkbox-disabled": {
-      name: "checkbox-disabled",
+    "chart-line-step": {
+      name: "chart-line-step",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["checkbox"],
-      files: ["registry/new-york/example/checkbox-disabled.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/checkbox-disabled.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-line-step.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-line"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-line-step.tsx")),
+      source: "__registry__/new-york/charts/chart-line-step.tsx",
+      meta: undefined,
     },
-    "checkbox-form-multiple": {
-      name: "checkbox-form-multiple",
+    "chart-pie-donut-active": {
+      name: "chart-pie-donut-active",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["checkbox","form"],
-      files: ["registry/new-york/example/checkbox-form-multiple.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/checkbox-form-multiple.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-donut-active.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-donut-active.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-donut-active.tsx",
+      meta: undefined,
     },
-    "checkbox-form-single": {
-      name: "checkbox-form-single",
+    "chart-pie-donut-text": {
+      name: "chart-pie-donut-text",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["checkbox","form"],
-      files: ["registry/new-york/example/checkbox-form-single.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/checkbox-form-single.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-donut-text.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-donut-text.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-donut-text.tsx",
+      meta: undefined,
     },
-    "checkbox-with-text": {
-      name: "checkbox-with-text",
+    "chart-pie-donut": {
+      name: "chart-pie-donut",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["checkbox"],
-      files: ["registry/new-york/example/checkbox-with-text.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/checkbox-with-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-donut.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-donut.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-donut.tsx",
+      meta: undefined,
     },
-    "collapsible-demo": {
-      name: "collapsible-demo",
+    "chart-pie-interactive": {
+      name: "chart-pie-interactive",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["collapsible"],
-      files: ["registry/new-york/example/collapsible-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/collapsible-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-interactive.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-interactive.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-interactive.tsx",
+      meta: undefined,
     },
-    "combobox-demo": {
-      name: "combobox-demo",
+    "chart-pie-label-custom": {
+      name: "chart-pie-label-custom",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["command"],
-      files: ["registry/new-york/example/combobox-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/combobox-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-label-custom.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-label-custom.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-label-custom.tsx",
+      meta: undefined,
     },
-    "combobox-dropdown-menu": {
-      name: "combobox-dropdown-menu",
+    "chart-pie-label-list": {
+      name: "chart-pie-label-list",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["command","dropdown-menu","button"],
-      files: ["registry/new-york/example/combobox-dropdown-menu.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/combobox-dropdown-menu.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-label-list.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-label-list.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-label-list.tsx",
+      meta: undefined,
     },
-    "combobox-form": {
-      name: "combobox-form",
+    "chart-pie-label": {
+      name: "chart-pie-label",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["command","form"],
-      files: ["registry/new-york/example/combobox-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/combobox-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-label.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-label.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-label.tsx",
+      meta: undefined,
     },
-    "combobox-popover": {
-      name: "combobox-popover",
+    "chart-pie-legend": {
+      name: "chart-pie-legend",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["combobox","popover"],
-      files: ["registry/new-york/example/combobox-popover.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/combobox-popover.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-legend.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-legend.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-legend.tsx",
+      meta: undefined,
     },
-    "combobox-responsive": {
-      name: "combobox-responsive",
+    "chart-pie-separator-none": {
+      name: "chart-pie-separator-none",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["combobox","popover","drawer"],
-      files: ["registry/new-york/example/combobox-responsive.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/combobox-responsive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-separator-none.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-separator-none.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-separator-none.tsx",
+      meta: undefined,
     },
-    "command-demo": {
-      name: "command-demo",
+    "chart-pie-simple": {
+      name: "chart-pie-simple",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["command"],
-      files: ["registry/new-york/example/command-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/command-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-simple.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-simple.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-simple.tsx",
+      meta: undefined,
     },
-    "command-dialog": {
-      name: "command-dialog",
+    "chart-pie-stacked": {
+      name: "chart-pie-stacked",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["command","dialog"],
-      files: ["registry/new-york/example/command-dialog.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/command-dialog.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
-    },
-    "context-menu-demo": {
-      name: "context-menu-demo",
-      description: "",
-      type: "registry:example",
-      registryDependencies: ["context-menu"],
-      files: ["registry/new-york/example/context-menu-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/context-menu-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-pie-stacked.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-pie"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-pie-stacked.tsx")),
+      source: "__registry__/new-york/charts/chart-pie-stacked.tsx",
+      meta: undefined,
     },
-    "data-table-demo": {
-      name: "data-table-demo",
+    "chart-radar-default": {
+      name: "chart-radar-default",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["data-table"],
-      files: ["registry/new-york/example/data-table-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/data-table-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-default.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-default.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-default.tsx",
+      meta: undefined,
     },
-    "date-picker-demo": {
-      name: "date-picker-demo",
+    "chart-radar-dots": {
+      name: "chart-radar-dots",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","popover"],
-      files: ["registry/new-york/example/date-picker-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/date-picker-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-dots.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-dots.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-dots.tsx",
+      meta: undefined,
     },
-    "date-picker-form": {
-      name: "date-picker-form",
+    "chart-radar-grid-circle-fill": {
+      name: "chart-radar-grid-circle-fill",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","form","popover"],
-      files: ["registry/new-york/example/date-picker-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/date-picker-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-grid-circle-fill.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-grid-circle-fill.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-grid-circle-fill.tsx",
+      meta: undefined,
     },
-    "date-picker-with-presets": {
-      name: "date-picker-with-presets",
+    "chart-radar-grid-circle-no-lines": {
+      name: "chart-radar-grid-circle-no-lines",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","popover","select"],
-      files: ["registry/new-york/example/date-picker-with-presets.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/date-picker-with-presets.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-grid-circle-no-lines.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-grid-circle-no-lines.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-grid-circle-no-lines.tsx",
+      meta: undefined,
     },
-    "date-picker-with-range": {
-      name: "date-picker-with-range",
+    "chart-radar-grid-circle": {
+      name: "chart-radar-grid-circle",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","popover"],
-      files: ["registry/new-york/example/date-picker-with-range.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/date-picker-with-range.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-grid-circle.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-grid-circle.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-grid-circle.tsx",
+      meta: undefined,
     },
-    "dialog-demo": {
-      name: "dialog-demo",
+    "chart-radar-grid-custom": {
+      name: "chart-radar-grid-custom",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["dialog"],
-      files: ["registry/new-york/example/dialog-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/dialog-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-grid-custom.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-grid-custom.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-grid-custom.tsx",
+      meta: undefined,
     },
-    "dialog-close-button": {
-      name: "dialog-close-button",
+    "chart-radar-grid-fill": {
+      name: "chart-radar-grid-fill",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["dialog","button"],
-      files: ["registry/new-york/example/dialog-close-button.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/dialog-close-button.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-grid-fill.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-grid-fill.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-grid-fill.tsx",
+      meta: undefined,
     },
-    "drawer-demo": {
-      name: "drawer-demo",
+    "chart-radar-grid-none": {
+      name: "chart-radar-grid-none",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["drawer"],
-      files: ["registry/new-york/example/drawer-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/drawer-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-grid-none.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-grid-none.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-grid-none.tsx",
+      meta: undefined,
     },
-    "drawer-dialog": {
-      name: "drawer-dialog",
+    "chart-radar-icons": {
+      name: "chart-radar-icons",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["drawer","dialog"],
-      files: ["registry/new-york/example/drawer-dialog.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/drawer-dialog.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-icons.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-icons.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-icons.tsx",
+      meta: undefined,
     },
-    "dropdown-menu-demo": {
-      name: "dropdown-menu-demo",
+    "chart-radar-label-custom": {
+      name: "chart-radar-label-custom",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["dropdown-menu"],
-      files: ["registry/new-york/example/dropdown-menu-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/dropdown-menu-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-label-custom.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-label-custom.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-label-custom.tsx",
+      meta: undefined,
     },
-    "dropdown-menu-checkboxes": {
-      name: "dropdown-menu-checkboxes",
+    "chart-radar-legend": {
+      name: "chart-radar-legend",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["dropdown-menu","checkbox"],
-      files: ["registry/new-york/example/dropdown-menu-checkboxes.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/dropdown-menu-checkboxes.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-legend.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-legend.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-legend.tsx",
+      meta: undefined,
     },
-    "dropdown-menu-radio-group": {
-      name: "dropdown-menu-radio-group",
+    "chart-radar-lines-only": {
+      name: "chart-radar-lines-only",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["dropdown-menu","radio-group"],
-      files: ["registry/new-york/example/dropdown-menu-radio-group.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/dropdown-menu-radio-group.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-lines-only.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-lines-only.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-lines-only.tsx",
+      meta: undefined,
     },
-    "hover-card-demo": {
-      name: "hover-card-demo",
+    "chart-radar-multiple": {
+      name: "chart-radar-multiple",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["hover-card"],
-      files: ["registry/new-york/example/hover-card-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/hover-card-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-multiple.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-multiple.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-multiple.tsx",
+      meta: undefined,
     },
-    "input-demo": {
-      name: "input-demo",
+    "chart-radar-radius": {
+      name: "chart-radar-radius",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input"],
-      files: ["registry/new-york/example/input-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radar-radius.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radar"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radar-radius.tsx")),
+      source: "__registry__/new-york/charts/chart-radar-radius.tsx",
+      meta: undefined,
     },
-    "input-disabled": {
-      name: "input-disabled",
+    "chart-radial-grid": {
+      name: "chart-radial-grid",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input"],
-      files: ["registry/new-york/example/input-disabled.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-disabled.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radial-grid.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radial"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radial-grid.tsx")),
+      source: "__registry__/new-york/charts/chart-radial-grid.tsx",
+      meta: undefined,
     },
-    "input-file": {
-      name: "input-file",
+    "chart-radial-label": {
+      name: "chart-radial-label",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input"],
-      files: ["registry/new-york/example/input-file.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-file.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radial-label.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radial"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radial-label.tsx")),
+      source: "__registry__/new-york/charts/chart-radial-label.tsx",
+      meta: undefined,
     },
-    "input-form": {
-      name: "input-form",
+    "chart-radial-shape": {
+      name: "chart-radial-shape",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input","button","form"],
-      files: ["registry/new-york/example/input-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radial-shape.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radial"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radial-shape.tsx")),
+      source: "__registry__/new-york/charts/chart-radial-shape.tsx",
+      meta: undefined,
     },
-    "input-with-button": {
-      name: "input-with-button",
+    "chart-radial-simple": {
+      name: "chart-radial-simple",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input","button"],
-      files: ["registry/new-york/example/input-with-button.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-with-button.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radial-simple.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radial"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radial-simple.tsx")),
+      source: "__registry__/new-york/charts/chart-radial-simple.tsx",
+      meta: undefined,
     },
-    "input-with-label": {
-      name: "input-with-label",
+    "chart-radial-stacked": {
+      name: "chart-radial-stacked",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input","button","label"],
-      files: ["registry/new-york/example/input-with-label.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-with-label.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radial-stacked.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radial"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radial-stacked.tsx")),
+      source: "__registry__/new-york/charts/chart-radial-stacked.tsx",
+      meta: undefined,
     },
-    "input-with-text": {
-      name: "input-with-text",
+    "chart-radial-text": {
+      name: "chart-radial-text",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input","button","label"],
-      files: ["registry/new-york/example/input-with-text.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-with-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-radial-text.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-radial"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-radial-text.tsx")),
+      source: "__registry__/new-york/charts/chart-radial-text.tsx",
+      meta: undefined,
     },
-    "input-otp-demo": {
-      name: "input-otp-demo",
+    "chart-tooltip-default": {
+      name: "chart-tooltip-default",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: ["registry/new-york/example/input-otp-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-otp-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-tooltip-default.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-tooltip-default.tsx")),
+      source: "__registry__/new-york/charts/chart-tooltip-default.tsx",
+      meta: undefined,
     },
-    "input-otp-pattern": {
-      name: "input-otp-pattern",
+    "chart-tooltip-indicator-line": {
+      name: "chart-tooltip-indicator-line",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: ["registry/new-york/example/input-otp-pattern.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-otp-pattern.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-tooltip-indicator-line.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-tooltip-indicator-line.tsx")),
+      source: "__registry__/new-york/charts/chart-tooltip-indicator-line.tsx",
+      meta: undefined,
     },
-    "input-otp-separator": {
-      name: "input-otp-separator",
+    "chart-tooltip-indicator-none": {
+      name: "chart-tooltip-indicator-none",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: ["registry/new-york/example/input-otp-separator.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-otp-separator.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-tooltip-indicator-none.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-tooltip-indicator-none.tsx")),
+      source: "__registry__/new-york/charts/chart-tooltip-indicator-none.tsx",
+      meta: undefined,
     },
-    "input-otp-controlled": {
-      name: "input-otp-controlled",
+    "chart-tooltip-label-none": {
+      name: "chart-tooltip-label-none",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: ["registry/new-york/example/input-otp-controlled.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-otp-controlled.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-tooltip-label-none.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-tooltip-label-none.tsx")),
+      source: "__registry__/new-york/charts/chart-tooltip-label-none.tsx",
+      meta: undefined,
     },
-    "input-otp-form": {
-      name: "input-otp-form",
+    "chart-tooltip-label-custom": {
+      name: "chart-tooltip-label-custom",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp","form"],
-      files: ["registry/new-york/example/input-otp-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/input-otp-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-tooltip-label-custom.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-tooltip-label-custom.tsx")),
+      source: "__registry__/new-york/charts/chart-tooltip-label-custom.tsx",
+      meta: undefined,
     },
-    "label-demo": {
-      name: "label-demo",
+    "chart-tooltip-label-formatter": {
+      name: "chart-tooltip-label-formatter",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["label"],
-      files: ["registry/new-york/example/label-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/label-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-tooltip-label-formatter.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-tooltip-label-formatter.tsx")),
+      source: "__registry__/new-york/charts/chart-tooltip-label-formatter.tsx",
+      meta: undefined,
     },
-    "menubar-demo": {
-      name: "menubar-demo",
+    "chart-tooltip-formatter": {
+      name: "chart-tooltip-formatter",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["menubar"],
-      files: ["registry/new-york/example/menubar-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/menubar-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-tooltip-formatter.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-tooltip-formatter.tsx")),
+      source: "__registry__/new-york/charts/chart-tooltip-formatter.tsx",
+      meta: undefined,
     },
-    "navigation-menu-demo": {
-      name: "navigation-menu-demo",
+    "chart-tooltip-icons": {
+      name: "chart-tooltip-icons",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["navigation-menu"],
-      files: ["registry/new-york/example/navigation-menu-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/navigation-menu-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-tooltip-icons.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-tooltip-icons.tsx")),
+      source: "__registry__/new-york/charts/chart-tooltip-icons.tsx",
+      meta: undefined,
     },
-    "pagination-demo": {
-      name: "pagination-demo",
+    "chart-tooltip-advanced": {
+      name: "chart-tooltip-advanced",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["pagination"],
-      files: ["registry/new-york/example/pagination-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/pagination-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:block",
+      registryDependencies: ["card","chart"],
+      files: [{
+        path: "registry/new-york/charts/chart-tooltip-advanced.tsx",
+        type: "registry:block",
+        target: ""
+      }],
+      categories: ["charts","charts-tooltip"],
+      component: React.lazy(() => import("@/registry/new-york/charts/chart-tooltip-advanced.tsx")),
+      source: "__registry__/new-york/charts/chart-tooltip-advanced.tsx",
+      meta: undefined,
     },
-    "popover-demo": {
-      name: "popover-demo",
+    "utils": {
+      name: "utils",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["popover"],
-      files: ["registry/new-york/example/popover-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/popover-demo.tsx")),
+      type: "registry:lib",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/lib/utils.ts",
+        type: "registry:lib",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/lib/utils.ts")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "progress-demo": {
-      name: "progress-demo",
+    "use-mobile": {
+      name: "use-mobile",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["progress"],
-      files: ["registry/new-york/example/progress-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/progress-demo.tsx")),
+      type: "registry:hook",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/hooks/use-mobile.tsx",
+        type: "registry:hook",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/hooks/use-mobile.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "radio-group-demo": {
-      name: "radio-group-demo",
+    "use-toast": {
+      name: "use-toast",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["radio-group"],
-      files: ["registry/new-york/example/radio-group-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/radio-group-demo.tsx")),
+      type: "registry:hook",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/hooks/use-toast.ts",
+        type: "registry:hook",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/hooks/use-toast.ts")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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/new-york/internal/sink/page.tsx",
+        type: "registry:page",
+        target: "app/sink/page.tsx"
+      },{
+        path: "registry/new-york/internal/sink/components/app-sidebar.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/component-wrapper.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/nav-main.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/nav-projects.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/nav-user.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/team-switcher.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/accordion-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/alert-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/alert-dialog-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/aspect-ratio-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/avatar-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/badge-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/breadcrumb-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/button-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/calendar-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/card-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/carousel-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/checkbox-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/collapsible-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/combobox-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/command-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/context-menu-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/date-picker-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/dialog-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/drawer-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/dropdown-menu-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/hover-card-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/input-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/input-otp-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/label-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/menubar-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/navigation-menu-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/pagination-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/popover-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/progress-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/radio-group-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/resizable-handle.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/scroll-area-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/select-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/separator-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/sheet-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/skeleton-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/slider-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/sonner-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/switch-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/table-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/tabs-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/textarea-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/toast-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/toggle-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/toggle-group-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/tooltip-demo.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/badge-destructive.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/badge-outline.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/badge-secondary.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/button-destructive.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/button-ghost.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/button-link.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/button-loading.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/button-outline.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/button-secondary.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/button-with-icon.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/toggle-disabled.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/toggle-outline.tsx",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/internal/sink/components/toggle-with-text.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sink/page.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-demo": {
+      name: "sidebar-demo",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-demo.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-demo.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-header": {
+      name: "sidebar-header",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-header.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-header.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-footer": {
+      name: "sidebar-footer",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-footer.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-footer.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-group": {
+      name: "sidebar-group",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-group.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-group.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-group-collapsible": {
+      name: "sidebar-group-collapsible",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-group-collapsible.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-group-collapsible.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "sidebar-group-action": {
+      name: "sidebar-group-action",
+      description: "",
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-group-action.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-group-action.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "radio-group-form": {
-      name: "radio-group-form",
+    "sidebar-menu": {
+      name: "sidebar-menu",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["radio-group","form"],
-      files: ["registry/new-york/example/radio-group-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/radio-group-form.tsx")),
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-menu.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-menu.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "resizable-demo": {
-      name: "resizable-demo",
+    "sidebar-menu-action": {
+      name: "sidebar-menu-action",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: ["registry/new-york/example/resizable-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/resizable-demo.tsx")),
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-menu-action.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-menu-action.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "resizable-demo-with-handle": {
-      name: "resizable-demo-with-handle",
+    "sidebar-menu-sub": {
+      name: "sidebar-menu-sub",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: ["registry/new-york/example/resizable-demo-with-handle.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/resizable-demo-with-handle.tsx")),
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-menu-sub.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-menu-sub.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "resizable-vertical": {
-      name: "resizable-vertical",
+    "sidebar-menu-collapsible": {
+      name: "sidebar-menu-collapsible",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: ["registry/new-york/example/resizable-vertical.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/resizable-vertical.tsx")),
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-menu-collapsible.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-menu-collapsible.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "resizable-handle": {
-      name: "resizable-handle",
+    "sidebar-menu-badge": {
+      name: "sidebar-menu-badge",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: ["registry/new-york/example/resizable-handle.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/resizable-handle.tsx")),
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-menu-badge.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-menu-badge.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "scroll-area-demo": {
-      name: "scroll-area-demo",
+    "sidebar-rsc": {
+      name: "sidebar-rsc",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["scroll-area"],
-      files: ["registry/new-york/example/scroll-area-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/scroll-area-demo.tsx")),
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-rsc.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-rsc.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "scroll-area-horizontal-demo": {
-      name: "scroll-area-horizontal-demo",
+    "sidebar-controlled": {
+      name: "sidebar-controlled",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["scroll-area"],
-      files: ["registry/new-york/example/scroll-area-horizontal-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/scroll-area-horizontal-demo.tsx")),
+      type: "registry:internal",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/internal/sidebar-controlled.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-controlled.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "select-demo": {
-      name: "select-demo",
+    "v0-sidebar-01": {
+      name: "v0-sidebar-01",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["select"],
-      files: ["registry/new-york/example/select-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/select-demo.tsx")),
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","label","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-01.tsx",
+        type: "registry:component",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-01.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "select-scrollable": {
-      name: "select-scrollable",
+    "v0-sidebar-02": {
+      name: "v0-sidebar-02",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["select"],
-      files: ["registry/new-york/example/select-scrollable.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/select-scrollable.tsx")),
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","label","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-02.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-02.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "select-form": {
-      name: "select-form",
+    "v0-sidebar-03": {
+      name: "v0-sidebar-03",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["select"],
-      files: ["registry/new-york/example/select-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/select-form.tsx")),
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-03.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-03.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "separator-demo": {
-      name: "separator-demo",
+    "v0-sidebar-04": {
+      name: "v0-sidebar-04",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["separator"],
-      files: ["registry/new-york/example/separator-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/separator-demo.tsx")),
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-04.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-04.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "sheet-demo": {
-      name: "sheet-demo",
+    "v0-sidebar-05": {
+      name: "v0-sidebar-05",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["sheet"],
-      files: ["registry/new-york/example/sheet-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/sheet-demo.tsx")),
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","label","collapsible"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-05.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-05.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "sheet-side": {
-      name: "sheet-side",
+    "v0-sidebar-06": {
+      name: "v0-sidebar-06",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["sheet"],
-      files: ["registry/new-york/example/sheet-side.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/sheet-side.tsx")),
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","card","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-06.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-06.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "skeleton-demo": {
-      name: "skeleton-demo",
+    "v0-sidebar-07": {
+      name: "v0-sidebar-07",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["skeleton"],
-      files: ["registry/new-york/example/skeleton-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/skeleton-demo.tsx")),
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-07.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-07.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "skeleton-card": {
-      name: "skeleton-card",
+    "v0-sidebar-08": {
+      name: "v0-sidebar-08",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["skeleton"],
-      files: ["registry/new-york/example/skeleton-card.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/skeleton-card.tsx")),
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-08.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-08.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "slider-demo": {
-      name: "slider-demo",
+    "v0-sidebar-09": {
+      name: "v0-sidebar-09",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["slider"],
-      files: ["registry/new-york/example/slider-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/slider-demo.tsx")),
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar","switch"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-09.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-09.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "sonner-demo": {
-      name: "sonner-demo",
+    "v0-sidebar-10": {
+      name: "v0-sidebar-10",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["sonner"],
-      files: ["registry/new-york/example/sonner-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/sonner-demo.tsx")),
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","popover","collapsible","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-10.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-10.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "switch-demo": {
-      name: "switch-demo",
+    "v0-sidebar-11": {
+      name: "v0-sidebar-11",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["switch"],
-      files: ["registry/new-york/example/switch-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/switch-demo.tsx")),
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-11.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-11.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "switch-form": {
-      name: "switch-form",
+    "v0-sidebar-12": {
+      name: "v0-sidebar-12",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["switch","form"],
-      files: ["registry/new-york/example/switch-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/switch-form.tsx")),
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","calendar","dropdown-menu","avatar"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-12.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-12.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "table-demo": {
-      name: "table-demo",
+    "v0-sidebar-13": {
+      name: "v0-sidebar-13",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["table"],
-      files: ["registry/new-york/example/table-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/table-demo.tsx")),
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","button","dialog"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-13.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-13.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "tabs-demo": {
-      name: "tabs-demo",
+    "v0-sidebar-14": {
+      name: "v0-sidebar-14",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["tabs"],
-      files: ["registry/new-york/example/tabs-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/tabs-demo.tsx")),
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-14.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-14.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-demo": {
-      name: "textarea-demo",
+    "v0-sidebar-15": {
+      name: "v0-sidebar-15",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["textarea"],
-      files: ["registry/new-york/example/textarea-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/textarea-demo.tsx")),
+      type: "registry:internal",
+      registryDependencies: ["sidebar","breadcrumb","separator","popover","collapsible","dropdown-menu","calendar","avatar"],
+      files: [{
+        path: "registry/new-york/internal/sidebar-15.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/sidebar-15.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-disabled": {
-      name: "textarea-disabled",
+    "v0-login-01": {
+      name: "v0-login-01",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["textarea"],
-      files: ["registry/new-york/example/textarea-disabled.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/textarea-disabled.tsx")),
+      type: "registry:internal",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/internal/login-01.tsx",
+        type: "registry:internal",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/internal/login-01.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-form": {
-      name: "textarea-form",
+    "accordion-demo": {
+      name: "accordion-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["textarea","form"],
-      files: ["registry/new-york/example/textarea-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/textarea-form.tsx")),
+      registryDependencies: ["accordion"],
+      files: [{
+        path: "registry/new-york/examples/accordion-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/accordion-demo.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-with-button": {
-      name: "textarea-with-button",
+    "alert-demo": {
+      name: "alert-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["textarea","button"],
-      files: ["registry/new-york/example/textarea-with-button.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/textarea-with-button.tsx")),
+      registryDependencies: ["alert"],
+      files: [{
+        path: "registry/new-york/examples/alert-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/alert-demo.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-with-label": {
-      name: "textarea-with-label",
+    "alert-destructive": {
+      name: "alert-destructive",
       description: "",
       type: "registry:example",
-      registryDependencies: ["textarea","label"],
-      files: ["registry/new-york/example/textarea-with-label.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/textarea-with-label.tsx")),
+      registryDependencies: ["alert"],
+      files: [{
+        path: "registry/new-york/examples/alert-destructive.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/alert-destructive.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-with-text": {
-      name: "textarea-with-text",
+    "alert-dialog-demo": {
+      name: "alert-dialog-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["textarea","label"],
-      files: ["registry/new-york/example/textarea-with-text.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/textarea-with-text.tsx")),
+      registryDependencies: ["alert-dialog","button"],
+      files: [{
+        path: "registry/new-york/examples/alert-dialog-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/alert-dialog-demo.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toast-demo": {
-      name: "toast-demo",
+    "aspect-ratio-demo": {
+      name: "aspect-ratio-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toast"],
-      files: ["registry/new-york/example/toast-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toast-demo.tsx")),
+      registryDependencies: ["aspect-ratio"],
+      files: [{
+        path: "registry/new-york/examples/aspect-ratio-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/aspect-ratio-demo.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toast-destructive": {
-      name: "toast-destructive",
+    "avatar-demo": {
+      name: "avatar-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toast"],
-      files: ["registry/new-york/example/toast-destructive.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toast-destructive.tsx")),
+      registryDependencies: ["avatar"],
+      files: [{
+        path: "registry/new-york/examples/avatar-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/avatar-demo.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toast-simple": {
-      name: "toast-simple",
+    "badge-demo": {
+      name: "badge-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toast"],
-      files: ["registry/new-york/example/toast-simple.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toast-simple.tsx")),
+      registryDependencies: ["badge"],
+      files: [{
+        path: "registry/new-york/examples/badge-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/badge-demo.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toast-with-action": {
-      name: "toast-with-action",
+    "badge-destructive": {
+      name: "badge-destructive",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toast"],
-      files: ["registry/new-york/example/toast-with-action.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toast-with-action.tsx")),
+      registryDependencies: ["badge"],
+      files: [{
+        path: "registry/new-york/examples/badge-destructive.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/badge-destructive.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toast-with-title": {
-      name: "toast-with-title",
+    "badge-outline": {
+      name: "badge-outline",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toast"],
-      files: ["registry/new-york/example/toast-with-title.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toast-with-title.tsx")),
+      registryDependencies: ["badge"],
+      files: [{
+        path: "registry/new-york/examples/badge-outline.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/badge-outline.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-demo": {
-      name: "toggle-group-demo",
+    "badge-secondary": {
+      name: "badge-secondary",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/new-york/example/toggle-group-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-group-demo.tsx")),
+      registryDependencies: ["badge"],
+      files: [{
+        path: "registry/new-york/examples/badge-secondary.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/badge-secondary.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-disabled": {
-      name: "toggle-group-disabled",
+    "breadcrumb-demo": {
+      name: "breadcrumb-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/new-york/example/toggle-group-disabled.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-group-disabled.tsx")),
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/new-york/examples/breadcrumb-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/breadcrumb-demo.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-lg": {
-      name: "toggle-group-lg",
+    "breadcrumb-separator": {
+      name: "breadcrumb-separator",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/new-york/example/toggle-group-lg.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-group-lg.tsx")),
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/new-york/examples/breadcrumb-separator.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/breadcrumb-separator.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-outline": {
-      name: "toggle-group-outline",
+    "breadcrumb-dropdown": {
+      name: "breadcrumb-dropdown",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/new-york/example/toggle-group-outline.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-group-outline.tsx")),
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/new-york/examples/breadcrumb-dropdown.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/breadcrumb-dropdown.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-sm": {
-      name: "toggle-group-sm",
+    "breadcrumb-ellipsis": {
+      name: "breadcrumb-ellipsis",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/new-york/example/toggle-group-sm.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-group-sm.tsx")),
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/new-york/examples/breadcrumb-ellipsis.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/breadcrumb-ellipsis.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-single": {
-      name: "toggle-group-single",
+    "breadcrumb-link": {
+      name: "breadcrumb-link",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/new-york/example/toggle-group-single.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-group-single.tsx")),
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/new-york/examples/breadcrumb-link.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/breadcrumb-link.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-demo": {
-      name: "toggle-demo",
+    "breadcrumb-responsive": {
+      name: "breadcrumb-responsive",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/new-york/example/toggle-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-demo.tsx")),
+      registryDependencies: ["breadcrumb"],
+      files: [{
+        path: "registry/new-york/examples/breadcrumb-responsive.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/breadcrumb-responsive.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-disabled": {
-      name: "toggle-disabled",
+    "button-demo": {
+      name: "button-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/new-york/example/toggle-disabled.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-disabled.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/new-york/examples/button-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/button-demo.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-lg": {
-      name: "toggle-lg",
+    "button-secondary": {
+      name: "button-secondary",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/new-york/example/toggle-lg.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-lg.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/new-york/examples/button-secondary.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/button-secondary.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-outline": {
-      name: "toggle-outline",
+    "button-destructive": {
+      name: "button-destructive",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/new-york/example/toggle-outline.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-outline.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/new-york/examples/button-destructive.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/button-destructive.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-sm": {
-      name: "toggle-sm",
+    "button-outline": {
+      name: "button-outline",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/new-york/example/toggle-sm.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-sm.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/new-york/examples/button-outline.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/button-outline.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-with-text": {
-      name: "toggle-with-text",
+    "button-ghost": {
+      name: "button-ghost",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/new-york/example/toggle-with-text.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/toggle-with-text.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/new-york/examples/button-ghost.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/button-ghost.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "tooltip-demo": {
-      name: "tooltip-demo",
+    "button-link": {
+      name: "button-link",
       description: "",
       type: "registry:example",
-      registryDependencies: ["tooltip"],
-      files: ["registry/new-york/example/tooltip-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/tooltip-demo.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/new-york/examples/button-link.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/button-link.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-blockquote": {
-      name: "typography-blockquote",
+    "button-with-icon": {
+      name: "button-with-icon",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-blockquote.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-blockquote.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/new-york/examples/button-with-icon.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/button-with-icon.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-demo": {
-      name: "typography-demo",
+    "button-loading": {
+      name: "button-loading",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-demo.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/new-york/examples/button-loading.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/button-loading.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-h1": {
-      name: "typography-h1",
+    "button-icon": {
+      name: "button-icon",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-h1.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-h1.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/new-york/examples/button-icon.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/button-icon.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-h2": {
-      name: "typography-h2",
+    "button-as-child": {
+      name: "button-as-child",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-h2.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-h2.tsx")),
+      registryDependencies: ["button"],
+      files: [{
+        path: "registry/new-york/examples/button-as-child.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/button-as-child.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-h3": {
-      name: "typography-h3",
+    "calendar-demo": {
+      name: "calendar-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-h3.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-h3.tsx")),
+      registryDependencies: ["calendar"],
+      files: [{
+        path: "registry/new-york/examples/calendar-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/calendar-demo.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-h4": {
-      name: "typography-h4",
+    "calendar-form": {
+      name: "calendar-form",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-h4.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-h4.tsx")),
+      registryDependencies: ["calendar","form","popover"],
+      files: [{
+        path: "registry/new-york/examples/calendar-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/calendar-form.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-inline-code": {
-      name: "typography-inline-code",
+    "card-demo": {
+      name: "card-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-inline-code.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-inline-code.tsx")),
+      registryDependencies: ["card","button","switch"],
+      files: [{
+        path: "registry/new-york/examples/card-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/card-demo.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-large": {
-      name: "typography-large",
+    "card-with-form": {
+      name: "card-with-form",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-large.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-large.tsx")),
+      registryDependencies: ["button","card","input","label","select"],
+      files: [{
+        path: "registry/new-york/examples/card-with-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/card-with-form.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-lead": {
-      name: "typography-lead",
+    "carousel-demo": {
+      name: "carousel-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-lead.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-lead.tsx")),
+      registryDependencies: ["carousel"],
+      files: [{
+        path: "registry/new-york/examples/carousel-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/carousel-demo.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-list": {
-      name: "typography-list",
+    "carousel-size": {
+      name: "carousel-size",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-list.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-list.tsx")),
+      registryDependencies: ["carousel"],
+      files: [{
+        path: "registry/new-york/examples/carousel-size.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/carousel-size.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-muted": {
-      name: "typography-muted",
+    "carousel-spacing": {
+      name: "carousel-spacing",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-muted.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-muted.tsx")),
+      registryDependencies: ["carousel"],
+      files: [{
+        path: "registry/new-york/examples/carousel-spacing.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/carousel-spacing.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-p": {
-      name: "typography-p",
+    "carousel-orientation": {
+      name: "carousel-orientation",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-p.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-p.tsx")),
+      registryDependencies: ["carousel"],
+      files: [{
+        path: "registry/new-york/examples/carousel-orientation.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/carousel-orientation.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-small": {
-      name: "typography-small",
+    "carousel-api": {
+      name: "carousel-api",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-small.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-small.tsx")),
+      registryDependencies: ["carousel"],
+      files: [{
+        path: "registry/new-york/examples/carousel-api.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/carousel-api.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-table": {
-      name: "typography-table",
+    "carousel-plugin": {
+      name: "carousel-plugin",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/typography-table.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/typography-table.tsx")),
+      registryDependencies: ["carousel"],
+      files: [{
+        path: "registry/new-york/examples/carousel-plugin.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/carousel-plugin.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "mode-toggle": {
-      name: "mode-toggle",
+    "checkbox-demo": {
+      name: "checkbox-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/mode-toggle.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/mode-toggle.tsx")),
+      registryDependencies: ["checkbox"],
+      files: [{
+        path: "registry/new-york/examples/checkbox-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/checkbox-demo.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "chart-bar-demo": {
-      name: "chart-bar-demo",
+    "checkbox-disabled": {
+      name: "checkbox-disabled",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/chart-bar-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/chart-bar-demo.tsx")),
+      registryDependencies: ["checkbox"],
+      files: [{
+        path: "registry/new-york/examples/checkbox-disabled.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/checkbox-disabled.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "chart-bar-demo-grid": {
-      name: "chart-bar-demo-grid",
+    "checkbox-form-multiple": {
+      name: "checkbox-form-multiple",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/chart-bar-demo-grid.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/chart-bar-demo-grid.tsx")),
+      registryDependencies: ["checkbox","form"],
+      files: [{
+        path: "registry/new-york/examples/checkbox-form-multiple.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/checkbox-form-multiple.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "chart-bar-demo-axis": {
-      name: "chart-bar-demo-axis",
+    "checkbox-form-single": {
+      name: "checkbox-form-single",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/chart-bar-demo-axis.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/chart-bar-demo-axis.tsx")),
+      registryDependencies: ["checkbox","form"],
+      files: [{
+        path: "registry/new-york/examples/checkbox-form-single.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/checkbox-form-single.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "chart-bar-demo-tooltip": {
-      name: "chart-bar-demo-tooltip",
+    "checkbox-with-text": {
+      name: "checkbox-with-text",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/chart-bar-demo-tooltip.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/chart-bar-demo-tooltip.tsx")),
+      registryDependencies: ["checkbox"],
+      files: [{
+        path: "registry/new-york/examples/checkbox-with-text.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/checkbox-with-text.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "chart-bar-demo-legend": {
-      name: "chart-bar-demo-legend",
+    "collapsible-demo": {
+      name: "collapsible-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/chart-bar-demo-legend.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/chart-bar-demo-legend.tsx")),
+      registryDependencies: ["collapsible"],
+      files: [{
+        path: "registry/new-york/examples/collapsible-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/collapsible-demo.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "chart-tooltip-demo": {
-      name: "chart-tooltip-demo",
+    "combobox-demo": {
+      name: "combobox-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/new-york/example/chart-tooltip-demo.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/example/chart-tooltip-demo.tsx")),
+      registryDependencies: ["command"],
+      files: [{
+        path: "registry/new-york/examples/combobox-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/combobox-demo.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "demo-sidebar": {
-      name: "demo-sidebar",
+    "combobox-dropdown-menu": {
+      name: "combobox-dropdown-menu",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/new-york/block/demo-sidebar.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/demo-sidebar.tsx")),
-      source: "__registry__/new-york/block/demo-sidebar.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:example",
+      registryDependencies: ["command","dropdown-menu","button"],
+      files: [{
+        path: "registry/new-york/examples/combobox-dropdown-menu.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/combobox-dropdown-menu.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "demo-sidebar-header": {
-      name: "demo-sidebar-header",
+    "combobox-form": {
+      name: "combobox-form",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/new-york/block/demo-sidebar-header.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/demo-sidebar-header.tsx")),
-      source: "__registry__/new-york/block/demo-sidebar-header.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:example",
+      registryDependencies: ["command","form"],
+      files: [{
+        path: "registry/new-york/examples/combobox-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/combobox-form.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "demo-sidebar-footer": {
-      name: "demo-sidebar-footer",
+    "combobox-popover": {
+      name: "combobox-popover",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/new-york/block/demo-sidebar-footer.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/demo-sidebar-footer.tsx")),
-      source: "__registry__/new-york/block/demo-sidebar-footer.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:example",
+      registryDependencies: ["combobox","popover"],
+      files: [{
+        path: "registry/new-york/examples/combobox-popover.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/combobox-popover.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "demo-sidebar-group": {
-      name: "demo-sidebar-group",
+    "combobox-responsive": {
+      name: "combobox-responsive",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/new-york/block/demo-sidebar-group.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/demo-sidebar-group.tsx")),
-      source: "__registry__/new-york/block/demo-sidebar-group.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:example",
+      registryDependencies: ["combobox","popover","drawer"],
+      files: [{
+        path: "registry/new-york/examples/combobox-responsive.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/combobox-responsive.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "demo-sidebar-group-collapsible": {
-      name: "demo-sidebar-group-collapsible",
+    "command-demo": {
+      name: "command-demo",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/new-york/block/demo-sidebar-group-collapsible.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/demo-sidebar-group-collapsible.tsx")),
-      source: "__registry__/new-york/block/demo-sidebar-group-collapsible.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:example",
+      registryDependencies: ["command"],
+      files: [{
+        path: "registry/new-york/examples/command-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/command-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "demo-sidebar-group-action": {
-      name: "demo-sidebar-group-action",
+    "command-dialog": {
+      name: "command-dialog",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/new-york/block/demo-sidebar-group-action.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/demo-sidebar-group-action.tsx")),
-      source: "__registry__/new-york/block/demo-sidebar-group-action.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:example",
+      registryDependencies: ["command","dialog"],
+      files: [{
+        path: "registry/new-york/examples/command-dialog.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/command-dialog.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "demo-sidebar-menu": {
-      name: "demo-sidebar-menu",
+    "context-menu-demo": {
+      name: "context-menu-demo",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/new-york/block/demo-sidebar-menu.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/demo-sidebar-menu.tsx")),
-      source: "__registry__/new-york/block/demo-sidebar-menu.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:example",
+      registryDependencies: ["context-menu"],
+      files: [{
+        path: "registry/new-york/examples/context-menu-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/context-menu-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "demo-sidebar-menu-action": {
-      name: "demo-sidebar-menu-action",
+    "data-table-demo": {
+      name: "data-table-demo",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/new-york/block/demo-sidebar-menu-action.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/demo-sidebar-menu-action.tsx")),
-      source: "__registry__/new-york/block/demo-sidebar-menu-action.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:example",
+      registryDependencies: ["data-table"],
+      files: [{
+        path: "registry/new-york/examples/data-table-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/data-table-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "demo-sidebar-menu-sub": {
-      name: "demo-sidebar-menu-sub",
+    "date-picker-demo": {
+      name: "date-picker-demo",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/new-york/block/demo-sidebar-menu-sub.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/demo-sidebar-menu-sub.tsx")),
-      source: "__registry__/new-york/block/demo-sidebar-menu-sub.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:example",
+      registryDependencies: ["button","calendar","popover"],
+      files: [{
+        path: "registry/new-york/examples/date-picker-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/date-picker-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "demo-sidebar-menu-collapsible": {
-      name: "demo-sidebar-menu-collapsible",
+    "date-picker-form": {
+      name: "date-picker-form",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/new-york/block/demo-sidebar-menu-collapsible.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/demo-sidebar-menu-collapsible.tsx")),
-      source: "__registry__/new-york/block/demo-sidebar-menu-collapsible.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:example",
+      registryDependencies: ["button","calendar","form","popover"],
+      files: [{
+        path: "registry/new-york/examples/date-picker-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/date-picker-form.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "demo-sidebar-menu-badge": {
-      name: "demo-sidebar-menu-badge",
+    "date-picker-with-presets": {
+      name: "date-picker-with-presets",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/new-york/block/demo-sidebar-menu-badge.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/demo-sidebar-menu-badge.tsx")),
-      source: "__registry__/new-york/block/demo-sidebar-menu-badge.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:example",
+      registryDependencies: ["button","calendar","popover","select"],
+      files: [{
+        path: "registry/new-york/examples/date-picker-with-presets.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/date-picker-with-presets.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "demo-sidebar-rsc": {
-      name: "demo-sidebar-rsc",
+    "date-picker-with-range": {
+      name: "date-picker-with-range",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/new-york/block/demo-sidebar-rsc.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/demo-sidebar-rsc.tsx")),
-      source: "__registry__/new-york/block/demo-sidebar-rsc.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:example",
+      registryDependencies: ["button","calendar","popover"],
+      files: [{
+        path: "registry/new-york/examples/date-picker-with-range.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/date-picker-with-range.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "demo-sidebar-controlled": {
-      name: "demo-sidebar-controlled",
+    "dialog-demo": {
+      name: "dialog-demo",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/new-york/block/demo-sidebar-controlled.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/demo-sidebar-controlled.tsx")),
-      source: "__registry__/new-york/block/demo-sidebar-controlled.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      type: "registry:example",
+      registryDependencies: ["dialog"],
+      files: [{
+        path: "registry/new-york/examples/dialog-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/dialog-demo.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: ["registry/new-york/block/sidebar-01/page.tsx","registry/new-york/block/sidebar-01/components/app-sidebar.tsx","registry/new-york/block/sidebar-01/components/search-form.tsx","registry/new-york/block/sidebar-01/components/version-switcher.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/sidebar-01/page.tsx")),
-      source: "__registry__/new-york/block/sidebar-01/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "dialog-close-button": {
+      name: "dialog-close-button",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["dialog","button"],
+      files: [{
+        path: "registry/new-york/examples/dialog-close-button.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/dialog-close-button.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "sidebar-02": {
-      name: "sidebar-02",
-      description: "A sidebar with collapsible sections.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","label","dropdown-menu"],
-      files: ["registry/new-york/block/sidebar-02/page.tsx","registry/new-york/block/sidebar-02/components/app-sidebar.tsx","registry/new-york/block/sidebar-02/components/search-form.tsx","registry/new-york/block/sidebar-02/components/version-switcher.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/sidebar-02/page.tsx")),
-      source: "__registry__/new-york/block/sidebar-02/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "drawer-demo": {
+      name: "drawer-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["drawer"],
+      files: [{
+        path: "registry/new-york/examples/drawer-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/drawer-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "sidebar-03": {
-      name: "sidebar-03",
-      description: "A sidebar with submenus.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb"],
-      files: ["registry/new-york/block/sidebar-03/page.tsx","registry/new-york/block/sidebar-03/components/app-sidebar.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/sidebar-03/page.tsx")),
-      source: "__registry__/new-york/block/sidebar-03/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "drawer-dialog": {
+      name: "drawer-dialog",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["drawer","dialog"],
+      files: [{
+        path: "registry/new-york/examples/drawer-dialog.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/drawer-dialog.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "sidebar-04": {
-      name: "sidebar-04",
-      description: "A floating sidebar with submenus.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator"],
-      files: ["registry/new-york/block/sidebar-04/page.tsx","registry/new-york/block/sidebar-04/components/app-sidebar.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/sidebar-04/page.tsx")),
-      source: "__registry__/new-york/block/sidebar-04/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "dropdown-menu-demo": {
+      name: "dropdown-menu-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["dropdown-menu"],
+      files: [{
+        path: "registry/new-york/examples/dropdown-menu-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/dropdown-menu-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "sidebar-05": {
-      name: "sidebar-05",
-      description: "A sidebar with collapsible submenus.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","label","collapsible"],
-      files: ["registry/new-york/block/sidebar-05/page.tsx","registry/new-york/block/sidebar-05/components/app-sidebar.tsx","registry/new-york/block/sidebar-05/components/search-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/sidebar-05/page.tsx")),
-      source: "__registry__/new-york/block/sidebar-05/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "dropdown-menu-checkboxes": {
+      name: "dropdown-menu-checkboxes",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["dropdown-menu","checkbox"],
+      files: [{
+        path: "registry/new-york/examples/dropdown-menu-checkboxes.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/dropdown-menu-checkboxes.tsx")),
+      source: "",
+      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: ["registry/new-york/block/sidebar-06/page.tsx","registry/new-york/block/sidebar-06/components/app-sidebar.tsx","registry/new-york/block/sidebar-06/components/nav-main.tsx","registry/new-york/block/sidebar-06/components/sidebar-opt-in-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/sidebar-06/page.tsx")),
-      source: "__registry__/new-york/block/sidebar-06/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "dropdown-menu-radio-group": {
+      name: "dropdown-menu-radio-group",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["dropdown-menu","radio-group"],
+      files: [{
+        path: "registry/new-york/examples/dropdown-menu-radio-group.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/dropdown-menu-radio-group.tsx")),
+      source: "",
+      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: ["registry/new-york/block/sidebar-07/page.tsx","registry/new-york/block/sidebar-07/components/app-sidebar.tsx","registry/new-york/block/sidebar-07/components/nav-main.tsx","registry/new-york/block/sidebar-07/components/nav-projects.tsx","registry/new-york/block/sidebar-07/components/nav-user.tsx","registry/new-york/block/sidebar-07/components/team-switcher.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/sidebar-07/page.tsx")),
-      source: "__registry__/new-york/block/sidebar-07/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "hover-card-demo": {
+      name: "hover-card-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["hover-card"],
+      files: [{
+        path: "registry/new-york/examples/hover-card-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/hover-card-demo.tsx")),
+      source: "",
+      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: ["registry/new-york/block/sidebar-08/page.tsx","registry/new-york/block/sidebar-08/components/app-sidebar.tsx","registry/new-york/block/sidebar-08/components/nav-main.tsx","registry/new-york/block/sidebar-08/components/nav-projects.tsx","registry/new-york/block/sidebar-08/components/nav-secondary.tsx","registry/new-york/block/sidebar-08/components/nav-user.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/sidebar-08/page.tsx")),
-      source: "__registry__/new-york/block/sidebar-08/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "input-demo": {
+      name: "input-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input"],
+      files: [{
+        path: "registry/new-york/examples/input-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "sidebar-09": {
-      name: "sidebar-09",
-      description: "Collapsible nested sidebars.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar","switch"],
-      files: ["registry/new-york/block/sidebar-09/page.tsx","registry/new-york/block/sidebar-09/components/nav-user.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/sidebar-09/page.tsx")),
-      source: "__registry__/new-york/block/sidebar-09/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "input-disabled": {
+      name: "input-disabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input"],
+      files: [{
+        path: "registry/new-york/examples/input-disabled.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-disabled.tsx")),
+      source: "",
+      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: ["registry/new-york/block/sidebar-10/page.tsx","registry/new-york/block/sidebar-10/components/app-sidebar.tsx","registry/new-york/block/sidebar-10/components/nav-actions.tsx","registry/new-york/block/sidebar-10/components/nav-favorites.tsx","registry/new-york/block/sidebar-10/components/nav-main.tsx","registry/new-york/block/sidebar-10/components/nav-secondary.tsx","registry/new-york/block/sidebar-10/components/nav-workspaces.tsx","registry/new-york/block/sidebar-10/components/team-switcher.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/sidebar-10/page.tsx")),
-      source: "__registry__/new-york/block/sidebar-10/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "input-file": {
+      name: "input-file",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input"],
+      files: [{
+        path: "registry/new-york/examples/input-file.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-file.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "sidebar-11": {
-      name: "sidebar-11",
-      description: "A sidebar with a collapsible file tree.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible"],
-      files: ["registry/new-york/block/sidebar-11/page.tsx","registry/new-york/block/sidebar-11/components/app-sidebar.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/sidebar-11/page.tsx")),
-      source: "__registry__/new-york/block/sidebar-11/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "input-form": {
+      name: "input-form",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input","button","form"],
+      files: [{
+        path: "registry/new-york/examples/input-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-form.tsx")),
+      source: "",
+      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: ["registry/new-york/block/sidebar-12/page.tsx","registry/new-york/block/sidebar-12/components/app-sidebar.tsx","registry/new-york/block/sidebar-12/components/calendars.tsx","registry/new-york/block/sidebar-12/components/date-picker.tsx","registry/new-york/block/sidebar-12/components/nav-user.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/sidebar-12/page.tsx")),
-      source: "__registry__/new-york/block/sidebar-12/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "input-with-button": {
+      name: "input-with-button",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input","button"],
+      files: [{
+        path: "registry/new-york/examples/input-with-button.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-with-button.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "sidebar-13": {
-      name: "sidebar-13",
-      description: "A sidebar in a dialog.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","button","dialog"],
-      files: ["registry/new-york/block/sidebar-13/page.tsx","registry/new-york/block/sidebar-13/components/settings-dialog.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/sidebar-13/page.tsx")),
-      source: "__registry__/new-york/block/sidebar-13/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "input-with-label": {
+      name: "input-with-label",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input","button","label"],
+      files: [{
+        path: "registry/new-york/examples/input-with-label.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-with-label.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "sidebar-14": {
-      name: "sidebar-14",
-      description: "A sidebar on the right.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb"],
-      files: ["registry/new-york/block/sidebar-14/page.tsx","registry/new-york/block/sidebar-14/components/app-sidebar.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/sidebar-14/page.tsx")),
-      source: "__registry__/new-york/block/sidebar-14/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "input-with-text": {
+      name: "input-with-text",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input","button","label"],
+      files: [{
+        path: "registry/new-york/examples/input-with-text.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-with-text.tsx")),
+      source: "",
+      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: ["registry/new-york/block/sidebar-15/page.tsx","registry/new-york/block/sidebar-15/components/calendars.tsx","registry/new-york/block/sidebar-15/components/date-picker.tsx","registry/new-york/block/sidebar-15/components/nav-favorites.tsx","registry/new-york/block/sidebar-15/components/nav-main.tsx","registry/new-york/block/sidebar-15/components/nav-secondary.tsx","registry/new-york/block/sidebar-15/components/nav-user.tsx","registry/new-york/block/sidebar-15/components/nav-workspaces.tsx","registry/new-york/block/sidebar-15/components/sidebar-left.tsx","registry/new-york/block/sidebar-15/components/sidebar-right.tsx","registry/new-york/block/sidebar-15/components/team-switcher.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/sidebar-15/page.tsx")),
-      source: "__registry__/new-york/block/sidebar-15/page.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "input-otp-demo": {
+      name: "input-otp-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input-otp"],
+      files: [{
+        path: "registry/new-york/examples/input-otp-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-otp-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "login-01": {
-      name: "login-01",
-      description: "A simple login form.",
-      type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
-      files: ["registry/new-york/block/login-01/page.tsx","registry/new-york/block/login-01/components/login-form.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/login-01/page.tsx")),
-      source: "__registry__/new-york/block/login-01/page.tsx",
-      category: "Authentication",
-      subcategory: "Login",
-      chunks: []
+    "input-otp-pattern": {
+      name: "input-otp-pattern",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input-otp"],
+      files: [{
+        path: "registry/new-york/examples/input-otp-pattern.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-otp-pattern.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-area-axes": {
-      name: "chart-area-axes",
-      description: "An area chart with axes",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-area-axes.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-area-axes.tsx")),
-      source: "__registry__/new-york/block/chart-area-axes.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
+    "input-otp-separator": {
+      name: "input-otp-separator",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input-otp"],
+      files: [{
+        path: "registry/new-york/examples/input-otp-separator.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-otp-separator.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-area-default": {
-      name: "chart-area-default",
-      description: "A simple area chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-area-default.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-area-default.tsx")),
-      source: "__registry__/new-york/block/chart-area-default.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
+    "input-otp-controlled": {
+      name: "input-otp-controlled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input-otp"],
+      files: [{
+        path: "registry/new-york/examples/input-otp-controlled.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-otp-controlled.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-area-gradient": {
-      name: "chart-area-gradient",
-      description: "An area chart with gradient fill",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-area-gradient.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-area-gradient.tsx")),
-      source: "__registry__/new-york/block/chart-area-gradient.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
+    "input-otp-form": {
+      name: "input-otp-form",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["input-otp","form"],
+      files: [{
+        path: "registry/new-york/examples/input-otp-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/input-otp-form.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-area-icons": {
-      name: "chart-area-icons",
-      description: "An area chart with icons",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-area-icons.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-area-icons.tsx")),
-      source: "__registry__/new-york/block/chart-area-icons.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
+    "label-demo": {
+      name: "label-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["label"],
+      files: [{
+        path: "registry/new-york/examples/label-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/label-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-area-interactive": {
-      name: "chart-area-interactive",
-      description: "An interactive area chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart","select"],
-      files: ["registry/new-york/block/chart-area-interactive.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-area-interactive.tsx")),
-      source: "__registry__/new-york/block/chart-area-interactive.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
+    "menubar-demo": {
+      name: "menubar-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["menubar"],
+      files: [{
+        path: "registry/new-york/examples/menubar-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/menubar-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-area-legend": {
-      name: "chart-area-legend",
-      description: "An area chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-area-legend.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-area-legend.tsx")),
-      source: "__registry__/new-york/block/chart-area-legend.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
+    "navigation-menu-demo": {
+      name: "navigation-menu-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["navigation-menu"],
+      files: [{
+        path: "registry/new-york/examples/navigation-menu-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/navigation-menu-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-area-linear": {
-      name: "chart-area-linear",
-      description: "A linear area chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-area-linear.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-area-linear.tsx")),
-      source: "__registry__/new-york/block/chart-area-linear.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
+    "pagination-demo": {
+      name: "pagination-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["pagination"],
+      files: [{
+        path: "registry/new-york/examples/pagination-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/pagination-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-area-stacked-expand": {
-      name: "chart-area-stacked-expand",
-      description: "A stacked area chart with expand stacking",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-area-stacked-expand.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-area-stacked-expand.tsx")),
-      source: "__registry__/new-york/block/chart-area-stacked-expand.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
+    "popover-demo": {
+      name: "popover-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["popover"],
+      files: [{
+        path: "registry/new-york/examples/popover-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/popover-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-area-stacked": {
-      name: "chart-area-stacked",
-      description: "A stacked area chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-area-stacked.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-area-stacked.tsx")),
-      source: "__registry__/new-york/block/chart-area-stacked.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
+    "progress-demo": {
+      name: "progress-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["progress"],
+      files: [{
+        path: "registry/new-york/examples/progress-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/progress-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-area-step": {
-      name: "chart-area-step",
-      description: "A step area chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-area-step.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-area-step.tsx")),
-      source: "__registry__/new-york/block/chart-area-step.tsx",
-      category: "Charts",
-      subcategory: "Area",
-      chunks: []
+    "radio-group-demo": {
+      name: "radio-group-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["radio-group"],
+      files: [{
+        path: "registry/new-york/examples/radio-group-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/radio-group-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-active": {
-      name: "chart-bar-active",
-      description: "A bar chart with an active bar",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-bar-active.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-bar-active.tsx")),
-      source: "__registry__/new-york/block/chart-bar-active.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "radio-group-form": {
+      name: "radio-group-form",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["radio-group","form"],
+      files: [{
+        path: "registry/new-york/examples/radio-group-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/radio-group-form.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-default": {
-      name: "chart-bar-default",
-      description: "A bar chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-bar-default.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-bar-default.tsx")),
-      source: "__registry__/new-york/block/chart-bar-default.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "resizable-demo": {
+      name: "resizable-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["resizable"],
+      files: [{
+        path: "registry/new-york/examples/resizable-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/resizable-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-horizontal": {
-      name: "chart-bar-horizontal",
-      description: "A horizontal bar chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-bar-horizontal.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-bar-horizontal.tsx")),
-      source: "__registry__/new-york/block/chart-bar-horizontal.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "resizable-demo-with-handle": {
+      name: "resizable-demo-with-handle",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["resizable"],
+      files: [{
+        path: "registry/new-york/examples/resizable-demo-with-handle.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/resizable-demo-with-handle.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-interactive": {
-      name: "chart-bar-interactive",
-      description: "An interactive bar chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-bar-interactive.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-bar-interactive.tsx")),
-      source: "__registry__/new-york/block/chart-bar-interactive.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "resizable-vertical": {
+      name: "resizable-vertical",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["resizable"],
+      files: [{
+        path: "registry/new-york/examples/resizable-vertical.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/resizable-vertical.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-label-custom": {
-      name: "chart-bar-label-custom",
-      description: "A bar chart with a custom label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-bar-label-custom.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-bar-label-custom.tsx")),
-      source: "__registry__/new-york/block/chart-bar-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "resizable-handle": {
+      name: "resizable-handle",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["resizable"],
+      files: [{
+        path: "registry/new-york/examples/resizable-handle.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/resizable-handle.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-label": {
-      name: "chart-bar-label",
-      description: "A bar chart with a label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-bar-label.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-bar-label.tsx")),
-      source: "__registry__/new-york/block/chart-bar-label.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "scroll-area-demo": {
+      name: "scroll-area-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["scroll-area"],
+      files: [{
+        path: "registry/new-york/examples/scroll-area-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/scroll-area-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-mixed": {
-      name: "chart-bar-mixed",
-      description: "A mixed bar chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-bar-mixed.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-bar-mixed.tsx")),
-      source: "__registry__/new-york/block/chart-bar-mixed.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "scroll-area-horizontal-demo": {
+      name: "scroll-area-horizontal-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["scroll-area"],
+      files: [{
+        path: "registry/new-york/examples/scroll-area-horizontal-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/scroll-area-horizontal-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-multiple": {
-      name: "chart-bar-multiple",
-      description: "A multiple bar chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-bar-multiple.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-bar-multiple.tsx")),
-      source: "__registry__/new-york/block/chart-bar-multiple.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "select-demo": {
+      name: "select-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["select"],
+      files: [{
+        path: "registry/new-york/examples/select-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/select-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-negative": {
-      name: "chart-bar-negative",
-      description: "A bar chart with negative values",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-bar-negative.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-bar-negative.tsx")),
-      source: "__registry__/new-york/block/chart-bar-negative.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "select-scrollable": {
+      name: "select-scrollable",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["select"],
+      files: [{
+        path: "registry/new-york/examples/select-scrollable.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/select-scrollable.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-bar-stacked": {
-      name: "chart-bar-stacked",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-bar-stacked.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-bar-stacked.tsx")),
-      source: "__registry__/new-york/block/chart-bar-stacked.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "select-form": {
+      name: "select-form",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["select"],
+      files: [{
+        path: "registry/new-york/examples/select-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/select-form.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-default": {
-      name: "chart-line-default",
-      description: "A line chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-line-default.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-line-default.tsx")),
-      source: "__registry__/new-york/block/chart-line-default.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "separator-demo": {
+      name: "separator-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["separator"],
+      files: [{
+        path: "registry/new-york/examples/separator-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/separator-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-dots-colors": {
-      name: "chart-line-dots-colors",
-      description: "A line chart with dots and colors",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-line-dots-colors.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-line-dots-colors.tsx")),
-      source: "__registry__/new-york/block/chart-line-dots-colors.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "sheet-demo": {
+      name: "sheet-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["sheet"],
+      files: [{
+        path: "registry/new-york/examples/sheet-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/sheet-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-dots-custom": {
-      name: "chart-line-dots-custom",
-      description: "A line chart with custom dots",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-line-dots-custom.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-line-dots-custom.tsx")),
-      source: "__registry__/new-york/block/chart-line-dots-custom.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "sheet-side": {
+      name: "sheet-side",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["sheet"],
+      files: [{
+        path: "registry/new-york/examples/sheet-side.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/sheet-side.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-dots": {
-      name: "chart-line-dots",
-      description: "A line chart with dots",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-line-dots.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-line-dots.tsx")),
-      source: "__registry__/new-york/block/chart-line-dots.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "skeleton-demo": {
+      name: "skeleton-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["skeleton"],
+      files: [{
+        path: "registry/new-york/examples/skeleton-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/skeleton-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-interactive": {
-      name: "chart-line-interactive",
-      description: "An interactive line chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-line-interactive.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-line-interactive.tsx")),
-      source: "__registry__/new-york/block/chart-line-interactive.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "skeleton-card": {
+      name: "skeleton-card",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["skeleton"],
+      files: [{
+        path: "registry/new-york/examples/skeleton-card.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/skeleton-card.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-label-custom": {
-      name: "chart-line-label-custom",
-      description: "A line chart with a custom label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-line-label-custom.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-line-label-custom.tsx")),
-      source: "__registry__/new-york/block/chart-line-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "slider-demo": {
+      name: "slider-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["slider"],
+      files: [{
+        path: "registry/new-york/examples/slider-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/slider-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-label": {
-      name: "chart-line-label",
-      description: "A line chart with a label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-line-label.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-line-label.tsx")),
-      source: "__registry__/new-york/block/chart-line-label.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "sonner-demo": {
+      name: "sonner-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["sonner"],
+      files: [{
+        path: "registry/new-york/examples/sonner-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/sonner-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-linear": {
-      name: "chart-line-linear",
-      description: "A linear line chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-line-linear.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-line-linear.tsx")),
-      source: "__registry__/new-york/block/chart-line-linear.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "switch-demo": {
+      name: "switch-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["switch"],
+      files: [{
+        path: "registry/new-york/examples/switch-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/switch-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-multiple": {
-      name: "chart-line-multiple",
-      description: "A multiple line chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-line-multiple.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-line-multiple.tsx")),
-      source: "__registry__/new-york/block/chart-line-multiple.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "switch-form": {
+      name: "switch-form",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["switch","form"],
+      files: [{
+        path: "registry/new-york/examples/switch-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/switch-form.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-line-step": {
-      name: "chart-line-step",
-      description: "A line chart with step",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-line-step.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-line-step.tsx")),
-      source: "__registry__/new-york/block/chart-line-step.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "table-demo": {
+      name: "table-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["table"],
+      files: [{
+        path: "registry/new-york/examples/table-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/table-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-donut-active": {
-      name: "chart-pie-donut-active",
-      description: "A donut chart with an active sector",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-pie-donut-active.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-donut-active.tsx")),
-      source: "__registry__/new-york/block/chart-pie-donut-active.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "tabs-demo": {
+      name: "tabs-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["tabs"],
+      files: [{
+        path: "registry/new-york/examples/tabs-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/tabs-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-pie-donut-text": {
-      name: "chart-pie-donut-text",
-      description: "A donut chart with text",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-pie-donut-text.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-donut-text.tsx")),
-      source: "__registry__/new-york/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: ["registry/new-york/block/chart-pie-donut.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-donut.tsx")),
-      source: "__registry__/new-york/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: ["registry/new-york/block/chart-pie-interactive.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-interactive.tsx")),
-      source: "__registry__/new-york/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: ["registry/new-york/block/chart-pie-label-custom.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-label-custom.tsx")),
-      source: "__registry__/new-york/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: ["registry/new-york/block/chart-pie-label-list.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-label-list.tsx")),
-      source: "__registry__/new-york/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: ["registry/new-york/block/chart-pie-label.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-label.tsx")),
-      source: "__registry__/new-york/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: ["registry/new-york/block/chart-pie-legend.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-legend.tsx")),
-      source: "__registry__/new-york/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: ["registry/new-york/block/chart-pie-separator-none.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-separator-none.tsx")),
-      source: "__registry__/new-york/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: ["registry/new-york/block/chart-pie-simple.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-simple.tsx")),
-      source: "__registry__/new-york/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: ["registry/new-york/block/chart-pie-stacked.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-pie-stacked.tsx")),
-      source: "__registry__/new-york/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: ["registry/new-york/block/chart-radar-default.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-default.tsx")),
-      source: "__registry__/new-york/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: ["registry/new-york/block/chart-radar-dots.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-dots.tsx")),
-      source: "__registry__/new-york/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: ["registry/new-york/block/chart-radar-grid-circle-fill.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-circle-fill.tsx")),
-      source: "__registry__/new-york/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: ["registry/new-york/block/chart-radar-grid-circle-no-lines.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-circle-no-lines.tsx")),
-      source: "__registry__/new-york/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: ["registry/new-york/block/chart-radar-grid-circle.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-circle.tsx")),
-      source: "__registry__/new-york/block/chart-radar-grid-circle.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "textarea-demo": {
+      name: "textarea-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea"],
+      files: [{
+        path: "registry/new-york/examples/textarea-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/textarea-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-grid-custom": {
-      name: "chart-radar-grid-custom",
-      description: "A radar chart with a custom grid",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-grid-custom.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-custom.tsx")),
-      source: "__registry__/new-york/block/chart-radar-grid-custom.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "textarea-disabled": {
+      name: "textarea-disabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea"],
+      files: [{
+        path: "registry/new-york/examples/textarea-disabled.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/textarea-disabled.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-grid-fill": {
-      name: "chart-radar-grid-fill",
-      description: "A radar chart with a grid filled",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-grid-fill.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-fill.tsx")),
-      source: "__registry__/new-york/block/chart-radar-grid-fill.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "textarea-form": {
+      name: "textarea-form",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea","form"],
+      files: [{
+        path: "registry/new-york/examples/textarea-form.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/textarea-form.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-grid-none": {
-      name: "chart-radar-grid-none",
-      description: "A radar chart with no grid",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-grid-none.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-none.tsx")),
-      source: "__registry__/new-york/block/chart-radar-grid-none.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "textarea-with-button": {
+      name: "textarea-with-button",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea","button"],
+      files: [{
+        path: "registry/new-york/examples/textarea-with-button.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/textarea-with-button.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-icons": {
-      name: "chart-radar-icons",
-      description: "A radar chart with icons",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-icons.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-icons.tsx")),
-      source: "__registry__/new-york/block/chart-radar-icons.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "textarea-with-label": {
+      name: "textarea-with-label",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea","label"],
+      files: [{
+        path: "registry/new-york/examples/textarea-with-label.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/textarea-with-label.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-label-custom": {
-      name: "chart-radar-label-custom",
-      description: "A radar chart with a custom label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-label-custom.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-label-custom.tsx")),
-      source: "__registry__/new-york/block/chart-radar-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "textarea-with-text": {
+      name: "textarea-with-text",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea","label"],
+      files: [{
+        path: "registry/new-york/examples/textarea-with-text.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/textarea-with-text.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-legend": {
-      name: "chart-radar-legend",
-      description: "A radar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-legend.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-legend.tsx")),
-      source: "__registry__/new-york/block/chart-radar-legend.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toast-demo": {
+      name: "toast-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toast"],
+      files: [{
+        path: "registry/new-york/examples/toast-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toast-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-lines-only": {
-      name: "chart-radar-lines-only",
-      description: "A radar chart with lines only",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-lines-only.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-lines-only.tsx")),
-      source: "__registry__/new-york/block/chart-radar-lines-only.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toast-destructive": {
+      name: "toast-destructive",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toast"],
+      files: [{
+        path: "registry/new-york/examples/toast-destructive.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toast-destructive.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-multiple": {
-      name: "chart-radar-multiple",
-      description: "A radar chart with multiple data",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-multiple.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-multiple.tsx")),
-      source: "__registry__/new-york/block/chart-radar-multiple.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toast-simple": {
+      name: "toast-simple",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toast"],
+      files: [{
+        path: "registry/new-york/examples/toast-simple.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toast-simple.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radar-radius": {
-      name: "chart-radar-radius",
-      description: "A radar chart with a radius axis",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radar-radius.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radar-radius.tsx")),
-      source: "__registry__/new-york/block/chart-radar-radius.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "toast-with-action": {
+      name: "toast-with-action",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toast"],
+      files: [{
+        path: "registry/new-york/examples/toast-with-action.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toast-with-action.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radial-grid": {
-      name: "chart-radial-grid",
-      description: "A radial chart with a grid",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radial-grid.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radial-grid.tsx")),
-      source: "__registry__/new-york/block/chart-radial-grid.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "toast-with-title": {
+      name: "toast-with-title",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toast"],
+      files: [{
+        path: "registry/new-york/examples/toast-with-title.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toast-with-title.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radial-label": {
-      name: "chart-radial-label",
-      description: "A radial chart with a label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radial-label.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radial-label.tsx")),
-      source: "__registry__/new-york/block/chart-radial-label.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "toggle-group-demo": {
+      name: "toggle-group-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/new-york/examples/toggle-group-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-group-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radial-shape": {
-      name: "chart-radial-shape",
-      description: "A radial chart with a custom shape",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radial-shape.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radial-shape.tsx")),
-      source: "__registry__/new-york/block/chart-radial-shape.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "toggle-group-disabled": {
+      name: "toggle-group-disabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/new-york/examples/toggle-group-disabled.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-group-disabled.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radial-simple": {
-      name: "chart-radial-simple",
-      description: "A radial chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radial-simple.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radial-simple.tsx")),
-      source: "__registry__/new-york/block/chart-radial-simple.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "toggle-group-lg": {
+      name: "toggle-group-lg",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/new-york/examples/toggle-group-lg.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-group-lg.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radial-stacked": {
-      name: "chart-radial-stacked",
-      description: "A radial chart with stacked sections",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radial-stacked.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radial-stacked.tsx")),
-      source: "__registry__/new-york/block/chart-radial-stacked.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "toggle-group-outline": {
+      name: "toggle-group-outline",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/new-york/examples/toggle-group-outline.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-group-outline.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-radial-text": {
-      name: "chart-radial-text",
-      description: "A radial chart with text",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-radial-text.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-radial-text.tsx")),
-      source: "__registry__/new-york/block/chart-radial-text.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "toggle-group-sm": {
+      name: "toggle-group-sm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/new-york/examples/toggle-group-sm.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-group-sm.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-default": {
-      name: "chart-tooltip-default",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-tooltip-default.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-default.tsx")),
-      source: "__registry__/new-york/block/chart-tooltip-default.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "toggle-group-single": {
+      name: "toggle-group-single",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      files: [{
+        path: "registry/new-york/examples/toggle-group-single.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-group-single.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-indicator-line": {
-      name: "chart-tooltip-indicator-line",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-tooltip-indicator-line.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-indicator-line.tsx")),
-      source: "__registry__/new-york/block/chart-tooltip-indicator-line.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "toggle-demo": {
+      name: "toggle-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/new-york/examples/toggle-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-indicator-none": {
-      name: "chart-tooltip-indicator-none",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-tooltip-indicator-none.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-indicator-none.tsx")),
-      source: "__registry__/new-york/block/chart-tooltip-indicator-none.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "toggle-disabled": {
+      name: "toggle-disabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/new-york/examples/toggle-disabled.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-disabled.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-label-none": {
-      name: "chart-tooltip-label-none",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-tooltip-label-none.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-label-none.tsx")),
-      source: "__registry__/new-york/block/chart-tooltip-label-none.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "toggle-lg": {
+      name: "toggle-lg",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/new-york/examples/toggle-lg.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-lg.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-label-custom": {
-      name: "chart-tooltip-label-custom",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-tooltip-label-custom.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-label-custom.tsx")),
-      source: "__registry__/new-york/block/chart-tooltip-label-custom.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "toggle-outline": {
+      name: "toggle-outline",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/new-york/examples/toggle-outline.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-outline.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-label-formatter": {
-      name: "chart-tooltip-label-formatter",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-tooltip-label-formatter.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-label-formatter.tsx")),
-      source: "__registry__/new-york/block/chart-tooltip-label-formatter.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "toggle-sm": {
+      name: "toggle-sm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/new-york/examples/toggle-sm.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-sm.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-formatter": {
-      name: "chart-tooltip-formatter",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-tooltip-formatter.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-formatter.tsx")),
-      source: "__registry__/new-york/block/chart-tooltip-formatter.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "toggle-with-text": {
+      name: "toggle-with-text",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      files: [{
+        path: "registry/new-york/examples/toggle-with-text.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/toggle-with-text.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-icons": {
-      name: "chart-tooltip-icons",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-tooltip-icons.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-icons.tsx")),
-      source: "__registry__/new-york/block/chart-tooltip-icons.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "tooltip-demo": {
+      name: "tooltip-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["tooltip"],
+      files: [{
+        path: "registry/new-york/examples/tooltip-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/tooltip-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "chart-tooltip-advanced": {
-      name: "chart-tooltip-advanced",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/new-york/block/chart-tooltip-advanced.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-advanced.tsx")),
-      source: "__registry__/new-york/block/chart-tooltip-advanced.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "typography-blockquote": {
+      name: "typography-blockquote",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-blockquote.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-blockquote.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "utils": {
-      name: "utils",
+    "typography-demo": {
+      name: "typography-demo",
       description: "",
-      type: "registry:lib",
+      type: "registry:example",
       registryDependencies: undefined,
-      files: ["registry/new-york/lib/utils.ts"],
-      component: React.lazy(() => import("@/registry/new-york/lib/utils.ts")),
+      files: [{
+        path: "registry/new-york/examples/typography-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-demo.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "use-mobile": {
-      name: "use-mobile",
+    "typography-h1": {
+      name: "typography-h1",
       description: "",
-      type: "registry:hook",
+      type: "registry:example",
       registryDependencies: undefined,
-      files: ["registry/new-york/hooks/use-mobile.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/hooks/use-mobile.tsx")),
+      files: [{
+        path: "registry/new-york/examples/typography-h1.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-h1.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "use-toast": {
-      name: "use-toast",
+    "typography-h2": {
+      name: "typography-h2",
       description: "",
-      type: "registry:hook",
+      type: "registry:example",
       registryDependencies: undefined,
-      files: ["registry/new-york/hooks/use-toast.ts"],
-      component: React.lazy(() => import("@/registry/new-york/hooks/use-toast.ts")),
+      files: [{
+        path: "registry/new-york/examples/typography-h2.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-h2.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "v0-sidebar-01": {
-      name: "v0-sidebar-01",
-      description: "A simple sidebar with navigation grouped by section.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","label","dropdown-menu"],
-      files: ["registry/new-york/v0/sidebar-01.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/v0/sidebar-01.tsx")),
-      source: "__registry__/new-york/v0/sidebar-01.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "typography-h3": {
+      name: "typography-h3",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-h3.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-h3.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "v0-sidebar-02": {
-      name: "v0-sidebar-02",
-      description: "A sidebar with collapsible sections.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","label","dropdown-menu"],
-      files: ["registry/new-york/v0/sidebar-02.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/v0/sidebar-02.tsx")),
-      source: "__registry__/new-york/v0/sidebar-02.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "typography-h4": {
+      name: "typography-h4",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-h4.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-h4.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "v0-sidebar-03": {
-      name: "v0-sidebar-03",
-      description: "A sidebar with nested navigation.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb"],
-      files: ["registry/new-york/v0/sidebar-03.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/v0/sidebar-03.tsx")),
-      source: "__registry__/new-york/v0/sidebar-03.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "typography-inline-code": {
+      name: "typography-inline-code",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-inline-code.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-inline-code.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "v0-sidebar-04": {
-      name: "v0-sidebar-04",
-      description: "A floating sidebar with submenus.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator"],
-      files: ["registry/new-york/v0/sidebar-04.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/v0/sidebar-04.tsx")),
-      source: "__registry__/new-york/v0/sidebar-04.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "typography-large": {
+      name: "typography-large",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-large.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-large.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "v0-sidebar-05": {
-      name: "v0-sidebar-05",
-      description: "A sidebar with collapsible submenus.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","label","collapsible"],
-      files: ["registry/new-york/v0/sidebar-05.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/v0/sidebar-05.tsx")),
-      source: "__registry__/new-york/v0/sidebar-05.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "typography-lead": {
+      name: "typography-lead",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-lead.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-lead.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "v0-sidebar-06": {
-      name: "v0-sidebar-06",
-      description: "A sidebar with submenus as dropdowns.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","card","dropdown-menu"],
-      files: ["registry/new-york/v0/sidebar-06.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/v0/sidebar-06.tsx")),
-      source: "__registry__/new-york/v0/sidebar-06.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "typography-list": {
+      name: "typography-list",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-list.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-list.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "v0-sidebar-07": {
-      name: "v0-sidebar-07",
-      description: "A sidebar that collapses to icons.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar"],
-      files: ["registry/new-york/v0/sidebar-07.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/v0/sidebar-07.tsx")),
-      source: "__registry__/new-york/v0/sidebar-07.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "typography-muted": {
+      name: "typography-muted",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-muted.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-muted.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "v0-sidebar-08": {
-      name: "v0-sidebar-08",
-      description: "An inset sidebar with secondary navigation.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar"],
-      files: ["registry/new-york/v0/sidebar-08.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/v0/sidebar-08.tsx")),
-      source: "__registry__/new-york/v0/sidebar-08.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "typography-p": {
+      name: "typography-p",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-p.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-p.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "v0-sidebar-09": {
-      name: "v0-sidebar-09",
-      description: "Collapsible nested sidebars.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar","switch"],
-      files: ["registry/new-york/v0/sidebar-09.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/v0/sidebar-09.tsx")),
-      source: "__registry__/new-york/v0/sidebar-09.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "typography-small": {
+      name: "typography-small",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-small.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-small.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "v0-sidebar-10": {
-      name: "v0-sidebar-10",
-      description: "A sidebar in a popover.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","popover","collapsible","dropdown-menu"],
-      files: ["registry/new-york/v0/sidebar-10.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/v0/sidebar-10.tsx")),
-      source: "__registry__/new-york/v0/sidebar-10.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "typography-table": {
+      name: "typography-table",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/typography-table.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/typography-table.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "v0-sidebar-11": {
-      name: "v0-sidebar-11",
-      description: "A sidebar with a collapsible file tree.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible"],
-      files: ["registry/new-york/v0/sidebar-11.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/v0/sidebar-11.tsx")),
-      source: "__registry__/new-york/v0/sidebar-11.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "mode-toggle": {
+      name: "mode-toggle",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/mode-toggle.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/mode-toggle.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "v0-sidebar-12": {
-      name: "v0-sidebar-12",
-      description: "A sidebar with a calendar.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","calendar","dropdown-menu","avatar"],
-      files: ["registry/new-york/v0/sidebar-12.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/v0/sidebar-12.tsx")),
-      source: "__registry__/new-york/v0/sidebar-12.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "chart-bar-demo": {
+      name: "chart-bar-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/chart-bar-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/chart-bar-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "v0-sidebar-13": {
-      name: "v0-sidebar-13",
-      description: "A sidebar in a dialog.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","button","dialog"],
-      files: ["registry/new-york/v0/sidebar-13.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/v0/sidebar-13.tsx")),
-      source: "__registry__/new-york/v0/sidebar-13.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "chart-bar-demo-grid": {
+      name: "chart-bar-demo-grid",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/chart-bar-demo-grid.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/chart-bar-demo-grid.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "v0-sidebar-14": {
-      name: "v0-sidebar-14",
-      description: "A sidebar on the right.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb"],
-      files: ["registry/new-york/v0/sidebar-14.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/v0/sidebar-14.tsx")),
-      source: "__registry__/new-york/v0/sidebar-14.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "chart-bar-demo-axis": {
+      name: "chart-bar-demo-axis",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/chart-bar-demo-axis.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/chart-bar-demo-axis.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "v0-sidebar-15": {
-      name: "v0-sidebar-15",
-      description: "A left and right sidebar.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","popover","collapsible","dropdown-menu","calendar","avatar"],
-      files: ["registry/new-york/v0/sidebar-15.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/v0/sidebar-15.tsx")),
-      source: "__registry__/new-york/v0/sidebar-15.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "chart-bar-demo-tooltip": {
+      name: "chart-bar-demo-tooltip",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/chart-bar-demo-tooltip.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/chart-bar-demo-tooltip.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "v0-login-01": {
-      name: "v0-login-01",
-      description: "A simple login form.",
-      type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
-      files: ["registry/new-york/v0/login-01.tsx"],
-      component: React.lazy(() => import("@/registry/new-york/v0/login-01.tsx")),
-      source: "__registry__/new-york/v0/login-01.tsx",
-      category: "Authentication",
-      subcategory: "Login",
-      chunks: []
+    "chart-bar-demo-legend": {
+      name: "chart-bar-demo-legend",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/chart-bar-demo-legend.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/chart-bar-demo-legend.tsx")),
+      source: "",
+      meta: undefined,
+    },
+    "chart-tooltip-demo": {
+      name: "chart-tooltip-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/new-york/examples/chart-tooltip-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/new-york/examples/chart-tooltip-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
   },  "default": {
     "accordion": {
@@ -3767,3756 +5265,5254 @@ export const Index: Record<string, any> = {
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/accordion.tsx"],
+      files: [{
+        path: "registry/default/ui/accordion.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/accordion.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "alert": {
       name: "alert",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/alert.tsx"],
+      files: [{
+        path: "registry/default/ui/alert.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/alert.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "alert-dialog": {
       name: "alert-dialog",
       description: "",
       type: "registry:ui",
       registryDependencies: ["button"],
-      files: ["registry/default/ui/alert-dialog.tsx"],
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "aspect-ratio": {
       name: "aspect-ratio",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/aspect-ratio.tsx"],
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "avatar": {
       name: "avatar",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/avatar.tsx"],
+      files: [{
+        path: "registry/default/ui/avatar.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/avatar.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "badge": {
       name: "badge",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/badge.tsx"],
+      files: [{
+        path: "registry/default/ui/badge.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/badge.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "breadcrumb": {
       name: "breadcrumb",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/breadcrumb.tsx"],
+      files: [{
+        path: "registry/default/ui/breadcrumb.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/breadcrumb.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "button": {
       name: "button",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/button.tsx"],
+      files: [{
+        path: "registry/default/ui/button.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/button.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "calendar": {
       name: "calendar",
       description: "",
       type: "registry:ui",
       registryDependencies: ["button"],
-      files: ["registry/default/ui/calendar.tsx"],
+      files: [{
+        path: "registry/default/ui/calendar.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/calendar.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "card": {
       name: "card",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/card.tsx"],
+      files: [{
+        path: "registry/default/ui/card.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/card.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "carousel": {
       name: "carousel",
       description: "",
       type: "registry:ui",
       registryDependencies: ["button"],
-      files: ["registry/default/ui/carousel.tsx"],
+      files: [{
+        path: "registry/default/ui/carousel.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/carousel.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "chart": {
       name: "chart",
       description: "",
       type: "registry:ui",
       registryDependencies: ["card"],
-      files: ["registry/default/ui/chart.tsx"],
+      files: [{
+        path: "registry/default/ui/chart.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/chart.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "checkbox": {
       name: "checkbox",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/checkbox.tsx"],
+      files: [{
+        path: "registry/default/ui/checkbox.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/checkbox.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "collapsible": {
       name: "collapsible",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/collapsible.tsx"],
+      files: [{
+        path: "registry/default/ui/collapsible.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/collapsible.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "command": {
       name: "command",
       description: "",
       type: "registry:ui",
       registryDependencies: ["dialog"],
-      files: ["registry/default/ui/command.tsx"],
+      files: [{
+        path: "registry/default/ui/command.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/command.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "context-menu": {
       name: "context-menu",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/context-menu.tsx"],
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "dialog": {
       name: "dialog",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/dialog.tsx"],
+      files: [{
+        path: "registry/default/ui/dialog.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/dialog.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "drawer": {
       name: "drawer",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/drawer.tsx"],
+      files: [{
+        path: "registry/default/ui/drawer.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/drawer.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "dropdown-menu": {
       name: "dropdown-menu",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/dropdown-menu.tsx"],
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "form": {
       name: "form",
       description: "",
       type: "registry:ui",
       registryDependencies: ["button","label"],
-      files: ["registry/default/ui/form.tsx"],
+      files: [{
+        path: "registry/default/ui/form.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/form.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "hover-card": {
       name: "hover-card",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/hover-card.tsx"],
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "input": {
       name: "input",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/input.tsx"],
+      files: [{
+        path: "registry/default/ui/input.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/input.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "input-otp": {
       name: "input-otp",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/input-otp.tsx"],
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "label": {
       name: "label",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/label.tsx"],
+      files: [{
+        path: "registry/default/ui/label.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/label.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "menubar": {
       name: "menubar",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/menubar.tsx"],
+      files: [{
+        path: "registry/default/ui/menubar.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/menubar.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "navigation-menu": {
       name: "navigation-menu",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/navigation-menu.tsx"],
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "pagination": {
       name: "pagination",
       description: "",
       type: "registry:ui",
       registryDependencies: ["button"],
-      files: ["registry/default/ui/pagination.tsx"],
+      files: [{
+        path: "registry/default/ui/pagination.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/pagination.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "popover": {
       name: "popover",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/popover.tsx"],
+      files: [{
+        path: "registry/default/ui/popover.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/popover.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "progress": {
       name: "progress",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/progress.tsx"],
+      files: [{
+        path: "registry/default/ui/progress.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/progress.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "radio-group": {
       name: "radio-group",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/radio-group.tsx"],
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "resizable": {
       name: "resizable",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/resizable.tsx"],
+      files: [{
+        path: "registry/default/ui/resizable.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/resizable.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "scroll-area": {
       name: "scroll-area",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/scroll-area.tsx"],
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "select": {
       name: "select",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/select.tsx"],
+      files: [{
+        path: "registry/default/ui/select.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/select.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "separator": {
       name: "separator",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/separator.tsx"],
+      files: [{
+        path: "registry/default/ui/separator.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/separator.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "sheet": {
       name: "sheet",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/sheet.tsx"],
+      files: [{
+        path: "registry/default/ui/sheet.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/sheet.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "sidebar": {
       name: "sidebar",
       description: "",
       type: "registry:ui",
       registryDependencies: ["button","separator","sheet","tooltip","input","use-mobile","skeleton"],
-      files: ["registry/default/ui/sidebar.tsx"],
+      files: [{
+        path: "registry/default/ui/sidebar.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/sidebar.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "skeleton": {
       name: "skeleton",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/skeleton.tsx"],
+      files: [{
+        path: "registry/default/ui/skeleton.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/skeleton.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "slider": {
       name: "slider",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/slider.tsx"],
+      files: [{
+        path: "registry/default/ui/slider.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/slider.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "sonner": {
       name: "sonner",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/sonner.tsx"],
+      files: [{
+        path: "registry/default/ui/sonner.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/sonner.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "switch": {
       name: "switch",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/switch.tsx"],
+      files: [{
+        path: "registry/default/ui/switch.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/switch.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "table": {
       name: "table",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/table.tsx"],
+      files: [{
+        path: "registry/default/ui/table.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/table.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "tabs": {
       name: "tabs",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/tabs.tsx"],
+      files: [{
+        path: "registry/default/ui/tabs.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/tabs.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "textarea": {
       name: "textarea",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/textarea.tsx"],
+      files: [{
+        path: "registry/default/ui/textarea.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/textarea.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "toast": {
       name: "toast",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/toast.tsx","registry/default/hooks/use-toast.ts","registry/default/ui/toaster.tsx"],
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "toggle": {
       name: "toggle",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/toggle.tsx"],
+      files: [{
+        path: "registry/default/ui/toggle.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/toggle.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "toggle-group": {
       name: "toggle-group",
       description: "",
       type: "registry:ui",
       registryDependencies: ["toggle"],
-      files: ["registry/default/ui/toggle-group.tsx"],
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
     "tooltip": {
       name: "tooltip",
       description: "",
       type: "registry:ui",
       registryDependencies: undefined,
-      files: ["registry/default/ui/tooltip.tsx"],
+      files: [{
+        path: "registry/default/ui/tooltip.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      categories: undefined,
       component: React.lazy(() => import("@/registry/default/ui/tooltip.tsx")),
       source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "accordion-demo": {
-      name: "accordion-demo",
+    "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,
+    },
+    "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:example",
-      registryDependencies: ["accordion"],
-      files: ["registry/default/example/accordion-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/accordion-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "alert-demo": {
-      name: "alert-demo",
+    "chart-area-default": {
+      name: "chart-area-default",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["alert"],
-      files: ["registry/default/example/alert-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/alert-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "alert-destructive": {
-      name: "alert-destructive",
+    "chart-area-gradient": {
+      name: "chart-area-gradient",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["alert"],
-      files: ["registry/default/example/alert-destructive.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/alert-destructive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "alert-dialog-demo": {
-      name: "alert-dialog-demo",
+    "chart-area-icons": {
+      name: "chart-area-icons",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["alert-dialog","button"],
-      files: ["registry/default/example/alert-dialog-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/alert-dialog-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "aspect-ratio-demo": {
-      name: "aspect-ratio-demo",
+    "chart-area-interactive": {
+      name: "chart-area-interactive",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["aspect-ratio"],
-      files: ["registry/default/example/aspect-ratio-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/aspect-ratio-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "avatar-demo": {
-      name: "avatar-demo",
+    "chart-area-legend": {
+      name: "chart-area-legend",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["avatar"],
-      files: ["registry/default/example/avatar-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/avatar-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "badge-demo": {
-      name: "badge-demo",
+    "chart-area-linear": {
+      name: "chart-area-linear",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: ["registry/default/example/badge-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/badge-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "badge-destructive": {
-      name: "badge-destructive",
+    "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:example",
-      registryDependencies: ["badge"],
-      files: ["registry/default/example/badge-destructive.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/badge-destructive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "badge-outline": {
-      name: "badge-outline",
+    "chart-bar-label": {
+      name: "chart-bar-label",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: ["registry/default/example/badge-outline.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/badge-outline.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "badge-secondary": {
-      name: "badge-secondary",
+    "chart-bar-mixed": {
+      name: "chart-bar-mixed",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["badge"],
-      files: ["registry/default/example/badge-secondary.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/badge-secondary.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "breadcrumb-demo": {
-      name: "breadcrumb-demo",
+    "chart-bar-multiple": {
+      name: "chart-bar-multiple",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/default/example/breadcrumb-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/breadcrumb-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "breadcrumb-separator": {
-      name: "breadcrumb-separator",
+    "chart-bar-negative": {
+      name: "chart-bar-negative",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/default/example/breadcrumb-separator.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/breadcrumb-separator.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "breadcrumb-dropdown": {
-      name: "breadcrumb-dropdown",
+    "chart-bar-stacked": {
+      name: "chart-bar-stacked",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/default/example/breadcrumb-dropdown.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/breadcrumb-dropdown.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "breadcrumb-ellipsis": {
-      name: "breadcrumb-ellipsis",
+    "chart-line-default": {
+      name: "chart-line-default",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/default/example/breadcrumb-ellipsis.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/breadcrumb-ellipsis.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "breadcrumb-link": {
-      name: "breadcrumb-link",
+    "chart-line-dots-colors": {
+      name: "chart-line-dots-colors",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/default/example/breadcrumb-link.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/breadcrumb-link.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "breadcrumb-responsive": {
-      name: "breadcrumb-responsive",
+    "chart-line-dots-custom": {
+      name: "chart-line-dots-custom",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["breadcrumb"],
-      files: ["registry/default/example/breadcrumb-responsive.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/breadcrumb-responsive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "button-demo": {
-      name: "button-demo",
+    "chart-line-dots": {
+      name: "chart-line-dots",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/default/example/button-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/button-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "button-secondary": {
-      name: "button-secondary",
+    "chart-line-interactive": {
+      name: "chart-line-interactive",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/default/example/button-secondary.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/button-secondary.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "button-destructive": {
-      name: "button-destructive",
+    "chart-line-label-custom": {
+      name: "chart-line-label-custom",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/default/example/button-destructive.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/button-destructive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "button-outline": {
-      name: "button-outline",
+    "chart-line-label": {
+      name: "chart-line-label",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/default/example/button-outline.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/button-outline.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "button-ghost": {
-      name: "button-ghost",
+    "chart-line-linear": {
+      name: "chart-line-linear",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/default/example/button-ghost.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/button-ghost.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "button-link": {
-      name: "button-link",
+    "chart-line-multiple": {
+      name: "chart-line-multiple",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/default/example/button-link.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/button-link.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "button-with-icon": {
-      name: "button-with-icon",
+    "chart-line-step": {
+      name: "chart-line-step",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/default/example/button-with-icon.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/button-with-icon.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "button-loading": {
-      name: "button-loading",
+    "chart-pie-donut-active": {
+      name: "chart-pie-donut-active",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/default/example/button-loading.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/button-loading.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "button-icon": {
-      name: "button-icon",
+    "chart-pie-donut-text": {
+      name: "chart-pie-donut-text",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/default/example/button-icon.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/button-icon.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "button-as-child": {
-      name: "button-as-child",
+    "chart-pie-donut": {
+      name: "chart-pie-donut",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button"],
-      files: ["registry/default/example/button-as-child.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/button-as-child.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "calendar-demo": {
-      name: "calendar-demo",
+    "chart-pie-interactive": {
+      name: "chart-pie-interactive",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["calendar"],
-      files: ["registry/default/example/calendar-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/calendar-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "calendar-form": {
-      name: "calendar-form",
+    "chart-pie-label-custom": {
+      name: "chart-pie-label-custom",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["calendar","form","popover"],
-      files: ["registry/default/example/calendar-form.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/calendar-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "card-demo": {
-      name: "card-demo",
+    "chart-pie-label-list": {
+      name: "chart-pie-label-list",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["card","button","switch"],
-      files: ["registry/default/example/card-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/card-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "card-with-form": {
-      name: "card-with-form",
+    "chart-pie-label": {
+      name: "chart-pie-label",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button","card","input","label","select"],
-      files: ["registry/default/example/card-with-form.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/card-with-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "carousel-demo": {
-      name: "carousel-demo",
+    "chart-pie-legend": {
+      name: "chart-pie-legend",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/default/example/carousel-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/carousel-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "carousel-size": {
-      name: "carousel-size",
+    "chart-pie-separator-none": {
+      name: "chart-pie-separator-none",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/default/example/carousel-size.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/carousel-size.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "carousel-spacing": {
-      name: "carousel-spacing",
+    "chart-pie-simple": {
+      name: "chart-pie-simple",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/default/example/carousel-spacing.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/carousel-spacing.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "carousel-orientation": {
-      name: "carousel-orientation",
+    "chart-pie-stacked": {
+      name: "chart-pie-stacked",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/default/example/carousel-orientation.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/carousel-orientation.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "carousel-api": {
-      name: "carousel-api",
+    "chart-radar-default": {
+      name: "chart-radar-default",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/default/example/carousel-api.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/carousel-api.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "carousel-plugin": {
-      name: "carousel-plugin",
+    "chart-radar-dots": {
+      name: "chart-radar-dots",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["carousel"],
-      files: ["registry/default/example/carousel-plugin.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/carousel-plugin.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "checkbox-demo": {
-      name: "checkbox-demo",
+    "chart-radar-grid-circle-fill": {
+      name: "chart-radar-grid-circle-fill",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["checkbox"],
-      files: ["registry/default/example/checkbox-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/checkbox-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "checkbox-disabled": {
-      name: "checkbox-disabled",
+    "chart-radar-grid-circle-no-lines": {
+      name: "chart-radar-grid-circle-no-lines",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["checkbox"],
-      files: ["registry/default/example/checkbox-disabled.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/checkbox-disabled.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "checkbox-form-multiple": {
-      name: "checkbox-form-multiple",
+    "chart-radar-grid-circle": {
+      name: "chart-radar-grid-circle",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["checkbox","form"],
-      files: ["registry/default/example/checkbox-form-multiple.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/checkbox-form-multiple.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "checkbox-form-single": {
-      name: "checkbox-form-single",
+    "chart-radar-grid-custom": {
+      name: "chart-radar-grid-custom",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["checkbox","form"],
-      files: ["registry/default/example/checkbox-form-single.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/checkbox-form-single.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "checkbox-with-text": {
-      name: "checkbox-with-text",
+    "chart-radar-grid-fill": {
+      name: "chart-radar-grid-fill",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["checkbox"],
-      files: ["registry/default/example/checkbox-with-text.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/checkbox-with-text.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "collapsible-demo": {
-      name: "collapsible-demo",
+    "chart-radar-grid-none": {
+      name: "chart-radar-grid-none",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["collapsible"],
-      files: ["registry/default/example/collapsible-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/collapsible-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "combobox-demo": {
-      name: "combobox-demo",
+    "chart-radar-icons": {
+      name: "chart-radar-icons",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["command"],
-      files: ["registry/default/example/combobox-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/combobox-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "combobox-dropdown-menu": {
-      name: "combobox-dropdown-menu",
+    "chart-radar-label-custom": {
+      name: "chart-radar-label-custom",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["command","dropdown-menu","button"],
-      files: ["registry/default/example/combobox-dropdown-menu.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/combobox-dropdown-menu.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "combobox-form": {
-      name: "combobox-form",
+    "chart-radar-legend": {
+      name: "chart-radar-legend",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["command","form"],
-      files: ["registry/default/example/combobox-form.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/combobox-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "combobox-popover": {
-      name: "combobox-popover",
+    "chart-radar-lines-only": {
+      name: "chart-radar-lines-only",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["combobox","popover"],
-      files: ["registry/default/example/combobox-popover.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/combobox-popover.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "combobox-responsive": {
-      name: "combobox-responsive",
+    "chart-radar-multiple": {
+      name: "chart-radar-multiple",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["combobox","popover","drawer"],
-      files: ["registry/default/example/combobox-responsive.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/combobox-responsive.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "command-demo": {
-      name: "command-demo",
+    "chart-radar-radius": {
+      name: "chart-radar-radius",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["command"],
-      files: ["registry/default/example/command-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/command-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "command-dialog": {
-      name: "command-dialog",
+    "chart-radial-grid": {
+      name: "chart-radial-grid",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["command","dialog"],
-      files: ["registry/default/example/command-dialog.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/command-dialog.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "context-menu-demo": {
-      name: "context-menu-demo",
+    "chart-radial-label": {
+      name: "chart-radial-label",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["context-menu"],
-      files: ["registry/default/example/context-menu-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/context-menu-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "data-table-demo": {
-      name: "data-table-demo",
+    "chart-radial-shape": {
+      name: "chart-radial-shape",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["data-table"],
-      files: ["registry/default/example/data-table-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/data-table-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "date-picker-demo": {
-      name: "date-picker-demo",
+    "chart-radial-simple": {
+      name: "chart-radial-simple",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","popover"],
-      files: ["registry/default/example/date-picker-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/date-picker-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "date-picker-form": {
-      name: "date-picker-form",
+    "chart-radial-stacked": {
+      name: "chart-radial-stacked",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","form","popover"],
-      files: ["registry/default/example/date-picker-form.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/date-picker-form.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "date-picker-with-presets": {
-      name: "date-picker-with-presets",
+    "chart-radial-text": {
+      name: "chart-radial-text",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","popover","select"],
-      files: ["registry/default/example/date-picker-with-presets.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/date-picker-with-presets.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "date-picker-with-range": {
-      name: "date-picker-with-range",
+    "chart-tooltip-default": {
+      name: "chart-tooltip-default",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["button","calendar","popover"],
-      files: ["registry/default/example/date-picker-with-range.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/date-picker-with-range.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "dialog-demo": {
-      name: "dialog-demo",
+    "chart-tooltip-indicator-line": {
+      name: "chart-tooltip-indicator-line",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["dialog"],
-      files: ["registry/default/example/dialog-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/dialog-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "dialog-close-button": {
-      name: "dialog-close-button",
+    "chart-tooltip-indicator-none": {
+      name: "chart-tooltip-indicator-none",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["dialog","button"],
-      files: ["registry/default/example/dialog-close-button.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/dialog-close-button.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "drawer-demo": {
-      name: "drawer-demo",
+    "chart-tooltip-label-none": {
+      name: "chart-tooltip-label-none",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["drawer"],
-      files: ["registry/default/example/drawer-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/drawer-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "drawer-dialog": {
-      name: "drawer-dialog",
+    "chart-tooltip-label-custom": {
+      name: "chart-tooltip-label-custom",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["drawer","dialog"],
-      files: ["registry/default/example/drawer-dialog.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/drawer-dialog.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "dropdown-menu-demo": {
-      name: "dropdown-menu-demo",
+    "chart-tooltip-label-formatter": {
+      name: "chart-tooltip-label-formatter",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["dropdown-menu"],
-      files: ["registry/default/example/dropdown-menu-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/dropdown-menu-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "dropdown-menu-checkboxes": {
-      name: "dropdown-menu-checkboxes",
+    "chart-tooltip-formatter": {
+      name: "chart-tooltip-formatter",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["dropdown-menu","checkbox"],
-      files: ["registry/default/example/dropdown-menu-checkboxes.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/dropdown-menu-checkboxes.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "dropdown-menu-radio-group": {
-      name: "dropdown-menu-radio-group",
+    "chart-tooltip-icons": {
+      name: "chart-tooltip-icons",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["dropdown-menu","radio-group"],
-      files: ["registry/default/example/dropdown-menu-radio-group.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/dropdown-menu-radio-group.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "hover-card-demo": {
-      name: "hover-card-demo",
+    "chart-tooltip-advanced": {
+      name: "chart-tooltip-advanced",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["hover-card"],
-      files: ["registry/default/example/hover-card-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/hover-card-demo.tsx")),
-      source: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "input-demo": {
-      name: "input-demo",
+    "utils": {
+      name: "utils",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input"],
-      files: ["registry/default/example/input-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "input-disabled": {
-      name: "input-disabled",
+    "use-mobile": {
+      name: "use-mobile",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input"],
-      files: ["registry/default/example/input-disabled.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-disabled.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "input-file": {
-      name: "input-file",
+    "use-toast": {
+      name: "use-toast",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input"],
-      files: ["registry/default/example/input-file.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-file.tsx")),
+      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,
+    },
+    "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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "input-form": {
-      name: "input-form",
+    "sidebar-menu": {
+      name: "sidebar-menu",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input","button","form"],
-      files: ["registry/default/example/input-form.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-form.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "input-with-button": {
-      name: "input-with-button",
+    "sidebar-menu-action": {
+      name: "sidebar-menu-action",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input","button"],
-      files: ["registry/default/example/input-with-button.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-with-button.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "input-with-label": {
-      name: "input-with-label",
+    "sidebar-menu-sub": {
+      name: "sidebar-menu-sub",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input","button","label"],
-      files: ["registry/default/example/input-with-label.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-with-label.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "input-with-text": {
-      name: "input-with-text",
+    "sidebar-menu-collapsible": {
+      name: "sidebar-menu-collapsible",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input","button","label"],
-      files: ["registry/default/example/input-with-text.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-with-text.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "input-otp-demo": {
-      name: "input-otp-demo",
+    "sidebar-menu-badge": {
+      name: "sidebar-menu-badge",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: ["registry/default/example/input-otp-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-otp-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "input-otp-pattern": {
-      name: "input-otp-pattern",
+    "sidebar-rsc": {
+      name: "sidebar-rsc",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: ["registry/default/example/input-otp-pattern.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-otp-pattern.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "input-otp-separator": {
-      name: "input-otp-separator",
+    "sidebar-controlled": {
+      name: "sidebar-controlled",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: ["registry/default/example/input-otp-separator.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-otp-separator.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "input-otp-controlled": {
-      name: "input-otp-controlled",
+    "v0-sidebar-01": {
+      name: "v0-sidebar-01",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp"],
-      files: ["registry/default/example/input-otp-controlled.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-otp-controlled.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "input-otp-form": {
-      name: "input-otp-form",
+    "v0-sidebar-02": {
+      name: "v0-sidebar-02",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["input-otp","form"],
-      files: ["registry/default/example/input-otp-form.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/input-otp-form.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "label-demo": {
-      name: "label-demo",
+    "v0-sidebar-03": {
+      name: "v0-sidebar-03",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["label"],
-      files: ["registry/default/example/label-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/label-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "menubar-demo": {
-      name: "menubar-demo",
+    "v0-sidebar-04": {
+      name: "v0-sidebar-04",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["menubar"],
-      files: ["registry/default/example/menubar-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/menubar-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "navigation-menu-demo": {
-      name: "navigation-menu-demo",
+    "v0-sidebar-05": {
+      name: "v0-sidebar-05",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["navigation-menu"],
-      files: ["registry/default/example/navigation-menu-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/navigation-menu-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "pagination-demo": {
-      name: "pagination-demo",
+    "v0-sidebar-06": {
+      name: "v0-sidebar-06",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["pagination"],
-      files: ["registry/default/example/pagination-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/pagination-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "popover-demo": {
-      name: "popover-demo",
+    "v0-sidebar-07": {
+      name: "v0-sidebar-07",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["popover"],
-      files: ["registry/default/example/popover-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/popover-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "progress-demo": {
-      name: "progress-demo",
+    "v0-sidebar-08": {
+      name: "v0-sidebar-08",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["progress"],
-      files: ["registry/default/example/progress-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/progress-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "radio-group-demo": {
-      name: "radio-group-demo",
+    "v0-sidebar-09": {
+      name: "v0-sidebar-09",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["radio-group"],
-      files: ["registry/default/example/radio-group-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/radio-group-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "radio-group-form": {
-      name: "radio-group-form",
+    "v0-sidebar-10": {
+      name: "v0-sidebar-10",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["radio-group","form"],
-      files: ["registry/default/example/radio-group-form.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/radio-group-form.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "resizable-demo": {
-      name: "resizable-demo",
+    "v0-sidebar-11": {
+      name: "v0-sidebar-11",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: ["registry/default/example/resizable-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/resizable-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "resizable-demo-with-handle": {
-      name: "resizable-demo-with-handle",
+    "v0-sidebar-12": {
+      name: "v0-sidebar-12",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: ["registry/default/example/resizable-demo-with-handle.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/resizable-demo-with-handle.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "resizable-vertical": {
-      name: "resizable-vertical",
+    "v0-sidebar-13": {
+      name: "v0-sidebar-13",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: ["registry/default/example/resizable-vertical.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/resizable-vertical.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "resizable-handle": {
-      name: "resizable-handle",
+    "v0-sidebar-14": {
+      name: "v0-sidebar-14",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["resizable"],
-      files: ["registry/default/example/resizable-handle.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/resizable-handle.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "scroll-area-demo": {
-      name: "scroll-area-demo",
+    "v0-sidebar-15": {
+      name: "v0-sidebar-15",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["scroll-area"],
-      files: ["registry/default/example/scroll-area-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/scroll-area-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "scroll-area-horizontal-demo": {
-      name: "scroll-area-horizontal-demo",
+    "v0-login-01": {
+      name: "v0-login-01",
       description: "",
-      type: "registry:example",
-      registryDependencies: ["scroll-area"],
-      files: ["registry/default/example/scroll-area-horizontal-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/scroll-area-horizontal-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "select-demo": {
-      name: "select-demo",
+    "accordion-demo": {
+      name: "accordion-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["select"],
-      files: ["registry/default/example/select-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/select-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "select-scrollable": {
-      name: "select-scrollable",
+    "alert-demo": {
+      name: "alert-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["select"],
-      files: ["registry/default/example/select-scrollable.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/select-scrollable.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "select-form": {
-      name: "select-form",
+    "alert-destructive": {
+      name: "alert-destructive",
       description: "",
       type: "registry:example",
-      registryDependencies: ["select"],
-      files: ["registry/default/example/select-form.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/select-form.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "separator-demo": {
-      name: "separator-demo",
+    "alert-dialog-demo": {
+      name: "alert-dialog-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["separator"],
-      files: ["registry/default/example/separator-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/separator-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "sheet-demo": {
-      name: "sheet-demo",
+    "aspect-ratio-demo": {
+      name: "aspect-ratio-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["sheet"],
-      files: ["registry/default/example/sheet-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/sheet-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "sheet-side": {
-      name: "sheet-side",
+    "avatar-demo": {
+      name: "avatar-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["sheet"],
-      files: ["registry/default/example/sheet-side.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/sheet-side.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "skeleton-demo": {
-      name: "skeleton-demo",
+    "badge-demo": {
+      name: "badge-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["skeleton"],
-      files: ["registry/default/example/skeleton-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/skeleton-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "skeleton-card": {
-      name: "skeleton-card",
+    "badge-destructive": {
+      name: "badge-destructive",
       description: "",
       type: "registry:example",
-      registryDependencies: ["skeleton"],
-      files: ["registry/default/example/skeleton-card.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/skeleton-card.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "slider-demo": {
-      name: "slider-demo",
+    "badge-outline": {
+      name: "badge-outline",
       description: "",
       type: "registry:example",
-      registryDependencies: ["slider"],
-      files: ["registry/default/example/slider-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/slider-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "sonner-demo": {
-      name: "sonner-demo",
+    "badge-secondary": {
+      name: "badge-secondary",
       description: "",
       type: "registry:example",
-      registryDependencies: ["sonner"],
-      files: ["registry/default/example/sonner-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/sonner-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "switch-demo": {
-      name: "switch-demo",
+    "breadcrumb-demo": {
+      name: "breadcrumb-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["switch"],
-      files: ["registry/default/example/switch-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/switch-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "switch-form": {
-      name: "switch-form",
+    "breadcrumb-separator": {
+      name: "breadcrumb-separator",
       description: "",
       type: "registry:example",
-      registryDependencies: ["switch","form"],
-      files: ["registry/default/example/switch-form.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/switch-form.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "table-demo": {
-      name: "table-demo",
+    "breadcrumb-dropdown": {
+      name: "breadcrumb-dropdown",
       description: "",
       type: "registry:example",
-      registryDependencies: ["table"],
-      files: ["registry/default/example/table-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/table-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "tabs-demo": {
-      name: "tabs-demo",
+    "breadcrumb-ellipsis": {
+      name: "breadcrumb-ellipsis",
       description: "",
       type: "registry:example",
-      registryDependencies: ["tabs"],
-      files: ["registry/default/example/tabs-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/tabs-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-demo": {
-      name: "textarea-demo",
+    "breadcrumb-link": {
+      name: "breadcrumb-link",
       description: "",
       type: "registry:example",
-      registryDependencies: ["textarea"],
-      files: ["registry/default/example/textarea-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/textarea-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-disabled": {
-      name: "textarea-disabled",
+    "breadcrumb-responsive": {
+      name: "breadcrumb-responsive",
       description: "",
       type: "registry:example",
-      registryDependencies: ["textarea"],
-      files: ["registry/default/example/textarea-disabled.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/textarea-disabled.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-form": {
-      name: "textarea-form",
+    "button-demo": {
+      name: "button-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["textarea","form"],
-      files: ["registry/default/example/textarea-form.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/textarea-form.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-with-button": {
-      name: "textarea-with-button",
+    "button-secondary": {
+      name: "button-secondary",
       description: "",
       type: "registry:example",
-      registryDependencies: ["textarea","button"],
-      files: ["registry/default/example/textarea-with-button.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/textarea-with-button.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-with-label": {
-      name: "textarea-with-label",
+    "button-destructive": {
+      name: "button-destructive",
       description: "",
       type: "registry:example",
-      registryDependencies: ["textarea","label"],
-      files: ["registry/default/example/textarea-with-label.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/textarea-with-label.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "textarea-with-text": {
-      name: "textarea-with-text",
+    "button-outline": {
+      name: "button-outline",
       description: "",
       type: "registry:example",
-      registryDependencies: ["textarea","label"],
-      files: ["registry/default/example/textarea-with-text.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/textarea-with-text.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toast-demo": {
-      name: "toast-demo",
+    "button-ghost": {
+      name: "button-ghost",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toast"],
-      files: ["registry/default/example/toast-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toast-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toast-destructive": {
-      name: "toast-destructive",
+    "button-link": {
+      name: "button-link",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toast"],
-      files: ["registry/default/example/toast-destructive.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toast-destructive.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toast-simple": {
-      name: "toast-simple",
+    "button-with-icon": {
+      name: "button-with-icon",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toast"],
-      files: ["registry/default/example/toast-simple.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toast-simple.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toast-with-action": {
-      name: "toast-with-action",
+    "button-loading": {
+      name: "button-loading",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toast"],
-      files: ["registry/default/example/toast-with-action.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toast-with-action.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toast-with-title": {
-      name: "toast-with-title",
+    "button-icon": {
+      name: "button-icon",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toast"],
-      files: ["registry/default/example/toast-with-title.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toast-with-title.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-demo": {
-      name: "toggle-group-demo",
+    "button-as-child": {
+      name: "button-as-child",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/default/example/toggle-group-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-group-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-disabled": {
-      name: "toggle-group-disabled",
+    "calendar-demo": {
+      name: "calendar-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/default/example/toggle-group-disabled.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-group-disabled.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-lg": {
-      name: "toggle-group-lg",
+    "calendar-form": {
+      name: "calendar-form",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/default/example/toggle-group-lg.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-group-lg.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-outline": {
-      name: "toggle-group-outline",
+    "card-demo": {
+      name: "card-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/default/example/toggle-group-outline.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-group-outline.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-sm": {
-      name: "toggle-group-sm",
+    "card-with-form": {
+      name: "card-with-form",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/default/example/toggle-group-sm.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-group-sm.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-group-single": {
-      name: "toggle-group-single",
+    "carousel-demo": {
+      name: "carousel-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle-group"],
-      files: ["registry/default/example/toggle-group-single.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-group-single.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-demo": {
-      name: "toggle-demo",
+    "carousel-size": {
+      name: "carousel-size",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/default/example/toggle-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-disabled": {
-      name: "toggle-disabled",
+    "carousel-spacing": {
+      name: "carousel-spacing",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/default/example/toggle-disabled.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-disabled.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-lg": {
-      name: "toggle-lg",
+    "carousel-orientation": {
+      name: "carousel-orientation",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/default/example/toggle-lg.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-lg.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-outline": {
-      name: "toggle-outline",
+    "carousel-api": {
+      name: "carousel-api",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/default/example/toggle-outline.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-outline.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-sm": {
-      name: "toggle-sm",
+    "carousel-plugin": {
+      name: "carousel-plugin",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/default/example/toggle-sm.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-sm.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "toggle-with-text": {
-      name: "toggle-with-text",
+    "checkbox-demo": {
+      name: "checkbox-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: ["toggle"],
-      files: ["registry/default/example/toggle-with-text.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/toggle-with-text.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "tooltip-demo": {
-      name: "tooltip-demo",
+    "checkbox-disabled": {
+      name: "checkbox-disabled",
       description: "",
       type: "registry:example",
-      registryDependencies: ["tooltip"],
-      files: ["registry/default/example/tooltip-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/tooltip-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-blockquote": {
-      name: "typography-blockquote",
+    "checkbox-form-multiple": {
+      name: "checkbox-form-multiple",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-blockquote.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-blockquote.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-demo": {
-      name: "typography-demo",
+    "checkbox-form-single": {
+      name: "checkbox-form-single",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-h1": {
-      name: "typography-h1",
+    "checkbox-with-text": {
+      name: "checkbox-with-text",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-h1.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-h1.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-h2": {
-      name: "typography-h2",
+    "collapsible-demo": {
+      name: "collapsible-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-h2.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-h2.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-h3": {
-      name: "typography-h3",
+    "combobox-demo": {
+      name: "combobox-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-h3.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-h3.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-h4": {
-      name: "typography-h4",
+    "combobox-dropdown-menu": {
+      name: "combobox-dropdown-menu",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-h4.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-h4.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-inline-code": {
-      name: "typography-inline-code",
+    "combobox-form": {
+      name: "combobox-form",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-inline-code.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-inline-code.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-large": {
-      name: "typography-large",
+    "combobox-popover": {
+      name: "combobox-popover",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-large.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-large.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-lead": {
-      name: "typography-lead",
+    "combobox-responsive": {
+      name: "combobox-responsive",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-lead.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-lead.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-list": {
-      name: "typography-list",
+    "command-demo": {
+      name: "command-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-list.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-list.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-muted": {
-      name: "typography-muted",
+    "command-dialog": {
+      name: "command-dialog",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-muted.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-muted.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-p": {
-      name: "typography-p",
+    "context-menu-demo": {
+      name: "context-menu-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-p.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-p.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-small": {
-      name: "typography-small",
+    "data-table-demo": {
+      name: "data-table-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-small.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-small.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "typography-table": {
-      name: "typography-table",
+    "date-picker-demo": {
+      name: "date-picker-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/typography-table.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/typography-table.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "mode-toggle": {
-      name: "mode-toggle",
+    "date-picker-form": {
+      name: "date-picker-form",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/mode-toggle.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/mode-toggle.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "chart-bar-demo": {
-      name: "chart-bar-demo",
+    "date-picker-with-presets": {
+      name: "date-picker-with-presets",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/chart-bar-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/chart-bar-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "chart-bar-demo-grid": {
-      name: "chart-bar-demo-grid",
+    "date-picker-with-range": {
+      name: "date-picker-with-range",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/chart-bar-demo-grid.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/chart-bar-demo-grid.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "chart-bar-demo-axis": {
-      name: "chart-bar-demo-axis",
+    "dialog-demo": {
+      name: "dialog-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/chart-bar-demo-axis.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/chart-bar-demo-axis.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "chart-bar-demo-tooltip": {
-      name: "chart-bar-demo-tooltip",
+    "dialog-close-button": {
+      name: "dialog-close-button",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/chart-bar-demo-tooltip.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/chart-bar-demo-tooltip.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "chart-bar-demo-legend": {
-      name: "chart-bar-demo-legend",
+    "drawer-demo": {
+      name: "drawer-demo",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/chart-bar-demo-legend.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/chart-bar-demo-legend.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "chart-tooltip-demo": {
-      name: "chart-tooltip-demo",
+    "drawer-dialog": {
+      name: "drawer-dialog",
       description: "",
       type: "registry:example",
-      registryDependencies: undefined,
-      files: ["registry/default/example/chart-tooltip-demo.tsx"],
-      component: React.lazy(() => import("@/registry/default/example/chart-tooltip-demo.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "demo-sidebar": {
-      name: "demo-sidebar",
+    "dropdown-menu-demo": {
+      name: "dropdown-menu-demo",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/default/block/demo-sidebar.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/demo-sidebar.tsx")),
-      source: "__registry__/default/block/demo-sidebar.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "demo-sidebar-header": {
-      name: "demo-sidebar-header",
+    "dropdown-menu-checkboxes": {
+      name: "dropdown-menu-checkboxes",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/default/block/demo-sidebar-header.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/demo-sidebar-header.tsx")),
-      source: "__registry__/default/block/demo-sidebar-header.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "demo-sidebar-footer": {
-      name: "demo-sidebar-footer",
+    "dropdown-menu-radio-group": {
+      name: "dropdown-menu-radio-group",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/default/block/demo-sidebar-footer.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/demo-sidebar-footer.tsx")),
-      source: "__registry__/default/block/demo-sidebar-footer.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "demo-sidebar-group": {
-      name: "demo-sidebar-group",
+    "hover-card-demo": {
+      name: "hover-card-demo",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/default/block/demo-sidebar-group.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/demo-sidebar-group.tsx")),
-      source: "__registry__/default/block/demo-sidebar-group.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "demo-sidebar-group-collapsible": {
-      name: "demo-sidebar-group-collapsible",
+    "input-demo": {
+      name: "input-demo",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/default/block/demo-sidebar-group-collapsible.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/demo-sidebar-group-collapsible.tsx")),
-      source: "__registry__/default/block/demo-sidebar-group-collapsible.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "demo-sidebar-group-action": {
-      name: "demo-sidebar-group-action",
+    "input-disabled": {
+      name: "input-disabled",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/default/block/demo-sidebar-group-action.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/demo-sidebar-group-action.tsx")),
-      source: "__registry__/default/block/demo-sidebar-group-action.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "demo-sidebar-menu": {
-      name: "demo-sidebar-menu",
+    "input-file": {
+      name: "input-file",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/default/block/demo-sidebar-menu.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/demo-sidebar-menu.tsx")),
-      source: "__registry__/default/block/demo-sidebar-menu.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "demo-sidebar-menu-action": {
-      name: "demo-sidebar-menu-action",
+    "input-form": {
+      name: "input-form",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/default/block/demo-sidebar-menu-action.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/demo-sidebar-menu-action.tsx")),
-      source: "__registry__/default/block/demo-sidebar-menu-action.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "demo-sidebar-menu-sub": {
-      name: "demo-sidebar-menu-sub",
+    "input-with-button": {
+      name: "input-with-button",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/default/block/demo-sidebar-menu-sub.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/demo-sidebar-menu-sub.tsx")),
-      source: "__registry__/default/block/demo-sidebar-menu-sub.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "demo-sidebar-menu-collapsible": {
-      name: "demo-sidebar-menu-collapsible",
+    "input-with-label": {
+      name: "input-with-label",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/default/block/demo-sidebar-menu-collapsible.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/demo-sidebar-menu-collapsible.tsx")),
-      source: "__registry__/default/block/demo-sidebar-menu-collapsible.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "demo-sidebar-menu-badge": {
-      name: "demo-sidebar-menu-badge",
+    "input-with-text": {
+      name: "input-with-text",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/default/block/demo-sidebar-menu-badge.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/demo-sidebar-menu-badge.tsx")),
-      source: "__registry__/default/block/demo-sidebar-menu-badge.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "demo-sidebar-rsc": {
-      name: "demo-sidebar-rsc",
+    "input-otp-demo": {
+      name: "input-otp-demo",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/default/block/demo-sidebar-rsc.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/demo-sidebar-rsc.tsx")),
-      source: "__registry__/default/block/demo-sidebar-rsc.tsx",
-      category: "",
-      subcategory: "",
-      chunks: []
+      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,
     },
-    "demo-sidebar-controlled": {
-      name: "demo-sidebar-controlled",
+    "input-otp-pattern": {
+      name: "input-otp-pattern",
       description: "",
-      type: "registry:block",
-      registryDependencies: undefined,
-      files: ["registry/default/block/demo-sidebar-controlled.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/demo-sidebar-controlled.tsx")),
-      source: "__registry__/default/block/demo-sidebar-controlled.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: ["registry/default/block/sidebar-01/page.tsx","registry/default/block/sidebar-01/components/app-sidebar.tsx","registry/default/block/sidebar-01/components/search-form.tsx","registry/default/block/sidebar-01/components/version-switcher.tsx"],
-      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: ["registry/default/block/sidebar-02/page.tsx","registry/default/block/sidebar-02/components/app-sidebar.tsx","registry/default/block/sidebar-02/components/search-form.tsx","registry/default/block/sidebar-02/components/version-switcher.tsx"],
-      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: ["registry/default/block/sidebar-03/page.tsx","registry/default/block/sidebar-03/components/app-sidebar.tsx"],
-      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: ["registry/default/block/sidebar-04/page.tsx","registry/default/block/sidebar-04/components/app-sidebar.tsx"],
-      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: ["registry/default/block/sidebar-05/page.tsx","registry/default/block/sidebar-05/components/app-sidebar.tsx","registry/default/block/sidebar-05/components/search-form.tsx"],
-      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: ["registry/default/block/sidebar-06/page.tsx","registry/default/block/sidebar-06/components/app-sidebar.tsx","registry/default/block/sidebar-06/components/nav-main.tsx","registry/default/block/sidebar-06/components/sidebar-opt-in-form.tsx"],
-      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: ["registry/default/block/sidebar-07/page.tsx","registry/default/block/sidebar-07/components/app-sidebar.tsx","registry/default/block/sidebar-07/components/nav-main.tsx","registry/default/block/sidebar-07/components/nav-projects.tsx","registry/default/block/sidebar-07/components/nav-user.tsx","registry/default/block/sidebar-07/components/team-switcher.tsx"],
-      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: ["registry/default/block/sidebar-08/page.tsx","registry/default/block/sidebar-08/components/app-sidebar.tsx","registry/default/block/sidebar-08/components/nav-main.tsx","registry/default/block/sidebar-08/components/nav-projects.tsx","registry/default/block/sidebar-08/components/nav-secondary.tsx","registry/default/block/sidebar-08/components/nav-user.tsx"],
-      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: ["registry/default/block/sidebar-09/page.tsx","registry/default/block/sidebar-09/components/nav-user.tsx"],
-      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: ["registry/default/block/sidebar-10/page.tsx","registry/default/block/sidebar-10/components/app-sidebar.tsx","registry/default/block/sidebar-10/components/nav-actions.tsx","registry/default/block/sidebar-10/components/nav-favorites.tsx","registry/default/block/sidebar-10/components/nav-main.tsx","registry/default/block/sidebar-10/components/nav-secondary.tsx","registry/default/block/sidebar-10/components/nav-workspaces.tsx","registry/default/block/sidebar-10/components/team-switcher.tsx"],
-      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: ["registry/default/block/sidebar-11/page.tsx","registry/default/block/sidebar-11/components/app-sidebar.tsx"],
-      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: ["registry/default/block/sidebar-12/page.tsx","registry/default/block/sidebar-12/components/app-sidebar.tsx","registry/default/block/sidebar-12/components/calendars.tsx","registry/default/block/sidebar-12/components/date-picker.tsx","registry/default/block/sidebar-12/components/nav-user.tsx"],
-      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: ["registry/default/block/sidebar-13/page.tsx","registry/default/block/sidebar-13/components/settings-dialog.tsx"],
-      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: ["registry/default/block/sidebar-14/page.tsx","registry/default/block/sidebar-14/components/app-sidebar.tsx"],
-      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: ["registry/default/block/sidebar-15/page.tsx","registry/default/block/sidebar-15/components/calendars.tsx","registry/default/block/sidebar-15/components/date-picker.tsx","registry/default/block/sidebar-15/components/nav-favorites.tsx","registry/default/block/sidebar-15/components/nav-main.tsx","registry/default/block/sidebar-15/components/nav-secondary.tsx","registry/default/block/sidebar-15/components/nav-user.tsx","registry/default/block/sidebar-15/components/nav-workspaces.tsx","registry/default/block/sidebar-15/components/sidebar-left.tsx","registry/default/block/sidebar-15/components/sidebar-right.tsx","registry/default/block/sidebar-15/components/team-switcher.tsx"],
-      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: ["registry/default/block/login-01/page.tsx","registry/default/block/login-01/components/login-form.tsx"],
-      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: ["registry/default/block/chart-area-axes.tsx"],
-      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: ["registry/default/block/chart-area-default.tsx"],
-      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: ["registry/default/block/chart-area-gradient.tsx"],
-      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: ["registry/default/block/chart-area-icons.tsx"],
-      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: ["registry/default/block/chart-area-interactive.tsx"],
-      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: ["registry/default/block/chart-area-legend.tsx"],
-      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: ["registry/default/block/chart-area-linear.tsx"],
-      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: ["registry/default/block/chart-area-stacked-expand.tsx"],
-      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: ["registry/default/block/chart-area-stacked.tsx"],
-      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: ["registry/default/block/chart-area-step.tsx"],
-      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: ["registry/default/block/chart-bar-active.tsx"],
-      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: ["registry/default/block/chart-bar-default.tsx"],
-      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: ["registry/default/block/chart-bar-horizontal.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-bar-horizontal.tsx")),
-      source: "__registry__/default/block/chart-bar-horizontal.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+      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,
     },
-    "chart-bar-interactive": {
-      name: "chart-bar-interactive",
-      description: "An interactive bar chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-bar-interactive.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-bar-interactive.tsx")),
-      source: "__registry__/default/block/chart-bar-interactive.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "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,
     },
-    "chart-bar-label-custom": {
-      name: "chart-bar-label-custom",
-      description: "A bar chart with a custom label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-bar-label-custom.tsx"],
-      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: []
+    "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,
     },
-    "chart-bar-label": {
-      name: "chart-bar-label",
-      description: "A bar chart with a label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-bar-label.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-bar-label.tsx")),
-      source: "__registry__/default/block/chart-bar-label.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "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,
     },
-    "chart-bar-mixed": {
-      name: "chart-bar-mixed",
-      description: "A mixed bar chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-bar-mixed.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-bar-mixed.tsx")),
-      source: "__registry__/default/block/chart-bar-mixed.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "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,
     },
-    "chart-bar-multiple": {
-      name: "chart-bar-multiple",
-      description: "A multiple bar chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-bar-multiple.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-bar-multiple.tsx")),
-      source: "__registry__/default/block/chart-bar-multiple.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "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,
     },
-    "chart-bar-negative": {
-      name: "chart-bar-negative",
-      description: "A bar chart with negative values",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-bar-negative.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-bar-negative.tsx")),
-      source: "__registry__/default/block/chart-bar-negative.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "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,
     },
-    "chart-bar-stacked": {
-      name: "chart-bar-stacked",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-bar-stacked.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-bar-stacked.tsx")),
-      source: "__registry__/default/block/chart-bar-stacked.tsx",
-      category: "Charts",
-      subcategory: "Bar",
-      chunks: []
+    "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,
     },
-    "chart-line-default": {
-      name: "chart-line-default",
-      description: "A line chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-line-default.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-line-default.tsx")),
-      source: "__registry__/default/block/chart-line-default.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "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,
     },
-    "chart-line-dots-colors": {
-      name: "chart-line-dots-colors",
-      description: "A line chart with dots and colors",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-line-dots-colors.tsx"],
-      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: []
+    "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,
     },
-    "chart-line-dots-custom": {
-      name: "chart-line-dots-custom",
-      description: "A line chart with custom dots",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-line-dots-custom.tsx"],
-      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: []
+    "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,
     },
-    "chart-line-dots": {
-      name: "chart-line-dots",
-      description: "A line chart with dots",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-line-dots.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-line-dots.tsx")),
-      source: "__registry__/default/block/chart-line-dots.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "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,
     },
-    "chart-line-interactive": {
-      name: "chart-line-interactive",
-      description: "An interactive line chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-line-interactive.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-line-interactive.tsx")),
-      source: "__registry__/default/block/chart-line-interactive.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "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,
     },
-    "chart-line-label-custom": {
-      name: "chart-line-label-custom",
-      description: "A line chart with a custom label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-line-label-custom.tsx"],
-      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: []
+    "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,
     },
-    "chart-line-label": {
-      name: "chart-line-label",
-      description: "A line chart with a label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-line-label.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-line-label.tsx")),
-      source: "__registry__/default/block/chart-line-label.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "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,
     },
-    "chart-line-linear": {
-      name: "chart-line-linear",
-      description: "A linear line chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-line-linear.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-line-linear.tsx")),
-      source: "__registry__/default/block/chart-line-linear.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "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,
     },
-    "chart-line-multiple": {
-      name: "chart-line-multiple",
-      description: "A multiple line chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-line-multiple.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-line-multiple.tsx")),
-      source: "__registry__/default/block/chart-line-multiple.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "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,
     },
-    "chart-line-step": {
-      name: "chart-line-step",
-      description: "A line chart with step",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-line-step.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-line-step.tsx")),
-      source: "__registry__/default/block/chart-line-step.tsx",
-      category: "Charts",
-      subcategory: "Line",
-      chunks: []
+    "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,
     },
-    "chart-pie-donut-active": {
-      name: "chart-pie-donut-active",
-      description: "A donut chart with an active sector",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-donut-active.tsx"],
-      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: []
+    "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,
     },
-    "chart-pie-donut-text": {
-      name: "chart-pie-donut-text",
-      description: "A donut chart with text",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-donut-text.tsx"],
-      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: []
+    "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,
     },
-    "chart-pie-donut": {
-      name: "chart-pie-donut",
-      description: "A donut chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-donut.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-pie-donut.tsx")),
-      source: "__registry__/default/block/chart-pie-donut.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "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,
     },
-    "chart-pie-interactive": {
-      name: "chart-pie-interactive",
-      description: "An interactive pie chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-interactive.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-pie-interactive.tsx")),
-      source: "__registry__/default/block/chart-pie-interactive.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "separator-demo": {
+      name: "separator-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["separator"],
+      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,
     },
-    "chart-pie-label-custom": {
-      name: "chart-pie-label-custom",
-      description: "A pie chart with a custom label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-label-custom.tsx"],
-      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: []
+    "sheet-demo": {
+      name: "sheet-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["sheet"],
+      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,
     },
-    "chart-pie-label-list": {
-      name: "chart-pie-label-list",
-      description: "A pie chart with a label list",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-label-list.tsx"],
-      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: []
+    "sheet-side": {
+      name: "sheet-side",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["sheet"],
+      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,
     },
-    "chart-pie-label": {
-      name: "chart-pie-label",
-      description: "A pie chart with a label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-label.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-pie-label.tsx")),
-      source: "__registry__/default/block/chart-pie-label.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "skeleton-demo": {
+      name: "skeleton-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["skeleton"],
+      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,
     },
-    "chart-pie-legend": {
-      name: "chart-pie-legend",
-      description: "A pie chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-legend.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-pie-legend.tsx")),
-      source: "__registry__/default/block/chart-pie-legend.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "skeleton-card": {
+      name: "skeleton-card",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["skeleton"],
+      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,
     },
-    "chart-pie-separator-none": {
-      name: "chart-pie-separator-none",
-      description: "A pie chart with no separator",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-separator-none.tsx"],
-      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: []
+    "slider-demo": {
+      name: "slider-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["slider"],
+      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,
     },
-    "chart-pie-simple": {
-      name: "chart-pie-simple",
-      description: "A simple pie chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-simple.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-pie-simple.tsx")),
-      source: "__registry__/default/block/chart-pie-simple.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "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,
     },
-    "chart-pie-stacked": {
-      name: "chart-pie-stacked",
-      description: "A pie chart with stacked sections",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-pie-stacked.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-pie-stacked.tsx")),
-      source: "__registry__/default/block/chart-pie-stacked.tsx",
-      category: "Charts",
-      subcategory: "Pie",
-      chunks: []
+    "switch-demo": {
+      name: "switch-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["switch"],
+      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,
     },
-    "chart-radar-default": {
-      name: "chart-radar-default",
-      description: "A radar chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-default.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radar-default.tsx")),
-      source: "__registry__/default/block/chart-radar-default.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "switch-form": {
+      name: "switch-form",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["switch","form"],
+      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,
     },
-    "chart-radar-dots": {
-      name: "chart-radar-dots",
-      description: "A radar chart with dots",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-dots.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radar-dots.tsx")),
-      source: "__registry__/default/block/chart-radar-dots.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "table-demo": {
+      name: "table-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["table"],
+      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,
     },
-    "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: ["registry/default/block/chart-radar-grid-circle-fill.tsx"],
-      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: []
+    "tabs-demo": {
+      name: "tabs-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["tabs"],
+      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,
     },
-    "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: ["registry/default/block/chart-radar-grid-circle-no-lines.tsx"],
-      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: []
+    "textarea-demo": {
+      name: "textarea-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea"],
+      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,
     },
-    "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: ["registry/default/block/chart-radar-grid-circle.tsx"],
-      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: []
+    "textarea-disabled": {
+      name: "textarea-disabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea"],
+      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,
     },
-    "chart-radar-grid-custom": {
-      name: "chart-radar-grid-custom",
-      description: "A radar chart with a custom grid",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-grid-custom.tsx"],
-      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: []
+    "textarea-form": {
+      name: "textarea-form",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea","form"],
+      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,
     },
-    "chart-radar-grid-fill": {
-      name: "chart-radar-grid-fill",
-      description: "A radar chart with a grid filled",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-grid-fill.tsx"],
-      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: []
+    "textarea-with-button": {
+      name: "textarea-with-button",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea","button"],
+      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,
     },
-    "chart-radar-grid-none": {
-      name: "chart-radar-grid-none",
-      description: "A radar chart with no grid",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-grid-none.tsx"],
-      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: []
+    "textarea-with-label": {
+      name: "textarea-with-label",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea","label"],
+      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,
     },
-    "chart-radar-icons": {
-      name: "chart-radar-icons",
-      description: "A radar chart with icons",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-icons.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radar-icons.tsx")),
-      source: "__registry__/default/block/chart-radar-icons.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "textarea-with-text": {
+      name: "textarea-with-text",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["textarea","label"],
+      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,
     },
-    "chart-radar-label-custom": {
-      name: "chart-radar-label-custom",
-      description: "A radar chart with a custom label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-label-custom.tsx"],
-      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: []
+    "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,
     },
-    "chart-radar-legend": {
-      name: "chart-radar-legend",
-      description: "A radar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-legend.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radar-legend.tsx")),
-      source: "__registry__/default/block/chart-radar-legend.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "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,
     },
-    "chart-radar-lines-only": {
-      name: "chart-radar-lines-only",
-      description: "A radar chart with lines only",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-lines-only.tsx"],
-      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: []
+    "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,
     },
-    "chart-radar-multiple": {
-      name: "chart-radar-multiple",
-      description: "A radar chart with multiple data",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-multiple.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radar-multiple.tsx")),
-      source: "__registry__/default/block/chart-radar-multiple.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "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,
     },
-    "chart-radar-radius": {
-      name: "chart-radar-radius",
-      description: "A radar chart with a radius axis",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radar-radius.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radar-radius.tsx")),
-      source: "__registry__/default/block/chart-radar-radius.tsx",
-      category: "Charts",
-      subcategory: "Radar",
-      chunks: []
+    "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,
     },
-    "chart-radial-grid": {
-      name: "chart-radial-grid",
-      description: "A radial chart with a grid",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radial-grid.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radial-grid.tsx")),
-      source: "__registry__/default/block/chart-radial-grid.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "toggle-group-demo": {
+      name: "toggle-group-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      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,
     },
-    "chart-radial-label": {
-      name: "chart-radial-label",
-      description: "A radial chart with a label",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radial-label.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radial-label.tsx")),
-      source: "__registry__/default/block/chart-radial-label.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "toggle-group-disabled": {
+      name: "toggle-group-disabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      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,
     },
-    "chart-radial-shape": {
-      name: "chart-radial-shape",
-      description: "A radial chart with a custom shape",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radial-shape.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radial-shape.tsx")),
-      source: "__registry__/default/block/chart-radial-shape.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "toggle-group-lg": {
+      name: "toggle-group-lg",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      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,
     },
-    "chart-radial-simple": {
-      name: "chart-radial-simple",
-      description: "A radial chart",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radial-simple.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radial-simple.tsx")),
-      source: "__registry__/default/block/chart-radial-simple.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "toggle-group-outline": {
+      name: "toggle-group-outline",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      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,
     },
-    "chart-radial-stacked": {
-      name: "chart-radial-stacked",
-      description: "A radial chart with stacked sections",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radial-stacked.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radial-stacked.tsx")),
-      source: "__registry__/default/block/chart-radial-stacked.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "toggle-group-sm": {
+      name: "toggle-group-sm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      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,
     },
-    "chart-radial-text": {
-      name: "chart-radial-text",
-      description: "A radial chart with text",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-radial-text.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-radial-text.tsx")),
-      source: "__registry__/default/block/chart-radial-text.tsx",
-      category: "Charts",
-      subcategory: "Radial",
-      chunks: []
+    "toggle-group-single": {
+      name: "toggle-group-single",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle-group"],
+      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,
     },
-    "chart-tooltip-default": {
-      name: "chart-tooltip-default",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-tooltip-default.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-tooltip-default.tsx")),
-      source: "__registry__/default/block/chart-tooltip-default.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "toggle-demo": {
+      name: "toggle-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      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,
     },
-    "chart-tooltip-indicator-line": {
-      name: "chart-tooltip-indicator-line",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-tooltip-indicator-line.tsx"],
-      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: []
+    "toggle-disabled": {
+      name: "toggle-disabled",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      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,
     },
-    "chart-tooltip-indicator-none": {
-      name: "chart-tooltip-indicator-none",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-tooltip-indicator-none.tsx"],
-      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: []
+    "toggle-lg": {
+      name: "toggle-lg",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      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,
     },
-    "chart-tooltip-label-none": {
-      name: "chart-tooltip-label-none",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-tooltip-label-none.tsx"],
-      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: []
+    "toggle-outline": {
+      name: "toggle-outline",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      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,
     },
-    "chart-tooltip-label-custom": {
-      name: "chart-tooltip-label-custom",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-tooltip-label-custom.tsx"],
-      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: []
+    "toggle-sm": {
+      name: "toggle-sm",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      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,
     },
-    "chart-tooltip-label-formatter": {
-      name: "chart-tooltip-label-formatter",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-tooltip-label-formatter.tsx"],
-      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: []
+    "toggle-with-text": {
+      name: "toggle-with-text",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["toggle"],
+      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,
     },
-    "chart-tooltip-formatter": {
-      name: "chart-tooltip-formatter",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-tooltip-formatter.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-tooltip-formatter.tsx")),
-      source: "__registry__/default/block/chart-tooltip-formatter.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "tooltip-demo": {
+      name: "tooltip-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["tooltip"],
+      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,
     },
-    "chart-tooltip-icons": {
-      name: "chart-tooltip-icons",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-tooltip-icons.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-tooltip-icons.tsx")),
-      source: "__registry__/default/block/chart-tooltip-icons.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "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,
     },
-    "chart-tooltip-advanced": {
-      name: "chart-tooltip-advanced",
-      description: "A stacked bar chart with a legend",
-      type: "registry:block",
-      registryDependencies: ["card","chart"],
-      files: ["registry/default/block/chart-tooltip-advanced.tsx"],
-      component: React.lazy(() => import("@/registry/default/block/chart-tooltip-advanced.tsx")),
-      source: "__registry__/default/block/chart-tooltip-advanced.tsx",
-      category: "Charts",
-      subcategory: "Tooltip",
-      chunks: []
+    "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,
     },
-    "utils": {
-      name: "utils",
+    "typography-h1": {
+      name: "typography-h1",
       description: "",
-      type: "registry:lib",
+      type: "registry:example",
       registryDependencies: undefined,
-      files: ["registry/default/lib/utils.ts"],
-      component: React.lazy(() => import("@/registry/default/lib/utils.ts")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "use-mobile": {
-      name: "use-mobile",
+    "typography-h2": {
+      name: "typography-h2",
       description: "",
-      type: "registry:hook",
+      type: "registry:example",
       registryDependencies: undefined,
-      files: ["registry/default/hooks/use-mobile.tsx"],
-      component: React.lazy(() => import("@/registry/default/hooks/use-mobile.tsx")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "use-toast": {
-      name: "use-toast",
+    "typography-h3": {
+      name: "typography-h3",
       description: "",
-      type: "registry:hook",
+      type: "registry:example",
       registryDependencies: undefined,
-      files: ["registry/default/hooks/use-toast.ts"],
-      component: React.lazy(() => import("@/registry/default/hooks/use-toast.ts")),
+      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: "",
-      category: "",
-      subcategory: "",
-      chunks: []
+      meta: undefined,
     },
-    "v0-sidebar-01": {
-      name: "v0-sidebar-01",
-      description: "A simple sidebar with navigation grouped by section.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","label","dropdown-menu"],
-      files: ["registry/default/v0/sidebar-01.tsx"],
-      component: React.lazy(() => import("@/registry/default/v0/sidebar-01.tsx")),
-      source: "__registry__/default/v0/sidebar-01.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "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,
     },
-    "v0-sidebar-02": {
-      name: "v0-sidebar-02",
-      description: "A sidebar with collapsible sections.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","label","dropdown-menu"],
-      files: ["registry/default/v0/sidebar-02.tsx"],
-      component: React.lazy(() => import("@/registry/default/v0/sidebar-02.tsx")),
-      source: "__registry__/default/v0/sidebar-02.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "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,
     },
-    "v0-sidebar-03": {
-      name: "v0-sidebar-03",
-      description: "A sidebar with nested navigation.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb"],
-      files: ["registry/default/v0/sidebar-03.tsx"],
-      component: React.lazy(() => import("@/registry/default/v0/sidebar-03.tsx")),
-      source: "__registry__/default/v0/sidebar-03.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "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,
     },
-    "v0-sidebar-04": {
-      name: "v0-sidebar-04",
-      description: "A floating sidebar with submenus.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator"],
-      files: ["registry/default/v0/sidebar-04.tsx"],
-      component: React.lazy(() => import("@/registry/default/v0/sidebar-04.tsx")),
-      source: "__registry__/default/v0/sidebar-04.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "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,
     },
-    "v0-sidebar-05": {
-      name: "v0-sidebar-05",
-      description: "A sidebar with collapsible submenus.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","label","collapsible"],
-      files: ["registry/default/v0/sidebar-05.tsx"],
-      component: React.lazy(() => import("@/registry/default/v0/sidebar-05.tsx")),
-      source: "__registry__/default/v0/sidebar-05.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "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,
     },
-    "v0-sidebar-06": {
-      name: "v0-sidebar-06",
-      description: "A sidebar with submenus as dropdowns.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","card","dropdown-menu"],
-      files: ["registry/default/v0/sidebar-06.tsx"],
-      component: React.lazy(() => import("@/registry/default/v0/sidebar-06.tsx")),
-      source: "__registry__/default/v0/sidebar-06.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "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,
     },
-    "v0-sidebar-07": {
-      name: "v0-sidebar-07",
-      description: "A sidebar that collapses to icons.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar"],
-      files: ["registry/default/v0/sidebar-07.tsx"],
-      component: React.lazy(() => import("@/registry/default/v0/sidebar-07.tsx")),
-      source: "__registry__/default/v0/sidebar-07.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "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,
     },
-    "v0-sidebar-08": {
-      name: "v0-sidebar-08",
-      description: "An inset sidebar with secondary navigation.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar"],
-      files: ["registry/default/v0/sidebar-08.tsx"],
-      component: React.lazy(() => import("@/registry/default/v0/sidebar-08.tsx")),
-      source: "__registry__/default/v0/sidebar-08.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "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,
     },
-    "v0-sidebar-09": {
-      name: "v0-sidebar-09",
-      description: "Collapsible nested sidebars.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","dropdown-menu","avatar","switch"],
-      files: ["registry/default/v0/sidebar-09.tsx"],
-      component: React.lazy(() => import("@/registry/default/v0/sidebar-09.tsx")),
-      source: "__registry__/default/v0/sidebar-09.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "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,
     },
-    "v0-sidebar-10": {
-      name: "v0-sidebar-10",
-      description: "A sidebar in a popover.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","popover","collapsible","dropdown-menu"],
-      files: ["registry/default/v0/sidebar-10.tsx"],
-      component: React.lazy(() => import("@/registry/default/v0/sidebar-10.tsx")),
-      source: "__registry__/default/v0/sidebar-10.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "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,
     },
-    "v0-sidebar-11": {
-      name: "v0-sidebar-11",
-      description: "A sidebar with a collapsible file tree.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible"],
-      files: ["registry/default/v0/sidebar-11.tsx"],
-      component: React.lazy(() => import("@/registry/default/v0/sidebar-11.tsx")),
-      source: "__registry__/default/v0/sidebar-11.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "chart-bar-demo": {
+      name: "chart-bar-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/chart-bar-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/chart-bar-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "v0-sidebar-12": {
-      name: "v0-sidebar-12",
-      description: "A sidebar with a calendar.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","collapsible","calendar","dropdown-menu","avatar"],
-      files: ["registry/default/v0/sidebar-12.tsx"],
-      component: React.lazy(() => import("@/registry/default/v0/sidebar-12.tsx")),
-      source: "__registry__/default/v0/sidebar-12.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "chart-bar-demo-grid": {
+      name: "chart-bar-demo-grid",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/chart-bar-demo-grid.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/chart-bar-demo-grid.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "v0-sidebar-13": {
-      name: "v0-sidebar-13",
-      description: "A sidebar in a dialog.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","button","dialog"],
-      files: ["registry/default/v0/sidebar-13.tsx"],
-      component: React.lazy(() => import("@/registry/default/v0/sidebar-13.tsx")),
-      source: "__registry__/default/v0/sidebar-13.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "chart-bar-demo-axis": {
+      name: "chart-bar-demo-axis",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/chart-bar-demo-axis.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/chart-bar-demo-axis.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "v0-sidebar-14": {
-      name: "v0-sidebar-14",
-      description: "A sidebar on the right.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb"],
-      files: ["registry/default/v0/sidebar-14.tsx"],
-      component: React.lazy(() => import("@/registry/default/v0/sidebar-14.tsx")),
-      source: "__registry__/default/v0/sidebar-14.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "chart-bar-demo-tooltip": {
+      name: "chart-bar-demo-tooltip",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/chart-bar-demo-tooltip.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/chart-bar-demo-tooltip.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "v0-sidebar-15": {
-      name: "v0-sidebar-15",
-      description: "A left and right sidebar.",
-      type: "registry:block",
-      registryDependencies: ["sidebar","breadcrumb","separator","popover","collapsible","dropdown-menu","calendar","avatar"],
-      files: ["registry/default/v0/sidebar-15.tsx"],
-      component: React.lazy(() => import("@/registry/default/v0/sidebar-15.tsx")),
-      source: "__registry__/default/v0/sidebar-15.tsx",
-      category: "Application",
-      subcategory: "Sidebars",
-      chunks: []
+    "chart-bar-demo-legend": {
+      name: "chart-bar-demo-legend",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/chart-bar-demo-legend.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/chart-bar-demo-legend.tsx")),
+      source: "",
+      meta: undefined,
     },
-    "v0-login-01": {
-      name: "v0-login-01",
-      description: "A simple login form.",
-      type: "registry:block",
-      registryDependencies: ["button","card","input","label"],
-      files: ["registry/default/v0/login-01.tsx"],
-      component: React.lazy(() => import("@/registry/default/v0/login-01.tsx")),
-      source: "__registry__/default/v0/login-01.tsx",
-      category: "Authentication",
-      subcategory: "Login",
-      chunks: []
+    "chart-tooltip-demo": {
+      name: "chart-tooltip-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/examples/chart-tooltip-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      categories: undefined,
+      component: React.lazy(() => import("@/registry/default/examples/chart-tooltip-demo.tsx")),
+      source: "",
+      meta: undefined,
     },
   },
 }
diff --git a/apps/www/__registry__/new-york/block/authentication-01.tsx b/apps/www/__registry__/new-york/block/authentication-01.tsx
deleted file mode 100644
index 84e1e4575bf..00000000000
--- a/apps/www/__registry__/new-york/block/authentication-01.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/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/www/__registry__/new-york/block/authentication-02.tsx b/apps/www/__registry__/new-york/block/authentication-02.tsx
deleted file mode 100644
index bb1517bee41..00000000000
--- a/apps/www/__registry__/new-york/block/authentication-02.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import Link from "next/link"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/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/www/__registry__/new-york/block/authentication-03.tsx b/apps/www/__registry__/new-york/block/authentication-03.tsx
deleted file mode 100644
index 727f9ed3c87..00000000000
--- a/apps/www/__registry__/new-york/block/authentication-03.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import Link from "next/link"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/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/www/__registry__/new-york/block/authentication-04.tsx b/apps/www/__registry__/new-york/block/authentication-04.tsx
deleted file mode 100644
index cee34f6c650..00000000000
--- a/apps/www/__registry__/new-york/block/authentication-04.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import Image from "next/image"
-import Link from "next/link"
-
-import { Button } from "@/registry/new-york/ui/button"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/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-balance text-muted-foreground">
-              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="hidden bg-muted lg:block">
-        <Image
-          src="/placeholder.svg"
-          alt="Image"
-          width="1920"
-          height="1080"
-          className="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
-        />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/chart-area-interactive.tsx b/apps/www/__registry__/new-york/block/chart-area-interactive.tsx
deleted file mode 100644
index 1cd672af11c..00000000000
--- a/apps/www/__registry__/new-york/block/chart-area-interactive.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/new-york/ui/chart"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york/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/www/__registry__/new-york/block/chart-tooltip-default.tsx b/apps/www/__registry__/new-york/block/chart-tooltip-default.tsx
deleted file mode 100644
index 93fe696fa43..00000000000
--- a/apps/www/__registry__/new-york/block/chart-tooltip-default.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-"use client"
-
-import { Bar, BarChart, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/new-york/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/www/__registry__/new-york/block/chart-tooltip-indicator-line.tsx b/apps/www/__registry__/new-york/block/chart-tooltip-indicator-line.tsx
deleted file mode 100644
index 431dbf6719d..00000000000
--- a/apps/www/__registry__/new-york/block/chart-tooltip-indicator-line.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-"use client"
-
-import { Bar, BarChart, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/new-york/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/www/__registry__/new-york/block/charts-01.tsx b/apps/www/__registry__/new-york/block/charts-01.tsx
deleted file mode 100644
index d9567003c4e..00000000000
--- a/apps/www/__registry__/new-york/block/charts-01.tsx
+++ /dev/null
@@ -1,871 +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/new-york//ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/new-york//ui/chart"
-import { Separator } from "@/registry/new-york//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 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="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 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-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 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-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 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-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 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-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 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-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 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-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 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="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/www/__registry__/new-york/block/dashboard-01.tsx b/apps/www/__registry__/new-york/block/dashboard-01.tsx
deleted file mode 100644
index 2c4672f5c69..00000000000
--- a/apps/www/__registry__/new-york/block/dashboard-01.tsx
+++ /dev/null
@@ -1,455 +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/new-york/ui/avatar"
-import { Badge } from "@/registry/new-york/ui/badge"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Input } from "@/registry/new-york/ui/input"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/new-york/ui/sheet"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/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="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="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="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="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="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="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="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="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="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="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="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 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/www/__registry__/new-york/block/dashboard-02.tsx b/apps/www/__registry__/new-york/block/dashboard-02.tsx
deleted file mode 100644
index 5f9215f5547..00000000000
--- a/apps/www/__registry__/new-york/block/dashboard-02.tsx
+++ /dev/null
@@ -1,247 +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/new-york/ui/badge"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Input } from "@/registry/new-york/ui/input"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/new-york/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="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>
-          </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
-            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-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/www/__registry__/new-york/block/dashboard-03.tsx b/apps/www/__registry__/new-york/block/dashboard-03.tsx
deleted file mode 100644
index 5b39a9e0228..00000000000
--- a/apps/www/__registry__/new-york/block/dashboard-03.tsx
+++ /dev/null
@@ -1,464 +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/new-york/ui/badge"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/registry/new-york/ui/drawer"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york/ui/select"
-import { Textarea } from "@/registry/new-york/ui/textarea"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york/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="w-5 h-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="w-5 h-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="w-5 h-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="w-5 h-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="w-5 h-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="w-5 h-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="w-5 h-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="w-5 h-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="w-4 h-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="w-5 h-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="w-5 h-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="w-5 h-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="w-3.5 h-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="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="flex items-start gap-3 text-muted-foreground">
-                          <Rabbit className="w-5 h-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="w-5 h-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="w-5 h-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="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="w-4 h-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="w-4 h-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="w-3.5 h-3.5" />
-                </Button>
-              </div>
-            </form>
-          </div>
-        </main>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/dashboard-04.tsx b/apps/www/__registry__/new-york/block/dashboard-04.tsx
deleted file mode 100644
index 69e19a57a2b..00000000000
--- a/apps/www/__registry__/new-york/block/dashboard-04.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import Link from "next/link"
-import { CircleUser, Menu, Package2, Search } from "lucide-react"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Checkbox } from "@/registry/new-york/ui/checkbox"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Input } from "@/registry/new-york/ui/input"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/new-york/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="dashboard-04-chunk-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="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>
-            <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>
-          </div>
-        </div>
-      </main>
-    </div>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/dashboard-05.tsx b/apps/www/__registry__/new-york/block/dashboard-05.tsx
deleted file mode 100644
index bb35ec41d0b..00000000000
--- a/apps/www/__registry__/new-york/block/dashboard-05.tsx
+++ /dev/null
@@ -1,721 +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/new-york/ui/badge"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Input } from "@/registry/new-york/ui/input"
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-} from "@/registry/new-york/ui/pagination"
-import { Progress } from "@/registry/new-york/ui/progress"
-import { Separator } from "@/registry/new-york/ui/separator"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/new-york/ui/sheet"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/ui/table"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/registry/new-york/ui/tabs"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york/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="dashboard-05-chunk-0">
-                <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="dashboard-05-chunk-1">
-                <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="dashboard-05-chunk-2">
-                <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="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="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="dashboard-05-chunk-4">
-              <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/www/__registry__/new-york/block/dashboard-06.tsx b/apps/www/__registry__/new-york/block/dashboard-06.tsx
deleted file mode 100644
index 0311c178a8e..00000000000
--- a/apps/www/__registry__/new-york/block/dashboard-06.tsx
+++ /dev/null
@@ -1,623 +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/new-york/ui/badge"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Input } from "@/registry/new-york/ui/input"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/new-york/ui/sheet"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/ui/table"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/registry/new-york/ui/tabs"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york/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="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="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/www/__registry__/new-york/block/dashboard-07.tsx b/apps/www/__registry__/new-york/block/dashboard-07.tsx
deleted file mode 100644
index bf65a018734..00000000000
--- a/apps/www/__registry__/new-york/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/new-york/ui/badge"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york/ui/select"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/new-york/ui/sheet"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/ui/table"
-import { Textarea } from "@/registry/new-york/ui/textarea"
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york/ui/toggle-group"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york/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="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>
-                <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="h-3.5 w-3.5" />
-                      Add Variant
-                    </Button>
-                  </CardFooter>
-                </Card>
-                <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>
-              </div>
-              <div className="grid auto-rows-max items-start gap-4 lg:gap-8">
-                <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>
-                <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="h-4 w-4 text-muted-foreground" />
-                          <span className="sr-only">Upload</span>
-                        </button>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-                <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>
-              </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/www/__registry__/new-york/block/login-01.tsx b/apps/www/__registry__/new-york/block/login-01.tsx
deleted file mode 100644
index 005ae4a9b60..00000000000
--- a/apps/www/__registry__/new-york/block/login-01.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { LoginForm } from "@/registry/new-york/block/login-01/components/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/www/__registry__/new-york/block/login-01/components/login-form.tsx b/apps/www/__registry__/new-york/block/login-01/components/login-form.tsx
deleted file mode 100644
index 4820320f865..00000000000
--- a/apps/www/__registry__/new-york/block/login-01/components/login-form.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import Link from "next/link"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/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/www/__registry__/new-york/block/login-01/page.tsx b/apps/www/__registry__/new-york/block/login-01/page.tsx
deleted file mode 100644
index 0d346a56358..00000000000
--- a/apps/www/__registry__/new-york/block/login-01/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { LoginForm } from "@/registry/new-york/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/www/__registry__/new-york/block/sidebar-01.tsx b/apps/www/__registry__/new-york/block/sidebar-01.tsx
deleted file mode 100644
index 3e39cd9948b..00000000000
--- a/apps/www/__registry__/new-york/block/sidebar-01.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-01/components/app-sidebar"
-import {
-  SidebarLayout,
-  SidebarTrigger,
-} from "@/registry/new-york/block/sidebar-01/ui/sidebar"
-
-export const iframeHeight = "870px"
-
-export const containerClassName = "w-full h-full"
-
-export default async function Page() {
-  const { cookies } = await import("next/headers")
-  return (
-    <SidebarLayout
-      defaultOpen={cookies().get("sidebar:state")?.value === "true"}
-    >
-      <AppSidebar />
-      <main className="flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out">
-        <div className="h-full rounded-md border-2 border-dashed p-2">
-          <SidebarTrigger />
-        </div>
-      </main>
-    </SidebarLayout>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/sidebar-01/page.tsx b/apps/www/__registry__/new-york/block/sidebar-01/page.tsx
deleted file mode 100644
index 939cfefe989..00000000000
--- a/apps/www/__registry__/new-york/block/sidebar-01/page.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-01/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/__registry__/new-york/block/sidebar-02/page.tsx b/apps/www/__registry__/new-york/block/sidebar-02/page.tsx
deleted file mode 100644
index e5ae98e9fdb..00000000000
--- a/apps/www/__registry__/new-york/block/sidebar-02/page.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-02/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/ui/sidebar"
-
-export const iframeHeight = "800px"
-
-export const description = "A sidebar with collapsible sections."
-
-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/www/__registry__/new-york/block/sidebar-03/page.tsx b/apps/www/__registry__/new-york/block/sidebar-03/page.tsx
deleted file mode 100644
index b16067763ca..00000000000
--- a/apps/www/__registry__/new-york/block/sidebar-03/page.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-03/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/__registry__/new-york/block/sidebar-04/page.tsx b/apps/www/__registry__/new-york/block/sidebar-04/page.tsx
deleted file mode 100644
index a7f7dee47cb..00000000000
--- a/apps/www/__registry__/new-york/block/sidebar-04/page.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-04/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/__registry__/new-york/block/sidebar-05/page.tsx b/apps/www/__registry__/new-york/block/sidebar-05/page.tsx
deleted file mode 100644
index d2cecba4b18..00000000000
--- a/apps/www/__registry__/new-york/block/sidebar-05/page.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-05/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/__registry__/new-york/block/sidebar-06/page.tsx b/apps/www/__registry__/new-york/block/sidebar-06/page.tsx
deleted file mode 100644
index 8a8fd3e1a62..00000000000
--- a/apps/www/__registry__/new-york/block/sidebar-06/page.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-06/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/__registry__/new-york/block/sidebar-07/page.tsx b/apps/www/__registry__/new-york/block/sidebar-07/page.tsx
deleted file mode 100644
index 8d3b2e871d1..00000000000
--- a/apps/www/__registry__/new-york/block/sidebar-07/page.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-07/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/__registry__/new-york/block/sidebar-08/page.tsx b/apps/www/__registry__/new-york/block/sidebar-08/page.tsx
deleted file mode 100644
index e9428ca0224..00000000000
--- a/apps/www/__registry__/new-york/block/sidebar-08/page.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-08/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/__registry__/new-york/block/sidebar-09/page.tsx b/apps/www/__registry__/new-york/block/sidebar-09/page.tsx
deleted file mode 100644
index 079c08bbb8a..00000000000
--- a/apps/www/__registry__/new-york/block/sidebar-09/page.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-09/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/__registry__/new-york/block/sidebar-10/page.tsx b/apps/www/__registry__/new-york/block/sidebar-10/page.tsx
deleted file mode 100644
index d9725a0e944..00000000000
--- a/apps/www/__registry__/new-york/block/sidebar-10/page.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-10/components/app-sidebar"
-import { NavActions } from "@/registry/new-york/block/sidebar-10/components/nav-actions"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/__registry__/new-york/block/sidebar-11/page.tsx b/apps/www/__registry__/new-york/block/sidebar-11/page.tsx
deleted file mode 100644
index 21622760017..00000000000
--- a/apps/www/__registry__/new-york/block/sidebar-11/page.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-11/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/__registry__/new-york/block/sidebar-12/page.tsx b/apps/www/__registry__/new-york/block/sidebar-12/page.tsx
deleted file mode 100644
index b8d7ecbcaa5..00000000000
--- a/apps/www/__registry__/new-york/block/sidebar-12/page.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-12/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/ui/sidebar"
-
-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>
-  )
-}
diff --git a/apps/www/__registry__/new-york/block/sidebar-13/page.tsx b/apps/www/__registry__/new-york/block/sidebar-13/page.tsx
deleted file mode 100644
index d20a6de00ef..00000000000
--- a/apps/www/__registry__/new-york/block/sidebar-13/page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { SettingsDialog } from "@/registry/new-york/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/www/__registry__/new-york/block/sidebar-14/page.tsx b/apps/www/__registry__/new-york/block/sidebar-14/page.tsx
deleted file mode 100644
index 88703665dfd..00000000000
--- a/apps/www/__registry__/new-york/block/sidebar-14/page.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-14/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/__registry__/new-york/block/sidebar-15/page.tsx b/apps/www/__registry__/new-york/block/sidebar-15/page.tsx
deleted file mode 100644
index 8e5549c5d19..00000000000
--- a/apps/www/__registry__/new-york/block/sidebar-15/page.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { SidebarLeft } from "@/registry/new-york/block/sidebar-15/components/sidebar-left"
-import { SidebarRight } from "@/registry/new-york/block/sidebar-15/components/sidebar-right"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/ui/sidebar"
-
-export const iframeHeight = "800px"
-
-export const description = "A left and right 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/www/__registry__/new-york/blocks/app-01/page.tsx b/apps/www/__registry__/new-york/blocks/app-01/page.tsx
new file mode 100644
index 00000000000..cd86b7dc4f0
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/app-01/page.tsx
@@ -0,0 +1,27 @@
+import { AddTaskForm } from "@/registry/new-york/blocks/app-01/components/add-task-form"
+import { TasksList } from "@/registry/new-york/blocks/app-01/components/tasks-list"
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+
+export default function AppPage() {
+  return (
+    <div className="h-screen flex flex-col items-center justify-center">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Add Task</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <TasksList />
+        </CardContent>
+        <CardFooter>
+          <AddTaskForm />
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/blocks/button-01/page.tsx b/apps/www/__registry__/new-york/blocks/button-01/page.tsx
new file mode 100644
index 00000000000..da382c533c7
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/button-01/page.tsx
@@ -0,0 +1,9 @@
+import { AmazingButton } from "@/registry/new-york/blocks/button-01/components/amazing-button"
+
+export default function Page() {
+  return (
+    <div className="h-svh flex items-center justify-center">
+      <AmazingButton />
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/block/chart-area-axes.tsx b/apps/www/__registry__/new-york/blocks/chart-area-axes.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-area-axes.tsx
rename to apps/www/__registry__/new-york/blocks/chart-area-axes.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-area-default.tsx b/apps/www/__registry__/new-york/blocks/chart-area-default.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-area-default.tsx
rename to apps/www/__registry__/new-york/blocks/chart-area-default.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-area-gradient.tsx b/apps/www/__registry__/new-york/blocks/chart-area-gradient.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-area-gradient.tsx
rename to apps/www/__registry__/new-york/blocks/chart-area-gradient.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-area-icons.tsx b/apps/www/__registry__/new-york/blocks/chart-area-icons.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-area-icons.tsx
rename to apps/www/__registry__/new-york/blocks/chart-area-icons.tsx
diff --git a/apps/www/__registry__/new-york/blocks/chart-area-interactive.tsx b/apps/www/__registry__/new-york/blocks/chart-area-interactive.tsx
new file mode 100644
index 00000000000..cd8e7e6b288
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/chart-area-interactive.tsx
@@ -0,0 +1,266 @@
+"use client"
+
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/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/www/__registry__/new-york/block/chart-area-legend.tsx b/apps/www/__registry__/new-york/blocks/chart-area-legend.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-area-legend.tsx
rename to apps/www/__registry__/new-york/blocks/chart-area-legend.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-area-linear.tsx b/apps/www/__registry__/new-york/blocks/chart-area-linear.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-area-linear.tsx
rename to apps/www/__registry__/new-york/blocks/chart-area-linear.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-area-stacked-expand.tsx b/apps/www/__registry__/new-york/blocks/chart-area-stacked-expand.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-area-stacked-expand.tsx
rename to apps/www/__registry__/new-york/blocks/chart-area-stacked-expand.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-area-stacked.tsx b/apps/www/__registry__/new-york/blocks/chart-area-stacked.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-area-stacked.tsx
rename to apps/www/__registry__/new-york/blocks/chart-area-stacked.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-area-step.tsx b/apps/www/__registry__/new-york/blocks/chart-area-step.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-area-step.tsx
rename to apps/www/__registry__/new-york/blocks/chart-area-step.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-bar-active.tsx b/apps/www/__registry__/new-york/blocks/chart-bar-active.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-bar-active.tsx
rename to apps/www/__registry__/new-york/blocks/chart-bar-active.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-bar-default.tsx b/apps/www/__registry__/new-york/blocks/chart-bar-default.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-bar-default.tsx
rename to apps/www/__registry__/new-york/blocks/chart-bar-default.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-bar-horizontal.tsx b/apps/www/__registry__/new-york/blocks/chart-bar-horizontal.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-bar-horizontal.tsx
rename to apps/www/__registry__/new-york/blocks/chart-bar-horizontal.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-bar-interactive.tsx b/apps/www/__registry__/new-york/blocks/chart-bar-interactive.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-bar-interactive.tsx
rename to apps/www/__registry__/new-york/blocks/chart-bar-interactive.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-bar-label-custom.tsx b/apps/www/__registry__/new-york/blocks/chart-bar-label-custom.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-bar-label-custom.tsx
rename to apps/www/__registry__/new-york/blocks/chart-bar-label-custom.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-bar-label.tsx b/apps/www/__registry__/new-york/blocks/chart-bar-label.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-bar-label.tsx
rename to apps/www/__registry__/new-york/blocks/chart-bar-label.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-bar-mixed.tsx b/apps/www/__registry__/new-york/blocks/chart-bar-mixed.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-bar-mixed.tsx
rename to apps/www/__registry__/new-york/blocks/chart-bar-mixed.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-bar-multiple.tsx b/apps/www/__registry__/new-york/blocks/chart-bar-multiple.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-bar-multiple.tsx
rename to apps/www/__registry__/new-york/blocks/chart-bar-multiple.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-bar-negative.tsx b/apps/www/__registry__/new-york/blocks/chart-bar-negative.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-bar-negative.tsx
rename to apps/www/__registry__/new-york/blocks/chart-bar-negative.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-bar-stacked.tsx b/apps/www/__registry__/new-york/blocks/chart-bar-stacked.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-bar-stacked.tsx
rename to apps/www/__registry__/new-york/blocks/chart-bar-stacked.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-line-default.tsx b/apps/www/__registry__/new-york/blocks/chart-line-default.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-line-default.tsx
rename to apps/www/__registry__/new-york/blocks/chart-line-default.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-line-dots-colors.tsx b/apps/www/__registry__/new-york/blocks/chart-line-dots-colors.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-line-dots-colors.tsx
rename to apps/www/__registry__/new-york/blocks/chart-line-dots-colors.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-line-dots-custom.tsx b/apps/www/__registry__/new-york/blocks/chart-line-dots-custom.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-line-dots-custom.tsx
rename to apps/www/__registry__/new-york/blocks/chart-line-dots-custom.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-line-dots.tsx b/apps/www/__registry__/new-york/blocks/chart-line-dots.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-line-dots.tsx
rename to apps/www/__registry__/new-york/blocks/chart-line-dots.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-line-interactive.tsx b/apps/www/__registry__/new-york/blocks/chart-line-interactive.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-line-interactive.tsx
rename to apps/www/__registry__/new-york/blocks/chart-line-interactive.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-line-label-custom.tsx b/apps/www/__registry__/new-york/blocks/chart-line-label-custom.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-line-label-custom.tsx
rename to apps/www/__registry__/new-york/blocks/chart-line-label-custom.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-line-label.tsx b/apps/www/__registry__/new-york/blocks/chart-line-label.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-line-label.tsx
rename to apps/www/__registry__/new-york/blocks/chart-line-label.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-line-linear.tsx b/apps/www/__registry__/new-york/blocks/chart-line-linear.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-line-linear.tsx
rename to apps/www/__registry__/new-york/blocks/chart-line-linear.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-line-multiple.tsx b/apps/www/__registry__/new-york/blocks/chart-line-multiple.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-line-multiple.tsx
rename to apps/www/__registry__/new-york/blocks/chart-line-multiple.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-line-step.tsx b/apps/www/__registry__/new-york/blocks/chart-line-step.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-line-step.tsx
rename to apps/www/__registry__/new-york/blocks/chart-line-step.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-donut-active.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-donut-active.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-donut-active.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-donut-active.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-donut-text.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-donut-text.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-donut-text.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-donut-text.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-donut.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-donut.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-donut.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-donut.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-interactive.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-interactive.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-interactive.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-interactive.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-label-custom.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-label-custom.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-label-custom.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-label-custom.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-label-list.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-label-list.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-label-list.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-label-list.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-label.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-label.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-label.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-label.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-legend.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-legend.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-legend.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-legend.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-separator-none.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-separator-none.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-separator-none.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-separator-none.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-simple.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-simple.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-simple.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-simple.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-pie-stacked.tsx b/apps/www/__registry__/new-york/blocks/chart-pie-stacked.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-pie-stacked.tsx
rename to apps/www/__registry__/new-york/blocks/chart-pie-stacked.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-default.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-default.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-default.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-default.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-dots.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-dots.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-dots.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-dots.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-grid-circle-fill.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-grid-circle-fill.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-grid-circle-fill.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-grid-circle-fill.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-grid-circle-no-lines.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-grid-circle-no-lines.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-grid-circle-no-lines.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-grid-circle-no-lines.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-grid-circle.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-grid-circle.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-grid-circle.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-grid-circle.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-grid-custom.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-grid-custom.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-grid-custom.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-grid-custom.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-grid-fill.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-grid-fill.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-grid-fill.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-grid-fill.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-grid-none.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-grid-none.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-grid-none.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-grid-none.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-icons.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-icons.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-icons.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-icons.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-label-custom.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-label-custom.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-label-custom.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-label-custom.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-legend.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-legend.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-legend.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-legend.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-lines-only.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-lines-only.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-lines-only.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-lines-only.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-multiple.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-multiple.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-multiple.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-multiple.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radar-radius.tsx b/apps/www/__registry__/new-york/blocks/chart-radar-radius.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radar-radius.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radar-radius.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radial-grid.tsx b/apps/www/__registry__/new-york/blocks/chart-radial-grid.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radial-grid.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radial-grid.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radial-label.tsx b/apps/www/__registry__/new-york/blocks/chart-radial-label.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radial-label.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radial-label.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radial-shape.tsx b/apps/www/__registry__/new-york/blocks/chart-radial-shape.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radial-shape.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radial-shape.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radial-simple.tsx b/apps/www/__registry__/new-york/blocks/chart-radial-simple.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radial-simple.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radial-simple.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radial-stacked.tsx b/apps/www/__registry__/new-york/blocks/chart-radial-stacked.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radial-stacked.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radial-stacked.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-radial-text.tsx b/apps/www/__registry__/new-york/blocks/chart-radial-text.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-radial-text.tsx
rename to apps/www/__registry__/new-york/blocks/chart-radial-text.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-advanced.tsx b/apps/www/__registry__/new-york/blocks/chart-tooltip-advanced.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-tooltip-advanced.tsx
rename to apps/www/__registry__/new-york/blocks/chart-tooltip-advanced.tsx
diff --git a/apps/www/__registry__/new-york/blocks/chart-tooltip-default.tsx b/apps/www/__registry__/new-york/blocks/chart-tooltip-default.tsx
new file mode 100644
index 00000000000..759b4555bea
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/chart-tooltip-default.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/__registry__/new-york/block/chart-tooltip-formatter.tsx b/apps/www/__registry__/new-york/blocks/chart-tooltip-formatter.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-tooltip-formatter.tsx
rename to apps/www/__registry__/new-york/blocks/chart-tooltip-formatter.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-icons.tsx b/apps/www/__registry__/new-york/blocks/chart-tooltip-icons.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-tooltip-icons.tsx
rename to apps/www/__registry__/new-york/blocks/chart-tooltip-icons.tsx
diff --git a/apps/www/__registry__/new-york/blocks/chart-tooltip-indicator-line.tsx b/apps/www/__registry__/new-york/blocks/chart-tooltip-indicator-line.tsx
new file mode 100644
index 00000000000..19c3f858894
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/__registry__/new-york/block/chart-tooltip-indicator-none.tsx b/apps/www/__registry__/new-york/blocks/chart-tooltip-indicator-none.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-tooltip-indicator-none.tsx
rename to apps/www/__registry__/new-york/blocks/chart-tooltip-indicator-none.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-label-custom.tsx b/apps/www/__registry__/new-york/blocks/chart-tooltip-label-custom.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-tooltip-label-custom.tsx
rename to apps/www/__registry__/new-york/blocks/chart-tooltip-label-custom.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-label-formatter.tsx b/apps/www/__registry__/new-york/blocks/chart-tooltip-label-formatter.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-tooltip-label-formatter.tsx
rename to apps/www/__registry__/new-york/blocks/chart-tooltip-label-formatter.tsx
diff --git a/apps/www/__registry__/new-york/block/chart-tooltip-label-none.tsx b/apps/www/__registry__/new-york/blocks/chart-tooltip-label-none.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/chart-tooltip-label-none.tsx
rename to apps/www/__registry__/new-york/blocks/chart-tooltip-label-none.tsx
diff --git a/apps/www/__registry__/new-york/blocks/login-01/page.tsx b/apps/www/__registry__/new-york/blocks/login-01/page.tsx
new file mode 100644
index 00000000000..20fe9846ce2
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/login-01/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/registry/new-york/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/www/__registry__/new-york/blocks/login-02/page.tsx b/apps/www/__registry__/new-york/blocks/login-02/page.tsx
new file mode 100644
index 00000000000..7353a4d4fa1
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/login-02/page.tsx
@@ -0,0 +1,32 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/new-york/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/www/__registry__/new-york/blocks/login-03/page.tsx b/apps/www/__registry__/new-york/blocks/login-03/page.tsx
new file mode 100644
index 00000000000..a4ced5031b3
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/login-03/page.tsx
@@ -0,0 +1,19 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/new-york/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/www/__registry__/new-york/blocks/login-04/page.tsx b/apps/www/__registry__/new-york/blocks/login-04/page.tsx
new file mode 100644
index 00000000000..e2188012ae6
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/login-04/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/registry/new-york/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/www/__registry__/new-york/blocks/login-05/page.tsx b/apps/www/__registry__/new-york/blocks/login-05/page.tsx
new file mode 100644
index 00000000000..3d03c04805d
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/login-05/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/registry/new-york/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/www/__registry__/new-york/blocks/sidebar-01/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-01/page.tsx
new file mode 100644
index 00000000000..a13e7b06fe3
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-01/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-01/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/__registry__/new-york/blocks/sidebar-02/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-02/page.tsx
new file mode 100644
index 00000000000..140cf70f884
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-02/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-02/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/__registry__/new-york/blocks/sidebar-03/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-03/page.tsx
new file mode 100644
index 00000000000..768d4775bb1
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-03/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-03/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/__registry__/new-york/blocks/sidebar-04/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-04/page.tsx
new file mode 100644
index 00000000000..fd5d6c8f00d
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-04/page.tsx
@@ -0,0 +1,56 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-04/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/__registry__/new-york/blocks/sidebar-05/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-05/page.tsx
new file mode 100644
index 00000000000..9d630900db1
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-05/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-05/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/__registry__/new-york/blocks/sidebar-06/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-06/page.tsx
new file mode 100644
index 00000000000..ac30ac9fe1c
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-06/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-06/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/__registry__/new-york/blocks/sidebar-07/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-07/page.tsx
new file mode 100644
index 00000000000..8f9ab72554b
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-07/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-07/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/__registry__/new-york/blocks/sidebar-08/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-08/page.tsx
new file mode 100644
index 00000000000..6df3df5d465
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-08/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-08/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/__registry__/new-york/blocks/sidebar-09/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-09/page.tsx
new file mode 100644
index 00000000000..8c5b59468d8
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-09/page.tsx
@@ -0,0 +1,54 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-09/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/__registry__/new-york/blocks/sidebar-10/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-10/page.tsx
new file mode 100644
index 00000000000..d12f80239a5
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-10/page.tsx
@@ -0,0 +1,46 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-10/components/app-sidebar"
+import { NavActions } from "@/registry/new-york/blocks/sidebar-10/components/nav-actions"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/__registry__/new-york/blocks/sidebar-11/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-11/page.tsx
new file mode 100644
index 00000000000..939d72c6825
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-11/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-11/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/__registry__/new-york/blocks/sidebar-12/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-12/page.tsx
new file mode 100644
index 00000000000..ccf68cbe1fa
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-12/page.tsx
@@ -0,0 +1,41 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-12/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/__registry__/new-york/blocks/sidebar-13/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-13/page.tsx
new file mode 100644
index 00000000000..a323b1c5d17
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-13/page.tsx
@@ -0,0 +1,9 @@
+import { SettingsDialog } from "@/registry/new-york/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/www/__registry__/new-york/blocks/sidebar-14/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-14/page.tsx
new file mode 100644
index 00000000000..7d6c0b37c78
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-14/page.tsx
@@ -0,0 +1,48 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-14/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/__registry__/new-york/blocks/sidebar-15/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-15/page.tsx
new file mode 100644
index 00000000000..acfcc0a4c17
--- /dev/null
+++ b/apps/www/__registry__/new-york/blocks/sidebar-15/page.tsx
@@ -0,0 +1,44 @@
+import { SidebarLeft } from "@/registry/new-york/blocks/sidebar-15/components/sidebar-left"
+import { SidebarRight } from "@/registry/new-york/blocks/sidebar-15/components/sidebar-right"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/block/chart-area-axes.tsx b/apps/www/__registry__/new-york/charts/chart-area-axes.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-area-axes.tsx
rename to apps/www/__registry__/new-york/charts/chart-area-axes.tsx
diff --git a/apps/www/registry/new-york/block/chart-area-default.tsx b/apps/www/__registry__/new-york/charts/chart-area-default.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-area-default.tsx
rename to apps/www/__registry__/new-york/charts/chart-area-default.tsx
diff --git a/apps/www/registry/new-york/block/chart-area-gradient.tsx b/apps/www/__registry__/new-york/charts/chart-area-gradient.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-area-gradient.tsx
rename to apps/www/__registry__/new-york/charts/chart-area-gradient.tsx
diff --git a/apps/www/registry/new-york/block/chart-area-icons.tsx b/apps/www/__registry__/new-york/charts/chart-area-icons.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-area-icons.tsx
rename to apps/www/__registry__/new-york/charts/chart-area-icons.tsx
diff --git a/apps/www/__registry__/new-york/charts/chart-area-interactive.tsx b/apps/www/__registry__/new-york/charts/chart-area-interactive.tsx
new file mode 100644
index 00000000000..cd8e7e6b288
--- /dev/null
+++ b/apps/www/__registry__/new-york/charts/chart-area-interactive.tsx
@@ -0,0 +1,266 @@
+"use client"
+
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/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/www/registry/new-york/block/chart-area-legend.tsx b/apps/www/__registry__/new-york/charts/chart-area-legend.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-area-legend.tsx
rename to apps/www/__registry__/new-york/charts/chart-area-legend.tsx
diff --git a/apps/www/registry/new-york/block/chart-area-linear.tsx b/apps/www/__registry__/new-york/charts/chart-area-linear.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-area-linear.tsx
rename to apps/www/__registry__/new-york/charts/chart-area-linear.tsx
diff --git a/apps/www/registry/new-york/block/chart-area-stacked-expand.tsx b/apps/www/__registry__/new-york/charts/chart-area-stacked-expand.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-area-stacked-expand.tsx
rename to apps/www/__registry__/new-york/charts/chart-area-stacked-expand.tsx
diff --git a/apps/www/registry/new-york/block/chart-area-stacked.tsx b/apps/www/__registry__/new-york/charts/chart-area-stacked.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-area-stacked.tsx
rename to apps/www/__registry__/new-york/charts/chart-area-stacked.tsx
diff --git a/apps/www/registry/new-york/block/chart-area-step.tsx b/apps/www/__registry__/new-york/charts/chart-area-step.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-area-step.tsx
rename to apps/www/__registry__/new-york/charts/chart-area-step.tsx
diff --git a/apps/www/registry/new-york/block/chart-bar-active.tsx b/apps/www/__registry__/new-york/charts/chart-bar-active.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-bar-active.tsx
rename to apps/www/__registry__/new-york/charts/chart-bar-active.tsx
diff --git a/apps/www/registry/new-york/block/chart-bar-default.tsx b/apps/www/__registry__/new-york/charts/chart-bar-default.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-bar-default.tsx
rename to apps/www/__registry__/new-york/charts/chart-bar-default.tsx
diff --git a/apps/www/registry/new-york/block/chart-bar-horizontal.tsx b/apps/www/__registry__/new-york/charts/chart-bar-horizontal.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-bar-horizontal.tsx
rename to apps/www/__registry__/new-york/charts/chart-bar-horizontal.tsx
diff --git a/apps/www/registry/new-york/block/chart-bar-interactive.tsx b/apps/www/__registry__/new-york/charts/chart-bar-interactive.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-bar-interactive.tsx
rename to apps/www/__registry__/new-york/charts/chart-bar-interactive.tsx
diff --git a/apps/www/registry/new-york/block/chart-bar-label-custom.tsx b/apps/www/__registry__/new-york/charts/chart-bar-label-custom.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-bar-label-custom.tsx
rename to apps/www/__registry__/new-york/charts/chart-bar-label-custom.tsx
diff --git a/apps/www/registry/new-york/block/chart-bar-label.tsx b/apps/www/__registry__/new-york/charts/chart-bar-label.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-bar-label.tsx
rename to apps/www/__registry__/new-york/charts/chart-bar-label.tsx
diff --git a/apps/www/registry/new-york/block/chart-bar-mixed.tsx b/apps/www/__registry__/new-york/charts/chart-bar-mixed.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-bar-mixed.tsx
rename to apps/www/__registry__/new-york/charts/chart-bar-mixed.tsx
diff --git a/apps/www/registry/new-york/block/chart-bar-multiple.tsx b/apps/www/__registry__/new-york/charts/chart-bar-multiple.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-bar-multiple.tsx
rename to apps/www/__registry__/new-york/charts/chart-bar-multiple.tsx
diff --git a/apps/www/registry/new-york/block/chart-bar-negative.tsx b/apps/www/__registry__/new-york/charts/chart-bar-negative.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-bar-negative.tsx
rename to apps/www/__registry__/new-york/charts/chart-bar-negative.tsx
diff --git a/apps/www/registry/new-york/block/chart-bar-stacked.tsx b/apps/www/__registry__/new-york/charts/chart-bar-stacked.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-bar-stacked.tsx
rename to apps/www/__registry__/new-york/charts/chart-bar-stacked.tsx
diff --git a/apps/www/registry/new-york/block/chart-line-default.tsx b/apps/www/__registry__/new-york/charts/chart-line-default.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-line-default.tsx
rename to apps/www/__registry__/new-york/charts/chart-line-default.tsx
diff --git a/apps/www/registry/new-york/block/chart-line-dots-colors.tsx b/apps/www/__registry__/new-york/charts/chart-line-dots-colors.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-line-dots-colors.tsx
rename to apps/www/__registry__/new-york/charts/chart-line-dots-colors.tsx
diff --git a/apps/www/registry/new-york/block/chart-line-dots-custom.tsx b/apps/www/__registry__/new-york/charts/chart-line-dots-custom.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-line-dots-custom.tsx
rename to apps/www/__registry__/new-york/charts/chart-line-dots-custom.tsx
diff --git a/apps/www/registry/new-york/block/chart-line-dots.tsx b/apps/www/__registry__/new-york/charts/chart-line-dots.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-line-dots.tsx
rename to apps/www/__registry__/new-york/charts/chart-line-dots.tsx
diff --git a/apps/www/registry/new-york/block/chart-line-interactive.tsx b/apps/www/__registry__/new-york/charts/chart-line-interactive.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-line-interactive.tsx
rename to apps/www/__registry__/new-york/charts/chart-line-interactive.tsx
diff --git a/apps/www/registry/new-york/block/chart-line-label-custom.tsx b/apps/www/__registry__/new-york/charts/chart-line-label-custom.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-line-label-custom.tsx
rename to apps/www/__registry__/new-york/charts/chart-line-label-custom.tsx
diff --git a/apps/www/registry/new-york/block/chart-line-label.tsx b/apps/www/__registry__/new-york/charts/chart-line-label.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-line-label.tsx
rename to apps/www/__registry__/new-york/charts/chart-line-label.tsx
diff --git a/apps/www/registry/new-york/block/chart-line-linear.tsx b/apps/www/__registry__/new-york/charts/chart-line-linear.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-line-linear.tsx
rename to apps/www/__registry__/new-york/charts/chart-line-linear.tsx
diff --git a/apps/www/registry/new-york/block/chart-line-multiple.tsx b/apps/www/__registry__/new-york/charts/chart-line-multiple.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-line-multiple.tsx
rename to apps/www/__registry__/new-york/charts/chart-line-multiple.tsx
diff --git a/apps/www/registry/new-york/block/chart-line-step.tsx b/apps/www/__registry__/new-york/charts/chart-line-step.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-line-step.tsx
rename to apps/www/__registry__/new-york/charts/chart-line-step.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-donut-active.tsx b/apps/www/__registry__/new-york/charts/chart-pie-donut-active.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-donut-active.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-donut-active.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-donut-text.tsx b/apps/www/__registry__/new-york/charts/chart-pie-donut-text.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-donut-text.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-donut-text.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-donut.tsx b/apps/www/__registry__/new-york/charts/chart-pie-donut.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-donut.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-donut.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-interactive.tsx b/apps/www/__registry__/new-york/charts/chart-pie-interactive.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-interactive.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-interactive.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-label-custom.tsx b/apps/www/__registry__/new-york/charts/chart-pie-label-custom.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-label-custom.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-label-custom.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-label-list.tsx b/apps/www/__registry__/new-york/charts/chart-pie-label-list.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-label-list.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-label-list.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-label.tsx b/apps/www/__registry__/new-york/charts/chart-pie-label.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-label.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-label.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-legend.tsx b/apps/www/__registry__/new-york/charts/chart-pie-legend.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-legend.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-legend.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-separator-none.tsx b/apps/www/__registry__/new-york/charts/chart-pie-separator-none.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-separator-none.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-separator-none.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-simple.tsx b/apps/www/__registry__/new-york/charts/chart-pie-simple.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-simple.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-simple.tsx
diff --git a/apps/www/registry/new-york/block/chart-pie-stacked.tsx b/apps/www/__registry__/new-york/charts/chart-pie-stacked.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-pie-stacked.tsx
rename to apps/www/__registry__/new-york/charts/chart-pie-stacked.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-default.tsx b/apps/www/__registry__/new-york/charts/chart-radar-default.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-default.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-default.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-dots.tsx b/apps/www/__registry__/new-york/charts/chart-radar-dots.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-dots.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-dots.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-grid-circle-fill.tsx b/apps/www/__registry__/new-york/charts/chart-radar-grid-circle-fill.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-grid-circle-fill.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-grid-circle-fill.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-grid-circle-no-lines.tsx b/apps/www/__registry__/new-york/charts/chart-radar-grid-circle-no-lines.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-grid-circle-no-lines.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-grid-circle-no-lines.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-grid-circle.tsx b/apps/www/__registry__/new-york/charts/chart-radar-grid-circle.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-grid-circle.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-grid-circle.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-grid-custom.tsx b/apps/www/__registry__/new-york/charts/chart-radar-grid-custom.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-grid-custom.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-grid-custom.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-grid-fill.tsx b/apps/www/__registry__/new-york/charts/chart-radar-grid-fill.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-grid-fill.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-grid-fill.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-grid-none.tsx b/apps/www/__registry__/new-york/charts/chart-radar-grid-none.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-grid-none.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-grid-none.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-icons.tsx b/apps/www/__registry__/new-york/charts/chart-radar-icons.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-icons.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-icons.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-label-custom.tsx b/apps/www/__registry__/new-york/charts/chart-radar-label-custom.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-label-custom.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-label-custom.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-legend.tsx b/apps/www/__registry__/new-york/charts/chart-radar-legend.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-legend.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-legend.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-lines-only.tsx b/apps/www/__registry__/new-york/charts/chart-radar-lines-only.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-lines-only.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-lines-only.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-multiple.tsx b/apps/www/__registry__/new-york/charts/chart-radar-multiple.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-multiple.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-multiple.tsx
diff --git a/apps/www/registry/new-york/block/chart-radar-radius.tsx b/apps/www/__registry__/new-york/charts/chart-radar-radius.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radar-radius.tsx
rename to apps/www/__registry__/new-york/charts/chart-radar-radius.tsx
diff --git a/apps/www/registry/new-york/block/chart-radial-grid.tsx b/apps/www/__registry__/new-york/charts/chart-radial-grid.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radial-grid.tsx
rename to apps/www/__registry__/new-york/charts/chart-radial-grid.tsx
diff --git a/apps/www/registry/new-york/block/chart-radial-label.tsx b/apps/www/__registry__/new-york/charts/chart-radial-label.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radial-label.tsx
rename to apps/www/__registry__/new-york/charts/chart-radial-label.tsx
diff --git a/apps/www/registry/new-york/block/chart-radial-shape.tsx b/apps/www/__registry__/new-york/charts/chart-radial-shape.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radial-shape.tsx
rename to apps/www/__registry__/new-york/charts/chart-radial-shape.tsx
diff --git a/apps/www/registry/new-york/block/chart-radial-simple.tsx b/apps/www/__registry__/new-york/charts/chart-radial-simple.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radial-simple.tsx
rename to apps/www/__registry__/new-york/charts/chart-radial-simple.tsx
diff --git a/apps/www/registry/new-york/block/chart-radial-stacked.tsx b/apps/www/__registry__/new-york/charts/chart-radial-stacked.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radial-stacked.tsx
rename to apps/www/__registry__/new-york/charts/chart-radial-stacked.tsx
diff --git a/apps/www/registry/new-york/block/chart-radial-text.tsx b/apps/www/__registry__/new-york/charts/chart-radial-text.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-radial-text.tsx
rename to apps/www/__registry__/new-york/charts/chart-radial-text.tsx
diff --git a/apps/www/registry/new-york/block/chart-tooltip-advanced.tsx b/apps/www/__registry__/new-york/charts/chart-tooltip-advanced.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-tooltip-advanced.tsx
rename to apps/www/__registry__/new-york/charts/chart-tooltip-advanced.tsx
diff --git a/apps/www/__registry__/new-york/charts/chart-tooltip-default.tsx b/apps/www/__registry__/new-york/charts/chart-tooltip-default.tsx
new file mode 100644
index 00000000000..759b4555bea
--- /dev/null
+++ b/apps/www/__registry__/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/block/chart-tooltip-formatter.tsx b/apps/www/__registry__/new-york/charts/chart-tooltip-formatter.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-tooltip-formatter.tsx
rename to apps/www/__registry__/new-york/charts/chart-tooltip-formatter.tsx
diff --git a/apps/www/registry/new-york/block/chart-tooltip-icons.tsx b/apps/www/__registry__/new-york/charts/chart-tooltip-icons.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-tooltip-icons.tsx
rename to apps/www/__registry__/new-york/charts/chart-tooltip-icons.tsx
diff --git a/apps/www/__registry__/new-york/charts/chart-tooltip-indicator-line.tsx b/apps/www/__registry__/new-york/charts/chart-tooltip-indicator-line.tsx
new file mode 100644
index 00000000000..19c3f858894
--- /dev/null
+++ b/apps/www/__registry__/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/block/chart-tooltip-indicator-none.tsx b/apps/www/__registry__/new-york/charts/chart-tooltip-indicator-none.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-tooltip-indicator-none.tsx
rename to apps/www/__registry__/new-york/charts/chart-tooltip-indicator-none.tsx
diff --git a/apps/www/registry/new-york/block/chart-tooltip-label-custom.tsx b/apps/www/__registry__/new-york/charts/chart-tooltip-label-custom.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-tooltip-label-custom.tsx
rename to apps/www/__registry__/new-york/charts/chart-tooltip-label-custom.tsx
diff --git a/apps/www/registry/new-york/block/chart-tooltip-label-formatter.tsx b/apps/www/__registry__/new-york/charts/chart-tooltip-label-formatter.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-tooltip-label-formatter.tsx
rename to apps/www/__registry__/new-york/charts/chart-tooltip-label-formatter.tsx
diff --git a/apps/www/registry/new-york/block/chart-tooltip-label-none.tsx b/apps/www/__registry__/new-york/charts/chart-tooltip-label-none.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/chart-tooltip-label-none.tsx
rename to apps/www/__registry__/new-york/charts/chart-tooltip-label-none.tsx
diff --git a/apps/www/__registry__/new-york/v0/login-01.tsx b/apps/www/__registry__/new-york/v0/login-01.tsx
deleted file mode 100644
index 17232fa1454..00000000000
--- a/apps/www/__registry__/new-york/v0/login-01.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import Link from "next/link"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
-
-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">
-      <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/www/actions/edit-in-v0.ts b/apps/www/actions/edit-in-v0.ts
index 8acff92d8bc..ca10b126541 100644
--- a/apps/www/actions/edit-in-v0.ts
+++ b/apps/www/actions/edit-in-v0.ts
@@ -2,43 +2,9 @@
 
 import { track } from "@vercel/analytics/server"
 import { capitalCase } from "change-case"
-import { z } from "zod"
 
+import { getRegistryItem } from "@/lib/registry"
 import { Style } from "@/registry/registry-styles"
-import { registryEntrySchema, registryItemTypeSchema } from "@/registry/schema"
-
-async function getRegistryItem(name: string, style: Style["name"]) {
-  const registryURL = new URL(
-    `${process.env.NEXT_PUBLIC_APP_URL}/r/styles/${style}/${name}.json`
-  )
-  const response = await fetch(registryURL)
-
-  if (!response.ok) {
-    return null
-  }
-
-  const data = await response.json()
-
-  const result = registryEntrySchema
-    .extend({
-      files: z.array(
-        z.object({
-          path: z.string(),
-          content: z.string().optional(),
-          type: registryItemTypeSchema,
-          target: z.string().optional(),
-        })
-      ),
-    })
-    .safeParse(data)
-
-  if (!result.success) {
-    console.error(result.error)
-    return null
-  }
-
-  return result.data
-}
 
 export async function editInV0({
   name,
@@ -65,23 +31,23 @@ export async function editInV0({
       url,
     })
 
-    // const payload = {
-    //   title: registryItem.name,
-    //   description: registryItem.description ?? registryItem.name,
-    //   code: registryItem.files?.[0]?.content,
-    //   source: {
-    //     title: "shadcn/ui",
-    //     url,
-    //   },
-    //   meta: {
-    //     project: capitalCase(name.replace(/\d+/g, "")),
-    //     file: `${name}.tsx`,
-    //   },
-    // }
-
     // Remove v0 prefix from the name
     registryItem.name = registryItem.name.replace(/^v0-/, "")
 
+    const projectName = capitalCase(name.replace(/\d+/g, ""))
+    registryItem.description = registryItem.description || projectName
+
+    // Replace `@/registry/new-york/` in files.
+    registryItem.files = registryItem.files?.map((file) => {
+      if (file.content?.includes("@/registry/new-york/ui")) {
+        file.content = file.content?.replaceAll(
+          "@/registry/new-york/ui",
+          "@/components/ui"
+        )
+      }
+      return file
+    })
+
     const payload = {
       version: 2,
       payload: registryItem,
@@ -90,7 +56,7 @@ export async function editInV0({
         url,
       },
       meta: {
-        project: capitalCase(name.replace(/\d+/g, "")),
+        project: projectName,
         file: `${name}.tsx`,
       },
     }
diff --git a/apps/www/app/(app)/blocks/[...categories]/page.tsx b/apps/www/app/(app)/blocks/[...categories]/page.tsx
new file mode 100644
index 00000000000..d02086924a5
--- /dev/null
+++ b/apps/www/app/(app)/blocks/[...categories]/page.tsx
@@ -0,0 +1,31 @@
+import { getAllBlockIds } from "@/lib/blocks"
+import { BlockDisplay } from "@/components/block-display"
+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/www/app/(app)/blocks/layout.tsx b/apps/www/app/(app)/blocks/layout.tsx
index 8b35b010986..e600d75475b 100644
--- a/apps/www/app/(app)/blocks/layout.tsx
+++ b/apps/www/app/(app)/blocks/layout.tsx
@@ -1,6 +1,7 @@
 import { Metadata } from "next"
 
 import { Announcement } from "@/components/announcement"
+import { BlocksNav } from "@/components/blocks-nav"
 import {
   PageActions,
   PageHeader,
@@ -9,6 +10,8 @@ import {
 } from "@/components/page-header"
 import { Button } from "@/registry/new-york/ui/button"
 
+import "@/styles/mdx.css"
+
 export const metadata: Metadata = {
   title: "Building Blocks.",
   description:
@@ -21,12 +24,13 @@ export default function BlocksLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="container 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">
@@ -42,9 +46,14 @@ export default function BlocksLayout({
           </Button>
         </PageActions>
       </PageHeader>
-      <section id="blocks" className="scroll-mt-24">
-        {children}
-      </section>
-    </div>
+      <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 className="container-wrapper flex-1">{children}</div>
+    </>
   )
 }
diff --git a/apps/www/app/(app)/blocks/page.tsx b/apps/www/app/(app)/blocks/page.tsx
index bc50d372159..f8a267bf041 100644
--- a/apps/www/app/(app)/blocks/page.tsx
+++ b/apps/www/app/(app)/blocks/page.tsx
@@ -1,29 +1,18 @@
-import * as React from "react"
-import { unstable_cache } from "next/cache"
-
-import { getAllBlockIds } from "@/lib/blocks"
 import { BlockDisplay } from "@/components/block-display"
 
-const BLOCKS_WHITELIST_PREFIXES = ["sidebar", "login"]
-
-const getBlocks = unstable_cache(async () => {
-  return (await getAllBlockIds()).filter((name) =>
-    BLOCKS_WHITELIST_PREFIXES.some((prefix) => name.startsWith(prefix))
-  )
-}, ["blocks"])
+const FEATURED_BLOCKS = ["sidebar-07", "sidebar-03", "login-03", "login-04"]
 
 export default async function BlocksPage() {
-  const blocks = await getBlocks()
-
   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, index) => (
-          <React.Suspense key={`${name}-${index}`}>
-            <BlockDisplay name={name} />
-          </React.Suspense>
-        ))}
-      </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/www/app/(app)/charts/charts.tsx b/apps/www/app/(app)/charts/charts.tsx
index 1ff2ca3ee1a..694d62b0bc0 100644
--- a/apps/www/app/(app)/charts/charts.tsx
+++ b/apps/www/app/(app)/charts/charts.tsx
@@ -1,76 +1,76 @@
-export { default as ChartAreaDefault } from "@/registry/new-york/block/chart-area-default"
-export { default as ChartAreaLinear } from "@/registry/new-york/block/chart-area-linear"
-export { default as ChartAreaStep } from "@/registry/new-york/block/chart-area-step"
-export { default as ChartAreaLegend } from "@/registry/new-york/block/chart-area-legend"
-export { default as ChartAreaStacked } from "@/registry/new-york/block/chart-area-stacked"
-export { default as ChartAreaStackedExpand } from "@/registry/new-york/block/chart-area-stacked-expand"
-export { default as ChartAreaIcons } from "@/registry/new-york/block/chart-area-icons"
-export { default as ChartAreaGradient } from "@/registry/new-york/block/chart-area-gradient"
-export { default as ChartAreaAxes } from "@/registry/new-york/block/chart-area-axes"
-export { default as ChartAreaInteractive } from "@/registry/new-york/block/chart-area-interactive"
+export { default as ChartAreaDefault } from "@/registry/new-york/charts/chart-area-default"
+export { default as ChartAreaLinear } from "@/registry/new-york/charts/chart-area-linear"
+export { default as ChartAreaStep } from "@/registry/new-york/charts/chart-area-step"
+export { default as ChartAreaLegend } from "@/registry/new-york/charts/chart-area-legend"
+export { default as ChartAreaStacked } from "@/registry/new-york/charts/chart-area-stacked"
+export { default as ChartAreaStackedExpand } from "@/registry/new-york/charts/chart-area-stacked-expand"
+export { default as ChartAreaIcons } from "@/registry/new-york/charts/chart-area-icons"
+export { default as ChartAreaGradient } from "@/registry/new-york/charts/chart-area-gradient"
+export { default as ChartAreaAxes } from "@/registry/new-york/charts/chart-area-axes"
+export { default as ChartAreaInteractive } from "@/registry/new-york/charts/chart-area-interactive"
 
-export { default as ChartBarDefault } from "@/registry/new-york/block/chart-bar-default"
-export { default as ChartBarHorizontal } from "@/registry/new-york/block/chart-bar-horizontal"
-export { default as ChartBarMultiple } from "@/registry/new-york/block/chart-bar-multiple"
-export { default as ChartBarStacked } from "@/registry/new-york/block/chart-bar-stacked"
-export { default as ChartBarLabel } from "@/registry/new-york/block/chart-bar-label"
-export { default as ChartBarLabelCustom } from "@/registry/new-york/block/chart-bar-label-custom"
-export { default as ChartBarMixed } from "@/registry/new-york/block/chart-bar-mixed"
-export { default as ChartBarActive } from "@/registry/new-york/block/chart-bar-active"
-export { default as ChartBarNegative } from "@/registry/new-york/block/chart-bar-negative"
-export { default as ChartBarInteractive } from "@/registry/new-york/block/chart-bar-interactive"
+export { default as ChartBarDefault } from "@/registry/new-york/charts/chart-bar-default"
+export { default as ChartBarHorizontal } from "@/registry/new-york/charts/chart-bar-horizontal"
+export { default as ChartBarMultiple } from "@/registry/new-york/charts/chart-bar-multiple"
+export { default as ChartBarStacked } from "@/registry/new-york/charts/chart-bar-stacked"
+export { default as ChartBarLabel } from "@/registry/new-york/charts/chart-bar-label"
+export { default as ChartBarLabelCustom } from "@/registry/new-york/charts/chart-bar-label-custom"
+export { default as ChartBarMixed } from "@/registry/new-york/charts/chart-bar-mixed"
+export { default as ChartBarActive } from "@/registry/new-york/charts/chart-bar-active"
+export { default as ChartBarNegative } from "@/registry/new-york/charts/chart-bar-negative"
+export { default as ChartBarInteractive } from "@/registry/new-york/charts/chart-bar-interactive"
 
-export { default as ChartLineDefault } from "@/registry/new-york/block/chart-line-default"
-export { default as ChartLineLinear } from "@/registry/new-york/block/chart-line-linear"
-export { default as ChartLineStep } from "@/registry/new-york/block/chart-line-step"
-export { default as ChartLineMultiple } from "@/registry/new-york/block/chart-line-multiple"
-export { default as ChartLineDots } from "@/registry/new-york/block/chart-line-dots"
-export { default as ChartLineDotsCustom } from "@/registry/new-york/block/chart-line-dots-custom"
-export { default as ChartLineDotsColors } from "@/registry/new-york/block/chart-line-dots-colors"
-export { default as ChartLineLabel } from "@/registry/new-york/block/chart-line-label"
-export { default as ChartLineLabelCustom } from "@/registry/new-york/block/chart-line-label-custom"
-export { default as ChartLineInteractive } from "@/registry/new-york/block/chart-line-interactive"
+export { default as ChartLineDefault } from "@/registry/new-york/charts/chart-line-default"
+export { default as ChartLineLinear } from "@/registry/new-york/charts/chart-line-linear"
+export { default as ChartLineStep } from "@/registry/new-york/charts/chart-line-step"
+export { default as ChartLineMultiple } from "@/registry/new-york/charts/chart-line-multiple"
+export { default as ChartLineDots } from "@/registry/new-york/charts/chart-line-dots"
+export { default as ChartLineDotsCustom } from "@/registry/new-york/charts/chart-line-dots-custom"
+export { default as ChartLineDotsColors } from "@/registry/new-york/charts/chart-line-dots-colors"
+export { default as ChartLineLabel } from "@/registry/new-york/charts/chart-line-label"
+export { default as ChartLineLabelCustom } from "@/registry/new-york/charts/chart-line-label-custom"
+export { default as ChartLineInteractive } from "@/registry/new-york/charts/chart-line-interactive"
 
-export { default as ChartPieSimple } from "@/registry/new-york/block/chart-pie-simple"
-export { default as ChartPieSeparatorNone } from "@/registry/new-york/block/chart-pie-separator-none"
-export { default as ChartPieLabel } from "@/registry/new-york/block/chart-pie-label"
-export { default as ChartPieLabelCustom } from "@/registry/new-york/block/chart-pie-label-custom"
-export { default as ChartPieLabelList } from "@/registry/new-york/block/chart-pie-label-list"
-export { default as ChartPieLegend } from "@/registry/new-york/block/chart-pie-legend"
-export { default as ChartPieDonut } from "@/registry/new-york/block/chart-pie-donut"
-export { default as ChartPieDonutActive } from "@/registry/new-york/block/chart-pie-donut-active"
-export { default as ChartPieDonutText } from "@/registry/new-york/block/chart-pie-donut-text"
-export { default as ChartPieStacked } from "@/registry/new-york/block/chart-pie-stacked"
-export { default as ChartPieInteractive } from "@/registry/new-york/block/chart-pie-interactive"
+export { default as ChartPieSimple } from "@/registry/new-york/charts/chart-pie-simple"
+export { default as ChartPieSeparatorNone } from "@/registry/new-york/charts/chart-pie-separator-none"
+export { default as ChartPieLabel } from "@/registry/new-york/charts/chart-pie-label"
+export { default as ChartPieLabelCustom } from "@/registry/new-york/charts/chart-pie-label-custom"
+export { default as ChartPieLabelList } from "@/registry/new-york/charts/chart-pie-label-list"
+export { default as ChartPieLegend } from "@/registry/new-york/charts/chart-pie-legend"
+export { default as ChartPieDonut } from "@/registry/new-york/charts/chart-pie-donut"
+export { default as ChartPieDonutActive } from "@/registry/new-york/charts/chart-pie-donut-active"
+export { default as ChartPieDonutText } from "@/registry/new-york/charts/chart-pie-donut-text"
+export { default as ChartPieStacked } from "@/registry/new-york/charts/chart-pie-stacked"
+export { default as ChartPieInteractive } from "@/registry/new-york/charts/chart-pie-interactive"
 
-export { default as ChartRadarDefault } from "@/registry/new-york/block/chart-radar-default"
-export { default as ChartRadarDots } from "@/registry/new-york/block/chart-radar-dots"
-export { default as ChartRadarLinesOnly } from "@/registry/new-york/block/chart-radar-lines-only"
-export { default as ChartRadarLabelCustom } from "@/registry/new-york/block/chart-radar-label-custom"
-export { default as ChartRadarGridCustom } from "@/registry/new-york/block/chart-radar-grid-custom"
-export { default as ChartRadarGridNone } from "@/registry/new-york/block/chart-radar-grid-none"
-export { default as ChartRadarGridCircle } from "@/registry/new-york/block/chart-radar-grid-circle"
-export { default as ChartRadarGridCircleNoLines } from "@/registry/new-york/block/chart-radar-grid-circle-no-lines"
-export { default as ChartRadarGridCircleFill } from "@/registry/new-york/block/chart-radar-grid-circle-fill"
-export { default as ChartRadarGridFill } from "@/registry/new-york/block/chart-radar-grid-fill"
-export { default as ChartRadarMultiple } from "@/registry/new-york/block/chart-radar-multiple"
-export { default as ChartRadarLegend } from "@/registry/new-york/block/chart-radar-legend"
-export { default as ChartRadarIcons } from "@/registry/new-york/block/chart-radar-icons"
-export { default as ChartRadarRadius } from "@/registry/new-york/block/chart-radar-radius"
+export { default as ChartRadarDefault } from "@/registry/new-york/charts/chart-radar-default"
+export { default as ChartRadarDots } from "@/registry/new-york/charts/chart-radar-dots"
+export { default as ChartRadarLinesOnly } from "@/registry/new-york/charts/chart-radar-lines-only"
+export { default as ChartRadarLabelCustom } from "@/registry/new-york/charts/chart-radar-label-custom"
+export { default as ChartRadarGridCustom } from "@/registry/new-york/charts/chart-radar-grid-custom"
+export { default as ChartRadarGridNone } from "@/registry/new-york/charts/chart-radar-grid-none"
+export { default as ChartRadarGridCircle } from "@/registry/new-york/charts/chart-radar-grid-circle"
+export { default as ChartRadarGridCircleNoLines } from "@/registry/new-york/charts/chart-radar-grid-circle-no-lines"
+export { default as ChartRadarGridCircleFill } from "@/registry/new-york/charts/chart-radar-grid-circle-fill"
+export { default as ChartRadarGridFill } from "@/registry/new-york/charts/chart-radar-grid-fill"
+export { default as ChartRadarMultiple } from "@/registry/new-york/charts/chart-radar-multiple"
+export { default as ChartRadarLegend } from "@/registry/new-york/charts/chart-radar-legend"
+export { default as ChartRadarIcons } from "@/registry/new-york/charts/chart-radar-icons"
+export { default as ChartRadarRadius } from "@/registry/new-york/charts/chart-radar-radius"
 
-export { default as ChartRadialSimple } from "@/registry/new-york/block/chart-radial-simple"
-export { default as ChartRadialLabel } from "@/registry/new-york/block/chart-radial-label"
-export { default as ChartRadialGrid } from "@/registry/new-york/block/chart-radial-grid"
-export { default as ChartRadialText } from "@/registry/new-york/block/chart-radial-text"
-export { default as ChartRadialShape } from "@/registry/new-york/block/chart-radial-shape"
-export { default as ChartRadialStacked } from "@/registry/new-york/block/chart-radial-stacked"
+export { default as ChartRadialSimple } from "@/registry/new-york/charts/chart-radial-simple"
+export { default as ChartRadialLabel } from "@/registry/new-york/charts/chart-radial-label"
+export { default as ChartRadialGrid } from "@/registry/new-york/charts/chart-radial-grid"
+export { default as ChartRadialText } from "@/registry/new-york/charts/chart-radial-text"
+export { default as ChartRadialShape } from "@/registry/new-york/charts/chart-radial-shape"
+export { default as ChartRadialStacked } from "@/registry/new-york/charts/chart-radial-stacked"
 
-export { default as ChartTooltipDefault } from "@/registry/new-york/block/chart-tooltip-default"
-export { default as ChartTooltipIndicatorLine } from "@/registry/new-york/block/chart-tooltip-indicator-line"
-export { default as ChartTooltipIndicatorNone } from "@/registry/new-york/block/chart-tooltip-indicator-none"
-export { default as ChartTooltipLabelCustom } from "@/registry/new-york/block/chart-tooltip-label-custom"
-export { default as ChartTooltipLabelFormatter } from "@/registry/new-york/block/chart-tooltip-label-formatter"
-export { default as ChartTooltipLabelNone } from "@/registry/new-york/block/chart-tooltip-label-none"
-export { default as ChartTooltipFormatter } from "@/registry/new-york/block/chart-tooltip-formatter"
-export { default as ChartTooltipIcons } from "@/registry/new-york/block/chart-tooltip-icons"
-export { default as ChartTooltipAdvanced } from "@/registry/new-york/block/chart-tooltip-advanced"
+export { default as ChartTooltipDefault } from "@/registry/new-york/charts/chart-tooltip-default"
+export { default as ChartTooltipIndicatorLine } from "@/registry/new-york/charts/chart-tooltip-indicator-line"
+export { default as ChartTooltipIndicatorNone } from "@/registry/new-york/charts/chart-tooltip-indicator-none"
+export { default as ChartTooltipLabelCustom } from "@/registry/new-york/charts/chart-tooltip-label-custom"
+export { default as ChartTooltipLabelFormatter } from "@/registry/new-york/charts/chart-tooltip-label-formatter"
+export { default as ChartTooltipLabelNone } from "@/registry/new-york/charts/chart-tooltip-label-none"
+export { default as ChartTooltipFormatter } from "@/registry/new-york/charts/chart-tooltip-formatter"
+export { default as ChartTooltipIcons } from "@/registry/new-york/charts/chart-tooltip-icons"
+export { default as ChartTooltipAdvanced } from "@/registry/new-york/charts/chart-tooltip-advanced"
diff --git a/apps/www/app/(app)/charts/layout.tsx b/apps/www/app/(app)/charts/layout.tsx
index bf41aa3da8f..8f2b7e2b97b 100644
--- a/apps/www/app/(app)/charts/layout.tsx
+++ b/apps/www/app/(app)/charts/layout.tsx
@@ -2,6 +2,7 @@ import { Metadata } from "next"
 import Link from "next/link"
 
 import { Announcement } from "@/components/announcement"
+import { ChartsNav } from "@/components/charts-nav"
 import {
   PageActions,
   PageHeader,
@@ -22,7 +23,7 @@ export default function ChartsLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="container relative">
+    <>
       <PageHeader>
         <Announcement />
         <PageHeaderHeading>Beautiful Charts</PageHeaderHeading>
@@ -38,9 +39,20 @@ export default function ChartsLayout({
           </Button>
         </PageActions>
       </PageHeader>
-      <section id="charts" className="scroll-mt-20">
-        {children}
-      </section>
-    </div>
+      <div className="border-grid border-b">
+        <div className="container-wrapper">
+          <div className="container py-4">
+            <ChartsNav />
+          </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/www/app/(app)/charts/page.tsx b/apps/www/app/(app)/charts/page.tsx
index f368ff27dfc..d1584b15329 100644
--- a/apps/www/app/(app)/charts/page.tsx
+++ b/apps/www/app/(app)/charts/page.tsx
@@ -1,6 +1,5 @@
 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/new-york/ui/separator"
@@ -9,7 +8,6 @@ import * as Charts from "@/app/(app)/charts/charts"
 export default function ChartsPage() {
   return (
     <div className="grid gap-4">
-      <ChartsNav className="[&>a:first-child]:bg-muted [&>a:first-child]:font-medium [&>a:first-child]:text-primary" />
       <ThemesStyle />
       <div className="gap-6 md:flex md:flex-row-reverse md:items-start">
         <ThemesSwitcher
diff --git a/apps/www/app/(app)/colors/layout.tsx b/apps/www/app/(app)/colors/layout.tsx
index 35d973c625e..daaaf2f1fd8 100644
--- a/apps/www/app/(app)/colors/layout.tsx
+++ b/apps/www/app/(app)/colors/layout.tsx
@@ -15,13 +15,13 @@ export const metadata: Metadata = {
   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/www/app/(app)/colors/page.tsx b/apps/www/app/(app)/colors/page.tsx
index ad1c8aa38e6..693a6fccaae 100644
--- a/apps/www/app/(app)/colors/page.tsx
+++ b/apps/www/app/(app)/colors/page.tsx
@@ -1,11 +1,11 @@
 import { getColors } from "@/lib/colors"
 import { ColorPalette } from "@/components/color-palette"
 
-const colors = getColors()
-
 export default function ColorsPage() {
+  const colors = getColors()
+
   return (
-    <div id="colors" className="grid scroll-mt-20 gap-8">
+    <div className="grid gap-8">
       {colors.map((colorPalette) => (
         <ColorPalette key={colorPalette.name} colorPalette={colorPalette} />
       ))}
diff --git a/apps/www/app/(app)/docs/[[...slug]]/page.tsx b/apps/www/app/(app)/docs/[[...slug]]/page.tsx
index 824de656341..bef929477cf 100644
--- a/apps/www/app/(app)/docs/[[...slug]]/page.tsx
+++ b/apps/www/app/(app)/docs/[[...slug]]/page.tsx
@@ -4,7 +4,7 @@ import { allDocs } from "contentlayer/generated"
 import "@/styles/mdx.css"
 import type { Metadata } from "next"
 import Link from "next/link"
-import { ChevronRightIcon, ExternalLinkIcon } from "@radix-ui/react-icons"
+import { ChevronRight, ExternalLink } from "lucide-react"
 import Balancer from "react-wrap-balancer"
 
 import { siteConfig } from "@/config/site"
@@ -15,7 +15,6 @@ import { OpenInV0Cta } from "@/components/open-in-v0-cta"
 import { DocsPager } from "@/components/pager"
 import { DashboardTableOfContents } from "@/components/toc"
 import { badgeVariants } from "@/registry/new-york/ui/badge"
-import { ScrollArea } from "@/registry/new-york/ui/scroll-area"
 
 interface DocPageProps {
   params: {
@@ -89,10 +88,10 @@ export default async function DocPage({ params }: DocPageProps) {
 
   return (
     <main className="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
-      <div className="mx-auto w-full min-w-0">
+      <div className="mx-auto w-full min-w-0 max-w-2xl">
         <div className="mb-4 flex items-center space-x-1 text-sm leading-none text-muted-foreground">
           <div className="truncate">Docs</div>
-          <ChevronRightIcon className="h-3.5 w-3.5" />
+          <ChevronRight className="h-3.5 w-3.5" />
           <div className="text-foreground">{doc.title}</div>
         </div>
         <div className="space-y-2">
@@ -115,7 +114,7 @@ export default async function DocPage({ params }: DocPageProps) {
                 className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}
               >
                 Docs
-                <ExternalLinkIcon className="h-3 w-3" />
+                <ExternalLink className="h-3 w-3" />
               </Link>
             )}
             {doc.links?.api && (
@@ -126,7 +125,7 @@ export default async function DocPage({ params }: DocPageProps) {
                 className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}
               >
                 API Reference
-                <ExternalLinkIcon className="h-3 w-3" />
+                <ExternalLink className="h-3 w-3" />
               </Link>
             )}
           </div>
@@ -137,11 +136,11 @@ export default async function DocPage({ params }: DocPageProps) {
         <DocsPager doc={doc} />
       </div>
       <div className="hidden text-sm xl:block">
-        <div className="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] pt-4">
-          <ScrollArea className="h-full pb-10">
+        <div className="sticky top-20 -mt-6 h-[calc(100vh-3.5rem)] pt-4">
+          <div className="no-scrollbar h-full overflow-auto pb-10">
             {doc.toc && <DashboardTableOfContents toc={toc} />}
             <OpenInV0Cta className="mt-6 max-w-[80%]" />
-          </ScrollArea>
+          </div>
         </div>
       </div>
     </main>
diff --git a/apps/www/app/(app)/docs/layout.tsx b/apps/www/app/(app)/docs/layout.tsx
index f16dc0c35b6..148baa46acd 100644
--- a/apps/www/app/(app)/docs/layout.tsx
+++ b/apps/www/app/(app)/docs/layout.tsx
@@ -1,19 +1,18 @@
 import { docsConfig } from "@/config/docs"
-import { DocsSidebarNav } from "@/components/sidebar-nav"
-import { ScrollArea } from "@/registry/new-york/ui/scroll-area"
+import { DocsNav } from "@/components/docs-nav"
 
-interface DocsLayoutProps {
+export default function DocsLayout({
+  children,
+}: {
   children: React.ReactNode
-}
-
-export default function DocsLayout({ children }: DocsLayoutProps) {
+}) {
   return (
-    <div className="border-b">
+    <div className="container-wrapper">
       <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 className="border-grid fixed top-14 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 border-r md:sticky md:block">
+          <div className="no-scrollbar h-full overflow-auto py-6 pr-4 lg:py-8">
+            <DocsNav config={docsConfig} />
+          </div>
         </aside>
         {children}
       </div>
diff --git a/apps/www/app/(app)/examples/cards/components/date-picker.tsx b/apps/www/app/(app)/examples/cards/components/date-picker.tsx
index 124c13a1e06..d14594d13e8 100644
--- a/apps/www/app/(app)/examples/cards/components/date-picker.tsx
+++ b/apps/www/app/(app)/examples/cards/components/date-picker.tsx
@@ -1,4 +1,4 @@
-import DatePickerWithRange from "@/registry/default/example/date-picker-with-range"
+import DatePickerWithRange from "@/registry/default/examples/date-picker-with-range"
 import { Card, CardContent } from "@/registry/new-york/ui/card"
 import { Label } from "@/registry/new-york/ui/label"
 
diff --git a/apps/www/app/(app)/examples/cards/components/github-card.tsx b/apps/www/app/(app)/examples/cards/components/github-card.tsx
index b80ea22b221..9e4c039da47 100644
--- a/apps/www/app/(app)/examples/cards/components/github-card.tsx
+++ b/apps/www/app/(app)/examples/cards/components/github-card.tsx
@@ -1,9 +1,4 @@
-import {
-  ChevronDownIcon,
-  CircleIcon,
-  PlusIcon,
-  StarIcon,
-} from "@radix-ui/react-icons"
+import { ChevronDown, Circle, Plus, Star } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import {
@@ -37,14 +32,14 @@ export function DemoGithub() {
         </div>
         <div className="flex items-center space-x-1 rounded-md bg-secondary text-secondary-foreground">
           <Button variant="secondary" className="px-3 shadow-none">
-            <StarIcon className="mr-2 h-4 w-4" />
+            <Star />
             Star
           </Button>
           <Separator orientation="vertical" className="h-[20px]" />
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="secondary" className="px-2 shadow-none">
-                <ChevronDownIcon className="h-4 w-4 text-secondary-foreground" />
+                <ChevronDown className="text-secondary-foreground" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent
@@ -62,7 +57,7 @@ export function DemoGithub() {
               <DropdownMenuCheckboxItem>Inspiration</DropdownMenuCheckboxItem>
               <DropdownMenuSeparator />
               <DropdownMenuItem>
-                <PlusIcon className="mr-2 h-4 w-4" /> Create List
+                <Plus /> Create List
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -71,11 +66,11 @@ export function DemoGithub() {
       <CardContent>
         <div className="flex space-x-4 text-sm text-muted-foreground">
           <div className="flex items-center">
-            <CircleIcon className="mr-1 h-3 w-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">
-            <StarIcon className="mr-1 h-3 w-3" />
+            <Star className="mr-1 h-3 w-3" />
             20k
           </div>
           <div>Updated April 2023</div>
diff --git a/apps/www/app/(app)/examples/cards/components/notifications.tsx b/apps/www/app/(app)/examples/cards/components/notifications.tsx
index c0a2cec57cb..766e16584d3 100644
--- a/apps/www/app/(app)/examples/cards/components/notifications.tsx
+++ b/apps/www/app/(app)/examples/cards/components/notifications.tsx
@@ -1,4 +1,4 @@
-import { BellIcon, EyeNoneIcon, PersonIcon } from "@radix-ui/react-icons"
+import { Bell, EyeOff, User } from "lucide-react"
 
 import {
   Card,
@@ -19,7 +19,7 @@ export function DemoNotifications() {
       </CardHeader>
       <CardContent className="grid gap-1">
         <div className="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
-          <BellIcon className="mt-px h-5 w-5" />
+          <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-sm text-muted-foreground">
@@ -28,7 +28,7 @@ export function DemoNotifications() {
           </div>
         </div>
         <div className="-mx-2 flex items-start space-x-4 rounded-md bg-accent p-2 text-accent-foreground transition-all">
-          <PersonIcon className="mt-px h-5 w-5" />
+          <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-sm text-muted-foreground">
@@ -37,7 +37,7 @@ export function DemoNotifications() {
           </div>
         </div>
         <div className="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
-          <EyeNoneIcon className="mt-px h-5 w-5" />
+          <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-sm text-muted-foreground">
diff --git a/apps/www/app/(app)/examples/cards/components/share-document.tsx b/apps/www/app/(app)/examples/cards/components/share-document.tsx
index fb599c7892d..aea2607cc46 100644
--- a/apps/www/app/(app)/examples/cards/components/share-document.tsx
+++ b/apps/www/app/(app)/examples/cards/components/share-document.tsx
@@ -41,7 +41,7 @@ export function DemoShareDocument() {
         </div>
         <Separator className="my-4" />
         <div className="space-y-4">
-          <h4 className="text-sm font-medium">People with access</h4>
+          <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">
diff --git a/apps/www/app/(app)/examples/cards/components/team-members.tsx b/apps/www/app/(app)/examples/cards/components/team-members.tsx
index ff8d9a58176..52e841535a8 100644
--- a/apps/www/app/(app)/examples/cards/components/team-members.tsx
+++ b/apps/www/app/(app)/examples/cards/components/team-members.tsx
@@ -1,4 +1,4 @@
-import { ChevronDownIcon } from "@radix-ui/react-icons"
+import { ChevronDown } from "lucide-react"
 
 import {
   Avatar,
@@ -51,8 +51,7 @@ export function DemoTeamMembers() {
           <Popover>
             <PopoverTrigger asChild>
               <Button variant="outline" className="ml-auto">
-                Owner{" "}
-                <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
+                Owner <ChevronDown className="text-muted-foreground" />
               </Button>
             </PopoverTrigger>
             <PopoverContent className="p-0" align="end">
@@ -105,8 +104,7 @@ export function DemoTeamMembers() {
           <Popover>
             <PopoverTrigger asChild>
               <Button variant="outline" className="ml-auto">
-                Member{" "}
-                <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
+                Member <ChevronDown className="text-muted-foreground" />
               </Button>
             </PopoverTrigger>
             <PopoverContent className="p-0" align="end">
diff --git a/apps/www/app/(app)/examples/dashboard/components/date-range-picker.tsx b/apps/www/app/(app)/examples/dashboard/components/date-range-picker.tsx
index 46238b12063..a4dd6ca2da0 100644
--- a/apps/www/app/(app)/examples/dashboard/components/date-range-picker.tsx
+++ b/apps/www/app/(app)/examples/dashboard/components/date-range-picker.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { CalendarIcon } from "@radix-ui/react-icons"
 import { addDays, format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
 import { DateRange } from "react-day-picker"
 
 import { cn } from "@/lib/utils"
diff --git a/apps/www/app/(app)/examples/dashboard/components/team-switcher.tsx b/apps/www/app/(app)/examples/dashboard/components/team-switcher.tsx
index 42c7af13240..8171046e7c5 100644
--- a/apps/www/app/(app)/examples/dashboard/components/team-switcher.tsx
+++ b/apps/www/app/(app)/examples/dashboard/components/team-switcher.tsx
@@ -1,11 +1,7 @@
 "use client"
 
 import * as React from "react"
-import {
-  CaretSortIcon,
-  CheckIcon,
-  PlusCircledIcon,
-} from "@radix-ui/react-icons"
+import { Check, ChevronsUpDown, PlusCircle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import {
@@ -105,7 +101,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
               <AvatarFallback>SC</AvatarFallback>
             </Avatar>
             {selectedTeam.label}
-            <CaretSortIcon className="ml-auto h-4 w-4 shrink-0 opacity-50" />
+            <ChevronsUpDown className="ml-auto opacity-50" />
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-[200px] p-0">
@@ -133,9 +129,9 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
                         <AvatarFallback>SC</AvatarFallback>
                       </Avatar>
                       {team.label}
-                      <CheckIcon
+                      <Check
                         className={cn(
-                          "ml-auto h-4 w-4",
+                          "ml-auto",
                           selectedTeam.value === team.value
                             ? "opacity-100"
                             : "opacity-0"
@@ -156,7 +152,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
                       setShowNewTeamDialog(true)
                     }}
                   >
-                    <PlusCircledIcon className="mr-2 h-5 w-5" />
+                    <PlusCircle className="h-5 w-5" />
                     Create Team
                   </CommandItem>
                 </DialogTrigger>
diff --git a/apps/www/app/(app)/examples/forms/account/account-form.tsx b/apps/www/app/(app)/examples/forms/account/account-form.tsx
index a5862b4b210..0eed6c44ebc 100644
--- a/apps/www/app/(app)/examples/forms/account/account-form.tsx
+++ b/apps/www/app/(app)/examples/forms/account/account-form.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { CalendarIcon, CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
 import { format } from "date-fns"
+import { CalendarIcon, Check, ChevronsUpDown } from "lucide-react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 
@@ -174,7 +174,7 @@ export function AccountForm() {
                             (language) => language.value === field.value
                           )?.label
                         : "Select language"}
-                      <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      <ChevronsUpDown className="opacity-50" />
                     </Button>
                   </FormControl>
                 </PopoverTrigger>
@@ -192,9 +192,9 @@ export function AccountForm() {
                               form.setValue("language", language.value)
                             }}
                           >
-                            <CheckIcon
+                            <Check
                               className={cn(
-                                "mr-2 h-4 w-4",
+                                "mr-2",
                                 language.value === field.value
                                   ? "opacity-100"
                                   : "opacity-0"
diff --git a/apps/www/app/(app)/examples/forms/appearance/appearance-form.tsx b/apps/www/app/(app)/examples/forms/appearance/appearance-form.tsx
index 676884dbbdc..b89dbfeea4e 100644
--- a/apps/www/app/(app)/examples/forms/appearance/appearance-form.tsx
+++ b/apps/www/app/(app)/examples/forms/appearance/appearance-form.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { ChevronDownIcon } from "@radix-ui/react-icons"
+import { ChevronDown } from "lucide-react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 
@@ -76,7 +76,7 @@ export function AppearanceForm() {
                     <option value="system">System</option>
                   </select>
                 </FormControl>
-                <ChevronDownIcon className="absolute right-3 top-2.5 h-4 w-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.
diff --git a/apps/www/app/(app)/examples/layout.tsx b/apps/www/app/(app)/examples/layout.tsx
index 1988b8b6f4b..590810dfd9c 100644
--- a/apps/www/app/(app)/examples/layout.tsx
+++ b/apps/www/app/(app)/examples/layout.tsx
@@ -1,7 +1,6 @@
 import { Metadata } from "next"
 import Link from "next/link"
 
-import { cn } from "@/lib/utils"
 import { Announcement } from "@/components/announcement"
 import { ExamplesNav } from "@/components/examples-nav"
 import {
@@ -10,45 +9,50 @@ import {
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@/components/page-header"
-import { Button, buttonVariants } from "@/registry/new-york/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 
 export const metadata: Metadata = {
   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="container relative">
+    <>
       <PageHeader>
         <Announcement />
-        <PageHeaderHeading className="hidden md:block">
-          Check out some examples
-        </PageHeaderHeading>
-        <PageHeaderHeading className="md:hidden">Examples</PageHeaderHeading>
+        <PageHeaderHeading>Build your component library</PageHeaderHeading>
         <PageHeaderDescription>
-          Dashboard, cards, authentication. Some examples built using the
-          components. Use this as a guide to build your own.
+          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 href="/components">Components</Link>
+            <Link href="/blocks">Browse Blocks</Link>
           </Button>
         </PageActions>
       </PageHeader>
-      <section>
-        <ExamplesNav />
-        <div className="overflow-hidden rounded-[0.5rem] border bg-background shadow">
-          {children}
+      <div className="border-grid border-b">
+        <div className="container-wrapper">
+          <div className="container py-4">
+            <ExamplesNav />
+          </div>
+        </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>
-      </section>
-    </div>
+      </div>
+    </>
   )
 }
diff --git a/apps/www/app/(app)/examples/music/components/album-artwork.tsx b/apps/www/app/(app)/examples/music/components/album-artwork.tsx
index a226c83bcc5..8cdc5e2a262 100644
--- a/apps/www/app/(app)/examples/music/components/album-artwork.tsx
+++ b/apps/www/app/(app)/examples/music/components/album-artwork.tsx
@@ -1,5 +1,5 @@
 import Image from "next/image"
-import { PlusCircledIcon } from "@radix-ui/react-icons"
+import { PlusCircle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import {
@@ -54,7 +54,7 @@ export function AlbumArtwork({
             <ContextMenuSubTrigger>Add to Playlist</ContextMenuSubTrigger>
             <ContextMenuSubContent className="w-48">
               <ContextMenuItem>
-                <PlusCircledIcon className="mr-2 h-4 w-4" />
+                <PlusCircle className="mr-2 h-4 w-4" />
                 New Playlist
               </ContextMenuItem>
               <ContextMenuSeparator />
diff --git a/apps/www/app/(app)/examples/music/page.tsx b/apps/www/app/(app)/examples/music/page.tsx
index 40960c6b180..5321ccc41d8 100644
--- a/apps/www/app/(app)/examples/music/page.tsx
+++ b/apps/www/app/(app)/examples/music/page.tsx
@@ -1,6 +1,6 @@
 import { Metadata } from "next"
 import Image from "next/image"
-import { PlusCircledIcon } from "@radix-ui/react-icons"
+import { PlusCircle } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
@@ -64,7 +64,7 @@ export default function MusicPage() {
                       </TabsList>
                       <div className="ml-auto mr-4">
                         <Button>
-                          <PlusCircledIcon className="mr-2 h-4 w-4" />
+                          <PlusCircle />
                           Add music
                         </Button>
                       </div>
diff --git a/apps/www/app/(app)/examples/playground/components/model-selector.tsx b/apps/www/app/(app)/examples/playground/components/model-selector.tsx
index fb669827d07..1269069e650 100644
--- a/apps/www/app/(app)/examples/playground/components/model-selector.tsx
+++ b/apps/www/app/(app)/examples/playground/components/model-selector.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
 import { PopoverProps } from "@radix-ui/react-popover"
+import { Check, ChevronsUpDown } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { useMutationObserver } from "@/hooks/use-mutation-observer"
@@ -64,7 +64,7 @@ export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
             className="w-full justify-between"
           >
             {selectedModel ? selectedModel.name : "Select a model..."}
-            <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            <ChevronsUpDown className="opacity-50" />
           </Button>
         </PopoverTrigger>
         <PopoverContent align="end" className="w-[250px] p-0">
@@ -154,11 +154,8 @@ function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) {
       className="data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground"
     >
       {model.name}
-      <CheckIcon
-        className={cn(
-          "ml-auto h-4 w-4",
-          isSelected ? "opacity-100" : "opacity-0"
-        )}
+      <Check
+        className={cn("ml-auto", isSelected ? "opacity-100" : "opacity-0")}
       />
     </CommandItem>
   )
diff --git a/apps/www/app/(app)/examples/playground/components/preset-actions.tsx b/apps/www/app/(app)/examples/playground/components/preset-actions.tsx
index 8fb6aa115b3..9b57241a045 100644
--- a/apps/www/app/(app)/examples/playground/components/preset-actions.tsx
+++ b/apps/www/app/(app)/examples/playground/components/preset-actions.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import { Dialog } from "@radix-ui/react-dialog"
-import { DotsHorizontalIcon } from "@radix-ui/react-icons"
+import { MoreHorizontal } from "lucide-react"
 
 import { toast } from "@/registry/new-york/hooks/use-toast"
 import {
@@ -40,9 +40,9 @@ export function PresetActions() {
     <>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="secondary">
+          <Button variant="secondary" size="icon">
             <span className="sr-only">Actions</span>
-            <DotsHorizontalIcon className="h-4 w-4" />
+            <MoreHorizontal />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
diff --git a/apps/www/app/(app)/examples/playground/components/preset-selector.tsx b/apps/www/app/(app)/examples/playground/components/preset-selector.tsx
index eefb4b06d5d..f8a99beb95c 100644
--- a/apps/www/app/(app)/examples/playground/components/preset-selector.tsx
+++ b/apps/www/app/(app)/examples/playground/components/preset-selector.tsx
@@ -2,8 +2,8 @@
 
 import * as React from "react"
 import { useRouter } from "next/navigation"
-import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
 import { PopoverProps } from "@radix-ui/react-popover"
+import { Check, ChevronsUpDown } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/registry/new-york/ui/button"
@@ -43,7 +43,7 @@ export function PresetSelector({ presets, ...props }: PresetSelectorProps) {
           className="flex-1 justify-between md:max-w-[200px] lg:max-w-[300px]"
         >
           {selectedPreset ? selectedPreset.name : "Load a preset..."}
-          <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <ChevronsUpDown className="opacity-50" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[300px] p-0">
@@ -61,9 +61,9 @@ export function PresetSelector({ presets, ...props }: PresetSelectorProps) {
                   }}
                 >
                   {preset.name}
-                  <CheckIcon
+                  <Check
                     className={cn(
-                      "ml-auto h-4 w-4",
+                      "ml-auto",
                       selectedPreset?.id === preset.id
                         ? "opacity-100"
                         : "opacity-0"
diff --git a/apps/www/app/(app)/examples/playground/components/preset-share.tsx b/apps/www/app/(app)/examples/playground/components/preset-share.tsx
index fa3e695de22..2215d63db7f 100644
--- a/apps/www/app/(app)/examples/playground/components/preset-share.tsx
+++ b/apps/www/app/(app)/examples/playground/components/preset-share.tsx
@@ -1,4 +1,4 @@
-import { CopyIcon } from "@radix-ui/react-icons"
+import { Copy } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import { Input } from "@/registry/new-york/ui/input"
@@ -37,7 +37,7 @@ export function PresetShare() {
           </div>
           <Button type="submit" size="sm" className="px-3">
             <span className="sr-only">Copy</span>
-            <CopyIcon className="h-4 w-4" />
+            <Copy />
           </Button>
         </div>
       </PopoverContent>
diff --git a/apps/www/app/(app)/examples/playground/page.tsx b/apps/www/app/(app)/examples/playground/page.tsx
index 0ab59665ae5..6d046508f3d 100644
--- a/apps/www/app/(app)/examples/playground/page.tsx
+++ b/apps/www/app/(app)/examples/playground/page.tsx
@@ -1,6 +1,6 @@
 import { Metadata } from "next"
 import Image from "next/image"
-import { CounterClockwiseClockIcon } from "@radix-ui/react-icons"
+import { RotateCcw } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import {
@@ -265,7 +265,7 @@ export default function PlaygroundPage() {
                       <Button>Submit</Button>
                       <Button variant="secondary">
                         <span className="sr-only">Show history</span>
-                        <CounterClockwiseClockIcon className="h-4 w-4" />
+                        <RotateCcw />
                       </Button>
                     </div>
                   </div>
@@ -283,7 +283,7 @@ export default function PlaygroundPage() {
                       <Button>Submit</Button>
                       <Button variant="secondary">
                         <span className="sr-only">Show history</span>
-                        <CounterClockwiseClockIcon className="h-4 w-4" />
+                        <RotateCcw />
                       </Button>
                     </div>
                   </div>
@@ -314,7 +314,7 @@ export default function PlaygroundPage() {
                       <Button>Submit</Button>
                       <Button variant="secondary">
                         <span className="sr-only">Show history</span>
-                        <CounterClockwiseClockIcon className="h-4 w-4" />
+                        <RotateCcw />
                       </Button>
                     </div>
                   </div>
diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-column-header.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-column-header.tsx
index 7df71bb4a12..389c53c4ced 100644
--- a/apps/www/app/(app)/examples/tasks/components/data-table-column-header.tsx
+++ b/apps/www/app/(app)/examples/tasks/components/data-table-column-header.tsx
@@ -1,10 +1,5 @@
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  CaretSortIcon,
-  EyeNoneIcon,
-} from "@radix-ui/react-icons"
 import { Column } from "@tanstack/react-table"
+import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/registry/new-york/ui/button"
@@ -42,26 +37,26 @@ export function DataTableColumnHeader<TData, TValue>({
           >
             <span>{title}</span>
             {column.getIsSorted() === "desc" ? (
-              <ArrowDownIcon className="ml-2 h-4 w-4" />
+              <ArrowDown />
             ) : column.getIsSorted() === "asc" ? (
-              <ArrowUpIcon className="ml-2 h-4 w-4" />
+              <ArrowUp />
             ) : (
-              <CaretSortIcon className="ml-2 h-4 w-4" />
+              <ChevronsUpDown />
             )}
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start">
           <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
-            <ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            <ArrowUp className="h-3.5 w-3.5 text-muted-foreground/70" />
             Asc
           </DropdownMenuItem>
           <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
-            <ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            <ArrowDown className="h-3.5 w-3.5 text-muted-foreground/70" />
             Desc
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
-            <EyeNoneIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            <EyeOff className="h-3.5 w-3.5 text-muted-foreground/70" />
             Hide
           </DropdownMenuItem>
         </DropdownMenuContent>
diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx
index b1a975fd7a9..d39bd53ea61 100644
--- a/apps/www/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx
+++ b/apps/www/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
-import { CheckIcon, PlusCircledIcon } from "@radix-ui/react-icons"
 import { Column } from "@tanstack/react-table"
+import { Check, PlusCircle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { Badge } from "@/registry/new-york/ui/badge"
@@ -43,7 +43,7 @@ export function DataTableFacetedFilter<TData, TValue>({
     <Popover>
       <PopoverTrigger asChild>
         <Button variant="outline" size="sm" className="h-8 border-dashed">
-          <PlusCircledIcon className="mr-2 h-4 w-4" />
+          <PlusCircle />
           {title}
           {selectedValues?.size > 0 && (
             <>
@@ -111,7 +111,7 @@ export function DataTableFacetedFilter<TData, TValue>({
                           : "opacity-50 [&_svg]:invisible"
                       )}
                     >
-                      <CheckIcon className={cn("h-4 w-4")} />
+                      <Check />
                     </div>
                     {option.icon && (
                       <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-pagination.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-pagination.tsx
index 3e40a83b4f4..049b2e20c0d 100644
--- a/apps/www/app/(app)/examples/tasks/components/data-table-pagination.tsx
+++ b/apps/www/app/(app)/examples/tasks/components/data-table-pagination.tsx
@@ -1,10 +1,10 @@
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  DoubleArrowLeftIcon,
-  DoubleArrowRightIcon,
-} from "@radix-ui/react-icons"
 import { Table } from "@tanstack/react-table"
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import {
@@ -61,7 +61,7 @@ export function DataTablePagination<TData>({
             disabled={!table.getCanPreviousPage()}
           >
             <span className="sr-only">Go to first page</span>
-            <DoubleArrowLeftIcon className="h-4 w-4" />
+            <ChevronsLeft />
           </Button>
           <Button
             variant="outline"
@@ -70,7 +70,7 @@ export function DataTablePagination<TData>({
             disabled={!table.getCanPreviousPage()}
           >
             <span className="sr-only">Go to previous page</span>
-            <ChevronLeftIcon className="h-4 w-4" />
+            <ChevronLeft />
           </Button>
           <Button
             variant="outline"
@@ -79,7 +79,7 @@ export function DataTablePagination<TData>({
             disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to next page</span>
-            <ChevronRightIcon className="h-4 w-4" />
+            <ChevronRight />
           </Button>
           <Button
             variant="outline"
@@ -88,7 +88,7 @@ export function DataTablePagination<TData>({
             disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to last page</span>
-            <DoubleArrowRightIcon className="h-4 w-4" />
+            <ChevronsRight />
           </Button>
         </div>
       </div>
diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-row-actions.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-row-actions.tsx
index 2dfa8cd2069..8546b2a38ad 100644
--- a/apps/www/app/(app)/examples/tasks/components/data-table-row-actions.tsx
+++ b/apps/www/app/(app)/examples/tasks/components/data-table-row-actions.tsx
@@ -1,7 +1,7 @@
 "use client"
 
-import { DotsHorizontalIcon } from "@radix-ui/react-icons"
 import { Row } from "@tanstack/react-table"
+import { MoreHorizontal } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import {
@@ -37,7 +37,7 @@ export function DataTableRowActions<TData>({
           variant="ghost"
           className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
         >
-          <DotsHorizontalIcon className="h-4 w-4" />
+          <MoreHorizontal />
           <span className="sr-only">Open menu</span>
         </Button>
       </DropdownMenuTrigger>
diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-toolbar.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-toolbar.tsx
index 10bd91aee2a..a3a87b11c38 100644
--- a/apps/www/app/(app)/examples/tasks/components/data-table-toolbar.tsx
+++ b/apps/www/app/(app)/examples/tasks/components/data-table-toolbar.tsx
@@ -1,7 +1,7 @@
 "use client"
 
-import { Cross2Icon } from "@radix-ui/react-icons"
 import { Table } from "@tanstack/react-table"
+import { X } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import { Input } from "@/registry/new-york/ui/input"
@@ -51,7 +51,7 @@ export function DataTableToolbar<TData>({
             className="h-8 px-2 lg:px-3"
           >
             Reset
-            <Cross2Icon className="ml-2 h-4 w-4" />
+            <X />
           </Button>
         )}
       </div>
diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-view-options.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-view-options.tsx
index 270bd8edf16..d7fe8776590 100644
--- a/apps/www/app/(app)/examples/tasks/components/data-table-view-options.tsx
+++ b/apps/www/app/(app)/examples/tasks/components/data-table-view-options.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"
-import { MixerHorizontalIcon } from "@radix-ui/react-icons"
 import { Table } from "@tanstack/react-table"
+import { Settings2 } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import {
@@ -28,7 +28,7 @@ export function DataTableViewOptions<TData>({
           size="sm"
           className="ml-auto hidden h-8 lg:flex"
         >
-          <MixerHorizontalIcon className="mr-2 h-4 w-4" />
+          <Settings2 />
           View
         </Button>
       </DropdownMenuTrigger>
diff --git a/apps/www/app/(app)/examples/tasks/data/data.tsx b/apps/www/app/(app)/examples/tasks/data/data.tsx
index a507982f623..c4792ba82c2 100644
--- a/apps/www/app/(app)/examples/tasks/data/data.tsx
+++ b/apps/www/app/(app)/examples/tasks/data/data.tsx
@@ -1,13 +1,13 @@
 import {
-  ArrowDownIcon,
-  ArrowRightIcon,
-  ArrowUpIcon,
-  CheckCircledIcon,
-  CircleIcon,
-  CrossCircledIcon,
-  QuestionMarkCircledIcon,
-  StopwatchIcon,
-} from "@radix-ui/react-icons"
+  ArrowDown,
+  ArrowRight,
+  ArrowUp,
+  CheckCircle,
+  Circle,
+  CircleOff,
+  HelpCircle,
+  Timer,
+} from "lucide-react"
 
 export const labels = [
   {
@@ -28,27 +28,27 @@ export const statuses = [
   {
     value: "backlog",
     label: "Backlog",
-    icon: QuestionMarkCircledIcon,
+    icon: HelpCircle,
   },
   {
     value: "todo",
     label: "Todo",
-    icon: CircleIcon,
+    icon: Circle,
   },
   {
     value: "in progress",
     label: "In Progress",
-    icon: StopwatchIcon,
+    icon: Timer,
   },
   {
     value: "done",
     label: "Done",
-    icon: CheckCircledIcon,
+    icon: CheckCircle,
   },
   {
     value: "canceled",
     label: "Canceled",
-    icon: CrossCircledIcon,
+    icon: CircleOff,
   },
 ]
 
@@ -56,16 +56,16 @@ export const priorities = [
   {
     label: "Low",
     value: "low",
-    icon: ArrowDownIcon,
+    icon: ArrowDown,
   },
   {
     label: "Medium",
     value: "medium",
-    icon: ArrowRightIcon,
+    icon: ArrowRight,
   },
   {
     label: "High",
     value: "high",
-    icon: ArrowUpIcon,
+    icon: ArrowUp,
   },
 ]
diff --git a/apps/www/app/(app)/layout.tsx b/apps/www/app/(app)/layout.tsx
index ceaa87acfbb..6838c20355a 100644
--- a/apps/www/app/(app)/layout.tsx
+++ b/apps/www/app/(app)/layout.tsx
@@ -7,10 +7,10 @@ interface AppLayoutProps {
 
 export default function AppLayout({ children }: AppLayoutProps) {
   return (
-    <>
+    <div data-wrapper="" className="border-grid flex flex-1 flex-col">
       <SiteHeader />
-      <main className="flex-1">{children}</main>
+      <main className="flex flex-1 flex-col">{children}</main>
       <SiteFooter />
-    </>
+    </div>
   )
 }
diff --git a/apps/www/app/(app)/page.tsx b/apps/www/app/(app)/page.tsx
index 72a080e8421..bb41dc3f674 100644
--- a/apps/www/app/(app)/page.tsx
+++ b/apps/www/app/(app)/page.tsx
@@ -1,8 +1,8 @@
 import Image from "next/image"
 import Link from "next/link"
 
-import { siteConfig } from "@/config/site"
 import { Announcement } from "@/components/announcement"
+import { CardsDemo } from "@/components/cards"
 import { ExamplesNav } from "@/components/examples-nav"
 import {
   PageActions,
@@ -10,54 +10,57 @@ import {
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@/components/page-header"
-import CardsNewYork from "@/registry/new-york/example/cards"
 import { Button } from "@/registry/new-york/ui/button"
 
 export default function IndexPage() {
   return (
-    <div className="container relative">
+    <>
       <PageHeader>
         <Announcement />
         <PageHeaderHeading>Build your component library</PageHeaderHeading>
         <PageHeaderDescription>
           Beautifully designed components that you can copy and paste into your
-          apps.
+          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>
-      <ExamplesNav className="[&>a:first-child]:text-primary" />
-      <section className="overflow-hidden rounded-lg border bg-background shadow-md md:hidden md:shadow-xl">
-        <Image
-          src="/examples/cards-light.png"
-          width={1280}
-          height={1214}
-          alt="Cards"
-          className="block dark:hidden"
-        />
-        <Image
-          src="/examples/cards-dark.png"
-          width={1280}
-          height={1214}
-          alt="Cards"
-          className="hidden dark:block"
-        />
-      </section>
-      <section className="hidden md:block [&>div]:p-0">
-        <CardsNewYork />
-      </section>
-    </div>
+      <div className="border-grid border-b">
+        <div className="container-wrapper">
+          <div className="container py-4">
+            <ExamplesNav className="[&>a:first-child]:text-primary" />
+          </div>
+        </div>
+      </div>
+      <div className="container-wrapper">
+        <div className="container py-6">
+          <section className="overflow-hidden rounded-lg border bg-background shadow-md md:hidden md:shadow-xl">
+            <Image
+              src="/examples/cards-light.png"
+              width={1280}
+              height={1214}
+              alt="Cards"
+              className="block dark:hidden"
+            />
+            <Image
+              src="/examples/cards-dark.png"
+              width={1280}
+              height={1214}
+              alt="Cards"
+              className="hidden dark:block"
+            />
+          </section>
+          <section className="hidden md:block [&>div]:p-0">
+            <CardsDemo />
+          </section>
+        </div>
+      </div>
+    </>
   )
 }
diff --git a/apps/www/app/(app)/sink/layout.tsx b/apps/www/app/(app)/sink/layout.tsx
deleted file mode 100644
index 70da365c39f..00000000000
--- a/apps/www/app/(app)/sink/layout.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import Link from "next/link"
-
-import { ThemeWrapper } from "@/components/theme-wrapper"
-import { styles } from "@/registry/registry-styles"
-
-interface SinkLayoutProps {
-  children: React.ReactNode
-}
-
-export default function SinkLayout({ children }: SinkLayoutProps) {
-  return (
-    <div className="flex flex-col">
-      <div className="container">
-        <div className="flex space-x-2 px-2 py-4">
-          {styles.map((style) => (
-            <Link href={`/sink/${style.name}`} key={style.name}>
-              {style.label}
-            </Link>
-          ))}
-        </div>
-      </div>
-      <div className="flex-1">
-        <ThemeWrapper>{children}</ThemeWrapper>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/app/(app)/sink/new-york/page.tsx b/apps/www/app/(app)/sink/new-york/page.tsx
deleted file mode 100644
index f7897d193d3..00000000000
--- a/apps/www/app/(app)/sink/new-york/page.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import * as React from "react"
-import Link from "next/link"
-
-import { cn } from "@/lib/utils"
-import AccordionDemo from "@/registry/new-york/example/accordion-demo"
-import AlertDialogDemo from "@/registry/new-york/example/alert-dialog-demo"
-import AspectRatioDemo from "@/registry/new-york/example/aspect-ratio-demo"
-import AvatarDemo from "@/registry/new-york/example/avatar-demo"
-import BadgeDemo from "@/registry/new-york/example/badge-demo"
-import BadgeDestructive from "@/registry/new-york/example/badge-destructive"
-import BadgeOutline from "@/registry/new-york/example/badge-outline"
-import BadgeSecondary from "@/registry/new-york/example/badge-secondary"
-import ButtonDemo from "@/registry/new-york/example/button-demo"
-import ButtonDestructive from "@/registry/new-york/example/button-destructive"
-import ButtonGhost from "@/registry/new-york/example/button-ghost"
-import ButtonLink from "@/registry/new-york/example/button-link"
-import ButtonLoading from "@/registry/new-york/example/button-loading"
-import ButtonOutline from "@/registry/new-york/example/button-outline"
-import ButtonSecondary from "@/registry/new-york/example/button-secondary"
-import ButtonWithIcon from "@/registry/new-york/example/button-with-icon"
-import CardDemo from "@/registry/new-york/example/card-demo"
-import CheckboxDemo from "@/registry/new-york/example/checkbox-demo"
-import CollapsibleDemo from "@/registry/new-york/example/collapsible-demo"
-import CommandDemo from "@/registry/new-york/example/command-demo"
-import ContextMenuDemo from "@/registry/new-york/example/context-menu-demo"
-import DatePickerDemo from "@/registry/new-york/example/date-picker-demo"
-import DialogDemo from "@/registry/new-york/example/dialog-demo"
-import DropdownMenuDemo from "@/registry/new-york/example/dropdown-menu-demo"
-import HoverCardDemo from "@/registry/new-york/example/hover-card-demo"
-import MenubarDemo from "@/registry/new-york/example/menubar-demo"
-import NavigationMenuDemo from "@/registry/new-york/example/navigation-menu-demo"
-import PopoverDemo from "@/registry/new-york/example/popover-demo"
-import ProgressDemo from "@/registry/new-york/example/progress-demo"
-import RadioGroupDemo from "@/registry/new-york/example/radio-group-demo"
-import ScrollAreaDemo from "@/registry/new-york/example/scroll-area-demo"
-import SelectDemo from "@/registry/new-york/example/select-demo"
-import SeparatorDemo from "@/registry/new-york/example/separator-demo"
-import SheetDemo from "@/registry/new-york/example/sheet-demo"
-import SkeletonDemo from "@/registry/new-york/example/skeleton-demo"
-import SliderDemo from "@/registry/new-york/example/slider-demo"
-import SwitchDemo from "@/registry/new-york/example/switch-demo"
-import TabsDemo from "@/registry/new-york/example/tabs-demo"
-import ToastDemo from "@/registry/new-york/example/toast-demo"
-import ToggleDemo from "@/registry/new-york/example/toggle-demo"
-import ToggleDisabled from "@/registry/new-york/example/toggle-disabled"
-import ToggleOutline from "@/registry/new-york/example/toggle-outline"
-import ToggleWithText from "@/registry/new-york/example/toggle-with-text"
-import TooltipDemo from "@/registry/new-york/example/tooltip-demo"
-import { Button } from "@/registry/new-york/ui/button"
-
-export default function KitchenSinkPage() {
-  return (
-    <div className="container">
-      <div className="grid gap-4">
-        <div className="grid grid-cols-3 items-start gap-4">
-          <div className="grid gap-4">
-            <ComponentWrapper>
-              <CardDemo className="w-full" />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <SliderDemo className="w-full" />
-            </ComponentWrapper>
-            <ComponentWrapper
-              className="spa flex-col items-start space-x-0
-				space-y-2"
-            >
-              <p className="text-sm text-muted-foreground">Documentation</p>
-              <p className="text-sm font-medium leading-none">
-                You can customize the theme using{" "}
-                <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold text-foreground">
-                  CSS variables
-                </code>
-                .{" "}
-                <Link
-                  href="#"
-                  className="font-medium text-primary underline underline-offset-4"
-                >
-                  Click here
-                </Link>{" "}
-                to learn more.
-              </p>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <CheckboxDemo />
-              <HoverCardDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&>div]:w-full">
-              <TabsDemo />
-            </ComponentWrapper>
-          </div>
-          <div className="grid gap-4">
-            <ComponentWrapper>
-              <MenubarDemo />
-              <AvatarDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="flex-col items-start space-x-0 space-y-2">
-              <div className="flex space-x-2">
-                <ButtonDemo />
-                <ButtonSecondary />
-                <ButtonDestructive />
-              </div>
-              <div className="flex space-x-2">
-                <ButtonOutline />
-                <ButtonLink />
-                <ButtonGhost />
-              </div>
-              <div className="flex space-x-2">
-                <ButtonWithIcon />
-                <ButtonLoading />
-              </div>
-              <div className="flex space-x-2">
-                <Button size="lg">Large</Button>
-                <Button size="sm">Small</Button>
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <DatePickerDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <AccordionDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&_ul>li:last-child]:hidden">
-              <NavigationMenuDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="justify-between">
-              <SwitchDemo />
-              <SelectDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <SeparatorDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <AspectRatioDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <PopoverDemo />
-              <ToastDemo />
-            </ComponentWrapper>
-          </div>
-          <div className="grid gap-4">
-            <ComponentWrapper>
-              <TooltipDemo />
-              <SheetDemo />
-              <ProgressDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <CommandDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&>span]:h-[80px] [&>span]:w-[200px]">
-              <RadioGroupDemo />
-              <ContextMenuDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <div className="flex space-x-2">
-                <DropdownMenuDemo />
-                <AlertDialogDemo />
-                <DialogDemo />
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <div className="flex space-x-2">
-                <BadgeDemo />
-                <BadgeSecondary />
-                <BadgeDestructive />
-                <BadgeOutline />
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <SkeletonDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&>div]:w-full">
-              <CollapsibleDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <div className="flex space-x-2">
-                <ToggleDemo />
-                <ToggleOutline />
-                <ToggleDisabled />
-                <ToggleWithText />
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <ScrollAreaDemo />
-            </ComponentWrapper>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function ComponentWrapper({
-  className,
-  children,
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-between space-x-4 rounded-md p-4",
-        className
-      )}
-    >
-      {children}
-    </div>
-  )
-}
diff --git a/apps/www/app/(app)/sink/page.tsx b/apps/www/app/(app)/sink/page.tsx
deleted file mode 100644
index 9533913922a..00000000000
--- a/apps/www/app/(app)/sink/page.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import * as React from "react"
-import Link from "next/link"
-
-import { cn } from "@/lib/utils"
-import AccordionDemo from "@/registry/default/example/accordion-demo"
-import AlertDialogDemo from "@/registry/default/example/alert-dialog-demo"
-import AspectRatioDemo from "@/registry/default/example/aspect-ratio-demo"
-import AvatarDemo from "@/registry/default/example/avatar-demo"
-import BadgeDemo from "@/registry/default/example/badge-demo"
-import BadgeDestructive from "@/registry/default/example/badge-destructive"
-import BadgeOutline from "@/registry/default/example/badge-outline"
-import BadgeSecondary from "@/registry/default/example/badge-secondary"
-import ButtonDemo from "@/registry/default/example/button-demo"
-import ButtonDestructive from "@/registry/default/example/button-destructive"
-import ButtonGhost from "@/registry/default/example/button-ghost"
-import ButtonLink from "@/registry/default/example/button-link"
-import ButtonLoading from "@/registry/default/example/button-loading"
-import ButtonOutline from "@/registry/default/example/button-outline"
-import ButtonSecondary from "@/registry/default/example/button-secondary"
-import ButtonWithIcon from "@/registry/default/example/button-with-icon"
-import CardDemo from "@/registry/default/example/card-demo"
-import CheckboxDemo from "@/registry/default/example/checkbox-demo"
-import CollapsibleDemo from "@/registry/default/example/collapsible-demo"
-import CommandDemo from "@/registry/default/example/command-demo"
-import ContextMenuDemo from "@/registry/default/example/context-menu-demo"
-import DatePickerDemo from "@/registry/default/example/date-picker-demo"
-import DialogDemo from "@/registry/default/example/dialog-demo"
-import DropdownMenuDemo from "@/registry/default/example/dropdown-menu-demo"
-import HoverCardDemo from "@/registry/default/example/hover-card-demo"
-import MenubarDemo from "@/registry/default/example/menubar-demo"
-import NavigationMenuDemo from "@/registry/default/example/navigation-menu-demo"
-import PopoverDemo from "@/registry/default/example/popover-demo"
-import ProgressDemo from "@/registry/default/example/progress-demo"
-import RadioGroupDemo from "@/registry/default/example/radio-group-demo"
-import ScrollAreaDemo from "@/registry/default/example/scroll-area-demo"
-import SelectDemo from "@/registry/default/example/select-demo"
-import SeparatorDemo from "@/registry/default/example/separator-demo"
-import SheetDemo from "@/registry/default/example/sheet-demo"
-import SkeletonDemo from "@/registry/default/example/skeleton-demo"
-import SliderDemo from "@/registry/default/example/slider-demo"
-import SwitchDemo from "@/registry/default/example/switch-demo"
-import TabsDemo from "@/registry/default/example/tabs-demo"
-import ToastDemo from "@/registry/default/example/toast-demo"
-import ToggleDemo from "@/registry/default/example/toggle-demo"
-import ToggleDisabled from "@/registry/default/example/toggle-disabled"
-import ToggleGroupDemo from "@/registry/default/example/toggle-group-demo"
-import ToggleOutline from "@/registry/default/example/toggle-outline"
-import ToggleWithText from "@/registry/default/example/toggle-with-text"
-import TooltipDemo from "@/registry/default/example/tooltip-demo"
-import { Button } from "@/registry/default/ui/button"
-
-export default function KitchenSinkPage() {
-  return (
-    <div className="container">
-      <div className="grid gap-4">
-        <div className="grid grid-cols-3 items-start gap-4">
-          <div className="grid gap-4">
-            <ComponentWrapper>
-              <CardDemo className="w-full" />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <SliderDemo className="w-full" />
-            </ComponentWrapper>
-            <ComponentWrapper
-              className="spa flex-col items-start space-x-0
-				space-y-2"
-            >
-              <p className="text-sm text-muted-foreground">Documentation</p>
-              <p className="text-sm font-medium leading-none">
-                You can customize the theme using{" "}
-                <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold text-foreground">
-                  CSS variables
-                </code>
-                .{" "}
-                <Link
-                  href="#"
-                  className="font-medium text-primary underline underline-offset-4"
-                >
-                  Click here
-                </Link>{" "}
-                to learn more.
-              </p>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <CheckboxDemo />
-              <HoverCardDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&>div]:w-full">
-              <TabsDemo />
-            </ComponentWrapper>
-          </div>
-          <div className="grid gap-4">
-            <ComponentWrapper>
-              <MenubarDemo />
-              <AvatarDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="flex-col items-start space-x-0 space-y-2">
-              <div className="flex space-x-2">
-                <ButtonDemo />
-                <ButtonSecondary />
-                <ButtonDestructive />
-              </div>
-              <div className="flex space-x-2">
-                <ButtonOutline />
-                <ButtonLink />
-                <ButtonGhost />
-              </div>
-              <div className="flex space-x-2">
-                <ButtonWithIcon />
-                <ButtonLoading />
-              </div>
-              <div className="flex space-x-2">
-                <Button size="lg">Large</Button>
-                <Button size="sm">Small</Button>
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <DatePickerDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <AccordionDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&_ul>li:last-child]:hidden">
-              <NavigationMenuDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="justify-between">
-              <SwitchDemo />
-              <SelectDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <ToggleGroupDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <SeparatorDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <AspectRatioDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <PopoverDemo />
-              <ToastDemo />
-            </ComponentWrapper>
-          </div>
-          <div className="grid gap-4">
-            <ComponentWrapper>
-              <TooltipDemo />
-              <SheetDemo />
-              <ProgressDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <CommandDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&>span]:h-[80px] [&>span]:w-[200px]">
-              <RadioGroupDemo />
-              <ContextMenuDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <div className="flex space-x-2">
-                <DropdownMenuDemo />
-                <AlertDialogDemo />
-                <DialogDemo />
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <div className="flex space-x-2">
-                <BadgeDemo />
-                <BadgeSecondary />
-                <BadgeDestructive />
-                <BadgeOutline />
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <SkeletonDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&>div]:w-full">
-              <CollapsibleDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <div className="flex space-x-2">
-                <ToggleDemo />
-                <ToggleOutline />
-                <ToggleDisabled />
-                <ToggleWithText />
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <ScrollAreaDemo />
-            </ComponentWrapper>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function ComponentWrapper({
-  className,
-  children,
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-between space-x-4 rounded-md p-4",
-        className
-      )}
-    >
-      {children}
-    </div>
-  )
-}
diff --git a/apps/www/app/(app)/themes/layout.tsx b/apps/www/app/(app)/themes/layout.tsx
new file mode 100644
index 00000000000..2a1650ca20a
--- /dev/null
+++ b/apps/www/app/(app)/themes/layout.tsx
@@ -0,0 +1,48 @@
+import { 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/www/app/(app)/themes/page.tsx b/apps/www/app/(app)/themes/page.tsx
index 39d3436da29..ff5bd3944e1 100644
--- a/apps/www/app/(app)/themes/page.tsx
+++ b/apps/www/app/(app)/themes/page.tsx
@@ -1,46 +1,12 @@
-import { Metadata } from "next"
-
-import "public/registry/themes.css"
-import { Announcement } from "@/components/announcement"
-import {
-  PageActions,
-  PageHeader,
-  PageHeaderDescription,
-  PageHeaderHeading,
-} from "@/components/page-header"
-import { ThemeCustomizer } from "@/components/theme-customizer"
+import { CardsDemo } from "@/components/cards"
 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/registry/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/www/app/(app)/themes/tabs.tsx b/apps/www/app/(app)/themes/tabs.tsx
deleted file mode 100644
index 3a6fbd684ae..00000000000
--- a/apps/www/app/(app)/themes/tabs.tsx
+++ /dev/null
@@ -1,73 +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/new-york/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 === "new-york" && <CardsNewYork />}
-          {config.style === "default" && <CardsDefault />}
-        </ThemeWrapper>
-      )}
-    </div>
-  )
-}
diff --git a/apps/www/app/(blocks)/blocks/[style]/[name]/page.tsx b/apps/www/app/(blocks)/blocks/[style]/[name]/page.tsx
deleted file mode 100644
index 35668786630..00000000000
--- a/apps/www/app/(blocks)/blocks/[style]/[name]/page.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { Metadata } from "next"
-import { notFound } from "next/navigation"
-
-import { siteConfig } from "@/config/site"
-import { getAllBlockIds, getBlock } from "@/lib/blocks"
-import { absoluteUrl, cn } from "@/lib/utils"
-import { BlockChunk } from "@/components/block-chunk"
-import { BlockWrapper } from "@/components/block-wrapper"
-import { Style, styles } from "@/registry/registry-styles"
-
-import "@/styles/mdx.css"
-
-export async function generateMetadata({
-  params,
-}: {
-  params: {
-    style: Style["name"]
-    name: string
-  }
-}): Promise<Metadata> {
-  const { name, style } = params
-  const block = await getBlock(name, style)
-
-  if (!block) {
-    return {}
-  }
-
-  const title = block.name
-  const description = block.description
-
-  return {
-    title: `${block.description} - ${block.name}`,
-    description,
-    openGraph: {
-      title,
-      description,
-      type: "article",
-      url: absoluteUrl(`/blocks/${block.name}`),
-      images: [
-        {
-          url: siteConfig.ogImage,
-          width: 1200,
-          height: 630,
-          alt: siteConfig.name,
-        },
-      ],
-    },
-    twitter: {
-      card: "summary_large_image",
-      title,
-      description,
-      images: [siteConfig.ogImage],
-      creator: "@shadcn",
-    },
-  }
-}
-
-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 block = await getBlock(name, style)
-
-  if (!block) {
-    return notFound()
-  }
-
-  const Component = block.component
-
-  const chunks = block.chunks?.map((chunk) => ({ ...chunk }))
-  delete block.component
-  block.chunks?.map((chunk) => delete chunk.component)
-
-  return (
-    <>
-      {/* <ThemesStyle /> */}
-      <div
-        className={cn(
-          "themes-wrapper bg-background",
-          block.container?.className
-        )}
-      >
-        <BlockWrapper block={block}>
-          <Component />
-          {chunks?.map((chunk, index) => (
-            <BlockChunk
-              key={chunk.name}
-              block={block}
-              chunk={block.chunks?.[index]}
-            >
-              <chunk.component />
-            </BlockChunk>
-          ))}
-        </BlockWrapper>
-      </div>
-    </>
-  )
-}
diff --git a/apps/www/app/(internal)/icons/layout.tsx b/apps/www/app/(internal)/icons/layout.tsx
new file mode 100644
index 00000000000..e8fc4e32866
--- /dev/null
+++ b/apps/www/app/(internal)/icons/layout.tsx
@@ -0,0 +1,34 @@
+import { Metadata } from "next"
+
+import { Announcement } from "@/components/announcement"
+import {
+  PageHeader,
+  PageHeaderDescription,
+  PageHeaderHeading,
+} from "@/components/page-header"
+
+export const metadata: Metadata = {
+  title: "Icons",
+  description: "All icons in all libraries.",
+}
+
+export default function IconsLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="container relative">
+      <PageHeader>
+        <Announcement />
+        <PageHeaderHeading>Icons</PageHeaderHeading>
+        <PageHeaderDescription>
+          All icons in all libraries.
+        </PageHeaderDescription>
+      </PageHeader>
+      <section id="icons" className="scroll-mt-20">
+        {children}
+      </section>
+    </div>
+  )
+}
diff --git a/apps/www/app/(internal)/icons/page.tsx b/apps/www/app/(internal)/icons/page.tsx
new file mode 100644
index 00000000000..635426d32c6
--- /dev/null
+++ b/apps/www/app/(internal)/icons/page.tsx
@@ -0,0 +1,52 @@
+"use client"
+
+import * as React from "react"
+import { Icons } from "@/__registry__/icons"
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york/ui/table"
+import { iconLibraries } from "@/registry/registry-icons"
+
+export default function IconsPage() {
+  return (
+    <div>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[240px]" align="left">
+              name
+            </TableHead>
+            {Object.keys(iconLibraries).map((library) => (
+              <TableHead key={library}>{library}</TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {Object.entries(Icons).map(([name, icon]) => (
+            <TableRow key={name}>
+              <TableCell align="left">
+                <code>{name}</code>
+              </TableCell>
+              {Object.entries(iconLibraries).map(([library, name]) => {
+                const IconComponent = icon[library as keyof typeof icon]
+                return (
+                  <TableCell key={library} className="[&_svg]:h-4 [&_svg]:w-4">
+                    <React.Suspense fallback={<div>Loading...</div>}>
+                      {IconComponent && <IconComponent />}
+                    </React.Suspense>
+                  </TableCell>
+                )
+              })}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
diff --git a/apps/www/app/(internal)/sink/page.tsx b/apps/www/app/(internal)/sink/page.tsx
new file mode 100644
index 00000000000..ca0e0e6c259
--- /dev/null
+++ b/apps/www/app/(internal)/sink/page.tsx
@@ -0,0 +1,3 @@
+import SinkPage from "@/registry/new-york/internal/sink/page"
+
+export default SinkPage
diff --git a/apps/www/app/(view)/view/styles/[style]/[name]/page.tsx b/apps/www/app/(view)/view/styles/[style]/[name]/page.tsx
new file mode 100644
index 00000000000..c3c2866c3d6
--- /dev/null
+++ b/apps/www/app/(view)/view/styles/[style]/[name]/page.tsx
@@ -0,0 +1,101 @@
+import * as React from "react"
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+import { siteConfig } from "@/config/site"
+import { getAllBlockIds } from "@/lib/blocks"
+import { absoluteUrl, cn } from "@/lib/utils"
+import { 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: "@shadcn",
+    },
+  }
+}
+
+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={cn("themes-wrapper bg-background", item.meta?.container)}>
+        <Component />
+      </div>
+    </>
+  )
+}
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
index c3f046e9656..c3e043f4530 100644
--- a/apps/www/app/layout.tsx
+++ b/apps/www/app/layout.tsx
@@ -1,8 +1,8 @@
 import "@/styles/globals.css"
 import { Metadata, Viewport } from "next"
 
-import { siteConfig } from "@/config/site"
-import { fontSans } from "@/lib/fonts"
+import { META_THEME_COLORS, siteConfig } from "@/config/site"
+import { fontMono, fontSans } from "@/lib/fonts"
 import { cn } from "@/lib/utils"
 import { Analytics } from "@/components/analytics"
 import { ThemeProvider } from "@/components/providers"
@@ -65,10 +65,7 @@ export const metadata: Metadata = {
 }
 
 export const viewport: Viewport = {
-  themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "white" },
-    { media: "(prefers-color-scheme: dark)", color: "black" },
-  ],
+  themeColor: META_THEME_COLORS.light,
 }
 
 interface RootLayoutProps {
@@ -79,11 +76,24 @@ export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <>
       <html lang="en" suppressHydrationWarning>
-        <head />
+        <head>
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+              try {
+                if (localStorage.theme === 'dark' || ((!('theme' in localStorage) || localStorage.theme === 'system') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                  document.querySelector('meta[name="theme-color"]').setAttribute('content', '${META_THEME_COLORS.dark}')
+                }
+              } catch (_) {}
+            `,
+            }}
+          />
+        </head>
         <body
           className={cn(
-            "min-h-screen bg-background font-sans antialiased",
-            fontSans.variable
+            "min-h-svh bg-background font-sans antialiased",
+            fontSans.variable,
+            fontMono.variable
           )}
         >
           <ThemeProvider
@@ -91,9 +101,10 @@ export default function RootLayout({ children }: RootLayoutProps) {
             defaultTheme="system"
             enableSystem
             disableTransitionOnChange
+            enableColorScheme
           >
             <div vaul-drawer-wrapper="">
-              <div className="relative flex min-h-screen flex-col bg-background">
+              <div className="relative flex min-h-svh flex-col bg-background">
                 {children}
               </div>
             </div>
diff --git a/apps/www/components/announcement.tsx b/apps/www/components/announcement.tsx
index e70b00745bf..e4406fffe5b 100644
--- a/apps/www/components/announcement.tsx
+++ b/apps/www/components/announcement.tsx
@@ -1,21 +1,16 @@
 import Link from "next/link"
-import { ArrowRightIcon } from "@radix-ui/react-icons"
-import { Blocks, PieChart } from "lucide-react"
-
-import { Separator } from "@/registry/new-york/ui/separator"
+import { ArrowRight } from "lucide-react"
 
 export function Announcement() {
   return (
     <Link
-      href="/docs/components/sidebar"
-      className="group inline-flex items-center px-0.5 text-sm font-medium"
+      href="/docs/monorepo"
+      className="group mb-2 inline-flex items-center px-0.5 text-sm font-medium"
     >
-      <PieChart className="h-4 w-4" />{" "}
-      <Separator className="mx-2 h-4" orientation="vertical" />{" "}
       <span className="underline-offset-4 group-hover:underline">
-        New sidebar component
+        Monorepo support
       </span>
-      <ArrowRightIcon className="ml-1 h-4 w-4" />
+      <ArrowRight className="ml-1 h-4 w-4" />
     </Link>
   )
 }
diff --git a/apps/www/components/block-chunk.tsx b/apps/www/components/block-chunk.tsx
deleted file mode 100644
index a25df546932..00000000000
--- a/apps/www/components/block-chunk.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { AnimatePresence, motion } from "framer-motion"
-
-import { cn } from "@/lib/utils"
-import { useLiftMode } from "@/hooks/use-lift-mode"
-import { BlockCopyButton } from "@/components/block-copy-button"
-import { V0Button } from "@/components/v0-button"
-import { Block, 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={cn(
-            "group rounded-xl bg-background 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}
-                />
-                <V0Button size="icon" name={chunk.name} />
-              </div>
-            </div>
-          )}
-        </motion.div>
-      )}
-    </AnimatePresence>
-  )
-}
diff --git a/apps/www/components/block-copy-button.tsx b/apps/www/components/block-copy-button.tsx
deleted file mode 100644
index 4c13b0636f1..00000000000
--- a/apps/www/components/block-copy-button.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { CheckIcon, ClipboardIcon } from "lucide-react"
-
-import { Event, trackEvent } from "@/lib/events"
-import { cn } from "@/lib/utils"
-import { Button, ButtonProps } from "@/registry/new-york/ui/button"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york/ui/tooltip"
-
-export function BlockCopyButton({
-  event,
-  name,
-  code,
-  className,
-  ...props
-}: {
-  event: Event["name"]
-  name: string
-  code: string
-} & ButtonProps) {
-  const [hasCopied, setHasCopied] = React.useState(false)
-
-  React.useEffect(() => {
-    setTimeout(() => {
-      setHasCopied(false)
-    }, 2000)
-  }, [hasCopied])
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          size="icon"
-          variant="outline"
-          className={cn(
-            "[&_svg]-h-3.5 h-7 w-7 rounded-[6px] [&_svg]:w-3.5",
-            className
-          )}
-          onClick={() => {
-            navigator.clipboard.writeText(code)
-            trackEvent({
-              name: event,
-              properties: {
-                name,
-              },
-            })
-            setHasCopied(true)
-          }}
-          {...props}
-        >
-          <span className="sr-only">Copy</span>
-          {hasCopied ? <CheckIcon /> : <ClipboardIcon />}
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent className="bg-black text-white">Copy code</TooltipContent>
-    </Tooltip>
-  )
-}
diff --git a/apps/www/components/block-display.tsx b/apps/www/components/block-display.tsx
index 31fdb596a95..ad352f0bdab 100644
--- a/apps/www/components/block-display.tsx
+++ b/apps/www/components/block-display.tsx
@@ -1,32 +1,52 @@
-import { unstable_cache } from "next/cache"
+import * as React from "react"
+import { z } from "zod"
 
-import { getBlock } from "@/lib/blocks"
-import { BlockPreview } from "@/components/block-preview"
+import { highlightCode } from "@/lib/highlight-code"
+import {
+  createFileTreeForRegistryItemFiles,
+  getRegistryItem,
+} from "@/lib/registry"
+import { BlockViewer } from "@/components/block-viewer"
+import { registryItemFileSchema } from "@/registry/schema"
 
-const getBlockByName = unstable_cache(
-  async (name: string) => {
-    const block = await getBlock(name)
+export async function BlockDisplay({ name }: { name: string }) {
+  const item = await getCachedRegistryItem(name)
+
+  if (!item?.files) {
+    return null
+  }
+
+  const [tree, highlightedFiles] = await Promise.all([
+    getCachedFileTree(item.files),
+    getCachedHighlightedFiles(item.files),
+  ])
+
+  return (
+    <BlockViewer item={item} tree={tree} highlightedFiles={highlightedFiles} />
+  )
+}
+
+const getCachedRegistryItem = React.cache(async (name: string) => {
+  return await getRegistryItem(name)
+})
 
-    if (!block) {
+const getCachedFileTree = React.cache(
+  async (files: Array<{ path: string; target?: string }>) => {
+    if (!files) {
       return null
     }
 
-    return {
-      name: block.name,
-      style: block.style,
-      description: block.description,
-      container: block.container,
-    }
-  },
-  ["block"]
+    return await createFileTreeForRegistryItemFiles(files)
+  }
 )
 
-export async function BlockDisplay({ name }: { name: string }) {
-  const block = await getBlockByName(name)
-
-  if (!block) {
-    return null
+const getCachedHighlightedFiles = React.cache(
+  async (files: z.infer<typeof registryItemFileSchema>[]) => {
+    return await Promise.all(
+      files.map(async (file) => ({
+        ...file,
+        highlightedContent: await highlightCode(file.content ?? ""),
+      }))
+    )
   }
-
-  return <BlockPreview key={block.name} block={block} />
-}
+)
diff --git a/apps/www/components/block-image.tsx b/apps/www/components/block-image.tsx
new file mode 100644
index 00000000000..336a6e8a903
--- /dev/null
+++ b/apps/www/components/block-image.tsx
@@ -0,0 +1,36 @@
+import Image from "next/image"
+
+import { cn } from "@/lib/utils"
+
+export function BlockImage({
+  name,
+  width = 1440,
+  height = 900,
+  className,
+}: Omit<React.ComponentProps<typeof Image>, "src" | "alt"> & { name: string }) {
+  return (
+    <div
+      className={cn(
+        "relative aspect-[1440/900] w-full overflow-hidden rounded-lg",
+        className
+      )}
+    >
+      <Image
+        src={`/r/styles/new-york/${name}-light.png`}
+        alt={name}
+        width={width}
+        height={height}
+        className="object-cover dark:hidden"
+        data-image="light"
+      />
+      <Image
+        src={`/r/styles/new-york/${name}-dark.png`}
+        alt={name}
+        width={width}
+        height={height}
+        className="hidden object-cover dark:block"
+        data-image="dark"
+      />
+    </div>
+  )
+}
diff --git a/apps/www/components/block-preview.tsx b/apps/www/components/block-preview.tsx
deleted file mode 100644
index 8caa40597f6..00000000000
--- a/apps/www/components/block-preview.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-"use client"
-
-import * as React from "react"
-import Image from "next/image"
-import { ImperativePanelHandle } from "react-resizable-panels"
-
-import { BlockToolbar } from "@/components/block-toolbar"
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/registry/new-york/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="relative aspect-[4/2.5] rounded-lg border bg-background 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="absolute left-0 top-0 z-20 w-[970px] max-w-none bg-background 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 dark:hidden sm:w-[1280px] md:hidden md:dark:hidden"
-          />
-          <Image
-            src={`/images/blocks/${block.name}-dark.png`}
-            alt={block.name}
-            data-block={block.name}
-            width={1440}
-            height={900}
-            className="absolute left-0 top-0 z-20 hidden w-[970px] max-w-none bg-background 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 dark:block sm:w-[1280px] md:hidden md:dark:hidden"
-          />
-          <iframe
-            src={`/blocks/${block.style}/${block.name}`}
-            height={block.container?.height ?? 450}
-            className="chunk-mode relative z-20 hidden w-full bg-background md:block"
-          />
-        </ResizablePanel>
-        <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 sm:block" />
-        <ResizablePanel defaultSize={0} minSize={0} />
-      </ResizablePanelGroup>
-    </div>
-  )
-}
diff --git a/apps/www/components/block-toolbar.tsx b/apps/www/components/block-toolbar.tsx
deleted file mode 100644
index 260477cd3d7..00000000000
--- a/apps/www/components/block-toolbar.tsx
+++ /dev/null
@@ -1,110 +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 { ImperativePanelHandle } from "react-resizable-panels"
-
-import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
-import { V0Button } from "@/components/v0-button"
-import { Button } from "@/registry/new-york/ui/button"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york/ui/toggle-group"
-import { 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="h-7 rounded-md border bg-muted shadow-none"
-          size="sm"
-          onClick={() => {
-            copyToClipboard(`npx shadcn@latest add ${block.name}`)
-          }}
-        >
-          {isCopied ? <Check /> : <Terminal />}
-          npx shadcn 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(parseInt(value))
-              }
-            }}
-          >
-            <ToggleGroupItem
-              value="100"
-              className="h-[22px] w-[22px] rounded-sm p-0"
-              title="Desktop"
-            >
-              <Monitor className="h-3.5 w-3.5" />
-            </ToggleGroupItem>
-            <ToggleGroupItem
-              value="60"
-              className="h-[22px] w-[22px] rounded-sm p-0"
-              title="Tablet"
-            >
-              <Tablet className="h-3.5 w-3.5" />
-            </ToggleGroupItem>
-            <ToggleGroupItem
-              value="30"
-              className="h-[22px] w-[22px] rounded-sm p-0"
-              title="Mobile"
-            >
-              <Smartphone className="h-3.5 w-3.5" />
-            </ToggleGroupItem>
-            <Separator orientation="vertical" className="h-4" />
-            <Button
-              size="icon"
-              variant="ghost"
-              className="h-[22px] w-[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="h-3.5 w-3.5" />
-              </Link>
-            </Button>
-          </ToggleGroup>
-        </div>
-        <Separator orientation="vertical" className="mx-2 hidden h-4 md:flex" />
-        <V0Button
-          className="hidden shadow-none md:flex"
-          id={`v0-button-${block.name}`}
-          name={`v0-${block.name}`}
-        />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/components/block-viewer.tsx b/apps/www/components/block-viewer.tsx
new file mode 100644
index 00000000000..b00fc009d12
--- /dev/null
+++ b/apps/www/components/block-viewer.tsx
@@ -0,0 +1,454 @@
+"use client"
+
+import * as React from "react"
+import Image from "next/image"
+import Link from "next/link"
+import {
+  Check,
+  ChevronRight,
+  Clipboard,
+  File,
+  Folder,
+  Fullscreen,
+  Monitor,
+  Smartphone,
+  Tablet,
+  Terminal,
+} from "lucide-react"
+import { ImperativePanelHandle } from "react-resizable-panels"
+import { z } from "zod"
+
+import { trackEvent } from "@/lib/events"
+import { FileTree, createFileTreeForRegistryItemFiles } from "@/lib/registry"
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
+import { V0Button } from "@/components/v0-button"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/registry/new-york/ui/resizable"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  Sidebar,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarProvider,
+} from "@/registry/new-york/ui/sidebar"
+import { Tabs, TabsList, TabsTrigger } from "@/registry/new-york/ui/tabs"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+import { Style } from "@/registry/registry-styles"
+import { registryItemFileSchema, registryItemSchema } from "@/registry/schema"
+
+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
+      })[]
+    | null
+}
+
+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.")
+  }
+  return context
+}
+
+function BlockViewerProvider({
+  item,
+  tree,
+  highlightedFiles,
+  children,
+}: Pick<BlockViewerContext, "item" | "tree" | "highlightedFiles"> & {
+  children: React.ReactNode
+}) {
+  const [view, setView] = React.useState<BlockViewerContext["view"]>("preview")
+  const [style, setStyle] =
+    React.useState<BlockViewerContext["style"]>("new-york")
+  const [activeFile, setActiveFile] = React.useState<
+    BlockViewerContext["activeFile"]
+  >(highlightedFiles?.[0].target ?? null)
+  const resizablePanelRef = React.useRef<ImperativePanelHandle>(null)
+
+  return (
+    <BlockViewerContext.Provider
+      value={{
+        item,
+        view,
+        setView,
+        style,
+        setStyle,
+        resizablePanelRef,
+        activeFile,
+        setActiveFile,
+        tree,
+        highlightedFiles,
+      }}
+    >
+      <div
+        id={item.name}
+        data-view={view}
+        className="group/block-view-wrapper flex min-w-0 flex-col items-stretch gap-4"
+        style={
+          {
+            "--height": item.meta?.iframeHeight ?? "930px",
+          } as React.CSSProperties
+        }
+      >
+        {children}
+      </div>
+    </BlockViewerContext.Provider>
+  )
+}
+
+function BlockViewerToolbar() {
+  const { setView, item, resizablePanelRef, style } = useBlockViewer()
+  const { copyToClipboard, isCopied } = useCopyToClipboard()
+
+  return (
+    <div className="flex w-full items-center gap-2 md:pr-[14px]">
+      <Tabs
+        defaultValue="preview"
+        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)]">
+          <TabsTrigger
+            value="preview"
+            className="h-[1.45rem] rounded-sm px-2 text-xs"
+          >
+            Preview
+          </TabsTrigger>
+          <TabsTrigger
+            value="code"
+            className="h-[1.45rem] rounded-sm px-2 text-xs"
+          >
+            Code
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+      <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 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"
+            defaultValue="100"
+            onValueChange={(value) => {
+              if (resizablePanelRef?.current) {
+                resizablePanelRef.current.resize(parseInt(value))
+              }
+            }}
+          >
+            <ToggleGroupItem
+              value="100"
+              className="h-[22px] w-[22px] min-w-0 rounded-sm p-0"
+              title="Desktop"
+            >
+              <Monitor className="h-3.5 w-3.5" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="60"
+              className="h-[22px] w-[22px] min-w-0 rounded-sm p-0"
+              title="Tablet"
+            >
+              <Tablet className="h-3.5 w-3.5" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="30"
+              className="h-[22px] w-[22px] min-w-0 rounded-sm p-0"
+              title="Mobile"
+            >
+              <Smartphone className="h-3.5 w-3.5" />
+            </ToggleGroupItem>
+            <Separator orientation="vertical" className="h-4" />
+            <Button
+              size="icon"
+              variant="ghost"
+              className="h-[22px] w-[22px] rounded-sm p-0"
+              asChild
+              title="Open in New Tab"
+            >
+              <Link href={`/view/styles/${style}/${item.name}`} target="_blank">
+                <span className="sr-only">Open in New Tab</span>
+                <Fullscreen className="h-3.5 w-3.5" />
+              </Link>
+            </Button>
+          </ToggleGroup>
+        </div>
+        <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 shadcn@latest add ${item.name}`)
+            }}
+          >
+            {isCopied ? <Check /> : <Terminal />}
+            <span className="hidden lg:inline">npx shadcn 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>
+  )
+}
+
+function BlockViewerView() {
+  const { item, style, resizablePanelRef } = useBlockViewer()
+
+  return (
+    <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">
+          <ResizablePanel
+            ref={resizablePanelRef}
+            className="relative aspect-[4/2.5] rounded-xl border bg-background md:aspect-auto"
+            defaultSize={100}
+            minSize={30}
+          >
+            <Image
+              src={`/r/styles/${style}/${item.name}-light.png`}
+              alt={item.name}
+              data-block={item.name}
+              width={1440}
+              height={900}
+              className="object-cover dark:hidden md:hidden md:dark:hidden"
+            />
+            <Image
+              src={`/r/styles/${style}/${item.name}-dark.png`}
+              alt={item.name}
+              data-block={item.name}
+              width={1440}
+              height={900}
+              className="hidden object-cover dark:block md:hidden md:dark:hidden"
+            />
+            <iframe
+              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="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>
+    </div>
+  )
+}
+
+function BlockViewerCode() {
+  const { activeFile, highlightedFiles } = useBlockViewer()
+
+  const file = React.useMemo(() => {
+    return highlightedFiles?.find((file) => file.target === activeFile)
+  }, [highlightedFiles, activeFile])
+
+  if (!file) {
+    return null
+  }
+
+  return (
+    <div className="mr-[14px] 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>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <div className="flex h-12 items-center gap-2 border-b border-zinc-700 bg-zinc-900 px-4 text-sm font-medium">
+          <File className="size-4" />
+          {file.target}
+          <div className="ml-auto flex items-center gap-2">
+            <BlockCopyCodeButton />
+          </div>
+        </div>
+        <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-[-1px] [&_.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"
+        />
+      </div>
+    </div>
+  )
+}
+
+export function BlockViewerFileTree() {
+  const { tree } = useBlockViewer()
+
+  if (!tree) {
+    return null
+  }
+
+  return (
+    <SidebarProvider className="flex !min-h-full flex-col">
+      <Sidebar
+        collapsible="none"
+        className="w-full flex-1 border-r border-zinc-700 bg-zinc-900 text-white"
+      >
+        <SidebarGroupLabel className="h-12 rounded-none border-b border-zinc-700 px-4 text-sm text-white">
+          Files
+        </SidebarGroupLabel>
+        <SidebarGroup className="p-0">
+          <SidebarGroupContent>
+            <SidebarMenu className="gap-1.5">
+              {tree.map((file, index) => (
+                <Tree key={index} item={file} index={1} />
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </Sidebar>
+    </SidebarProvider>
+  )
+}
+
+function Tree({ item, index }: { item: FileTree; index: number }) {
+  const { activeFile, setActiveFile } = useBlockViewer()
+
+  if (!item.children) {
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          isActive={item.path === activeFile}
+          onClick={() => item.path && setActiveFile(item.path)}
+          className="whitespace-nowrap rounded-none pl-[--index] 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"
+          data-index={index}
+          style={
+            {
+              "--index": `${index * (index === 2 ? 1.2 : 1.3)}rem`,
+            } as React.CSSProperties
+          }
+        >
+          <ChevronRight className="invisible" />
+          <File className="h-4 w-4" />
+          {item.name}
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    )
+  }
+
+  return (
+    <SidebarMenuItem>
+      <Collapsible
+        className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
+        defaultOpen
+      >
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton
+            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`,
+              } as React.CSSProperties
+            }
+          >
+            <ChevronRight className="h-4 w-4 transition-transform" />
+            <Folder className="h-4 w-4" />
+            {item.name}
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub className="m-0 w-full border-none p-0">
+            {item.children.map((subItem, key) => (
+              <Tree key={key} item={subItem} index={index + 1} />
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </Collapsible>
+    </SidebarMenuItem>
+  )
+}
+
+function BlockCopyCodeButton() {
+  const { activeFile, item } = useBlockViewer()
+  const { copyToClipboard, isCopied } = useCopyToClipboard()
+
+  const file = React.useMemo(() => {
+    return item.files?.find((file) => file.target === activeFile)
+  }, [activeFile, item.files])
+
+  const content = file?.content
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <Button
+      onClick={() => {
+        copyToClipboard(content)
+        trackEvent({
+          name: "copy_block_code",
+          properties: {
+            name: item.name,
+            file: file.path,
+          },
+        })
+      }}
+      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 />}
+    </Button>
+  )
+}
+
+function BlockViewer({
+  item,
+  tree,
+  highlightedFiles,
+  ...props
+}: Pick<BlockViewerContext, "item" | "tree" | "highlightedFiles">) {
+  return (
+    <BlockViewerProvider
+      item={item}
+      tree={tree}
+      highlightedFiles={highlightedFiles}
+      {...props}
+    >
+      <BlockViewerToolbar />
+      <BlockViewerView />
+      <BlockViewerCode />
+    </BlockViewerProvider>
+  )
+}
+
+export { BlockViewer }
diff --git a/apps/www/components/block-wrapper.tsx b/apps/www/components/block-wrapper.tsx
deleted file mode 100644
index 088053daf80..00000000000
--- a/apps/www/components/block-wrapper.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { AnimatePresence, motion } from "framer-motion"
-
-import { useLiftMode } from "@/hooks/use-lift-mode"
-import { Block } from "@/registry/schema"
-
-export function BlockWrapper({
-  block,
-  children,
-}: React.PropsWithChildren<{ block: Block }>) {
-  const { isLiftMode } = useLiftMode(block.name)
-
-  React.useEffect(() => {
-    const components = document.querySelectorAll("[x-chunk]")
-    block.chunks?.map((chunk, index) => {
-      const $chunk = document.querySelector<HTMLElement>(
-        `[x-chunk="${chunk.name}"]`
-      )
-      const $wrapper = document.querySelector<HTMLElement>(
-        `[x-chunk-container="${chunk.name}"]`
-      )
-
-      const $component = components[index]
-
-      if (!$chunk || !$component) {
-        return
-      }
-
-      const position = $component.getBoundingClientRect()
-      $chunk.style.zIndex = "40"
-      // $chunk.style.position = "absolute"
-      // $chunk.style.top = `${position.top}px`
-      // $chunk.style.left = `${position.left}px`
-      $chunk.style.width = `${position.width}px`
-      $chunk.style.height = `${position.height}px`
-
-      if ($wrapper) {
-        $wrapper.style.zIndex = "40"
-        $wrapper.style.position = "absolute"
-        $wrapper.style.top = `${position.top}px`
-        $wrapper.style.left = `${position.left}px`
-        $wrapper.style.width = `${position.width}px`
-        $wrapper.style.height = `${position.height}px`
-      }
-    })
-  }, [block.chunks, isLiftMode])
-
-  return (
-    <>
-      {children}
-      <AnimatePresence>
-        {isLiftMode && (
-          <motion.div
-            className="absolute inset-0 z-30 bg-background/90 fill-mode-backwards"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{
-              opacity: 0,
-              transition: { ease: "easeOut", duration: 0.38 },
-            }}
-            transition={{ ease: "easeOut", duration: 0.2, delay: 0.18 }}
-          />
-        )}
-      </AnimatePresence>
-    </>
-  )
-}
diff --git a/apps/www/components/blocks-nav.tsx b/apps/www/components/blocks-nav.tsx
new file mode 100644
index 00000000000..4248667fd35
--- /dev/null
+++ b/apps/www/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/new-york/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/www/components/cards/activity-goal.tsx b/apps/www/components/cards/activity-goal.tsx
new file mode 100644
index 00000000000..8f01a6bc95e
--- /dev/null
+++ b/apps/www/components/cards/activity-goal.tsx
@@ -0,0 +1,125 @@
+"use client"
+
+import * as React from "react"
+import { Minus, Plus } from "lucide-react"
+import { Bar, BarChart } from "recharts"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { ChartConfig, ChartContainer } from "@/registry/new-york/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/www/registry/new-york/example/cards/calendar.tsx b/apps/www/components/cards/calendar.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/cards/calendar.tsx
rename to apps/www/components/cards/calendar.tsx
diff --git a/apps/www/components/cards/chat.tsx b/apps/www/components/cards/chat.tsx
new file mode 100644
index 00000000000..61bb2517c89
--- /dev/null
+++ b/apps/www/components/cards/chat.tsx
@@ -0,0 +1,262 @@
+"use client"
+
+import * as React from "react"
+import { Check, Plus, Send } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/registry/new-york/ui/card"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york/ui/command"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/registry/new-york/ui/dialog"
+import { Input } from "@/registry/new-york/ui/input"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/new-york/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={cn(
+                  "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/www/registry/new-york/example/cards/cookie-settings.tsx b/apps/www/components/cards/cookie-settings.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/cards/cookie-settings.tsx
rename to apps/www/components/cards/cookie-settings.tsx
diff --git a/apps/www/registry/new-york/example/cards/create-account.tsx b/apps/www/components/cards/create-account.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/cards/create-account.tsx
rename to apps/www/components/cards/create-account.tsx
diff --git a/apps/www/components/cards/data-table.tsx b/apps/www/components/cards/data-table.tsx
new file mode 100644
index 00000000000..e91e2963950
--- /dev/null
+++ b/apps/www/components/cards/data-table.tsx
@@ -0,0 +1,325 @@
+"use client"
+
+import * as React from "react"
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Checkbox } from "@/registry/new-york/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import { Input } from "@/registry/new-york/ui/input"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york/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 = 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/www/components/cards/index.tsx b/apps/www/components/cards/index.tsx
new file mode 100644
index 00000000000..b3df1daf6f8
--- /dev/null
+++ b/apps/www/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/www/components/cards/metric.tsx b/apps/www/components/cards/metric.tsx
new file mode 100644
index 00000000000..e25f005c719
--- /dev/null
+++ b/apps/www/components/cards/metric.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import { Line, LineChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/example/cards/payment-method.tsx b/apps/www/components/cards/payment-method.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/cards/payment-method.tsx
rename to apps/www/components/cards/payment-method.tsx
diff --git a/apps/www/components/cards/report-issue.tsx b/apps/www/components/cards/report-issue.tsx
new file mode 100644
index 00000000000..4a58245e553
--- /dev/null
+++ b/apps/www/components/cards/report-issue.tsx
@@ -0,0 +1,92 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+import { Textarea } from "@/registry/new-york/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/www/components/cards/share.tsx b/apps/www/components/cards/share.tsx
new file mode 100644
index 00000000000..2410401c90e
--- /dev/null
+++ b/apps/www/components/cards/share.tsx
@@ -0,0 +1,126 @@
+"use client"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+import { Separator } from "@/registry/new-york/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/www/components/cards/stats.tsx b/apps/www/components/cards/stats.tsx
new file mode 100644
index 00000000000..d50ad2d24c8
--- /dev/null
+++ b/apps/www/components/cards/stats.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import { Bar, BarChart, Line, LineChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { ChartConfig, ChartContainer } from "@/registry/new-york/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/www/components/cards/team-members.tsx b/apps/www/components/cards/team-members.tsx
new file mode 100644
index 00000000000..fc834a21040
--- /dev/null
+++ b/apps/www/components/cards/team-members.tsx
@@ -0,0 +1,206 @@
+"use client"
+
+import { ChevronDown } from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/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/www/components/chart-code-viewer.tsx b/apps/www/components/chart-code-viewer.tsx
index 2ba37cb2442..1d6a3a06c7c 100644
--- a/apps/www/components/chart-code-viewer.tsx
+++ b/apps/www/components/chart-code-viewer.tsx
@@ -3,7 +3,8 @@ import * as React from "react"
 import { cn } from "@/lib/utils"
 import { useMediaQuery } from "@/hooks/use-media-query"
 import { useThemesConfig } from "@/hooks/use-themes-config"
-import { BlockCopyButton } from "@/components/block-copy-button"
+import { ChartCopyButton } from "@/components/chart-copy-button"
+import { Chart } from "@/components/chart-display"
 import { V0Button } from "@/components/v0-button"
 import { Button } from "@/registry/new-york/ui/button"
 import {
@@ -18,13 +19,14 @@ import {
   TabsList,
   TabsTrigger,
 } from "@/registry/new-york/ui/tabs"
-import { Block } from "@/registry/schema"
 
 export function ChartCodeViewer({
   chart,
   className,
   children,
-}: { chart: Block } & React.ComponentProps<"div">) {
+}: {
+  chart: Chart
+} & React.ComponentProps<"div">) {
   const [tab, setTab] = React.useState("code")
   const { themesConfig } = useThemesConfig()
   const isDesktop = useMediaQuery("(min-width: 768px)")
@@ -85,10 +87,10 @@ ${Object.entries(themesConfig?.activeTheme.cssVars.dark || {})
           </TabsList>
           {tab === "code" && (
             <div className="ml-auto flex items-center justify-center gap-2">
-              <BlockCopyButton
+              <ChartCopyButton
                 event="copy_chart_code"
                 name={chart.name}
-                code={chart.code}
+                code={chart.files?.[0]?.content ?? ""}
               />
               <V0Button
                 id={`v0-button-${chart.name}`}
@@ -98,7 +100,7 @@ ${Object.entries(themesConfig?.activeTheme.cssVars.dark || {})
             </div>
           )}
           {tab === "theme" && (
-            <BlockCopyButton
+            <ChartCopyButton
               event="copy_chart_theme"
               name={chart.name}
               code={themeCode}
diff --git a/apps/www/components/chart-copy-button.tsx b/apps/www/components/chart-copy-button.tsx
new file mode 100644
index 00000000000..7bca49aaa39
--- /dev/null
+++ b/apps/www/components/chart-copy-button.tsx
@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ClipboardIcon } from "lucide-react"
+
+import { Event, trackEvent } from "@/lib/events"
+import { cn } from "@/lib/utils"
+import { Button, ButtonProps } from "@/registry/new-york/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/new-york/ui/tooltip"
+
+export function ChartCopyButton({
+  event,
+  name,
+  code,
+  className,
+  ...props
+}: {
+  event: Event["name"]
+  name: string
+  code: string
+} & ButtonProps) {
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      setHasCopied(false)
+    }, 2000)
+  }, [hasCopied])
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          size="icon"
+          variant="outline"
+          className={cn(
+            "[&_svg]-h-3.5 h-7 w-7 rounded-[6px] [&_svg]:w-3.5",
+            className
+          )}
+          onClick={() => {
+            navigator.clipboard.writeText(code)
+            trackEvent({
+              name: event,
+              properties: {
+                name,
+              },
+            })
+            setHasCopied(true)
+          }}
+          {...props}
+        >
+          <span className="sr-only">Copy</span>
+          {hasCopied ? <CheckIcon /> : <ClipboardIcon />}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent className="bg-black text-white">Copy code</TooltipContent>
+    </Tooltip>
+  )
+}
diff --git a/apps/www/components/chart-display.tsx b/apps/www/components/chart-display.tsx
index 4945a60bd1a..ff87ff7ccb1 100644
--- a/apps/www/components/chart-display.tsx
+++ b/apps/www/components/chart-display.tsx
@@ -1,19 +1,27 @@
-import { getBlock } from "@/lib/blocks"
+import * as React from "react"
+import { z } from "zod"
+
+import { highlightCode } from "@/lib/highlight-code"
+import { getRegistryItem } from "@/lib/registry"
 import { cn } from "@/lib/utils"
 import { ChartToolbar } from "@/components/chart-toolbar"
+import { registryItemSchema } from "@/registry/schema"
+
+export type Chart = z.infer<typeof registryItemSchema> & {
+  highlightedCode: string
+}
 
 export async function ChartDisplay({
   name,
   children,
   className,
 }: { name: string } & React.ComponentProps<"div">) {
-  const chart = await getBlock(name)
-
-  // Cannot (and don't need to) pass to the client.
-  delete chart?.component
-  delete chart?.chunks
+  const chart = await getCachedRegistryItem(name)
+  const highlightedCode = await getChartHighlightedCode(
+    chart?.files?.[0]?.content ?? ""
+  )
 
-  if (!chart) {
+  if (!chart || !highlightedCode) {
     return null
   }
 
@@ -25,7 +33,7 @@ export async function ChartDisplay({
       )}
     >
       <ChartToolbar
-        chart={chart}
+        chart={{ ...chart, highlightedCode }}
         className="relative z-20 flex justify-end border-b bg-card px-3 py-2.5 text-card-foreground"
       >
         {children}
@@ -36,3 +44,11 @@ export async function ChartDisplay({
     </div>
   )
 }
+
+const getCachedRegistryItem = React.cache(async (name: string) => {
+  return await getRegistryItem(name)
+})
+
+const getChartHighlightedCode = React.cache(async (content: string) => {
+  return await highlightCode(content)
+})
diff --git a/apps/www/components/chart-toolbar.tsx b/apps/www/components/chart-toolbar.tsx
index bd7b07b4c45..34fe566f7e8 100644
--- a/apps/www/components/chart-toolbar.tsx
+++ b/apps/www/components/chart-toolbar.tsx
@@ -1,10 +1,8 @@
 "use client"
 
 import { cn } from "@/lib/utils"
-import { BlockCopyButton } from "@/components/block-copy-button"
 import { ChartCodeViewer } from "@/components/chart-code-viewer"
 import { Separator } from "@/registry/new-york/ui/separator"
-import { Block } from "@/registry/schema"
 
 import "@/styles/mdx.css"
 import {
@@ -17,21 +15,26 @@ import {
   Radar,
 } from "lucide-react"
 
+import { ChartCopyButton } from "@/components/chart-copy-button"
+import { Chart } from "@/components/chart-display"
+
 export function ChartToolbar({
   chart,
   className,
   children,
-}: { chart: Block } & React.ComponentProps<"div">) {
+}: {
+  chart: Chart
+} & React.ComponentProps<"div">) {
   return (
     <div className={cn("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">
-        <BlockCopyButton
+        <ChartCopyButton
           event="copy_chart_code"
           name={chart.name}
-          code={chart.code}
+          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" />
@@ -41,14 +44,14 @@ export function ChartToolbar({
   )
 }
 
-function ChartTitle({ chart }: { chart: Block }) {
-  const { subcategory } = chart
+function ChartTitle({ chart }: { chart: Chart }) {
+  const { categories } = chart
 
-  if (!subcategory) {
+  if (!categories?.length) {
     return null
   }
 
-  if (subcategory === "Line") {
+  if (categories.includes("charts-line")) {
     return (
       <>
         <LineChart /> Chart
@@ -56,7 +59,7 @@ function ChartTitle({ chart }: { chart: Block }) {
     )
   }
 
-  if (subcategory === "Bar") {
+  if (categories.includes("charts-bar")) {
     return (
       <>
         <BarChartBig /> Chart
@@ -64,7 +67,7 @@ function ChartTitle({ chart }: { chart: Block }) {
     )
   }
 
-  if (subcategory === "Pie") {
+  if (categories.includes("charts-pie")) {
     return (
       <>
         <PieChart /> Chart
@@ -72,7 +75,7 @@ function ChartTitle({ chart }: { chart: Block }) {
     )
   }
 
-  if (subcategory === "Area") {
+  if (categories.includes("charts-area")) {
     return (
       <>
         <AreaChart /> Chart
@@ -80,7 +83,7 @@ function ChartTitle({ chart }: { chart: Block }) {
     )
   }
 
-  if (subcategory === "Radar") {
+  if (categories.includes("charts-radar")) {
     return (
       <>
         <Hexagon /> Chart
@@ -88,7 +91,7 @@ function ChartTitle({ chart }: { chart: Block }) {
     )
   }
 
-  if (subcategory === "Radial") {
+  if (categories.includes("charts-radial")) {
     return (
       <>
         <Radar /> Chart
@@ -96,7 +99,7 @@ function ChartTitle({ chart }: { chart: Block }) {
     )
   }
 
-  if (subcategory === "Tooltip") {
+  if (categories.includes("charts-tooltip")) {
     return (
       <>
         <MousePointer2 />
@@ -105,5 +108,5 @@ function ChartTitle({ chart }: { chart: Block }) {
     )
   }
 
-  return subcategory
+  return categories[0]
 }
diff --git a/apps/www/components/charts-nav.tsx b/apps/www/components/charts-nav.tsx
index b2cbd9f10a7..5e3c43de895 100644
--- a/apps/www/components/charts-nav.tsx
+++ b/apps/www/components/charts-nav.tsx
@@ -7,6 +7,10 @@ import { cn } from "@/lib/utils"
 import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
 
 const links = [
+  {
+    name: "All Charts",
+    href: "/charts",
+  },
   {
     name: "Area Chart",
     href: "/charts#area-chart",
@@ -51,10 +55,10 @@ export function ChartsNav({
             href={example.href}
             key={example.href}
             className={cn(
-              "flex h-7 shrink-0 items-center justify-center rounded-full px-4 text-center text-sm transition-colors hover:text-primary",
+              "flex h-7 shrink-0 items-center justify-center rounded-full px-4 text-center text-sm font-medium transition-colors hover:text-primary",
               pathname?.startsWith(example.href) ||
-                (index === 0 && pathname === "/")
-                ? "bg-muted font-medium text-primary"
+                (index === 0 && pathname === "/charts")
+                ? "bg-muted text-primary"
                 : "text-muted-foreground"
             )}
           >
diff --git a/apps/www/components/code-block-command.tsx b/apps/www/components/code-block-command.tsx
new file mode 100644
index 00000000000..f74e21f1693
--- /dev/null
+++ b/apps/www/components/code-block-command.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ClipboardIcon } from "lucide-react"
+
+import { NpmCommands } from "@/types/unist"
+import { useConfig } from "@/hooks/use-config"
+import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { Tabs } from "@/registry/default/ui/tabs"
+import { Button } from "@/registry/new-york/ui/button"
+import { TabsContent, TabsList, TabsTrigger } from "@/registry/new-york/ui/tabs"
+
+export function CodeBlockCommand({
+  __npmCommand__,
+  __yarnCommand__,
+  __pnpmCommand__,
+  __bunCommand__,
+}: React.ComponentProps<"pre"> & NpmCommands) {
+  const [config, setConfig] = useConfig()
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  React.useEffect(() => {
+    if (hasCopied) {
+      const timer = setTimeout(() => setHasCopied(false), 2000)
+      return () => clearTimeout(timer)
+    }
+  }, [hasCopied])
+
+  const packageManager = config.packageManager || "pnpm"
+  const tabs = React.useMemo(() => {
+    return {
+      pnpm: __pnpmCommand__,
+      npm: __npmCommand__,
+      yarn: __yarnCommand__,
+      bun: __bunCommand__,
+    }
+  }, [__npmCommand__, __pnpmCommand__, __yarnCommand__, __bunCommand__])
+
+  const copyCommand = React.useCallback(() => {
+    const command = tabs[packageManager]
+
+    if (!command) {
+      return
+    }
+
+    copyToClipboardWithMeta(command, {
+      name: "copy_npm_command",
+      properties: {
+        command,
+        pm: packageManager,
+      },
+    })
+    setHasCopied(true)
+  }, [packageManager, tabs])
+
+  return (
+    <div className="relative mt-6 max-h-[650px] overflow-x-auto rounded-xl bg-zinc-950 dark:bg-zinc-900">
+      <Tabs
+        defaultValue={packageManager}
+        onValueChange={(value) => {
+          setConfig({
+            ...config,
+            packageManager: value as "pnpm" | "npm" | "yarn" | "bun",
+          })
+        }}
+      >
+        <div className="flex items-center justify-between border-b border-zinc-800 bg-zinc-900 px-3 pt-2.5">
+          <TabsList className="h-7 translate-y-[2px] gap-3 bg-transparent p-0 pl-1">
+            {Object.entries(tabs).map(([key, value]) => {
+              return (
+                <TabsTrigger
+                  key={key}
+                  value={key}
+                  className="rounded-none border-b border-transparent bg-transparent p-0 pb-1.5 font-mono text-zinc-400 data-[state=active]:border-b-zinc-50 data-[state=active]:bg-transparent data-[state=active]:text-zinc-50"
+                >
+                  {key}
+                </TabsTrigger>
+              )
+            })}
+          </TabsList>
+        </div>
+        {Object.entries(tabs).map(([key, value]) => {
+          return (
+            <TabsContent key={key} value={key} className="mt-0">
+              <pre className="px-4 py-5">
+                <code
+                  className="relative font-mono text-sm leading-none"
+                  data-language="bash"
+                >
+                  {value}
+                </code>
+              </pre>
+            </TabsContent>
+          )
+        })}
+      </Tabs>
+      <Button
+        size="icon"
+        variant="ghost"
+        className="absolute right-2.5 top-2 z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3"
+        onClick={copyCommand}
+      >
+        <span className="sr-only">Copy</span>
+        {hasCopied ? <CheckIcon /> : <ClipboardIcon />}
+      </Button>
+    </div>
+  )
+}
diff --git a/apps/www/components/color.tsx b/apps/www/components/color.tsx
index f4af2889bc4..fffca62c60d 100644
--- a/apps/www/components/color.tsx
+++ b/apps/www/components/color.tsx
@@ -7,7 +7,6 @@ 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"
 
 export function Color({ color }: { color: Color }) {
   const { format } = useColors()
diff --git a/apps/www/components/command-menu.tsx b/apps/www/components/command-menu.tsx
index 6ffed599821..bbcddc9e8c8 100644
--- a/apps/www/components/command-menu.tsx
+++ b/apps/www/components/command-menu.tsx
@@ -3,13 +3,7 @@
 import * as React from "react"
 import { useRouter } from "next/navigation"
 import { type DialogProps } from "@radix-ui/react-dialog"
-import {
-  CircleIcon,
-  FileIcon,
-  LaptopIcon,
-  MoonIcon,
-  SunIcon,
-} from "@radix-ui/react-icons"
+import { Circle, File, Laptop, Moon, Sun } from "lucide-react"
 import { useTheme } from "next-themes"
 
 import { docsConfig } from "@/config/docs"
@@ -61,7 +55,7 @@ export function CommandMenu({ ...props }: DialogProps) {
       <Button
         variant="outline"
         className={cn(
-          "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-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}
@@ -87,7 +81,7 @@ export function CommandMenu({ ...props }: DialogProps) {
                     runCommand(() => router.push(navItem.href as string))
                   }}
                 >
-                  <FileIcon className="mr-2 h-4 w-4" />
+                  <File />
                   {navItem.title}
                 </CommandItem>
               ))}
@@ -103,7 +97,7 @@ export function CommandMenu({ ...props }: DialogProps) {
                   }}
                 >
                   <div className="mr-2 flex h-4 w-4 items-center justify-center">
-                    <CircleIcon className="h-3 w-3" />
+                    <Circle className="h-3 w-3" />
                   </div>
                   {navItem.title}
                 </CommandItem>
@@ -113,15 +107,15 @@ export function CommandMenu({ ...props }: DialogProps) {
           <CommandSeparator />
           <CommandGroup heading="Theme">
             <CommandItem onSelect={() => runCommand(() => setTheme("light"))}>
-              <SunIcon className="mr-2 h-4 w-4" />
+              <Sun />
               Light
             </CommandItem>
             <CommandItem onSelect={() => runCommand(() => setTheme("dark"))}>
-              <MoonIcon className="mr-2 h-4 w-4" />
+              <Moon />
               Dark
             </CommandItem>
             <CommandItem onSelect={() => runCommand(() => setTheme("system"))}>
-              <LaptopIcon className="mr-2 h-4 w-4" />
+              <Laptop />
               System
             </CommandItem>
           </CommandGroup>
diff --git a/apps/www/components/component-preview.tsx b/apps/www/components/component-preview.tsx
index 0d0a838ddb5..b0e8105e726 100644
--- a/apps/www/components/component-preview.tsx
+++ b/apps/www/components/component-preview.tsx
@@ -80,14 +80,14 @@ export function ComponentPreview({
     return (
       <div className="relative aspect-[4/2.5] w-full overflow-hidden rounded-md border">
         <Image
-          src={`/images/blocks/${name}.png`}
+          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={`/images/blocks/${name}-dark.png`}
+          src={`/r/styles/${config.style}/${name}-dark.png`}
           alt={name}
           width={1440}
           height={900}
@@ -95,7 +95,7 @@ export function ComponentPreview({
         />
         <div className="absolute inset-0 hidden w-[1600px] bg-background md:block">
           <iframe
-            src={`/blocks/${config.style}/${name}`}
+            src={`/view/styles/${config.style}/${name}`}
             className="size-full"
           />
         </div>
diff --git a/apps/www/components/docs-nav.tsx b/apps/www/components/docs-nav.tsx
new file mode 100644
index 00000000000..753ba897587
--- /dev/null
+++ b/apps/www/components/docs-nav.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { SidebarNavItem } from "types/nav"
+
+import { type DocsConfig } from "@/config/docs"
+import { cn } from "@/lib/utils"
+
+export function DocsNav({ config }: { config: DocsConfig }) {
+  const pathname = usePathname()
+
+  const items = config.sidebarNav
+
+  return items.length ? (
+    <div className="flex flex-col gap-6">
+      {items.map((item, index) => (
+        <div key={index} className="flex flex-col gap-1">
+          <h4 className="rounded-md px-2 py-1 text-sm font-semibold">
+            {item.title}
+          </h4>
+          {item?.items?.length && (
+            <DocsNavItems items={item.items} pathname={pathname} />
+          )}
+        </div>
+      ))}
+    </div>
+  ) : null
+}
+
+function DocsNavItems({
+  items,
+  pathname,
+}: {
+  items: SidebarNavItem[]
+  pathname: string | null
+}) {
+  return items?.length ? (
+    <div className="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={cn(
+              "group flex h-8 w-full items-center rounded-lg px-2 font-normal text-foreground underline-offset-2 hover:bg-accent hover:text-accent-foreground",
+              item.disabled && "cursor-not-allowed opacity-60",
+              pathname === item.href &&
+                "bg-accent font-medium text-accent-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={cn(
+              "flex w-full cursor-not-allowed items-center rounded-md p-2 text-muted-foreground hover:underline",
+              item.disabled && "cursor-not-allowed opacity-60"
+            )}
+          >
+            {item.title}
+            {item.label && (
+              <span className="ml-2 rounded-md bg-muted px-1.5 py-0.5 text-xs leading-none text-muted-foreground no-underline group-hover:no-underline">
+                {item.label}
+              </span>
+            )}
+          </span>
+        )
+      )}
+    </div>
+  ) : null
+}
diff --git a/apps/www/components/examples-nav.tsx b/apps/www/components/examples-nav.tsx
index c0d72eb84a6..aad5337e9cd 100644
--- a/apps/www/components/examples-nav.tsx
+++ b/apps/www/components/examples-nav.tsx
@@ -2,56 +2,52 @@
 
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-import { ArrowRightIcon } from "@radix-ui/react-icons"
 
 import { cn } from "@/lib/utils"
 import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
 
 const examples = [
-  {
-    name: "Examples",
-    href: "/",
-    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/mail",
-  },
   {
     name: "Mail",
     href: "/examples/mail",
     code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/mail",
+    hidden: false,
   },
   {
     name: "Dashboard",
     href: "/examples/dashboard",
     code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/dashboard",
-  },
-  {
-    name: "Cards",
-    href: "/examples/cards",
-    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/cards",
+    hidden: false,
   },
   {
     name: "Tasks",
     href: "/examples/tasks",
     code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/tasks",
+    hidden: false,
   },
   {
     name: "Playground",
     href: "/examples/playground",
     code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/playground",
+    hidden: false,
   },
   {
     name: "Forms",
     href: "/examples/forms",
     code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/forms",
+    hidden: false,
   },
   {
     name: "Music",
     href: "/examples/music",
     code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/music",
+    hidden: false,
   },
   {
     name: "Authentication",
     href: "/examples/authentication",
     code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/authentication",
+    hidden: false,
   },
 ]
 
@@ -63,21 +59,17 @@ export function ExamplesNav({ className, ...props }: ExamplesNavProps) {
   return (
     <div className="relative">
       <ScrollArea className="max-w-[600px] lg:max-w-none">
-        <div className={cn("mb-4 flex items-center", className)} {...props}>
-          {examples.map((example, index) => (
-            <Link
-              href={example.href}
+        <div className={cn("flex items-center", className)} {...props}>
+          <ExampleLink
+            example={{ name: "Examples", href: "/", code: "", hidden: false }}
+            isActive={pathname === "/"}
+          />
+          {examples.map((example) => (
+            <ExampleLink
               key={example.href}
-              className={cn(
-                "flex h-7 items-center justify-center rounded-full px-4 text-center text-sm transition-colors hover:text-primary",
-                pathname?.startsWith(example.href) ||
-                  (index === 0 && pathname === "/")
-                  ? "bg-muted font-medium text-primary"
-                  : "text-muted-foreground"
-              )}
-            >
-              {example.name}
-            </Link>
+              example={example}
+              isActive={pathname?.startsWith(example.href) ?? false}
+            />
           ))}
         </div>
         <ScrollBar orientation="horizontal" className="invisible" />
@@ -86,26 +78,25 @@ export function ExamplesNav({ className, ...props }: ExamplesNavProps) {
   )
 }
 
-interface ExampleCodeLinkProps {
-  pathname: string | null
-}
-
-export function ExampleCodeLink({ pathname }: ExampleCodeLinkProps) {
-  const example = examples.find((example) => pathname?.startsWith(example.href))
-
-  if (!example?.code) {
+function ExampleLink({
+  example,
+  isActive,
+}: {
+  example: (typeof examples)[number]
+  isActive: boolean
+}) {
+  if (example.hidden) {
     return null
   }
 
   return (
     <Link
-      href={example?.code}
-      target="_blank"
-      rel="nofollow"
-      className="absolute right-0 top-0 hidden items-center rounded-[0.5rem] text-sm font-medium md:flex"
+      href={example.href}
+      key={example.href}
+      className="flex h-7 items-center justify-center rounded-full px-4 text-center text-sm font-medium text-muted-foreground transition-colors hover:text-primary data-[active=true]:bg-muted data-[active=true]:text-primary"
+      data-active={isActive}
     >
-      View code
-      <ArrowRightIcon className="ml-1 h-4 w-4" />
+      {example.name}
     </Link>
   )
 }
diff --git a/apps/www/components/main-nav.tsx b/apps/www/components/main-nav.tsx
index efa14264908..fcb5300f7a0 100644
--- a/apps/www/components/main-nav.tsx
+++ b/apps/www/components/main-nav.tsx
@@ -12,18 +12,18 @@ export function MainNav() {
 
   return (
     <div className="mr-4 hidden md:flex">
-      <Link href="/" className="mr-4 flex items-center space-x-2 lg:mr-6">
+      <Link href="/" className="mr-4 flex items-center gap-2 lg:mr-6">
         <Icons.logo className="h-6 w-6" />
         <span className="hidden font-bold lg:inline-block">
           {siteConfig.name}
         </span>
       </Link>
-      <nav className="flex items-center gap-4 text-sm lg:gap-6">
+      <nav className="flex items-center gap-4 text-sm xl:gap-6">
         <Link
           href="/docs"
           className={cn(
             "transition-colors hover:text-foreground/80",
-            pathname === "/docs" ? "text-foreground" : "text-foreground/60"
+            pathname === "/docs" ? "text-foreground" : "text-foreground/80"
           )}
         >
           Docs
@@ -35,7 +35,7 @@ export function MainNav() {
             pathname?.startsWith("/docs/components") &&
               !pathname?.startsWith("/docs/component/chart")
               ? "text-foreground"
-              : "text-foreground/60"
+              : "text-foreground/80"
           )}
         >
           Components
@@ -46,7 +46,7 @@ export function MainNav() {
             "transition-colors hover:text-foreground/80",
             pathname?.startsWith("/blocks")
               ? "text-foreground"
-              : "text-foreground/60"
+              : "text-foreground/80"
           )}
         >
           Blocks
@@ -58,7 +58,7 @@ export function MainNav() {
             pathname?.startsWith("/docs/component/chart") ||
               pathname?.startsWith("/charts")
               ? "text-foreground"
-              : "text-foreground/60"
+              : "text-foreground/80"
           )}
         >
           Charts
@@ -69,29 +69,18 @@ export function MainNav() {
             "transition-colors hover:text-foreground/80",
             pathname?.startsWith("/themes")
               ? "text-foreground"
-              : "text-foreground/60"
+              : "text-foreground/80"
           )}
         >
           Themes
         </Link>
-        <Link
-          href="/examples"
-          className={cn(
-            "transition-colors hover:text-foreground/80",
-            pathname?.startsWith("/examples")
-              ? "text-foreground"
-              : "text-foreground/60"
-          )}
-        >
-          Examples
-        </Link>
         <Link
           href="/colors"
           className={cn(
             "transition-colors hover:text-foreground/80",
             pathname?.startsWith("/colors")
               ? "text-foreground"
-              : "text-foreground/60"
+              : "text-foreground/80"
           )}
         >
           Colors
diff --git a/apps/www/components/mdx-components.tsx b/apps/www/components/mdx-components.tsx
index 73fc1b39264..680ae3ce7f9 100644
--- a/apps/www/components/mdx-components.tsx
+++ b/apps/www/components/mdx-components.tsx
@@ -11,6 +11,7 @@ import { Event } from "@/lib/events"
 import { cn } from "@/lib/utils"
 import { useConfig } from "@/hooks/use-config"
 import { Callout } from "@/components/callout"
+import { CodeBlockCommand } from "@/components/code-block-command"
 import { CodeBlockWrapper } from "@/components/code-block-wrapper"
 import { ComponentExample } from "@/components/component-example"
 import { ComponentPreview } from "@/components/component-preview"
@@ -192,16 +193,30 @@ const components = {
     __src__?: string
     __event__?: Event["name"]
   } & NpmCommands) => {
+    const isNpmCommand =
+      __npmCommand__ && __yarnCommand__ && __pnpmCommand__ && __bunCommand__
+
+    if (isNpmCommand) {
+      return (
+        <CodeBlockCommand
+          __npmCommand__={__npmCommand__}
+          __yarnCommand__={__yarnCommand__}
+          __pnpmCommand__={__pnpmCommand__}
+          __bunCommand__={__bunCommand__}
+        />
+      )
+    }
+
     return (
       <StyleWrapper styleName={__style__}>
         <pre
           className={cn(
-            "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-xl bg-zinc-950 py-4 dark:bg-zinc-900",
             className
           )}
           {...props}
         />
-        {__rawString__ && !__npmCommand__ && (
+        {__rawString__ && (
           <CopyButton
             value={__rawString__}
             src={__src__}
@@ -209,20 +224,6 @@ const components = {
             className={cn("absolute right-4 top-4", __withMeta__ && "top-16")}
           />
         )}
-        {__npmCommand__ &&
-          __yarnCommand__ &&
-          __pnpmCommand__ &&
-          __bunCommand__ && (
-            <CopyNpmCommandButton
-              commands={{
-                __npmCommand__,
-                __yarnCommand__,
-                __pnpmCommand__,
-                __bunCommand__,
-              }}
-              className={cn("absolute right-4 top-4", __withMeta__ && "top-16")}
-            />
-          )}
       </StyleWrapper>
     )
   },
diff --git a/apps/www/components/mobile-nav.tsx b/apps/www/components/mobile-nav.tsx
index 7880d479f87..ea618b70b84 100644
--- a/apps/www/components/mobile-nav.tsx
+++ b/apps/www/components/mobile-nav.tsx
@@ -3,68 +3,55 @@
 import * as React from "react"
 import Link, { LinkProps } from "next/link"
 import { useRouter } from "next/navigation"
-import { ViewVerticalIcon } from "@radix-ui/react-icons"
 
 import { docsConfig } from "@/config/docs"
-import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
-import { Icons } from "@/components/icons"
+import { useMetaColor } from "@/hooks/use-meta-color"
 import { Button } from "@/registry/new-york/ui/button"
-import { ScrollArea } from "@/registry/new-york/ui/scroll-area"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/new-york/ui/sheet"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerTrigger,
+} from "@/registry/new-york/ui/drawer"
 
 export function MobileNav() {
   const [open, setOpen] = React.useState(false)
+  const { setMetaColor, metaColor } = useMetaColor()
+
+  const onOpenChange = React.useCallback(
+    (open: boolean) => {
+      setOpen(open)
+      setMetaColor(open ? "#09090b" : metaColor)
+    },
+    [setMetaColor, metaColor]
+  )
 
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <DrawerTrigger asChild>
         <Button
           variant="ghost"
-          className="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
+          className="-ml-2 mr-2 h-8 w-8 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
         >
           <svg
-            strokeWidth="1.5"
-            viewBox="0 0 24 24"
-            fill="none"
             xmlns="http://www.w3.org/2000/svg"
-            className="h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth="1.5"
+            stroke="currentColor"
+            className="!size-6"
           >
             <path
-              d="M3 5H11"
-              stroke="currentColor"
-              strokeWidth="1.5"
               strokeLinecap="round"
               strokeLinejoin="round"
-            ></path>
-            <path
-              d="M3 12H16"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            ></path>
-            <path
-              d="M3 19H21"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            ></path>
+              d="M3.75 9h16.5m-16.5 6.75h16.5"
+            />
           </svg>
           <span className="sr-only">Toggle Menu</span>
         </Button>
-      </SheetTrigger>
-      <SheetContent side="left" className="pr-0">
-        <MobileLink
-          href="/"
-          className="flex items-center"
-          onOpenChange={setOpen}
-        >
-          <Icons.logo className="mr-2 h-4 w-4" />
-          <span className="font-bold">{siteConfig.name}</span>
-        </MobileLink>
-        <ScrollArea className="my-4 h-[calc(100vh-8rem)] pb-10 pl-6">
+      </DrawerTrigger>
+      <DrawerContent className="max-h-[60svh] p-0">
+        <div className="overflow-auto p-6">
           <div className="flex flex-col space-y-3">
             {docsConfig.mainNav?.map(
               (item) =>
@@ -108,9 +95,9 @@ export function MobileNav() {
               </div>
             ))}
           </div>
-        </ScrollArea>
-      </SheetContent>
-    </Sheet>
+        </div>
+      </DrawerContent>
+    </Drawer>
   )
 }
 
@@ -135,7 +122,7 @@ function MobileLink({
         router.push(href.toString())
         onOpenChange?.(false)
       }}
-      className={cn(className)}
+      className={cn("text-base", className)}
       {...props}
     >
       {children}
diff --git a/apps/www/components/mode-switcher.tsx b/apps/www/components/mode-switcher.tsx
new file mode 100644
index 00000000000..151676d0fcd
--- /dev/null
+++ b/apps/www/components/mode-switcher.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import * as React from "react"
+import { MoonIcon, SunIcon } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { META_THEME_COLORS } from "@/config/site"
+import { useMetaColor } from "@/hooks/use-meta-color"
+import { Button } from "@/registry/new-york/ui/button"
+
+export function ModeSwitcher() {
+  const { setTheme, resolvedTheme } = useTheme()
+  const { setMetaColor } = useMetaColor()
+
+  const toggleTheme = React.useCallback(() => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark")
+    setMetaColor(
+      resolvedTheme === "dark"
+        ? META_THEME_COLORS.light
+        : META_THEME_COLORS.dark
+    )
+  }, [resolvedTheme, setTheme, setMetaColor])
+
+  return (
+    <Button
+      variant="ghost"
+      className="group/toggle h-8 w-8 px-0"
+      onClick={toggleTheme}
+    >
+      <SunIcon className="hidden [html.dark_&]:block" />
+      <MoonIcon className="hidden [html.light_&]:block" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}
diff --git a/apps/www/components/mode-toggle.tsx b/apps/www/components/mode-toggle.tsx
index f5a8af9c339..04beb8748f2 100644
--- a/apps/www/components/mode-toggle.tsx
+++ b/apps/www/components/mode-toggle.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
+import { MoonIcon, SunIcon } from "lucide-react"
 import { useTheme } from "next-themes"
 
 import { Button } from "@/registry/new-york/ui/button"
diff --git a/apps/www/components/page-header.tsx b/apps/www/components/page-header.tsx
index 38579b5ed44..64f9da680ff 100644
--- a/apps/www/components/page-header.tsx
+++ b/apps/www/components/page-header.tsx
@@ -6,14 +6,12 @@ function PageHeader({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <section
-      className={cn(
-        "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={cn("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>
   )
 }
@@ -55,7 +53,7 @@ function PageActions({
   return (
     <div
       className={cn(
-        "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/www/components/pager.tsx b/apps/www/components/pager.tsx
index 61aa58edfbb..bb304120353 100644
--- a/apps/www/components/pager.tsx
+++ b/apps/www/components/pager.tsx
@@ -1,11 +1,10 @@
 import Link from "next/link"
-import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"
 import { Doc } from "contentlayer/generated"
+import { ChevronLeft, ChevronRight } from "lucide-react"
 import { NavItem, NavItemWithChildren } from "types/nav"
 
 import { docsConfig } from "@/config/docs"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/registry/new-york/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 
 interface DocsPagerProps {
   doc: Doc
@@ -21,22 +20,20 @@ export function DocsPager({ doc }: DocsPagerProps) {
   return (
     <div className="flex flex-row items-center justify-between">
       {pager?.prev?.href && (
-        <Link
-          href={pager.prev.href}
-          className={buttonVariants({ variant: "outline" })}
-        >
-          <ChevronLeftIcon className="mr-2 h-4 w-4" />
-          {pager.prev.title}
-        </Link>
+        <Button variant="ghost" asChild>
+          <Link href={pager.prev.href}>
+            <ChevronLeft />
+            {pager.prev.title}
+          </Link>
+        </Button>
       )}
       {pager?.next?.href && (
-        <Link
-          href={pager.next.href}
-          className={cn(buttonVariants({ variant: "outline" }), "ml-auto")}
-        >
-          {pager.next.title}
-          <ChevronRightIcon className="ml-2 h-4 w-4" />
-        </Link>
+        <Button variant="ghost" className="ml-auto" asChild>
+          <Link href={pager.next.href}>
+            {pager.next.title}
+            <ChevronRight />
+          </Link>
+        </Button>
       )}
     </div>
   )
diff --git a/apps/www/components/project-add-button.tsx b/apps/www/components/project-add-button.tsx
new file mode 100644
index 00000000000..6fb4933d58a
--- /dev/null
+++ b/apps/www/components/project-add-button.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import { Check, PlusCircle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { useProject } from "@/hooks/use-project"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/new-york/ui/tooltip"
+
+export function ProjectAddButton({
+  name,
+  className,
+  ...props
+}: React.ComponentProps<typeof Button> & { name: string }) {
+  const { addBlock, isAdded } = useProject()
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className={cn("rounded-sm", className)}
+          onClick={() => {
+            addBlock(name)
+          }}
+          {...props}
+        >
+          {isAdded ? <Check /> : <PlusCircle />}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent sideOffset={10}>Add to Project</TooltipContent>
+    </Tooltip>
+  )
+}
diff --git a/apps/www/components/providers.tsx b/apps/www/components/providers.tsx
index 9b4b0b88583..fa680e71d76 100644
--- a/apps/www/components/providers.tsx
+++ b/apps/www/components/providers.tsx
@@ -3,11 +3,13 @@
 import * as React from "react"
 import { Provider as JotaiProvider } from "jotai"
 import { ThemeProvider as NextThemesProvider } from "next-themes"
-import { ThemeProviderProps } from "next-themes/dist/types"
 
 import { TooltipProvider } from "@/registry/new-york/ui/tooltip"
 
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
   return (
     <JotaiProvider>
       <NextThemesProvider {...props}>
diff --git a/apps/www/components/sidebar-nav.tsx b/apps/www/components/sidebar-nav.tsx
deleted file mode 100644
index 747a9670e3b..00000000000
--- a/apps/www/components/sidebar-nav.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-"use client"
-
-import Link from "next/link"
-import { usePathname } from "next/navigation"
-import { SidebarNavItem } from "types/nav"
-
-import { type DocsConfig } from "@/config/docs"
-import { cn } from "@/lib/utils"
-
-export interface DocsSidebarNavProps {
-  config: DocsConfig
-}
-
-export function DocsSidebarNav({ config }: DocsSidebarNavProps) {
-  const pathname = usePathname()
-
-  const items = pathname?.startsWith("/charts")
-    ? config.chartsNav
-    : config.sidebarNav
-
-  return items.length ? (
-    <div className="w-full">
-      {items.map((item, index) => (
-        <div key={index} className={cn("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} />
-          )}
-        </div>
-      ))}
-    </div>
-  ) : null
-}
-
-interface DocsSidebarNavItemsProps {
-  items: SidebarNavItem[]
-  pathname: string | null
-}
-
-export function DocsSidebarNavItems({
-  items,
-  pathname,
-}: 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={cn(
-              "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
-                ? "font-medium text-foreground"
-                : "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={cn(
-              "flex w-full cursor-not-allowed items-center rounded-md p-2 text-muted-foreground hover:underline",
-              item.disabled && "cursor-not-allowed opacity-60"
-            )}
-          >
-            {item.title}
-            {item.label && (
-              <span className="ml-2 rounded-md bg-muted px-1.5 py-0.5 text-xs leading-none text-muted-foreground no-underline group-hover:no-underline">
-                {item.label}
-              </span>
-            )}
-          </span>
-        )
-      )}
-    </div>
-  ) : null
-}
diff --git a/apps/www/components/site-footer.tsx b/apps/www/components/site-footer.tsx
index 9c10db3b7e8..1642e9eabc4 100644
--- a/apps/www/components/site-footer.tsx
+++ b/apps/www/components/site-footer.tsx
@@ -2,29 +2,31 @@ import { siteConfig } from "@/config/site"
 
 export function SiteFooter() {
   return (
-    <footer className="py-6 md:px-8 md:py-0">
-      <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
-        <p className="text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">
-          Built by{" "}
-          <a
-            href={siteConfig.links.twitter}
-            target="_blank"
-            rel="noreferrer"
-            className="font-medium underline underline-offset-4"
-          >
-            shadcn
-          </a>
-          . The source code is available on{" "}
-          <a
-            href={siteConfig.links.github}
-            target="_blank"
-            rel="noreferrer"
-            className="font-medium underline underline-offset-4"
-          >
-            GitHub
-          </a>
-          .
-        </p>
+    <footer className="border-grid border-t py-6 md:px-8 md:py-0">
+      <div className="container-wrapper">
+        <div className="container py-4">
+          <div className="text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">
+            Built by{" "}
+            <a
+              href={siteConfig.links.twitter}
+              target="_blank"
+              rel="noreferrer"
+              className="font-medium underline underline-offset-4"
+            >
+              shadcn
+            </a>
+            . The source code is available on{" "}
+            <a
+              href={siteConfig.links.github}
+              target="_blank"
+              rel="noreferrer"
+              className="font-medium underline underline-offset-4"
+            >
+              GitHub
+            </a>
+            .
+          </div>
+        </div>
       </div>
     </footer>
   )
diff --git a/apps/www/components/site-header.tsx b/apps/www/components/site-header.tsx
index 42ddd2ad4b2..5539f56b27d 100644
--- a/apps/www/components/site-header.tsx
+++ b/apps/www/components/site-header.tsx
@@ -1,61 +1,38 @@
 import Link from "next/link"
 
 import { siteConfig } from "@/config/site"
-import { cn } from "@/lib/utils"
 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 "@/registry/new-york/ui/button"
+import { ModeSwitcher } from "@/components/mode-switcher"
+import { Button } from "@/registry/new-york/ui/button"
 
 export function SiteHeader() {
   return (
-    <header className="sticky top-0 z-50 w-full border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container flex h-14 max-w-screen-2xl items-center">
-        <MainNav />
-        <MobileNav />
-        <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
-          <div className="w-full flex-1 md:w-auto md:flex-none">
-            <CommandMenu />
+    <header className="border-grid sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container-wrapper">
+        <div className="container flex h-14 items-center">
+          <MainNav />
+          <MobileNav />
+          <div className="flex flex-1 items-center justify-between gap-2 md:justify-end">
+            <div className="w-full flex-1 md:w-auto md:flex-none">
+              <CommandMenu />
+            </div>
+            <nav className="flex items-center gap-0.5">
+              <Button variant="ghost" size="icon" className="h-8 w-8 px-0">
+                <Link
+                  href={siteConfig.links.github}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <Icons.gitHub className="h-4 w-4" />
+                  <span className="sr-only">GitHub</span>
+                </Link>
+              </Button>
+              <ModeSwitcher />
+            </nav>
           </div>
-          <nav className="flex items-center">
-            <Link
-              href={siteConfig.links.github}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <div
-                className={cn(
-                  buttonVariants({
-                    variant: "ghost",
-                  }),
-                  "h-8 w-8 px-0"
-                )}
-              >
-                <Icons.gitHub className="h-4 w-4" />
-                <span className="sr-only">GitHub</span>
-              </div>
-            </Link>
-            <Link
-              href={siteConfig.links.twitter}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <div
-                className={cn(
-                  buttonVariants({
-                    variant: "ghost",
-                  }),
-                  "h-8 w-8 px-0"
-                )}
-              >
-                <Icons.twitter className="h-3 w-3 fill-current" />
-                <span className="sr-only">Twitter</span>
-              </div>
-            </Link>
-            <ModeToggle />
-          </nav>
         </div>
       </div>
     </header>
diff --git a/apps/www/components/theme-customizer.tsx b/apps/www/components/theme-customizer.tsx
index efbc66d6c29..a66a03d756e 100644
--- a/apps/www/components/theme-customizer.tsx
+++ b/apps/www/components/theme-customizer.tsx
@@ -1,15 +1,8 @@
 "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 template from "lodash/template"
+import { Check, Copy, Moon, Repeat, Sun } from "lucide-react"
 import { useTheme } from "next-themes"
 
 import { cn } from "@/lib/utils"
@@ -79,77 +72,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={cn(
-                          "flex h-8 w-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={cn(
-                            "flex h-5 w-5 items-center justify-center rounded-full bg-[--theme-primary]"
-                          )}
-                        >
-                          {isActive && (
-                            <CheckIcon className="h-4 w-4 text-white" />
-                          )}
-                        </span>
-                        <span className="sr-only">{baseColor.label}</span>
-                      </button>
-                    </TooltipTrigger>
-                    <TooltipContent
-                      align="center"
-                      className="rounded-[0.5rem] bg-zinc-900 text-zinc-50"
-                    >
-                      {baseColor.label}
-                    </TooltipContent>
-                  </Tooltip>
-                )
-              })}
-            </>
-          ) : (
-            <div className="mr-1 flex items-center gap-4">
-              <Skeleton className="h-5 w-5 rounded-full" />
-              <Skeleton className="h-5 w-5 rounded-full" />
-              <Skeleton className="h-5 w-5 rounded-full" />
-              <Skeleton className="h-5 w-5 rounded-full" />
-              <Skeleton className="h-5 w-5 rounded-full" />
-            </div>
-          )}
-        </div>
       </div>
       <CopyCodeButton variant="ghost" size="sm" className="[&_svg]:hidden" />
     </div>
@@ -173,10 +95,10 @@ 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-xs text-muted-foreground">
-            Pick a style and color for your components.
+            Customize your components colors.
           </div>
         </div>
         <Button
@@ -191,110 +113,58 @@ function Customizer() {
             })
           }}
         >
-          <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 h-3 w-3" />
-                <span className="sr-only">About styles</span>
-              </PopoverTrigger>
-              <PopoverContent
-                className="space-y-3 rounded-[0.5rem] text-sm"
-                side="right"
-                align="start"
-                alignOffset={-20}
-              >
-                <p className="font-medium">
-                  What is the difference between the New York 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">New York</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={cn(
-                config.style === "default" && "border-2 border-primary"
-              )}
-            >
-              Default
-            </Button>
-            <Button
-              variant={"outline"}
-              size="sm"
-              onClick={() => setConfig({ ...config, style: "new-york" })}
-              className={cn(
-                config.style === "new-york" && "border-2 border-primary"
-              )}
-            >
-              New York
-            </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,
-                    })
-                  }}
-                  className={cn(
-                    "justify-start",
-                    isActive && "border-2 border-primary"
-                  )}
-                  style={
-                    {
-                      "--theme-primary": `hsl(${
-                        theme?.activeColor[mode === "dark" ? "dark" : "light"]
-                      })`,
-                    } as React.CSSProperties
-                  }
-                >
-                  <span
+                return mounted ? (
+                  <Button
+                    variant={"outline"}
+                    size="sm"
+                    key={theme.name}
+                    onClick={() => {
+                      setConfig({
+                        ...config,
+                        theme: theme.name,
+                      })
+                    }}
                     className={cn(
-                      "mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]"
+                      "justify-start",
+                      isActive && "border-2 border-primary"
                     )}
+                    style={
+                      {
+                        "--theme-primary": `hsl(${
+                          theme?.activeColor[mode === "dark" ? "dark" : "light"]
+                        })`,
+                      } as React.CSSProperties
+                    }
                   >
-                    {isActive && <CheckIcon className="h-4 w-4 text-white" />}
-                  </span>
-                  {theme.label}
-                </Button>
-              ) : (
-                <Skeleton className="h-8 w-full" key={theme.name} />
-              )
-            })}
+                    <span
+                      className={cn(
+                        "mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]"
+                      )}
+                    >
+                      {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">
@@ -334,7 +204,7 @@ function Customizer() {
                   onClick={() => setMode("light")}
                   className={cn(mode === "light" && "border-2 border-primary")}
                 >
-                  <SunIcon className="mr-1 -translate-x-1" />
+                  <Sun className="mr-1 -translate-x-1" />
                   Light
                 </Button>
                 <Button
@@ -343,7 +213,7 @@ function Customizer() {
                   onClick={() => setMode("dark")}
                   className={cn(mode === "dark" && "border-2 border-primary")}
                 >
-                  <MoonIcon className="mr-1 -translate-x-1" />
+                  <Moon className="mr-1 -translate-x-1" />
                   Dark
                 </Button>
               </>
@@ -391,11 +261,7 @@ function CopyCodeButton({
           className={cn("md:hidden", className)}
           {...props}
         >
-          {hasCopied ? (
-            <CheckIcon className="mr-2 h-4 w-4" />
-          ) : (
-            <CopyIcon className="mr-2 h-4 w-4" />
-          )}
+          {hasCopied ? <Check /> : <Copy />}
           Copy code
         </Button>
       )}
@@ -432,11 +298,7 @@ function CopyCodeButton({
                 }}
                 className="absolute right-4 top-4 bg-muted text-muted-foreground hover:bg-muted hover:text-muted-foreground"
               >
-                {hasCopied ? (
-                  <CheckIcon className="mr-2 h-4 w-4" />
-                ) : (
-                  <CopyIcon className="mr-2 h-4 w-4" />
-                )}
+                {hasCopied ? <Check /> : <Copy />}
                 Copy
               </Button>
             )}
diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts
index 22fef442205..92d4ac8075d 100644
--- a/apps/www/config/docs.ts
+++ b/apps/www/config/docs.ts
@@ -8,6 +8,10 @@ export interface DocsConfig {
 
 export const docsConfig: DocsConfig = {
   mainNav: [
+    {
+      title: "Home",
+      href: "/",
+    },
     {
       title: "Documentation",
       href: "/docs",
@@ -28,10 +32,6 @@ export const docsConfig: DocsConfig = {
       title: "Themes",
       href: "/themes",
     },
-    {
-      title: "Examples",
-      href: "/examples",
-    },
     {
       title: "Colors",
       href: "/colors",
@@ -71,6 +71,12 @@ export const docsConfig: DocsConfig = {
           href: "/docs/cli",
           items: [],
         },
+        {
+          title: "Monorepo",
+          href: "/docs/monorepo",
+          items: [],
+          label: "New",
+        },
         {
           title: "Next.js 15 + React 19",
           href: "/docs/react-19",
@@ -141,12 +147,6 @@ export const docsConfig: DocsConfig = {
     {
       title: "Components",
       items: [
-        {
-          title: "Sidebar",
-          href: "/docs/components/sidebar",
-          items: [],
-          label: "New",
-        },
         {
           title: "Accordion",
           href: "/docs/components/accordion",
@@ -337,6 +337,11 @@ export const docsConfig: DocsConfig = {
           href: "/docs/components/sheet",
           items: [],
         },
+        {
+          title: "Sidebar",
+          href: "/docs/components/sidebar",
+          items: [],
+        },
         {
           title: "Skeleton",
           href: "/docs/components/skeleton",
diff --git a/apps/www/config/site.ts b/apps/www/config/site.ts
index 76c0b1f7b89..c684f2e1093 100644
--- a/apps/www/config/site.ts
+++ b/apps/www/config/site.ts
@@ -11,3 +11,8 @@ export const siteConfig = {
 }
 
 export type SiteConfig = typeof siteConfig
+
+export const META_THEME_COLORS = {
+  light: "#ffffff",
+  dark: "#09090b",
+}
diff --git a/apps/www/content/docs/cli.mdx b/apps/www/content/docs/cli.mdx
index ce60871c8c5..0de7dbcdb5a 100644
--- a/apps/www/content/docs/cli.mdx
+++ b/apps/www/content/docs/cli.mdx
@@ -85,6 +85,7 @@ 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
 ```
diff --git a/apps/www/content/docs/components/calendar.mdx b/apps/www/content/docs/components/calendar.mdx
index d4a7a40980e..867dbd0eafb 100644
--- a/apps/www/content/docs/components/calendar.mdx
+++ b/apps/www/content/docs/components/calendar.mdx
@@ -88,3 +88,14 @@ You can use the `<Calendar>` component to build a date picker. See the [Date Pic
 ### Form
 
 <ComponentPreview name="calendar-form" />
+
+## Changelog
+
+### 11-03-2024 day_outside color
+
+- Changed the color of the `day_outside` class to the following to improve contrast:
+
+  ```tsx showLineNumbers title="calendar.tsx"
+  "day_outside:
+        "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+  ```
diff --git a/apps/www/content/docs/components/card.mdx b/apps/www/content/docs/components/card.mdx
index 78ddec27166..63036867c41 100644
--- a/apps/www/content/docs/components/card.mdx
+++ b/apps/www/content/docs/components/card.mdx
@@ -72,3 +72,35 @@ import {
   name="card-demo"
   description="A card showing notifications settings."
 />
+
+## Changelog
+
+### 11-03-2024 a11y for title and description
+
+- Changed the `CardTitle` and `CardDescription` components to use `div` instead of `h3` and `p` to improve accessibility.
+
+```tsx showLineNumbers title="card.tsx"
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+```
diff --git a/apps/www/content/docs/components/data-table.mdx b/apps/www/content/docs/components/data-table.mdx
index c3e1f01e026..e5fa2bd237f 100644
--- a/apps/www/content/docs/components/data-table.mdx
+++ b/apps/www/content/docs/components/data-table.mdx
@@ -6,7 +6,7 @@ links:
   doc: https://tanstack.com/table/v8/docs/introduction
 ---
 
-<ComponentPreview name="data-table-demo" />
+<ComponentPreview name="data-table-demo" className="[&_.preview]:items-start" />
 
 ## Introduction
 
diff --git a/apps/www/content/docs/components/sidebar.mdx b/apps/www/content/docs/components/sidebar.mdx
index 55805481214..1fed0194573 100644
--- a/apps/www/content/docs/components/sidebar.mdx
+++ b/apps/www/content/docs/components/sidebar.mdx
@@ -335,7 +335,7 @@ export function AppSidebar() {
 
 <figure className="flex flex-col gap-4">
   <ComponentPreview
-    name="demo-sidebar"
+    name="sidebar-demo"
     title="Sidebar"
     type="block"
     description="Your first sidebar."
@@ -560,7 +560,7 @@ The following example adds a `<DropdownMenu>` to the `SidebarHeader`.
 
 <figure className="flex flex-col gap-4 mt-6">
   <ComponentPreview
-    name="demo-sidebar-header"
+    name="sidebar-header"
     title="Sidebar"
     type="block"
     description="A sidebar header with a dropdown menu."
@@ -606,7 +606,7 @@ The following example adds a `<DropdownMenu>` to the `SidebarFooter`.
 
 <figure className="flex flex-col gap-4 mt-6">
   <ComponentPreview
-    name="demo-sidebar-footer"
+    name="sidebar-footer"
     title="Sidebar"
     type="block"
     description="A sidebar footer with a dropdown menu."
@@ -685,7 +685,7 @@ A `SidebarGroup` has a `SidebarGroupLabel`, a `SidebarGroupContent` and an optio
 
 <figure className="flex flex-col gap-4 mt-6">
   <ComponentPreview
-    name="demo-sidebar-group"
+    name="sidebar-group"
     title="Sidebar Group"
     type="block"
     description="A sidebar group."
@@ -722,7 +722,7 @@ To make a `SidebarGroup` collapsible, wrap it in a `Collapsible`.
 
 <figure className="flex flex-col gap-4 mt-6">
   <ComponentPreview
-    name="demo-sidebar-group-collapsible"
+    name="sidebar-group-collapsible"
     title="Sidebar Group"
     type="block"
     description="A collapsible sidebar group."
@@ -778,7 +778,7 @@ export function AppSidebar() {
 
 <figure className="flex flex-col gap-4">
   <ComponentPreview
-    name="demo-sidebar-group-action"
+    name="sidebar-group-action"
     title="Sidebar Group"
     type="block"
     description="A sidebar group with an action button."
@@ -814,7 +814,7 @@ Here's an example of a `SidebarMenu` component rendering a list of projects.
 
 <figure className="flex flex-col gap-4 mt-6">
   <ComponentPreview
-    name="demo-sidebar-menu"
+    name="sidebar-menu"
     title="Sidebar Menu"
     type="block"
     description="A sidebar menu with a list of projects."
@@ -912,7 +912,7 @@ Here's an example of a `SidebarMenuAction` component rendering a `DropdownMenu`.
 
 <figure className="flex flex-col gap-4 mt-6">
   <ComponentPreview
-    name="demo-sidebar-menu-action"
+    name="sidebar-menu-action"
     title="Sidebar Menu Action"
     type="block"
     description="A sidebar menu action with a dropdown menu."
@@ -957,7 +957,7 @@ Use `<SidebarMenuSubItem />` and `<SidebarMenuSubButton />` to render a submenu
 
 <figure className="flex flex-col gap-4 mt-6">
   <ComponentPreview
-    name="demo-sidebar-menu-sub"
+    name="sidebar-menu-sub"
     title="Sidebar Menu Sub"
     type="block"
     description="A sidebar menu sub."
@@ -988,7 +988,7 @@ To make a `SidebarMenu` component collapsible, wrap it and the `SidebarMenuSub`
 
 <figure className="flex flex-col gap-4 mt-6">
   <ComponentPreview
-    name="demo-sidebar-menu-collapsible"
+    name="sidebar-menu-collapsible"
     title="Sidebar Menu"
     type="block"
     description="A collapsible sidebar menu."
@@ -1022,7 +1022,7 @@ The `SidebarMenuBadge` component is used to render a badge within a `SidebarMenu
 
 <figure className="flex flex-col gap-4 mt-6">
   <ComponentPreview
-    name="demo-sidebar-menu-badge"
+    name="sidebar-menu-badge"
     title="Sidebar Menu Badge"
     type="block"
     description="A sidebar menu badge."
@@ -1126,7 +1126,7 @@ Here's an example of a `SidebarMenu` component rendering a list of projects usin
 
 <figure className="flex flex-col gap-4 mt-6">
   <ComponentPreview
-    name="demo-sidebar-rsc"
+    name="sidebar-rsc"
     title="Sidebar Menu RSC"
     type="block"
     description="A sidebar menu using React Server Components."
@@ -1275,7 +1275,7 @@ Use the `open` and `onOpenChange` props to control the sidebar.
 
 <figure className="flex flex-col gap-4 mt-6">
   <ComponentPreview
-    name="demo-sidebar-controlled"
+    name="sidebar-controlled"
     title="Sidebar Controlled"
     type="block"
     description="A controlled sidebar."
diff --git a/apps/www/content/docs/dark-mode/next.mdx b/apps/www/content/docs/dark-mode/next.mdx
index 175014c4ec8..741d8494654 100644
--- a/apps/www/content/docs/dark-mode/next.mdx
+++ b/apps/www/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>
 }
 ```
diff --git a/apps/www/content/docs/figma.mdx b/apps/www/content/docs/figma.mdx
index f36d16d6a68..a49d6538cca 100644
--- a/apps/www/content/docs/figma.mdx
+++ b/apps/www/content/docs/figma.mdx
@@ -5,7 +5,7 @@ description: Every component recreated in Figma. With customizable props, typogr
 
 ## Paid
 
-- [shadcn/ui kit](http://shadcndesign.com) by [ Matt Wierzbicki](https://x.com/matsugfx) - A premium, always up-to-date UI kit for Figma - shadcn/ui compatible and optimized for smooth design-to-dev handoff.
+- [shadcn/ui kit](https://shadcndesign.com) by [ Matt Wierzbicki](https://x.com/matsugfx) - A premium, always up-to-date UI kit for Figma - shadcn/ui compatible and optimized for smooth design-to-dev handoff.
 
 ## Free
 
diff --git a/apps/www/content/docs/installation/manual.mdx b/apps/www/content/docs/installation/manual.mdx
index 4625b2cde47..058fa03f80d 100644
--- a/apps/www/content/docs/installation/manual.mdx
+++ b/apps/www/content/docs/installation/manual.mdx
@@ -16,28 +16,14 @@ Components are styled using Tailwind CSS. You need to install Tailwind CSS in yo
 Add the following dependencies to your project:
 
 ```bash
-npm install tailwindcss-animate class-variance-authority clsx tailwind-merge
-```
-
-### Add icon library
-
-If you're using the `default` style, install `lucide-react`:
-
-```bash
-npm install lucide-react
-```
-
-If you're using the `new-york` style, install `@radix-ui/react-icons`:
-
-```bash
-npm install @radix-ui/react-icons
+npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react
 ```
 
 ### Configure path aliases
 
-I use the `@` alias. This is how I configure it in tsconfig.json:
+Configure the path aliases in your `tsconfig.json` file.
 
-```json {3-6} title="tsconfig.json"
+```json {3-6} title="tsconfig.json" showLineNumbers
 {
   "compilerOptions": {
     "baseUrl": ".",
@@ -50,27 +36,16 @@ I use the `@` alias. This is how I configure it in tsconfig.json:
 
 The `@` alias is a preference. You can use other aliases if you want.
 
-**If you use a different alias such as ~, you'll need to update import statements when adding components.**
-
 ### Configure tailwind.config.js
 
 Here's what my `tailwind.config.js` file looks like:
 
 ```js title="tailwind.config.js"
-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))",
@@ -112,23 +87,6 @@ module.exports = {
         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")],
@@ -148,67 +106,46 @@ Add the following to your styles/globals.css file. You can learn more about usin
   :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;
   }
 }
 
@@ -217,17 +154,14 @@ Add the following to your styles/globals.css file. You can learn more about usin
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
+    @apply font-sans antialiased bg-background text-foreground;
   }
 }
 ```
 
 ### Add a cn helper
 
-I use a `cn` helper to make it easier to conditionally add Tailwind CSS classes. Here's how I define it in `lib/utils.ts`:
-
-```ts title="lib/utils.ts"
+```ts title="lib/utils.ts" showLineNumbers
 import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
 
@@ -236,6 +170,34 @@ export function cn(...inputs: ClassValue[]) {
 }
 ```
 
+### Create a `components.json` file
+
+Create a `components.json` file in the root of your project.
+
+```json title="components.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
+```
+
 ### That's it
 
 You can now start adding components to your project.
diff --git a/apps/www/content/docs/installation/remix.mdx b/apps/www/content/docs/installation/remix.mdx
index 170d20a8a44..a579e8213c5 100644
--- a/apps/www/content/docs/installation/remix.mdx
+++ b/apps/www/content/docs/installation/remix.mdx
@@ -47,7 +47,7 @@ Do you want to use CSS variables for colors? › no / yes
 ### Install Tailwind CSS
 
 ```bash
-npm add -D tailwindcss@latest autoprefixer@latest
+npm install -D tailwindcss@latest autoprefixer@latest
 ```
 
 Then we create a `postcss.config.js` file:
diff --git a/apps/www/content/docs/installation/vite.mdx b/apps/www/content/docs/installation/vite.mdx
index 2b74834a857..a286dbf468f 100644
--- a/apps/www/content/docs/installation/vite.mdx
+++ b/apps/www/content/docs/installation/vite.mdx
@@ -19,7 +19,9 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
 
 ```bash
 npm install -D tailwindcss postcss autoprefixer
+```
 
+```bash
 npx tailwindcss init -p
 ```
 
@@ -93,11 +95,10 @@ Add the following code to the `tsconfig.app.json` file to resolve paths, for you
 
 ### Update vite.config.ts
 
-Add the following code to the vite.config.ts so your app can resolve paths without error
+Add the following code to the vite.config.ts so your app can resolve paths without error:
 
 ```bash
-# (so you can import "path" without error)
-npm i -D @types/node
+npm install -D @types/node
 ```
 
 ```typescript
diff --git a/apps/www/content/docs/monorepo.mdx b/apps/www/content/docs/monorepo.mdx
new file mode 100644
index 00000000000..94c3fdeb4e0
--- /dev/null
+++ b/apps/www/content/docs/monorepo.mdx
@@ -0,0 +1,175 @@
+---
+title: Monorepo
+description: Using shadcn/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/shadcn-ui/ui/discussions).
+</Callout>
+
+Until now, using shadcn/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
+shadcn/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 shadcn@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 shadcn@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 shadcn@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 shadcn@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
+    ├── components.json
+    └── package.json
+packages
+└── ui          # Your components and dependencies are installed here.
+    ├── src
+    │   ├── components
+    │   │   └── button.tsx
+    │   ├── hooks
+    │   ├── lib
+    │   │   └── utils.ts
+    │   └── styles
+    │       └── globals.css
+    ├── components.json
+    └── package.json
+package.json
+turbo.json
+```
+
+## Requirements
+
+1. Every workspace must have a `components.json` file. A `package.json` file tells npm how to install the dependencies. A `components.json` file tells the CLI how and where to install components.
+
+2. The `components.json` file must properly define aliases for the workspace. This tells the CLI how to import components, hooks, utilities, etc.
+
+```json title="apps/web/components.json"
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "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/components.json"
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "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 `components.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/shadcn-ui/ui/discussions).
diff --git a/apps/www/content/docs/react-19.mdx b/apps/www/content/docs/react-19.mdx
index 4ba6a5ec8b9..660802ea1e8 100644
--- a/apps/www/content/docs/react-19.mdx
+++ b/apps/www/content/docs/react-19.mdx
@@ -142,8 +142,8 @@ To make it easy for you track the progress of the upgrade, I've created a table
 | [react-day-picker](https://www.npmjs.com/package/react-day-picker)                 | ✅     | Works with flag for npm. Work to upgrade to v9 in progress. |
 | [input-otp](https://www.npmjs.com/package/input-otp)                               | ✅     |                                                             |
 | [vaul](https://www.npmjs.com/package/vaul)                                         | ✅     |                                                             |
-| [@radix-ui/react-icons](https://www.npmjs.com/package/@radix-ui/react-icons)       | ✅     |                                                             |
-| [cmdk](https://www.npmjs.com/package/cmdk)                                         | 🚧     | See [PR #318](https://github.com/pacocoursey/cmdk/pull/318) |
+| [@radix-ui/react-icons](https://www.npmjs.com/package/@radix-ui/react-icons)       | 🚧     | See [PR #194](https://github.com/radix-ui/icons/pull/194)   |
+| [cmdk](https://www.npmjs.com/package/cmdk)                                         | ✅     |                                                             |
 
 If you have any questions, please [open an issue](https://github.com/shadcn/ui/issues) on GitHub.
 
diff --git a/apps/www/hooks/use-config.ts b/apps/www/hooks/use-config.ts
index 1fd3549f906..982e9ba0e06 100644
--- a/apps/www/hooks/use-config.ts
+++ b/apps/www/hooks/use-config.ts
@@ -8,12 +8,14 @@ type Config = {
   style: Style["name"]
   theme: BaseColor["name"]
   radius: number
+  packageManager: "npm" | "yarn" | "pnpm" | "bun"
 }
 
 const configAtom = atomWithStorage<Config>("config", {
-  style: "default",
+  style: "new-york",
   theme: "zinc",
   radius: 0.5,
+  packageManager: "pnpm",
 })
 
 export function useConfig() {
diff --git a/apps/www/hooks/use-meta-color.ts b/apps/www/hooks/use-meta-color.ts
new file mode 100644
index 00000000000..ec52514b1e8
--- /dev/null
+++ b/apps/www/hooks/use-meta-color.ts
@@ -0,0 +1,25 @@
+import * as React from "react"
+import { useTheme } from "next-themes"
+
+import { META_THEME_COLORS } from "@/config/site"
+
+export function useMetaColor() {
+  const { resolvedTheme } = useTheme()
+
+  const metaColor = React.useMemo(() => {
+    return resolvedTheme !== "dark"
+      ? META_THEME_COLORS.light
+      : META_THEME_COLORS.dark
+  }, [resolvedTheme])
+
+  const setMetaColor = React.useCallback((color: string) => {
+    document
+      .querySelector('meta[name="theme-color"]')
+      ?.setAttribute("content", color)
+  }, [])
+
+  return {
+    metaColor,
+    setMetaColor,
+  }
+}
diff --git a/apps/www/hooks/use-project.ts b/apps/www/hooks/use-project.ts
new file mode 100644
index 00000000000..4f903ea868c
--- /dev/null
+++ b/apps/www/hooks/use-project.ts
@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from "react"
+import { useAtom } from "jotai"
+import { atomWithStorage } from "jotai/utils"
+
+type Project = {
+  blocks: string[]
+}
+
+const projectAtom = atomWithStorage<Project>("project", {
+  blocks: [],
+})
+
+export function useProject() {
+  const [isAdded, setIsAdded] = React.useState(false)
+  const [project, setProject] = useAtom(projectAtom)
+
+  const addBlock = React.useCallback((block: string) => {
+    setProject((prev) => {
+      if (prev.blocks.includes(block)) {
+        return prev
+      }
+      return { ...prev, blocks: [...prev.blocks, block] }
+    })
+    setIsAdded(true)
+
+    setTimeout(() => {
+      setIsAdded(false)
+    }, 2000)
+  }, [])
+
+  const removeBlock = React.useCallback((block: string) => {
+    setProject((prev) => ({
+      ...prev,
+      blocks: prev.blocks.filter((b) => b !== block),
+    }))
+  }, [])
+
+  const hasBlock = React.useCallback((block: string) => {
+    return project.blocks.includes(block)
+  }, [])
+
+  const resetProject = React.useCallback(() => {
+    setProject({ blocks: [] })
+  }, [])
+
+  return { project, addBlock, removeBlock, resetProject, hasBlock, isAdded }
+}
diff --git a/apps/www/lib/blocks.ts b/apps/www/lib/blocks.ts
index 9563245a487..fb875c0757f 100644
--- a/apps/www/lib/blocks.ts
+++ b/apps/www/lib/blocks.ts
@@ -1,159 +1,30 @@
 "use server"
 
-import { promises as fs } from "fs"
-import { tmpdir } from "os"
-import path from "path"
-import { Index } from "@/__registry__"
-import { Project, ScriptKind, SourceFile, SyntaxKind } from "ts-morph"
 import { z } from "zod"
 
-import { highlightCode } from "@/lib/highlight-code"
 import { Style } from "@/registry/registry-styles"
-import { BlockChunk, blockSchema, registryEntrySchema } from "@/registry/schema"
-
-const DEFAULT_BLOCKS_STYLE = "new-york" satisfies Style["name"]
-
-const project = new Project({
-  compilerOptions: {},
-})
+import { registryItemSchema } from "@/registry/schema"
 
 export async function getAllBlockIds(
-  style: Style["name"] = DEFAULT_BLOCKS_STYLE
-) {
-  const blocks = await _getAllBlocks(style)
-  return blocks.map((block) => block.name)
-}
-
-export async function getBlock(
-  name: string,
-  style: Style["name"] = DEFAULT_BLOCKS_STYLE
-) {
-  const entry = Index[style][name]
-
-  const content = await _getBlockContent(name, style)
-
-  const chunks = entry?.chunks
-    ? await Promise.all(
-        entry?.chunks?.map(async (chunk: BlockChunk) => {
-          const code = await readFile(chunk.file)
-
-          const tempFile = await createTempSourceFile(`${chunk.name}.tsx`)
-          const sourceFile = project.createSourceFile(tempFile, code, {
-            scriptKind: ScriptKind.TSX,
-          })
-
-          sourceFile
-            .getDescendantsOfKind(SyntaxKind.JsxOpeningElement)
-            .filter((node) => {
-              return node.getAttribute("x-chunk") !== undefined
-            })
-            ?.map((component) => {
-              component
-                .getAttribute("x-chunk")
-                ?.asKind(SyntaxKind.JsxAttribute)
-                ?.remove()
-            })
-
-          return {
-            ...chunk,
-            code: sourceFile
-              .getText()
-              .replaceAll(`@/registry/${style}/`, "@/components/"),
-          }
-        })
-      )
-    : []
-
-  const block = {
-    style,
-    highlightedCode: content.code ? await highlightCode(content.code) : "",
-    ...entry,
-    ...content,
-    chunks,
-    type: "registry:block",
-  }
-
-  const result = blockSchema.safeParse(block)
-
-  if (!result.success) {
-    console.log(block)
-    return null
-  }
-
-  return result.data
-}
-
-async function _getAllBlocks(style: Style["name"] = DEFAULT_BLOCKS_STYLE) {
-  const index = z.record(registryEntrySchema).parse(Index[style])
-
-  return Object.values(index).filter((block) => block.type === "registry:block")
-}
-
-async function _getBlockCode(
-  name: string,
-  style: Style["name"] = DEFAULT_BLOCKS_STYLE
-) {
-  const entry = Index[style][name]
-  if (!entry) {
-    console.error(`Block ${name} not found in style ${style}`)
-    return ""
-  }
-  const block = registryEntrySchema.parse(entry)
-
-  if (!block.source) {
-    return ""
-  }
-
-  return await readFile(block.source)
-}
-
-async function readFile(source: string) {
-  const filepath = path.join(process.cwd(), source)
-  return await fs.readFile(filepath, "utf-8")
-}
-
-async function createTempSourceFile(filename: string) {
-  const dir = await fs.mkdtemp(path.join(tmpdir(), "codex-"))
-  return path.join(dir, filename)
-}
-
-async function _getBlockContent(name: string, style: Style["name"]) {
-  const raw = await _getBlockCode(name, style)
-
-  const tempFile = await createTempSourceFile(`${name}.tsx`)
-  const sourceFile = project.createSourceFile(tempFile, raw, {
-    scriptKind: ScriptKind.TSX,
-  })
-
-  // Extract meta.
-  const iframeHeight = _extractVariable(sourceFile, "iframeHeight")
-  const containerClassName = _extractVariable(sourceFile, "containerClassName")
-
-  // Format the code.
-  let code = sourceFile.getText()
-  code = code.replaceAll(`@/registry/${style}/`, "@/components/")
-  code = code.replaceAll("export default", "export")
-
-  return {
-    code,
-    container: {
-      height: iframeHeight,
-      className: containerClassName,
-    },
-  }
-}
-
-function _extractVariable(sourceFile: SourceFile, name: string) {
-  const variable = sourceFile.getVariableDeclaration(name)
-  if (!variable) {
-    return null
-  }
-
-  const value = variable
-    .getInitializerIfKindOrThrow(SyntaxKind.StringLiteral)
-    .getLiteralValue()
-
-  variable.remove()
-
-  return value
+  types: z.infer<typeof registryItemSchema>["type"][] = [
+    "registry:block",
+    "registry:internal",
+  ],
+  categories: string[] = [],
+  style: Style["name"] = "new-york"
+): Promise<string[]> {
+  const { Index } = await import("@/__registry__")
+  const index = z.record(registryItemSchema).parse(Index[style])
+
+  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/www/lib/fonts.ts b/apps/www/lib/fonts.ts
index 297b0b3acb7..ed245edf98d 100644
--- a/apps/www/lib/fonts.ts
+++ b/apps/www/lib/fonts.ts
@@ -1,15 +1,6 @@
-// import { JetBrains_Mono as FontMono, Inter as FontSans } from "next/font/google"
-import { JetBrains_Mono as FontMono } from "next/font/google"
-// import { GeistMono } from "geist/font/mono"
+import { GeistMono } from "geist/font/mono"
 import { GeistSans } from "geist/font/sans"
 
-// export const fontSans = FontSans({
-//   subsets: ["latin"],
-//   variable: "--font-sans",
-// })
 export const fontSans = GeistSans
 
-export const fontMono = FontMono({
-  subsets: ["latin"],
-  variable: "--font-mono",
-})
+export const fontMono = GeistMono
diff --git a/apps/www/lib/highlight-code.ts b/apps/www/lib/highlight-code.ts
index 447d05fc69e..acc235f2d44 100644
--- a/apps/www/lib/highlight-code.ts
+++ b/apps/www/lib/highlight-code.ts
@@ -1,10 +1,8 @@
-"use server"
-
 import { codeToHtml } from "shiki"
 
 export async function highlightCode(code: string) {
-  const html = codeToHtml(code, {
-    lang: "typescript",
+  const html = await codeToHtml(code, {
+    lang: "jsx",
     theme: "github-dark-default",
     transformers: [
       {
diff --git a/apps/www/lib/registry.test.ts b/apps/www/lib/registry.test.ts
new file mode 100644
index 00000000000..c7808422533
--- /dev/null
+++ b/apps/www/lib/registry.test.ts
@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest"
+
+import { createFileTreeForRegistryItemFiles } from "@/lib/registry"
+
+describe("createFileTreeForRegistryItemFiles", () => {
+  it("should create a nested file tree structure", async () => {
+    const files = [
+      { path: "page.tsx" },
+      { path: "components/foo.tsx" },
+      { path: "components/baz.tsx" },
+      { path: "components/boo/quip.tsx" },
+    ]
+
+    const expectedOutput = [
+      { name: "page.tsx", path: "page.tsx" },
+      {
+        name: "components",
+        children: [
+          { name: "foo.tsx", path: "components/foo.tsx" },
+          { name: "baz.tsx", path: "components/baz.tsx" },
+          {
+            name: "boo",
+            children: [{ name: "quip.tsx", path: "components/boo/quip.tsx" }],
+          },
+        ],
+      },
+    ]
+
+    const result = await createFileTreeForRegistryItemFiles(files)
+    expect(result).toEqual(expectedOutput)
+  })
+
+  it("should return an empty array for empty input", async () => {
+    const result = await createFileTreeForRegistryItemFiles([])
+    expect(result).toEqual([])
+  })
+})
diff --git a/apps/www/lib/registry.ts b/apps/www/lib/registry.ts
new file mode 100644
index 00000000000..17f7387d5f4
--- /dev/null
+++ b/apps/www/lib/registry.ts
@@ -0,0 +1,274 @@
+import { promises as fs } from "fs"
+import { tmpdir } from "os"
+import path from "path"
+import { Index } from "@/__registry__"
+import { Project, ScriptKind, SourceFile, SyntaxKind } from "ts-morph"
+import { z } from "zod"
+
+import { Style } from "@/registry/registry-styles"
+import { registryItemFileSchema, registryItemSchema } from "@/registry/schema"
+
+export const DEFAULT_REGISTRY_STYLE = "new-york" satisfies Style["name"]
+
+const memoizedIndex: typeof Index = Object.fromEntries(
+  Object.entries(Index).map(([style, items]) => [style, { ...items }])
+)
+
+export function getRegistryComponent(
+  name: string,
+  style: Style["name"] = DEFAULT_REGISTRY_STYLE
+) {
+  return memoizedIndex[style][name]?.component
+}
+
+export async function getRegistryItem(
+  name: string,
+  style: Style["name"] = DEFAULT_REGISTRY_STYLE
+) {
+  const item = memoizedIndex[style][name]
+
+  if (!item) {
+    return null
+  }
+
+  // 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
+  )
+
+  // Fail early before doing expensive file operations.
+  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)
+    const relativePath = path.relative(process.cwd(), file.path)
+
+    files.push({
+      ...file,
+      path: relativePath,
+      content,
+    })
+  }
+
+  // Get meta.
+  // Assume the first file is the main file.
+  // const meta = await getFileMeta(files[0].path)
+
+  // Fix file paths.
+  files = fixFilePaths(files)
+
+  const parsed = registryItemSchema.safeParse({
+    ...result.data,
+    files,
+    // meta,
+  })
+
+  if (!parsed.success) {
+    console.error(parsed.error.message)
+    return null
+  }
+
+  return parsed.data
+}
+
+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(file.path)
+  const sourceFile = project.createSourceFile(tempFile, raw, {
+    scriptKind: ScriptKind.TSX,
+  })
+
+  // Remove meta variables.
+  removeVariable(sourceFile, "iframeHeight")
+  removeVariable(sourceFile, "containerClassName")
+  removeVariable(sourceFile, "description")
+
+  let code = sourceFile.getFullText()
+
+  // Some registry items uses default export.
+  // We want to use named export instead.
+  // TODO: do we really need this? - @shadcn.
+  if (file.type !== "registry:page") {
+    code = code.replaceAll("export default", "export")
+  }
+
+  // Fix imports.
+  code = fixImport(code)
+
+  return code
+}
+
+async function getFileMeta(filePath: string) {
+  const raw = await fs.readFile(filePath, "utf-8")
+
+  const project = new Project({
+    compilerOptions: {},
+  })
+
+  const tempFile = await createTempSourceFile(filePath)
+  const sourceFile = project.createSourceFile(tempFile, raw, {
+    scriptKind: ScriptKind.TSX,
+  })
+
+  const iframeHeight = extractVariable(sourceFile, "iframeHeight")
+  const containerClassName = extractVariable(sourceFile, "containerClassName")
+  const description = extractVariable(sourceFile, "description")
+
+  return {
+    iframeHeight,
+    containerClassName,
+    description,
+  }
+}
+
+function getFileTarget(file: z.infer<typeof registryItemFileSchema>) {
+  let target = file.target
+
+  if (!target || target === "") {
+    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 target
+}
+
+async function createTempSourceFile(filename: string) {
+  const dir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-"))
+  return path.join(dir, filename)
+}
+
+function removeVariable(sourceFile: SourceFile, name: string) {
+  sourceFile.getVariableDeclaration(name)?.remove()
+}
+
+function extractVariable(sourceFile: SourceFile, name: string) {
+  const variable = sourceFile.getVariableDeclaration(name)
+  if (!variable) {
+    return null
+  }
+
+  const value = variable
+    .getInitializerIfKindOrThrow(SyntaxKind.StringLiteral)
+    .getLiteralValue()
+
+  variable.remove()
+
+  return value
+}
+
+function fixFilePaths(files: z.infer<typeof registryItemSchema>["files"]) {
+  if (!files) {
+    return []
+  }
+
+  // Resolve all paths relative to the first file's directory.
+  const firstFilePath = files[0].path
+  const firstFilePathDir = path.dirname(firstFilePath)
+
+  return files.map((file) => {
+    return {
+      ...file,
+      path: path.relative(firstFilePathDir, file.path),
+      target: getFileTarget(file),
+    }
+  })
+}
+
+export function fixImport(content: string) {
+  const regex = /@\/(.+?)\/((?:.*?\/)?(?:components|ui|hooks|lib))\/([\w-]+)/g
+
+  const replacement = (
+    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
+  }
+
+  return content.replace(regex, replacement)
+}
+
+export type FileTree = {
+  name: string
+  path?: string
+  children?: FileTree[]
+}
+
+export function createFileTreeForRegistryItemFiles(
+  files: Array<{ path: string; target?: string }>
+) {
+  const root: FileTree[] = []
+
+  for (const file of files) {
+    const path = file.target ?? file.path
+    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)
+
+      if (existingNode) {
+        if (isFile) {
+          // Update existing file node with full path
+          existingNode.path = path
+        } else {
+          // Move to next level in the tree
+          currentLevel = existingNode.children!
+        }
+      } else {
+        const newNode: FileTree = isFile
+          ? { name: part, path }
+          : { name: part, children: [] }
+
+        currentLevel.push(newNode)
+
+        if (!isFile) {
+          currentLevel = newNode.children!
+        }
+      }
+    }
+  }
+
+  return root
+}
diff --git a/apps/www/lib/rehype-component.ts b/apps/www/lib/rehype-component.ts
index 40451f56cb8..c43aa8d8721 100644
--- a/apps/www/lib/rehype-component.ts
+++ b/apps/www/lib/rehype-component.ts
@@ -33,21 +33,24 @@ export function rehypeComponent() {
             let src: string
 
             if (srcPath) {
-              src = srcPath
+              src = path.join(process.cwd(), srcPath)
             } else {
               const component = Index[style.name][name]
               src = fileName
-                ? component.files.find((file: string) => {
-                    return (
-                      file.endsWith(`${fileName}.tsx`) ||
-                      file.endsWith(`${fileName}.ts`)
-                    )
-                  }) || component.files[0]
-                : component.files[0]
+                ? component.files.find((file: unknown) => {
+                    if (typeof file === "string") {
+                      return (
+                        file.endsWith(`${fileName}.tsx`) ||
+                        file.endsWith(`${fileName}.ts`)
+                      )
+                    }
+                    return false
+                  }) || component.files[0]?.path
+                : component.files[0]?.path
             }
 
             // Read the source file.
-            const filePath = path.join(process.cwd(), src)
+            const filePath = src
             let source = fs.readFileSync(filePath, "utf8")
 
             // Replace imports.
@@ -106,10 +109,10 @@ export function rehypeComponent() {
         try {
           for (const style of styles) {
             const component = Index[style.name][name]
-            const src = component.files[0]
+            const src = component.files[0]?.path
 
             // Read the source file.
-            const filePath = path.join(process.cwd(), src)
+            const filePath = src
             let source = fs.readFileSync(filePath, "utf8")
 
             // Replace imports.
diff --git a/apps/www/lib/rehype-npm-command.ts b/apps/www/lib/rehype-npm-command.ts
index 68157b66e4c..e0dd764da00 100644
--- a/apps/www/lib/rehype-npm-command.ts
+++ b/apps/www/lib/rehype-npm-command.ts
@@ -26,7 +26,7 @@ export function rehypeNpmCommand() {
         )
       }
 
-      // npx create.
+      // npx create-.
       if (node.properties?.["__rawString__"]?.startsWith("npx create-")) {
         const npmCommand = node.properties?.["__rawString__"]
         node.properties["__npmCommand__"] = npmCommand
@@ -44,6 +44,24 @@ export function rehypeNpmCommand() {
         )
       }
 
+      // npm create.
+      if (node.properties?.["__rawString__"]?.startsWith("npm create")) {
+        const npmCommand = node.properties?.["__rawString__"]
+        node.properties["__npmCommand__"] = npmCommand
+        node.properties["__yarnCommand__"] = npmCommand.replace(
+          "npm create",
+          "yarn create"
+        )
+        node.properties["__pnpmCommand__"] = npmCommand.replace(
+          "npm create",
+          "pnpm create"
+        )
+        node.properties["__bunCommand__"] = npmCommand.replace(
+          "npm create",
+          "bun create"
+        )
+      }
+
       // npx.
       if (
         node.properties?.["__rawString__"]?.startsWith("npx") &&
diff --git a/apps/www/next.config.mjs b/apps/www/next.config.mjs
index 299da42690e..d4d888e980e 100644
--- a/apps/www/next.config.mjs
+++ b/apps/www/next.config.mjs
@@ -2,6 +2,11 @@ import { createContentlayerPlugin } from "next-contentlayer2"
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  experimental: {
+    outputFileTracingIncludes: {
+      "/blocks/*": ["./registry/**/*"],
+    },
+  },
   reactStrictMode: true,
   swcMinify: true,
   images: {
diff --git a/apps/www/package.json b/apps/www/package.json
index a74b89e038f..29ed672c23c 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -7,7 +7,7 @@
     "dev": "next dev -p 3333",
     "build": "contentlayer2 build && pnpm build:registry && next build",
     "build:registry": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-registry.mts && prettier --loglevel silent --write \"registry/**/*.{ts,tsx,mdx}\" --cache",
-    "registry:capture": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/capture-screenshots.mts",
+    "registry:capture": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/capture-registry.mts",
     "build:docs": "contentlayer2 build",
     "seed:tasks": "tsx --tsconfig ./tsconfig.scripts.json ./app/(app)/examples/tasks/data/seed.ts",
     "start": "next start -p 3333",
@@ -67,12 +67,12 @@
     "geist": "^1.2.2",
     "input-otp": "^1.2.2",
     "jotai": "^2.1.0",
-    "lodash.template": "^4.5.0",
+    "lodash": "^4.17.21",
     "lucide-react": "0.359.0",
     "markdown-wasm": "^1.2.0",
     "next": "14.3.0-canary.43",
     "next-contentlayer2": "^0.4.6",
-    "next-themes": "^0.2.1",
+    "next-themes": "^0.4.3",
     "react": "^18.2.0",
     "react-day-picker": "^8.7.1",
     "react-dom": "^18.2.0",
@@ -85,12 +85,12 @@
     "swr": "2.2.6-beta.3",
     "tailwind-merge": "^1.12.0",
     "ts-morph": "^22.0.0",
-    "vaul": "0.9.0",
+    "vaul": "1.1.1",
     "zod": "^3.21.4"
   },
   "devDependencies": {
     "@shikijs/compat": "^1.1.7",
-    "@types/lodash.template": "^4.5.1",
+    "@types/lodash": "^4.17.7",
     "@types/node": "^17.0.45",
     "@types/react": "^18.2.65",
     "@types/react-color": "^3.0.6",
diff --git a/apps/www/public/favicon-16x16.png b/apps/www/public/favicon-16x16.png
index 0840dbf2923..d2ad2370f82 100644
Binary files a/apps/www/public/favicon-16x16.png and b/apps/www/public/favicon-16x16.png differ
diff --git a/apps/www/public/favicon-32x32.png b/apps/www/public/favicon-32x32.png
index aeb876e7f70..2aaeed4bb1e 100644
Binary files a/apps/www/public/favicon-32x32.png and b/apps/www/public/favicon-32x32.png differ
diff --git a/apps/www/public/favicon.ico b/apps/www/public/favicon.ico
index 2f96628df66..f4f7adbb9f0 100644
Binary files a/apps/www/public/favicon.ico and b/apps/www/public/favicon.ico differ
diff --git a/apps/www/public/images/blocks/demo-sidebar-controlled-dark.png b/apps/www/public/images/blocks/demo-sidebar-controlled-dark.png
deleted file mode 100644
index 41df041a698..00000000000
Binary files a/apps/www/public/images/blocks/demo-sidebar-controlled-dark.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/demo-sidebar-controlled.png b/apps/www/public/images/blocks/demo-sidebar-controlled.png
deleted file mode 100644
index 20b0f5d13a7..00000000000
Binary files a/apps/www/public/images/blocks/demo-sidebar-controlled.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/demo-sidebar-dark.png b/apps/www/public/images/blocks/demo-sidebar-dark.png
deleted file mode 100644
index d1d54785e2b..00000000000
Binary files a/apps/www/public/images/blocks/demo-sidebar-dark.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/demo-sidebar-footer-dark.png b/apps/www/public/images/blocks/demo-sidebar-footer-dark.png
deleted file mode 100644
index 8cf45325398..00000000000
Binary files a/apps/www/public/images/blocks/demo-sidebar-footer-dark.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/demo-sidebar-footer.png b/apps/www/public/images/blocks/demo-sidebar-footer.png
deleted file mode 100644
index 16ebdc99b5e..00000000000
Binary files a/apps/www/public/images/blocks/demo-sidebar-footer.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/demo-sidebar-header-dark.png b/apps/www/public/images/blocks/demo-sidebar-header-dark.png
deleted file mode 100644
index 1bd35b5e2df..00000000000
Binary files a/apps/www/public/images/blocks/demo-sidebar-header-dark.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/demo-sidebar-header.png b/apps/www/public/images/blocks/demo-sidebar-header.png
deleted file mode 100644
index 7bf9bda08d6..00000000000
Binary files a/apps/www/public/images/blocks/demo-sidebar-header.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/demo-sidebar.png b/apps/www/public/images/blocks/demo-sidebar.png
deleted file mode 100644
index 640144754ab..00000000000
Binary files a/apps/www/public/images/blocks/demo-sidebar.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/login-01.png b/apps/www/public/images/blocks/login-01.png
deleted file mode 100644
index 99e01a47d44..00000000000
Binary files a/apps/www/public/images/blocks/login-01.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-01-dark.png b/apps/www/public/images/blocks/sidebar-01-dark.png
deleted file mode 100644
index 1a11991cdb8..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-01-dark.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-01.png b/apps/www/public/images/blocks/sidebar-01.png
deleted file mode 100644
index 66fb4e6312f..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-01.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-02-dark.png b/apps/www/public/images/blocks/sidebar-02-dark.png
deleted file mode 100644
index eccbc70d646..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-02-dark.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-02.png b/apps/www/public/images/blocks/sidebar-02.png
deleted file mode 100644
index 7e15f3490ea..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-02.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-03-dark.png b/apps/www/public/images/blocks/sidebar-03-dark.png
deleted file mode 100644
index a2cc0512782..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-03-dark.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-03.png b/apps/www/public/images/blocks/sidebar-03.png
deleted file mode 100644
index 691a38cfbfe..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-03.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-04-dark.png b/apps/www/public/images/blocks/sidebar-04-dark.png
deleted file mode 100644
index 3132c9a89b2..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-04-dark.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-04.png b/apps/www/public/images/blocks/sidebar-04.png
deleted file mode 100644
index d19888f70d9..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-04.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-05-dark.png b/apps/www/public/images/blocks/sidebar-05-dark.png
deleted file mode 100644
index ca70b14001d..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-05-dark.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-05.png b/apps/www/public/images/blocks/sidebar-05.png
deleted file mode 100644
index 32e9b1122a5..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-05.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-06-dark.png b/apps/www/public/images/blocks/sidebar-06-dark.png
deleted file mode 100644
index 6360d77efad..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-06-dark.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-06.png b/apps/www/public/images/blocks/sidebar-06.png
deleted file mode 100644
index 3519d8fde85..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-06.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-07-dark.png b/apps/www/public/images/blocks/sidebar-07-dark.png
deleted file mode 100644
index 6a7454128c5..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-07-dark.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-07.png b/apps/www/public/images/blocks/sidebar-07.png
deleted file mode 100644
index bc3d38ed351..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-07.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-08-dark.png b/apps/www/public/images/blocks/sidebar-08-dark.png
deleted file mode 100644
index 88374c9d00b..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-08-dark.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-08.png b/apps/www/public/images/blocks/sidebar-08.png
deleted file mode 100644
index f391c93cb52..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-08.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-09-dark.png b/apps/www/public/images/blocks/sidebar-09-dark.png
deleted file mode 100644
index 1e22a59c9ab..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-09-dark.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-09.png b/apps/www/public/images/blocks/sidebar-09.png
deleted file mode 100644
index e3268302cb3..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-09.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-10-dark.png b/apps/www/public/images/blocks/sidebar-10-dark.png
deleted file mode 100644
index 193763f5dab..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-10-dark.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-10.png b/apps/www/public/images/blocks/sidebar-10.png
deleted file mode 100644
index b862f0755c9..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-10.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-11-dark.png b/apps/www/public/images/blocks/sidebar-11-dark.png
deleted file mode 100644
index a9a0e2f6ff9..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-11-dark.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-11.png b/apps/www/public/images/blocks/sidebar-11.png
deleted file mode 100644
index b382b2f14ee..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-11.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-12-dark.png b/apps/www/public/images/blocks/sidebar-12-dark.png
deleted file mode 100644
index 00519873653..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-12-dark.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-12.png b/apps/www/public/images/blocks/sidebar-12.png
deleted file mode 100644
index 639cfd489f1..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-12.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-13-dark.png b/apps/www/public/images/blocks/sidebar-13-dark.png
deleted file mode 100644
index 95b3a42f6f7..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-13-dark.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-13.png b/apps/www/public/images/blocks/sidebar-13.png
deleted file mode 100644
index acf6b1bda87..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-13.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-14-dark.png b/apps/www/public/images/blocks/sidebar-14-dark.png
deleted file mode 100644
index 25e235cb557..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-14-dark.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-14.png b/apps/www/public/images/blocks/sidebar-14.png
deleted file mode 100644
index 84509e4d2a8..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-14.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-15-dark.png b/apps/www/public/images/blocks/sidebar-15-dark.png
deleted file mode 100644
index b26fa6a0672..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-15-dark.png and /dev/null differ
diff --git a/apps/www/public/images/blocks/sidebar-15.png b/apps/www/public/images/blocks/sidebar-15.png
deleted file mode 100644
index f0e989c83cf..00000000000
Binary files a/apps/www/public/images/blocks/sidebar-15.png and /dev/null differ
diff --git a/apps/www/public/r/icons/index.json b/apps/www/public/r/icons/index.json
new file mode 100644
index 00000000000..bf65dca463d
--- /dev/null
+++ b/apps/www/public/r/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/www/public/r/styles/default/accordion-demo.json b/apps/www/public/r/styles/default/accordion-demo.json
index ba6f40c7557..7f1315c3772 100644
--- a/apps/www/public/r/styles/default/accordion-demo.json
+++ b/apps/www/public/r/styles/default/accordion-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/accordion-demo.tsx",
+      "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/www/public/r/styles/default/alert-demo.json b/apps/www/public/r/styles/default/alert-demo.json
index 4e07e5e7f83..5cc0271136a 100644
--- a/apps/www/public/r/styles/default/alert-demo.json
+++ b/apps/www/public/r/styles/default/alert-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/alert-demo.tsx",
+      "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=\"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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/alert-destructive.json b/apps/www/public/r/styles/default/alert-destructive.json
index 4b6f3b67eb1..ec6bfaa49e3 100644
--- a/apps/www/public/r/styles/default/alert-destructive.json
+++ b/apps/www/public/r/styles/default/alert-destructive.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/alert-destructive.tsx",
+      "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=\"h-4 w-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/www/public/r/styles/default/alert-dialog-demo.json b/apps/www/public/r/styles/default/alert-dialog-demo.json
index df31c5183d2..2b6f9712a0a 100644
--- a/apps/www/public/r/styles/default/alert-dialog-demo.json
+++ b/apps/www/public/r/styles/default/alert-dialog-demo.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/alert-dialog-demo.tsx",
+      "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 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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/aspect-ratio-demo.json b/apps/www/public/r/styles/default/aspect-ratio-demo.json
index 083a76c226c..2e4de7bd1ce 100644
--- a/apps/www/public/r/styles/default/aspect-ratio-demo.json
+++ b/apps/www/public/r/styles/default/aspect-ratio-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/aspect-ratio-demo.tsx",
+      "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=\"h-full w-full rounded-md object-cover\"\n      />\n    </AspectRatio>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/authentication-01.json b/apps/www/public/r/styles/default/authentication-01.json
deleted file mode 100644
index b31b3f1312a..00000000000
--- a/apps/www/public/r/styles/default/authentication-01.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "authentication-01",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input",
-    "label"
-  ],
-  "files": [
-    {
-      "path": "block/authentication-01.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\"\n\nexport default function LoginForm() {\n  return (\n    <Card className=\"w-full 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 className=\"grid gap-4\">\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"email\">Email</Label>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </div>\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"password\">Password</Label>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button className=\"w-full\">Sign in</Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/authentication-02.json b/apps/www/public/r/styles/default/authentication-02.json
deleted file mode 100644
index 3c0222bfed4..00000000000
--- a/apps/www/public/r/styles/default/authentication-02.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "authentication-02",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input",
-    "label"
-  ],
-  "files": [
-    {
-      "path": "block/authentication-02.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 default 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          <Link href=\"#\" className=\"underline\">\n            Sign up\n          </Link>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/authentication-03.json b/apps/www/public/r/styles/default/authentication-03.json
deleted file mode 100644
index 5fb2e981f86..00000000000
--- a/apps/www/public/r/styles/default/authentication-03.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "authentication-03",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input",
-    "label"
-  ],
-  "files": [
-    {
-      "path": "block/authentication-03.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 default function LoginForm() {\n  return (\n    <Card className=\"mx-auto max-w-sm\">\n      <CardHeader>\n        <CardTitle className=\"text-xl\">Sign Up</CardTitle>\n        <CardDescription>\n          Enter your information to create an account\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div className=\"grid gap-4\">\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div className=\"grid gap-2\">\n              <Label htmlFor=\"first-name\">First name</Label>\n              <Input id=\"first-name\" placeholder=\"Max\" required />\n            </div>\n            <div className=\"grid gap-2\">\n              <Label htmlFor=\"last-name\">Last name</Label>\n              <Input id=\"last-name\" placeholder=\"Robinson\" required />\n            </div>\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            <Label htmlFor=\"password\">Password</Label>\n            <Input id=\"password\" type=\"password\" />\n          </div>\n          <Button type=\"submit\" className=\"w-full\">\n            Create an account\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Sign up with GitHub\n          </Button>\n        </div>\n        <div className=\"mt-4 text-center text-sm\">\n          Already have an account?{\" \"}\n          <Link href=\"#\" className=\"underline\">\n            Sign in\n          </Link>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/authentication-04.json b/apps/www/public/r/styles/default/authentication-04.json
deleted file mode 100644
index a77344d1581..00000000000
--- a/apps/www/public/r/styles/default/authentication-04.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "authentication-04",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input",
-    "label"
-  ],
-  "files": [
-    {
-      "path": "block/authentication-04.tsx",
-      "content": "import Image from \"next/image\"\nimport Link from \"next/link\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]\">\n      <div className=\"flex items-center justify-center py-12\">\n        <div className=\"mx-auto grid w-[350px] gap-6\">\n          <div className=\"grid gap-2 text-center\">\n            <h1 className=\"text-3xl font-bold\">Login</h1>\n            <p className=\"text-balance text-muted-foreground\">\n              Enter your email below to login to your account\n            </p>\n          </div>\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=\"/forgot-password\"\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        </div>\n      </div>\n      <div className=\"hidden bg-muted lg:block\">\n        <Image\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          width=\"1920\"\n          height=\"1080\"\n          className=\"h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/avatar-demo.json b/apps/www/public/r/styles/default/avatar-demo.json
index 374a7f09fd4..c40307baa9a 100644
--- a/apps/www/public/r/styles/default/avatar-demo.json
+++ b/apps/www/public/r/styles/default/avatar-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/avatar-demo.tsx",
+      "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/shadcn.png\" alt=\"@shadcn\" />\n      <AvatarFallback>CN</AvatarFallback>\n    </Avatar>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/badge-demo.json b/apps/www/public/r/styles/default/badge-demo.json
index d9be7b4d639..6e66dcf6f18 100644
--- a/apps/www/public/r/styles/default/badge-demo.json
+++ b/apps/www/public/r/styles/default/badge-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/badge-demo.tsx",
+      "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/www/public/r/styles/default/badge-destructive.json b/apps/www/public/r/styles/default/badge-destructive.json
index 4585a75c8d9..3ad1b1823ec 100644
--- a/apps/www/public/r/styles/default/badge-destructive.json
+++ b/apps/www/public/r/styles/default/badge-destructive.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/badge-destructive.tsx",
+      "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/www/public/r/styles/default/badge-outline.json b/apps/www/public/r/styles/default/badge-outline.json
index 996696a2a49..2f393c555fb 100644
--- a/apps/www/public/r/styles/default/badge-outline.json
+++ b/apps/www/public/r/styles/default/badge-outline.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/badge-outline.tsx",
+      "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/www/public/r/styles/default/badge-secondary.json b/apps/www/public/r/styles/default/badge-secondary.json
index aa528fc85e7..810481aa3bd 100644
--- a/apps/www/public/r/styles/default/badge-secondary.json
+++ b/apps/www/public/r/styles/default/badge-secondary.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/badge-secondary.tsx",
+      "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/www/public/r/styles/default/breadcrumb-demo.json b/apps/www/public/r/styles/default/breadcrumb-demo.json
index ca2692ad277..d5334c22497 100644
--- a/apps/www/public/r/styles/default/breadcrumb-demo.json
+++ b/apps/www/public/r/styles/default/breadcrumb-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/breadcrumb-demo.tsx",
+      "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=\"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\">Components</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/www/public/r/styles/default/breadcrumb-dropdown.json b/apps/www/public/r/styles/default/breadcrumb-dropdown.json
index 5841a5059a8..9d29582b408 100644
--- a/apps/www/public/r/styles/default/breadcrumb-dropdown.json
+++ b/apps/www/public/r/styles/default/breadcrumb-dropdown.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/breadcrumb-dropdown.tsx",
+      "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=\"h-4 w-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/www/public/r/styles/default/breadcrumb-ellipsis.json b/apps/www/public/r/styles/default/breadcrumb-ellipsis.json
index 4571855a1eb..6ef2383448b 100644
--- a/apps/www/public/r/styles/default/breadcrumb-ellipsis.json
+++ b/apps/www/public/r/styles/default/breadcrumb-ellipsis.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/breadcrumb-ellipsis.tsx",
+      "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/www/public/r/styles/default/breadcrumb-link.json b/apps/www/public/r/styles/default/breadcrumb-link.json
index 3e86b0bbf38..c754603aad7 100644
--- a/apps/www/public/r/styles/default/breadcrumb-link.json
+++ b/apps/www/public/r/styles/default/breadcrumb-link.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/breadcrumb-link.tsx",
+      "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/www/public/r/styles/default/breadcrumb-responsive.json b/apps/www/public/r/styles/default/breadcrumb-responsive.json
index e5799a60a73..4beecb6f6c8 100644
--- a/apps/www/public/r/styles/default/breadcrumb-responsive.json
+++ b/apps/www/public/r/styles/default/breadcrumb-responsive.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/breadcrumb-responsive.tsx",
+      "path": "examples/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            <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=\"h-4 w-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=\"h-4 w-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/www/public/r/styles/default/breadcrumb-separator.json b/apps/www/public/r/styles/default/breadcrumb-separator.json
index 6a89d470abb..dd33cb026d8 100644
--- a/apps/www/public/r/styles/default/breadcrumb-separator.json
+++ b/apps/www/public/r/styles/default/breadcrumb-separator.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/breadcrumb-separator.tsx",
+      "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/www/public/r/styles/default/button-as-child.json b/apps/www/public/r/styles/default/button-as-child.json
index 59cb40848fb..700c4dbd531 100644
--- a/apps/www/public/r/styles/default/button-as-child.json
+++ b/apps/www/public/r/styles/default/button-as-child.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/button-as-child.tsx",
+      "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/www/public/r/styles/default/button-demo.json b/apps/www/public/r/styles/default/button-demo.json
index 66b3c9c4f81..6decbffaa39 100644
--- a/apps/www/public/r/styles/default/button-demo.json
+++ b/apps/www/public/r/styles/default/button-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/button-demo.tsx",
+      "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/www/public/r/styles/default/button-destructive.json b/apps/www/public/r/styles/default/button-destructive.json
index 4691e5436b5..856471f9463 100644
--- a/apps/www/public/r/styles/default/button-destructive.json
+++ b/apps/www/public/r/styles/default/button-destructive.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/button-destructive.tsx",
+      "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/www/public/r/styles/default/button-ghost.json b/apps/www/public/r/styles/default/button-ghost.json
index b7c91382f4f..5f77dde62a4 100644
--- a/apps/www/public/r/styles/default/button-ghost.json
+++ b/apps/www/public/r/styles/default/button-ghost.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/button-ghost.tsx",
+      "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/www/public/r/styles/default/button-icon.json b/apps/www/public/r/styles/default/button-icon.json
index 1c90f68a4fc..ddb3be51a6d 100644
--- a/apps/www/public/r/styles/default/button-icon.json
+++ b/apps/www/public/r/styles/default/button-icon.json
@@ -6,8 +6,8 @@
   ],
   "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=\"h-4 w-4\" />\n    </Button>\n  )\n}\n",
+      "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 />\n    </Button>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/button-link.json b/apps/www/public/r/styles/default/button-link.json
index 3442357ec4f..90f63419e18 100644
--- a/apps/www/public/r/styles/default/button-link.json
+++ b/apps/www/public/r/styles/default/button-link.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/button-link.tsx",
+      "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/www/public/r/styles/default/button-loading.json b/apps/www/public/r/styles/default/button-loading.json
index 6c9644b7e9b..c626b464633 100644
--- a/apps/www/public/r/styles/default/button-loading.json
+++ b/apps/www/public/r/styles/default/button-loading.json
@@ -6,8 +6,8 @@
   ],
   "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 h-4 w-4 animate-spin\" />\n      Please wait\n    </Button>\n  )\n}\n",
+      "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=\"animate-spin\" />\n      Please wait\n    </Button>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/button-outline.json b/apps/www/public/r/styles/default/button-outline.json
index 78da05954fc..5427d005a0b 100644
--- a/apps/www/public/r/styles/default/button-outline.json
+++ b/apps/www/public/r/styles/default/button-outline.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/button-outline.tsx",
+      "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/www/public/r/styles/default/button-secondary.json b/apps/www/public/r/styles/default/button-secondary.json
index 6f5d244f307..f78e926bc3d 100644
--- a/apps/www/public/r/styles/default/button-secondary.json
+++ b/apps/www/public/r/styles/default/button-secondary.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/button-secondary.tsx",
+      "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/www/public/r/styles/default/button-with-icon.json b/apps/www/public/r/styles/default/button-with-icon.json
index ac6ca002e44..a2c80b47f77 100644
--- a/apps/www/public/r/styles/default/button-with-icon.json
+++ b/apps/www/public/r/styles/default/button-with-icon.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/button-with-icon.tsx",
+      "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 /> Login with Email\n    </Button>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/calendar-demo.json b/apps/www/public/r/styles/default/calendar-demo.json
index 271bbdf7e0d..4b35d55e2b0 100644
--- a/apps/www/public/r/styles/default/calendar-demo.json
+++ b/apps/www/public/r/styles/default/calendar-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/calendar-demo.tsx",
+      "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/www/public/r/styles/default/calendar-form.json b/apps/www/public/r/styles/default/calendar-form.json
index 45cf254ef59..6a7f565f4e5 100644
--- a/apps/www/public/r/styles/default/calendar-form.json
+++ b/apps/www/public/r/styles/default/calendar-form.json
@@ -8,7 +8,7 @@
   ],
   "files": [
     {
-      "path": "example/calendar-form.tsx",
+      "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 { toast } from \"@/registry/default/hooks/use-toast\"\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\"\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={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 h-4 w-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                    }\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/www/public/r/styles/default/calendar.json b/apps/www/public/r/styles/default/calendar.json
index edbb6230612..baba6c8a4a5 100644
--- a/apps/www/public/r/styles/default/calendar.json
+++ b/apps/www/public/r/styles/default/calendar.json
@@ -11,7 +11,7 @@
   "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 { cn } 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={cn(\"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: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-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          \"h-9 w-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=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRight className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } 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={cn(\"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: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-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          \"h-9 w-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 aria-selected:bg-accent/50 aria-selected:text-muted-foreground\",\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: ({ className, ...props }) => (\n          <ChevronLeft className={cn(\"h-4 w-4\", className)} {...props} />\n        ),\n        IconRight: ({ className, ...props }) => (\n          <ChevronRight className={cn(\"h-4 w-4\", className)} {...props} />\n        ),\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/card-demo.json b/apps/www/public/r/styles/default/card-demo.json
index 25e88c370e4..b1db51acdc0 100644
--- a/apps/www/public/r/styles/default/card-demo.json
+++ b/apps/www/public/r/styles/default/card-demo.json
@@ -8,7 +8,7 @@
   ],
   "files": [
     {
-      "path": "example/card-demo.tsx",
+      "path": "examples/card-demo.tsx",
       "content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { cn } 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={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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/card-with-form.json b/apps/www/public/r/styles/default/card-with-form.json
index 5e0b0391582..2fb28206092 100644
--- a/apps/www/public/r/styles/default/card-with-form.json
+++ b/apps/www/public/r/styles/default/card-with-form.json
@@ -10,7 +10,7 @@
   ],
   "files": [
     {
-      "path": "example/card-with-form.tsx",
+      "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>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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/card.json b/apps/www/public/r/styles/default/card.json
index 8cdcab2ddf5..16d6528e401 100644
--- a/apps/www/public/r/styles/default/card.json
+++ b/apps/www/public/r/styles/default/card.json
@@ -4,7 +4,7 @@
   "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      \"rounded-lg border bg-card text-card-foreground 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-sm text-muted-foreground\", 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",
+      "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      \"rounded-lg border bg-card text-card-foreground 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  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\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  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", 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": ""
     }
diff --git a/apps/www/public/r/styles/default/carousel-api.json b/apps/www/public/r/styles/default/carousel-api.json
index 83c967bf3d9..b364c68101d 100644
--- a/apps/www/public/r/styles/default/carousel-api.json
+++ b/apps/www/public/r/styles/default/carousel-api.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/carousel-api.tsx",
+      "path": "examples/carousel-api.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  type CarouselApi,\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\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 className=\"mx-auto max-w-xs\">\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=\"py-2 text-center text-sm text-muted-foreground\">\n        Slide {current} of {count}\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/carousel-demo.json b/apps/www/public/r/styles/default/carousel-demo.json
index ea14f225651..4fb3b6d0879 100644
--- a/apps/www/public/r/styles/default/carousel-demo.json
+++ b/apps/www/public/r/styles/default/carousel-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/carousel-demo.tsx",
+      "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\">{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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/carousel-orientation.json b/apps/www/public/r/styles/default/carousel-orientation.json
index c5a401bdd23..e08e033956d 100644
--- a/apps/www/public/r/styles/default/carousel-orientation.json
+++ b/apps/www/public/r/styles/default/carousel-orientation.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/carousel-orientation.tsx",
+      "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\">{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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/carousel-plugin.json b/apps/www/public/r/styles/default/carousel-plugin.json
index ee6370bc2d3..526fe8720d6 100644
--- a/apps/www/public/r/styles/default/carousel-plugin.json
+++ b/apps/www/public/r/styles/default/carousel-plugin.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/carousel-plugin.tsx",
+      "path": "examples/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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/carousel-size.json b/apps/www/public/r/styles/default/carousel-size.json
index acbd8c5c85a..dc0557ade1b 100644
--- a/apps/www/public/r/styles/default/carousel-size.json
+++ b/apps/www/public/r/styles/default/carousel-size.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/carousel-size.tsx",
+      "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\">{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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/carousel-spacing.json b/apps/www/public/r/styles/default/carousel-spacing.json
index bbe5e609bd9..420a779e089 100644
--- a/apps/www/public/r/styles/default/carousel-spacing.json
+++ b/apps/www/public/r/styles/default/carousel-spacing.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/carousel-spacing.tsx",
+      "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 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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/chart-area-axes.json b/apps/www/public/r/styles/default/chart-area-axes.json
index 0d06ee5daa3..ff8e88b1653 100644
--- a/apps/www/public/r/styles/default/chart-area-axes.json
+++ b/apps/www/public/r/styles/default/chart-area-axes.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-area-axes",
   "type": "registry:block",
-  "description": "An area chart with axes",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-axes.tsx",
+      "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  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 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 <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/www/public/r/styles/default/chart-area-default.json b/apps/www/public/r/styles/default/chart-area-default.json
index aaef86732ae..c59df3ac65f 100644
--- a/apps/www/public/r/styles/default/chart-area-default.json
+++ b/apps/www/public/r/styles/default/chart-area-default.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-area-default",
   "type": "registry:block",
-  "description": "A simple area chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-default.tsx",
+      "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  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 <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/www/public/r/styles/default/chart-area-gradient.json b/apps/www/public/r/styles/default/chart-area-gradient.json
index 490a3ae479d..cb7f9075693 100644
--- a/apps/www/public/r/styles/default/chart-area-gradient.json
+++ b/apps/www/public/r/styles/default/chart-area-gradient.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-area-gradient",
   "type": "registry:block",
-  "description": "An area chart with gradient fill",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-gradient.tsx",
+      "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  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 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 <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/www/public/r/styles/default/chart-area-icons.json b/apps/www/public/r/styles/default/chart-area-icons.json
index 689b64705e0..f15a8c0e384 100644
--- a/apps/www/public/r/styles/default/chart-area-icons.json
+++ b/apps/www/public/r/styles/default/chart-area-icons.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-area-icons",
   "type": "registry:block",
-  "description": "An area chart with icons",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-icons.tsx",
+      "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  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 <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/www/public/r/styles/default/chart-area-interactive.json b/apps/www/public/r/styles/default/chart-area-interactive.json
index 47b6b873096..2f0b5c34599 100644
--- a/apps/www/public/r/styles/default/chart-area-interactive.json
+++ b/apps/www/public/r/styles/default/chart-area-interactive.json
@@ -1,7 +1,6 @@
 {
   "name": "chart-area-interactive",
   "type": "registry:block",
-  "description": "An interactive area chart",
   "registryDependencies": [
     "card",
     "chart",
@@ -9,9 +8,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 {\n  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 now = new Date()\n    let daysToSubtract = 90\n    if (timeRange === \"30d\") {\n      daysToSubtract = 30\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",
-      "type": "registry:component"
+      "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  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 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",
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-area-legend.json b/apps/www/public/r/styles/default/chart-area-legend.json
index ef34163c3e4..33aeb16e4c3 100644
--- a/apps/www/public/r/styles/default/chart-area-legend.json
+++ b/apps/www/public/r/styles/default/chart-area-legend.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-area-legend",
   "type": "registry:block",
-  "description": "An area chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-legend.tsx",
+      "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  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 <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/www/public/r/styles/default/chart-area-linear.json b/apps/www/public/r/styles/default/chart-area-linear.json
index 8d938a88e53..40adfae5509 100644
--- a/apps/www/public/r/styles/default/chart-area-linear.json
+++ b/apps/www/public/r/styles/default/chart-area-linear.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-area-linear",
   "type": "registry:block",
-  "description": "A linear area chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-linear.tsx",
+      "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  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 <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/www/public/r/styles/default/chart-area-stacked-expand.json b/apps/www/public/r/styles/default/chart-area-stacked-expand.json
index 73966640ab4..66593320cb9 100644
--- a/apps/www/public/r/styles/default/chart-area-stacked-expand.json
+++ b/apps/www/public/r/styles/default/chart-area-stacked-expand.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-area-stacked-expand",
   "type": "registry:block",
-  "description": "A stacked area chart with expand stacking",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-stacked-expand.tsx",
+      "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  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 <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/www/public/r/styles/default/chart-area-stacked.json b/apps/www/public/r/styles/default/chart-area-stacked.json
index 40d2a7035d8..a58d3cfa502 100644
--- a/apps/www/public/r/styles/default/chart-area-stacked.json
+++ b/apps/www/public/r/styles/default/chart-area-stacked.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-area-stacked",
   "type": "registry:block",
-  "description": "A stacked area chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-stacked.tsx",
+      "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  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 <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/www/public/r/styles/default/chart-area-step.json b/apps/www/public/r/styles/default/chart-area-step.json
index ad532a4a75b..82feb10d49d 100644
--- a/apps/www/public/r/styles/default/chart-area-step.json
+++ b/apps/www/public/r/styles/default/chart-area-step.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-area-step",
   "type": "registry:block",
-  "description": "A step area chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-step.tsx",
+      "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  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 <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/www/public/r/styles/default/chart-bar-active.json b/apps/www/public/r/styles/default/chart-bar-active.json
index cbf19cdb713..34bbd925521 100644
--- a/apps/www/public/r/styles/default/chart-bar-active.json
+++ b/apps/www/public/r/styles/default/chart-bar-active.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-bar-active",
   "type": "registry:block",
-  "description": "A bar chart with an active bar",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-active.tsx",
+      "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  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/www/public/r/styles/default/chart-bar-default.json b/apps/www/public/r/styles/default/chart-bar-default.json
index a6b5acca10b..c5a22752fb6 100644
--- a/apps/www/public/r/styles/default/chart-bar-default.json
+++ b/apps/www/public/r/styles/default/chart-bar-default.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-bar-default",
   "type": "registry:block",
-  "description": "A bar chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-default.tsx",
+      "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  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 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 <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/www/public/r/styles/default/chart-bar-demo-axis.json b/apps/www/public/r/styles/default/chart-bar-demo-axis.json
index 7718c79f54b..007f1b43e6a 100644
--- a/apps/www/public/r/styles/default/chart-bar-demo-axis.json
+++ b/apps/www/public/r/styles/default/chart-bar-demo-axis.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/chart-bar-demo-axis.tsx",
+      "path": "examples/chart-bar-demo-axis.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/default/ui/chart\"\n\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: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\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        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/chart-bar-demo-grid.json b/apps/www/public/r/styles/default/chart-bar-demo-grid.json
index 95042bcf7c5..efd453fb590 100644
--- a/apps/www/public/r/styles/default/chart-bar-demo-grid.json
+++ b/apps/www/public/r/styles/default/chart-bar-demo-grid.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/chart-bar-demo-grid.tsx",
+      "path": "examples/chart-bar-demo-grid.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/default/ui/chart\"\n\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: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\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  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/chart-bar-demo-legend.json b/apps/www/public/r/styles/default/chart-bar-demo-legend.json
index 33d0755c180..3309452d561 100644
--- a/apps/www/public/r/styles/default/chart-bar-demo-legend.json
+++ b/apps/www/public/r/styles/default/chart-bar-demo-legend.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/chart-bar-demo-legend.tsx",
+      "path": "examples/chart-bar-demo-legend.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\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: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\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 />} />\n        <ChartLegend content={<ChartLegendContent />} />\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  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/chart-bar-demo-tooltip.json b/apps/www/public/r/styles/default/chart-bar-demo-tooltip.json
index c074c223c83..7aebbf0ba89 100644
--- a/apps/www/public/r/styles/default/chart-bar-demo-tooltip.json
+++ b/apps/www/public/r/styles/default/chart-bar-demo-tooltip.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/chart-bar-demo-tooltip.tsx",
+      "path": "examples/chart-bar-demo-tooltip.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\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: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\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 />} />\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  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/chart-bar-demo.json b/apps/www/public/r/styles/default/chart-bar-demo.json
index 4e0e43db20f..e8ff17fcda0 100644
--- a/apps/www/public/r/styles/default/chart-bar-demo.json
+++ b/apps/www/public/r/styles/default/chart-bar-demo.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/chart-bar-demo.tsx",
+      "path": "examples/chart-bar-demo.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/default/ui/chart\"\n\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: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\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  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/chart-bar-horizontal.json b/apps/www/public/r/styles/default/chart-bar-horizontal.json
index df519f41fd0..e2534aada75 100644
--- a/apps/www/public/r/styles/default/chart-bar-horizontal.json
+++ b/apps/www/public/r/styles/default/chart-bar-horizontal.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-bar-horizontal",
   "type": "registry:block",
-  "description": "A horizontal bar chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-horizontal.tsx",
+      "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  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 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 <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/www/public/r/styles/default/chart-bar-interactive.json b/apps/www/public/r/styles/default/chart-bar-interactive.json
index 3bedbe4f9e6..5d9d838fdf4 100644
--- a/apps/www/public/r/styles/default/chart-bar-interactive.json
+++ b/apps/www/public/r/styles/default/chart-bar-interactive.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-bar-interactive",
   "type": "registry:block",
-  "description": "An interactive bar chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-interactive.tsx",
+      "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  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(\"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",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-bar-label-custom.json b/apps/www/public/r/styles/default/chart-bar-label-custom.json
index bb815f309c0..7874a78145e 100644
--- a/apps/www/public/r/styles/default/chart-bar-label-custom.json
+++ b/apps/www/public/r/styles/default/chart-bar-label-custom.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-bar-label-custom",
   "type": "registry:block",
-  "description": "A bar chart with a custom label",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-label-custom.tsx",
+      "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  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/www/public/r/styles/default/chart-bar-label.json b/apps/www/public/r/styles/default/chart-bar-label.json
index 77d035c4966..3e483bcd14a 100644
--- a/apps/www/public/r/styles/default/chart-bar-label.json
+++ b/apps/www/public/r/styles/default/chart-bar-label.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-bar-label",
   "type": "registry:block",
-  "description": "A bar chart with a label",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-label.tsx",
+      "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  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/www/public/r/styles/default/chart-bar-mixed.json b/apps/www/public/r/styles/default/chart-bar-mixed.json
index 92b6d7bf146..00862a2ad87 100644
--- a/apps/www/public/r/styles/default/chart-bar-mixed.json
+++ b/apps/www/public/r/styles/default/chart-bar-mixed.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-bar-mixed",
   "type": "registry:block",
-  "description": "A mixed bar chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-mixed.tsx",
+      "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  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/www/public/r/styles/default/chart-bar-multiple.json b/apps/www/public/r/styles/default/chart-bar-multiple.json
index e1f28ba3942..205db93cdfc 100644
--- a/apps/www/public/r/styles/default/chart-bar-multiple.json
+++ b/apps/www/public/r/styles/default/chart-bar-multiple.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-bar-multiple",
   "type": "registry:block",
-  "description": "A multiple bar chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-multiple.tsx",
+      "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  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 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 <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/www/public/r/styles/default/chart-bar-negative.json b/apps/www/public/r/styles/default/chart-bar-negative.json
index 6332d4b32c3..a5176793843 100644
--- a/apps/www/public/r/styles/default/chart-bar-negative.json
+++ b/apps/www/public/r/styles/default/chart-bar-negative.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-bar-negative",
   "type": "registry:block",
-  "description": "A bar chart with negative values",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-negative.tsx",
+      "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  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 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 <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/www/public/r/styles/default/chart-bar-stacked.json b/apps/www/public/r/styles/default/chart-bar-stacked.json
index 4bb3c35c3c7..9373d433b91 100644
--- a/apps/www/public/r/styles/default/chart-bar-stacked.json
+++ b/apps/www/public/r/styles/default/chart-bar-stacked.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-bar-stacked",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-stacked.tsx",
+      "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  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/www/public/r/styles/default/chart-line-default.json b/apps/www/public/r/styles/default/chart-line-default.json
index f9e547cc600..f9414a7a9a1 100644
--- a/apps/www/public/r/styles/default/chart-line-default.json
+++ b/apps/www/public/r/styles/default/chart-line-default.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-line-default",
   "type": "registry:block",
-  "description": "A line chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-default.tsx",
+      "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  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/www/public/r/styles/default/chart-line-dots-colors.json b/apps/www/public/r/styles/default/chart-line-dots-colors.json
index 095eadd8f9b..e0d497299f1 100644
--- a/apps/www/public/r/styles/default/chart-line-dots-colors.json
+++ b/apps/www/public/r/styles/default/chart-line-dots-colors.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-line-dots-colors",
   "type": "registry:block",
-  "description": "A line chart with dots and colors",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-dots-colors.tsx",
+      "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  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/www/public/r/styles/default/chart-line-dots-custom.json b/apps/www/public/r/styles/default/chart-line-dots-custom.json
index 58171749f43..d376dfb90a4 100644
--- a/apps/www/public/r/styles/default/chart-line-dots-custom.json
+++ b/apps/www/public/r/styles/default/chart-line-dots-custom.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-line-dots-custom",
   "type": "registry:block",
-  "description": "A line chart with custom dots",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-dots-custom.tsx",
+      "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  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/www/public/r/styles/default/chart-line-dots.json b/apps/www/public/r/styles/default/chart-line-dots.json
index 9ade706f966..07e10cae3d7 100644
--- a/apps/www/public/r/styles/default/chart-line-dots.json
+++ b/apps/www/public/r/styles/default/chart-line-dots.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-line-dots",
   "type": "registry:block",
-  "description": "A line chart with dots",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-dots.tsx",
+      "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  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/www/public/r/styles/default/chart-line-interactive.json b/apps/www/public/r/styles/default/chart-line-interactive.json
index bad5f5a2da0..9b5c9e8cd58 100644
--- a/apps/www/public/r/styles/default/chart-line-interactive.json
+++ b/apps/www/public/r/styles/default/chart-line-interactive.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-line-interactive",
   "type": "registry:block",
-  "description": "An interactive line chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-interactive.tsx",
+      "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  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(\"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",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-line-label-custom.json b/apps/www/public/r/styles/default/chart-line-label-custom.json
index 33cf1aed967..104a786b184 100644
--- a/apps/www/public/r/styles/default/chart-line-label-custom.json
+++ b/apps/www/public/r/styles/default/chart-line-label-custom.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-line-label-custom",
   "type": "registry:block",
-  "description": "A line chart with a custom label",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-label-custom.tsx",
+      "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  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/www/public/r/styles/default/chart-line-label.json b/apps/www/public/r/styles/default/chart-line-label.json
index e19d206088d..2a762bfb0b9 100644
--- a/apps/www/public/r/styles/default/chart-line-label.json
+++ b/apps/www/public/r/styles/default/chart-line-label.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-line-label",
   "type": "registry:block",
-  "description": "A line chart with a label",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-label.tsx",
+      "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  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/www/public/r/styles/default/chart-line-linear.json b/apps/www/public/r/styles/default/chart-line-linear.json
index 0062d54e133..5115aaf4461 100644
--- a/apps/www/public/r/styles/default/chart-line-linear.json
+++ b/apps/www/public/r/styles/default/chart-line-linear.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-line-linear",
   "type": "registry:block",
-  "description": "A linear line chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-linear.tsx",
+      "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  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/www/public/r/styles/default/chart-line-multiple.json b/apps/www/public/r/styles/default/chart-line-multiple.json
index cd0399f8ee4..ab660097d25 100644
--- a/apps/www/public/r/styles/default/chart-line-multiple.json
+++ b/apps/www/public/r/styles/default/chart-line-multiple.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-line-multiple",
   "type": "registry:block",
-  "description": "A multiple line chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-multiple.tsx",
+      "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  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 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 <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/www/public/r/styles/default/chart-line-step.json b/apps/www/public/r/styles/default/chart-line-step.json
index a4600100ffa..fa0360040f3 100644
--- a/apps/www/public/r/styles/default/chart-line-step.json
+++ b/apps/www/public/r/styles/default/chart-line-step.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-line-step",
   "type": "registry:block",
-  "description": "A line chart with step",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-step.tsx",
+      "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  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/www/public/r/styles/default/chart-pie-donut-active.json b/apps/www/public/r/styles/default/chart-pie-donut-active.json
index e024b24bd53..46950c0f707 100644
--- a/apps/www/public/r/styles/default/chart-pie-donut-active.json
+++ b/apps/www/public/r/styles/default/chart-pie-donut-active.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-donut-active",
   "type": "registry:block",
-  "description": "A donut chart with an active sector",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-donut-active.tsx",
+      "path": "charts/chart-pie-donut-active.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { 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  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/www/public/r/styles/default/chart-pie-donut-text.json b/apps/www/public/r/styles/default/chart-pie-donut-text.json
index 47b15f1f630..f2189b9e038 100644
--- a/apps/www/public/r/styles/default/chart-pie-donut-text.json
+++ b/apps/www/public/r/styles/default/chart-pie-donut-text.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-donut-text",
   "type": "registry:block",
-  "description": "A donut chart with text",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-donut-text.tsx",
+      "path": "charts/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 {\n  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/www/public/r/styles/default/chart-pie-donut.json b/apps/www/public/r/styles/default/chart-pie-donut.json
index c0f237083c4..dae8f3e04fc 100644
--- a/apps/www/public/r/styles/default/chart-pie-donut.json
+++ b/apps/www/public/r/styles/default/chart-pie-donut.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-donut",
   "type": "registry:block",
-  "description": "A donut chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-donut.tsx",
+      "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  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/www/public/r/styles/default/chart-pie-interactive.json b/apps/www/public/r/styles/default/chart-pie-interactive.json
index 6a6368cc879..2f31c3dcedc 100644
--- a/apps/www/public/r/styles/default/chart-pie-interactive.json
+++ b/apps/www/public/r/styles/default/chart-pie-interactive.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-interactive",
   "type": "registry:block",
-  "description": "An interactive pie chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-interactive.tsx",
+      "path": "charts/chart-pie-interactive.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { 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  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[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",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-pie-label-custom.json b/apps/www/public/r/styles/default/chart-pie-label-custom.json
index 4f4807c6d09..c6a7e2f1a0b 100644
--- a/apps/www/public/r/styles/default/chart-pie-label-custom.json
+++ b/apps/www/public/r/styles/default/chart-pie-label-custom.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-label-custom",
   "type": "registry:block",
-  "description": "A pie chart with a custom label",
   "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 {\n  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]\"\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 <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",
+      "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  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={<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 <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/www/public/r/styles/default/chart-pie-label-list.json b/apps/www/public/r/styles/default/chart-pie-label-list.json
index 3a553cadea1..eb01cdedab2 100644
--- a/apps/www/public/r/styles/default/chart-pie-label-list.json
+++ b/apps/www/public/r/styles/default/chart-pie-label-list.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-label-list",
   "type": "registry:block",
-  "description": "A pie chart with a label list",
   "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 {\n  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]\"\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              />\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",
+      "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  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={<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              />\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/www/public/r/styles/default/chart-pie-label.json b/apps/www/public/r/styles/default/chart-pie-label.json
index 0f37162d975..c7299ef2308 100644
--- a/apps/www/public/r/styles/default/chart-pie-label.json
+++ b/apps/www/public/r/styles/default/chart-pie-label.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-label",
   "type": "registry:block",
-  "description": "A pie chart with a label",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-label.tsx",
+      "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  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 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 <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/www/public/r/styles/default/chart-pie-legend.json b/apps/www/public/r/styles/default/chart-pie-legend.json
index 64b0aa87568..0e29e834086 100644
--- a/apps/www/public/r/styles/default/chart-pie-legend.json
+++ b/apps/www/public/r/styles/default/chart-pie-legend.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-legend",
   "type": "registry:block",
-  "description": "A pie chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-legend.tsx",
+      "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  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/www/public/r/styles/default/chart-pie-separator-none.json b/apps/www/public/r/styles/default/chart-pie-separator-none.json
index 37f3388459f..a6026abca66 100644
--- a/apps/www/public/r/styles/default/chart-pie-separator-none.json
+++ b/apps/www/public/r/styles/default/chart-pie-separator-none.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-separator-none",
   "type": "registry:block",
-  "description": "A pie chart with no separator",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-separator-none.tsx",
+      "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  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/www/public/r/styles/default/chart-pie-simple.json b/apps/www/public/r/styles/default/chart-pie-simple.json
index 8ef34c3c4a2..6124a66cb21 100644
--- a/apps/www/public/r/styles/default/chart-pie-simple.json
+++ b/apps/www/public/r/styles/default/chart-pie-simple.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-simple",
   "type": "registry:block",
-  "description": "A simple pie chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-simple.tsx",
+      "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  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/www/public/r/styles/default/chart-pie-stacked.json b/apps/www/public/r/styles/default/chart-pie-stacked.json
index 263afdff26c..e4195481cfd 100644
--- a/apps/www/public/r/styles/default/chart-pie-stacked.json
+++ b/apps/www/public/r/styles/default/chart-pie-stacked.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-stacked",
   "type": "registry:block",
-  "description": "A pie chart with stacked sections",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-stacked.tsx",
+      "path": "charts/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 {\n  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].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/www/public/r/styles/default/chart-radar-default.json b/apps/www/public/r/styles/default/chart-radar-default.json
index 5c5077e746b..f268f1e381e 100644
--- a/apps/www/public/r/styles/default/chart-radar-default.json
+++ b/apps/www/public/r/styles/default/chart-radar-default.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-default",
   "type": "registry:block",
-  "description": "A radar chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-default.tsx",
+      "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  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 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 <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/www/public/r/styles/default/chart-radar-dots.json b/apps/www/public/r/styles/default/chart-radar-dots.json
index 1b2e37f0e4b..cc362a107f7 100644
--- a/apps/www/public/r/styles/default/chart-radar-dots.json
+++ b/apps/www/public/r/styles/default/chart-radar-dots.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-dots",
   "type": "registry:block",
-  "description": "A radar chart with dots",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-dots.tsx",
+      "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  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 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 <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/www/public/r/styles/default/chart-radar-grid-circle-fill.json b/apps/www/public/r/styles/default/chart-radar-grid-circle-fill.json
index 36c679b3911..d41e3f491a5 100644
--- a/apps/www/public/r/styles/default/chart-radar-grid-circle-fill.json
+++ b/apps/www/public/r/styles/default/chart-radar-grid-circle-fill.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-grid-circle-fill",
   "type": "registry:block",
-  "description": "A radar chart with a grid and circle fill",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-circle-fill.tsx",
+      "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  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 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 <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/www/public/r/styles/default/chart-radar-grid-circle-no-lines.json b/apps/www/public/r/styles/default/chart-radar-grid-circle-no-lines.json
index cf478bbcc7d..42074d03861 100644
--- a/apps/www/public/r/styles/default/chart-radar-grid-circle-no-lines.json
+++ b/apps/www/public/r/styles/default/chart-radar-grid-circle-no-lines.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-grid-circle-no-lines",
   "type": "registry:block",
-  "description": "A radar chart with a grid and circle fill",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-circle-no-lines.tsx",
+      "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  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/www/public/r/styles/default/chart-radar-grid-circle.json b/apps/www/public/r/styles/default/chart-radar-grid-circle.json
index e4c46c2ae49..fe31460d8e9 100644
--- a/apps/www/public/r/styles/default/chart-radar-grid-circle.json
+++ b/apps/www/public/r/styles/default/chart-radar-grid-circle.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-grid-circle",
   "type": "registry:block",
-  "description": "A radar chart with a grid and circle",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-circle.tsx",
+      "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  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/www/public/r/styles/default/chart-radar-grid-custom.json b/apps/www/public/r/styles/default/chart-radar-grid-custom.json
index 2448237426f..98c72d5b109 100644
--- a/apps/www/public/r/styles/default/chart-radar-grid-custom.json
+++ b/apps/www/public/r/styles/default/chart-radar-grid-custom.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-grid-custom",
   "type": "registry:block",
-  "description": "A radar chart with a custom grid",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-custom.tsx",
+      "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  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 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 <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/www/public/r/styles/default/chart-radar-grid-fill.json b/apps/www/public/r/styles/default/chart-radar-grid-fill.json
index e40f19d1428..7d255face2f 100644
--- a/apps/www/public/r/styles/default/chart-radar-grid-fill.json
+++ b/apps/www/public/r/styles/default/chart-radar-grid-fill.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-grid-fill",
   "type": "registry:block",
-  "description": "A radar chart with a grid filled",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-fill.tsx",
+      "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  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/www/public/r/styles/default/chart-radar-grid-none.json b/apps/www/public/r/styles/default/chart-radar-grid-none.json
index c94f4d2d4af..68a6cd61457 100644
--- a/apps/www/public/r/styles/default/chart-radar-grid-none.json
+++ b/apps/www/public/r/styles/default/chart-radar-grid-none.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-grid-none",
   "type": "registry:block",
-  "description": "A radar chart with no grid",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-none.tsx",
+      "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  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/www/public/r/styles/default/chart-radar-icons.json b/apps/www/public/r/styles/default/chart-radar-icons.json
index e1366abb656..7e55e3c351e 100644
--- a/apps/www/public/r/styles/default/chart-radar-icons.json
+++ b/apps/www/public/r/styles/default/chart-radar-icons.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-icons",
   "type": "registry:block",
-  "description": "A radar chart with icons",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-icons.tsx",
+      "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  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 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 <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/www/public/r/styles/default/chart-radar-label-custom.json b/apps/www/public/r/styles/default/chart-radar-label-custom.json
index bccac233d9b..e3079c65f79 100644
--- a/apps/www/public/r/styles/default/chart-radar-label-custom.json
+++ b/apps/www/public/r/styles/default/chart-radar-label-custom.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-label-custom",
   "type": "registry:block",
-  "description": "A radar chart with a custom label",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-label-custom.tsx",
+      "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  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/www/public/r/styles/default/chart-radar-legend.json b/apps/www/public/r/styles/default/chart-radar-legend.json
index 75c57f5ac66..baf8bc88db2 100644
--- a/apps/www/public/r/styles/default/chart-radar-legend.json
+++ b/apps/www/public/r/styles/default/chart-radar-legend.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-legend",
   "type": "registry:block",
-  "description": "A radar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-legend.tsx",
+      "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  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 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 <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/www/public/r/styles/default/chart-radar-lines-only.json b/apps/www/public/r/styles/default/chart-radar-lines-only.json
index e1d1bb115da..97b58fdd38b 100644
--- a/apps/www/public/r/styles/default/chart-radar-lines-only.json
+++ b/apps/www/public/r/styles/default/chart-radar-lines-only.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-lines-only",
   "type": "registry:block",
-  "description": "A radar chart with lines only",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-lines-only.tsx",
+      "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  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/www/public/r/styles/default/chart-radar-multiple.json b/apps/www/public/r/styles/default/chart-radar-multiple.json
index 05eb1e8e05f..4be3841519a 100644
--- a/apps/www/public/r/styles/default/chart-radar-multiple.json
+++ b/apps/www/public/r/styles/default/chart-radar-multiple.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-multiple",
   "type": "registry:block",
-  "description": "A radar chart with multiple data",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-multiple.tsx",
+      "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  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/www/public/r/styles/default/chart-radar-radius.json b/apps/www/public/r/styles/default/chart-radar-radius.json
index b035ba516ed..f56c5c45ea1 100644
--- a/apps/www/public/r/styles/default/chart-radar-radius.json
+++ b/apps/www/public/r/styles/default/chart-radar-radius.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-radius",
   "type": "registry:block",
-  "description": "A radar chart with a radius axis",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-radius.tsx",
+      "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  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 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 <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/www/public/r/styles/default/chart-radial-grid.json b/apps/www/public/r/styles/default/chart-radial-grid.json
index a5a54d5183b..20b1878292e 100644
--- a/apps/www/public/r/styles/default/chart-radial-grid.json
+++ b/apps/www/public/r/styles/default/chart-radial-grid.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radial-grid",
   "type": "registry:block",
-  "description": "A radial chart with a grid",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-grid.tsx",
+      "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  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 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 <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/www/public/r/styles/default/chart-radial-label.json b/apps/www/public/r/styles/default/chart-radial-label.json
index 25d22fd3504..99c9349bedb 100644
--- a/apps/www/public/r/styles/default/chart-radial-label.json
+++ b/apps/www/public/r/styles/default/chart-radial-label.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radial-label",
   "type": "registry:block",
-  "description": "A radial chart with a label",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-label.tsx",
+      "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  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={<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 <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/www/public/r/styles/default/chart-radial-shape.json b/apps/www/public/r/styles/default/chart-radial-shape.json
index c8b578f0095..e09dc574cd3 100644
--- a/apps/www/public/r/styles/default/chart-radial-shape.json
+++ b/apps/www/public/r/styles/default/chart-radial-shape.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radial-shape",
   "type": "registry:block",
-  "description": "A radial chart with a custom shape",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-shape.tsx",
+      "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 { 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 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 <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/www/public/r/styles/default/chart-radial-simple.json b/apps/www/public/r/styles/default/chart-radial-simple.json
index 9d2b3aab912..847b3f98d1f 100644
--- a/apps/www/public/r/styles/default/chart-radial-simple.json
+++ b/apps/www/public/r/styles/default/chart-radial-simple.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radial-simple",
   "type": "registry:block",
-  "description": "A radial chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-simple.tsx",
+      "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  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 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 <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/www/public/r/styles/default/chart-radial-stacked.json b/apps/www/public/r/styles/default/chart-radial-stacked.json
index 51e36dda658..fd5ee45f3ca 100644
--- a/apps/www/public/r/styles/default/chart-radial-stacked.json
+++ b/apps/www/public/r/styles/default/chart-radial-stacked.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radial-stacked",
   "type": "registry:block",
-  "description": "A radial chart with stacked sections",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-stacked.tsx",
+      "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  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 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 <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/www/public/r/styles/default/chart-radial-text.json b/apps/www/public/r/styles/default/chart-radial-text.json
index 99e21646917..3de3fa00512 100644
--- a/apps/www/public/r/styles/default/chart-radial-text.json
+++ b/apps/www/public/r/styles/default/chart-radial-text.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radial-text",
   "type": "registry:block",
-  "description": "A radial chart with text",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-text.tsx",
+      "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 { 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 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 <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/www/public/r/styles/default/chart-tooltip-advanced.json b/apps/www/public/r/styles/default/chart-tooltip-advanced.json
index b9da271020d..934a4bdce30 100644
--- a/apps/www/public/r/styles/default/chart-tooltip-advanced.json
+++ b/apps/www/public/r/styles/default/chart-tooltip-advanced.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-tooltip-advanced",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-advanced.tsx",
+      "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  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]?.label ||\n                        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 + 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/www/public/r/styles/default/chart-tooltip-default.json b/apps/www/public/r/styles/default/chart-tooltip-default.json
index 3d0003d2b84..f197c23f42f 100644
--- a/apps/www/public/r/styles/default/chart-tooltip-default.json
+++ b/apps/www/public/r/styles/default/chart-tooltip-default.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-tooltip-default",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-default.tsx",
+      "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  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/www/public/r/styles/default/chart-tooltip-demo.json b/apps/www/public/r/styles/default/chart-tooltip-demo.json
index 4d84d0ebdee..3c7f01ae94d 100644
--- a/apps/www/public/r/styles/default/chart-tooltip-demo.json
+++ b/apps/www/public/r/styles/default/chart-tooltip-demo.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/chart-tooltip-demo.tsx",
+      "path": "examples/chart-tooltip-demo.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport default function Component() {\n  return (\n    <div className=\"grid aspect-video w-full max-w-md justify-center text-foreground md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4\">\n      <div>\n        <div className=\"absolute left-[-35px] top-[45px] z-10 text-sm font-medium\">\n          Label\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 193 40\"\n          width=\"50\"\n          height=\"12\"\n          fill=\"none\"\n          className=\"absolute left-[5px] top-[50px] z-10\"\n        >\n          <g clip-path=\"url(#a)\">\n            <path\n              fill=\"currentColor\"\n              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\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"a\">\n              <path fill=\"currentColor\" d=\"M0 0h193v40H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 186, fill: \"hsl(var(--chart-1))\" },\n            { name: \"Mobile\", value: 80, fill: \"hsl(var(--chart-2))\" },\n          ]}\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"items-end\">\n        <div className=\"absolute left-[122px] top-[0px] z-10 text-sm font-medium\">\n          Name\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"35\"\n          height=\"42\"\n          fill=\"none\"\n          viewBox=\"0 0 122 148\"\n          className=\"absolute left-[85px] top-[10px] z-10 -scale-x-100\"\n        >\n          <g clip-path=\"url(#ab)\">\n            <path\n              fill=\"currentColor\"\n              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\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"ab\">\n              <path fill=\"currentColor\" d=\"M0 0h122v148H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-3))\" },\n            { name: \"Firefox\", value: 1000, fill: \"hsl(var(--chart-4))\" },\n          ]}\n          indicator=\"dashed\"\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"!hidden md:!flex\">\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 12486, fill: \"hsl(var(--chart-3))\" },\n          ]}\n          className=\"w-[9rem]\"\n          indicator=\"line\"\n        />\n      </div>\n      <div className=\"!items-start !justify-start\">\n        <div className=\"absolute left-[50px] top-[60px] z-10 text-sm font-medium\">\n          Indicator\n        </div>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-1))\" },\n          ]}\n          indicator=\"dot\"\n          className=\"w-[8rem]\"\n        />\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"15\"\n          height=\"34\"\n          fill=\"none\"\n          viewBox=\"0 0 75 175\"\n          className=\"absolute left-[30px] top-[38px] z-10 rotate-[-40deg]\"\n        >\n          <g clip-path=\"url(#abc)\">\n            <path\n              fill=\"currentColor\"\n              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\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"abc\">\n              <path fill=\"currentColor\" d=\"M0 0h75v175H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </div>\n    </div>\n  )\n}\n\nfunction TooltipDemo({\n  indicator = \"dot\",\n  label,\n  payload,\n  hideLabel,\n  hideIndicator,\n  className,\n}: {\n  label: string\n  hideLabel?: boolean\n  hideIndicator?: boolean\n  indicator?: \"line\" | \"dot\" | \"dashed\"\n  payload: {\n    name: string\n    value: number\n    fill: string\n  }[]\n  nameKey?: string\n  labelKey?: string\n} & React.ComponentProps<\"div\">) {\n  const tooltipLabel = hideLabel ? null : (\n    <div className=\"font-medium\">{label}</div>\n  )\n\n  if (!payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const indicatorColor = item.fill\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                indicator === \"dot\" && \"items-center\"\n              )}\n            >\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\": nestLabel && indicator === \"dashed\",\n                      }\n                    )}\n                    style={\n                      {\n                        \"--color-bg\": indicatorColor,\n                        \"--color-border\": indicatorColor,\n                      } as React.CSSProperties\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\">{item.name}</span>\n                  </div>\n                  <span className=\"font-mono font-medium tabular-nums text-foreground\">\n                    {item.value.toLocaleString()}\n                  </span>\n                </div>\n              </>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/chart-tooltip-formatter.json b/apps/www/public/r/styles/default/chart-tooltip-formatter.json
index f5af5c92271..4fc08481d32 100644
--- a/apps/www/public/r/styles/default/chart-tooltip-formatter.json
+++ b/apps/www/public/r/styles/default/chart-tooltip-formatter.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-tooltip-formatter",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-formatter.tsx",
+      "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  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]?.label ||\n                        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/www/public/r/styles/default/chart-tooltip-icons.json b/apps/www/public/r/styles/default/chart-tooltip-icons.json
index 3a8705a60ff..80e7672d27f 100644
--- a/apps/www/public/r/styles/default/chart-tooltip-icons.json
+++ b/apps/www/public/r/styles/default/chart-tooltip-icons.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-tooltip-icons",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-icons.tsx",
+      "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  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/www/public/r/styles/default/chart-tooltip-indicator-line.json b/apps/www/public/r/styles/default/chart-tooltip-indicator-line.json
index 02b1115c66e..b2a274c5e3e 100644
--- a/apps/www/public/r/styles/default/chart-tooltip-indicator-line.json
+++ b/apps/www/public/r/styles/default/chart-tooltip-indicator-line.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-tooltip-indicator-line",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-indicator-line.tsx",
+      "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  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/www/public/r/styles/default/chart-tooltip-indicator-none.json b/apps/www/public/r/styles/default/chart-tooltip-indicator-none.json
index fbb2010b5dc..2967f171f44 100644
--- a/apps/www/public/r/styles/default/chart-tooltip-indicator-none.json
+++ b/apps/www/public/r/styles/default/chart-tooltip-indicator-none.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-tooltip-indicator-none",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-indicator-none.tsx",
+      "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  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/www/public/r/styles/default/chart-tooltip-label-custom.json b/apps/www/public/r/styles/default/chart-tooltip-label-custom.json
index 6a343faedf6..c1b105b0650 100644
--- a/apps/www/public/r/styles/default/chart-tooltip-label-custom.json
+++ b/apps/www/public/r/styles/default/chart-tooltip-label-custom.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-tooltip-label-custom",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-label-custom.tsx",
+      "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  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 labelKey=\"activities\" indicator=\"line\" />\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/www/public/r/styles/default/chart-tooltip-label-formatter.json b/apps/www/public/r/styles/default/chart-tooltip-label-formatter.json
index 30d2f774639..929d5d3a449 100644
--- a/apps/www/public/r/styles/default/chart-tooltip-label-formatter.json
+++ b/apps/www/public/r/styles/default/chart-tooltip-label-formatter.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-tooltip-label-formatter",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-label-formatter.tsx",
+      "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  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(\"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",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/chart-tooltip-label-none.json b/apps/www/public/r/styles/default/chart-tooltip-label-none.json
index 1f2a5b96ab2..cee671c69fb 100644
--- a/apps/www/public/r/styles/default/chart-tooltip-label-none.json
+++ b/apps/www/public/r/styles/default/chart-tooltip-label-none.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-tooltip-label-none",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-label-none.tsx",
+      "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  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/www/public/r/styles/default/chart.json b/apps/www/public/r/styles/default/chart.json
index 66759f77e9b..ee4ff5bfb02 100644
--- a/apps/www/public/r/styles/default/chart.json
+++ b/apps/www/public/r/styles/default/chart.json
@@ -11,7 +11,7 @@
   "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\ntype 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          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.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\nconst 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)\n          .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          .join(\"\\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          \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background 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={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\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\": 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={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 && (\n                        <span className=\"font-mono font-medium tabular-nums text-foreground\">\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={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                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-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",
+      "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\ntype 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          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.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\nconst 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)\n          .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          .join(\"\\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          \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background 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={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\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\": 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={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 && (\n                        <span className=\"font-mono font-medium tabular-nums text-foreground\">\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={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                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-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/www/public/r/styles/default/charts-01.json b/apps/www/public/r/styles/default/charts-01.json
deleted file mode 100644
index 3f27e048f2d..00000000000
--- a/apps/www/public/r/styles/default/charts-01.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "name": "charts-01",
-  "type": "registry:block",
-  "registryDependencies": [
-    "chart"
-  ],
-  "files": [
-    {
-      "path": "block/charts-01.tsx",
-      "content": "\"use client\"\n\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  LabelList,\n  Line,\n  LineChart,\n  PolarAngleAxis,\n  RadialBar,\n  RadialBarChart,\n  Rectangle,\n  ReferenceLine,\n  XAxis,\n  YAxis,\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  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nimport { Separator } from \"@/registry/default/ui/separator\"\n\nexport default function Charts() {\n  return (\n    <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\">\n      <div className=\"grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]\">\n        <Card\n          x-chunk=\"A bar chart showing the number of steps you have walked in the past 7 days.\"\n          className=\"lg:max-w-md\"\n        >\n          <CardHeader className=\"space-y-0 pb-2\">\n            <CardDescription>Today</CardDescription>\n            <CardTitle className=\"text-4xl tabular-nums\">\n              12,584{\" \"}\n              <span className=\"font-sans text-sm font-normal tracking-normal text-muted-foreground\">\n                steps\n              </span>\n            </CardTitle>\n          </CardHeader>\n          <CardContent>\n            <ChartContainer\n              config={{\n                steps: {\n                  label: \"Steps\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n            >\n              <BarChart\n                accessibilityLayer\n                margin={{\n                  left: -4,\n                  right: -4,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    steps: 2000,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    steps: 2100,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    steps: 2200,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    steps: 1300,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    steps: 1400,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    steps: 2500,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    steps: 1600,\n                  },\n                ]}\n              >\n                <Bar\n                  dataKey=\"steps\"\n                  fill=\"var(--color-steps)\"\n                  radius={5}\n                  fillOpacity={0.6}\n                  activeBar={<Rectangle fillOpacity={0.8} />}\n                />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={4}\n                  tickFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      weekday: \"short\",\n                    })\n                  }}\n                />\n                <ChartTooltip\n                  defaultIndex={2}\n                  content={\n                    <ChartTooltipContent\n                      hideIndicator\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                />\n                <ReferenceLine\n                  y={1200}\n                  stroke=\"hsl(var(--muted-foreground))\"\n                  strokeDasharray=\"3 3\"\n                  strokeWidth={1}\n                >\n                  <Label\n                    position=\"insideBottomLeft\"\n                    value=\"Average Steps\"\n                    offset={10}\n                    fill=\"hsl(var(--foreground))\"\n                  />\n                  <Label\n                    position=\"insideTopLeft\"\n                    value=\"12,343\"\n                    className=\"text-lg\"\n                    fill=\"hsl(var(--foreground))\"\n                    offset={10}\n                    startOffset={100}\n                  />\n                </ReferenceLine>\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n          <CardFooter className=\"flex-col items-start gap-1\">\n            <CardDescription>\n              Over the past 7 days, you have walked{\" \"}\n              <span className=\"font-medium text-foreground\">53,305</span> steps.\n            </CardDescription>\n            <CardDescription>\n              You need{\" \"}\n              <span className=\"font-medium text-foreground\">12,584</span> more\n              steps to reach your goal.\n            </CardDescription>\n          </CardFooter>\n        </Card>\n        <Card\n          x-chunk=\"A line chart showing the resting heart rate for the past 7 days.\"\n          className=\"flex flex-col lg:max-w-md\"\n        >\n          <CardHeader className=\"flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1\">\n            <div>\n              <CardDescription>Resting HR</CardDescription>\n              <CardTitle className=\"flex items-baseline gap-1 text-4xl tabular-nums\">\n                62\n                <span className=\"text-sm font-normal tracking-normal text-muted-foreground\">\n                  bpm\n                </span>\n              </CardTitle>\n            </div>\n            <div>\n              <CardDescription>Variability</CardDescription>\n              <CardTitle className=\"flex items-baseline gap-1 text-4xl tabular-nums\">\n                35\n                <span className=\"text-sm font-normal tracking-normal text-muted-foreground\">\n                  ms\n                </span>\n              </CardTitle>\n            </div>\n          </CardHeader>\n          <CardContent className=\"flex flex-1 items-center\">\n            <ChartContainer\n              config={{\n                resting: {\n                  label: \"Resting\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n              className=\"w-full\"\n            >\n              <LineChart\n                accessibilityLayer\n                margin={{\n                  left: 14,\n                  right: 14,\n                  top: 10,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    resting: 62,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    resting: 72,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    resting: 35,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    resting: 62,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    resting: 52,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    resting: 62,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    resting: 70,\n                  },\n                ]}\n              >\n                <CartesianGrid\n                  strokeDasharray=\"4 4\"\n                  vertical={false}\n                  stroke=\"hsl(var(--muted-foreground))\"\n                  strokeOpacity={0.5}\n                />\n                <YAxis hide domain={[\"dataMin - 10\", \"dataMax + 10\"]} />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={8}\n                  tickFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      weekday: \"short\",\n                    })\n                  }}\n                />\n                <Line\n                  dataKey=\"resting\"\n                  type=\"natural\"\n                  fill=\"var(--color-resting)\"\n                  stroke=\"var(--color-resting)\"\n                  strokeWidth={2}\n                  dot={false}\n                  activeDot={{\n                    fill: \"var(--color-resting)\",\n                    stroke: \"var(--color-resting)\",\n                    r: 4,\n                  }}\n                />\n                <ChartTooltip\n                  content={\n                    <ChartTooltipContent\n                      indicator=\"line\"\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                />\n              </LineChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n      </div>\n      <div className=\"grid w-full flex-1 gap-6 lg:max-w-[20rem]\">\n        <Card\n          x-chunk=\"Two horizontal bar charts showing total steps taken during the current year and last year.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader>\n            <CardTitle>Progress</CardTitle>\n            <CardDescription>\n              You're average more steps a day this year than last year.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"grid gap-4\">\n            <div className=\"grid auto-rows-min gap-2\">\n              <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                12,453\n                <span className=\"text-sm font-normal text-muted-foreground\">\n                  steps/day\n                </span>\n              </div>\n              <ChartContainer\n                config={{\n                  steps: {\n                    label: \"Steps\",\n                    color: \"hsl(var(--chart-1))\",\n                  },\n                }}\n                className=\"aspect-auto h-[32px] w-full\"\n              >\n                <BarChart\n                  accessibilityLayer\n                  layout=\"vertical\"\n                  margin={{\n                    left: 0,\n                    top: 0,\n                    right: 0,\n                    bottom: 0,\n                  }}\n                  data={[\n                    {\n                      date: \"2024\",\n                      steps: 12435,\n                    },\n                  ]}\n                >\n                  <Bar\n                    dataKey=\"steps\"\n                    fill=\"var(--color-steps)\"\n                    radius={4}\n                    barSize={32}\n                  >\n                    <LabelList\n                      position=\"insideLeft\"\n                      dataKey=\"date\"\n                      offset={8}\n                      fontSize={12}\n                      fill=\"white\"\n                    />\n                  </Bar>\n                  <YAxis dataKey=\"date\" type=\"category\" tickCount={1} hide />\n                  <XAxis dataKey=\"steps\" type=\"number\" hide />\n                </BarChart>\n              </ChartContainer>\n            </div>\n            <div className=\"grid auto-rows-min gap-2\">\n              <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                10,103\n                <span className=\"text-sm font-normal text-muted-foreground\">\n                  steps/day\n                </span>\n              </div>\n              <ChartContainer\n                config={{\n                  steps: {\n                    label: \"Steps\",\n                    color: \"hsl(var(--muted))\",\n                  },\n                }}\n                className=\"aspect-auto h-[32px] w-full\"\n              >\n                <BarChart\n                  accessibilityLayer\n                  layout=\"vertical\"\n                  margin={{\n                    left: 0,\n                    top: 0,\n                    right: 0,\n                    bottom: 0,\n                  }}\n                  data={[\n                    {\n                      date: \"2023\",\n                      steps: 10103,\n                    },\n                  ]}\n                >\n                  <Bar\n                    dataKey=\"steps\"\n                    fill=\"var(--color-steps)\"\n                    radius={4}\n                    barSize={32}\n                  >\n                    <LabelList\n                      position=\"insideLeft\"\n                      dataKey=\"date\"\n                      offset={8}\n                      fontSize={12}\n                      fill=\"hsl(var(--muted-foreground))\"\n                    />\n                  </Bar>\n                  <YAxis dataKey=\"date\" type=\"category\" tickCount={1} hide />\n                  <XAxis dataKey=\"steps\" type=\"number\" hide />\n                </BarChart>\n              </ChartContainer>\n            </div>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"A bar chart showing the walking and running distance for the past 7 days.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader className=\"p-4 pb-0\">\n            <CardTitle>Walking Distance</CardTitle>\n            <CardDescription>\n              Over the last 7 days, your distance walked and run was 12.5 miles\n              per day.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"flex flex-row items-baseline gap-4 p-4 pt-0\">\n            <div className=\"flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none\">\n              12.5\n              <span className=\"text-sm font-normal text-muted-foreground\">\n                miles/day\n              </span>\n            </div>\n            <ChartContainer\n              config={{\n                steps: {\n                  label: \"Steps\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n              className=\"ml-auto w-[72px]\"\n            >\n              <BarChart\n                accessibilityLayer\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 0,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    steps: 2000,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    steps: 2100,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    steps: 2200,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    steps: 1300,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    steps: 1400,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    steps: 2500,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    steps: 1600,\n                  },\n                ]}\n              >\n                <Bar\n                  dataKey=\"steps\"\n                  fill=\"var(--color-steps)\"\n                  radius={2}\n                  fillOpacity={0.2}\n                  activeIndex={6}\n                  activeBar={<Rectangle fillOpacity={0.8} />}\n                />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={4}\n                  hide\n                />\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"A bar chart showing move, exercise, and stand progress.\"\n          className=\"max-w-xs\"\n        >\n          <CardContent className=\"flex gap-4 p-4 pb-2\">\n            <ChartContainer\n              config={{\n                move: {\n                  label: \"Move\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n                stand: {\n                  label: \"Stand\",\n                  color: \"hsl(var(--chart-2))\",\n                },\n                exercise: {\n                  label: \"Exercise\",\n                  color: \"hsl(var(--chart-3))\",\n                },\n              }}\n              className=\"h-[140px] w-full\"\n            >\n              <BarChart\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 10,\n                }}\n                data={[\n                  {\n                    activity: \"stand\",\n                    value: (8 / 12) * 100,\n                    label: \"8/12 hr\",\n                    fill: \"var(--color-stand)\",\n                  },\n                  {\n                    activity: \"exercise\",\n                    value: (46 / 60) * 100,\n                    label: \"46/60 min\",\n                    fill: \"var(--color-exercise)\",\n                  },\n                  {\n                    activity: \"move\",\n                    value: (245 / 360) * 100,\n                    label: \"245/360 kcal\",\n                    fill: \"var(--color-move)\",\n                  },\n                ]}\n                layout=\"vertical\"\n                barSize={32}\n                barGap={2}\n              >\n                <XAxis type=\"number\" dataKey=\"value\" hide />\n                <YAxis\n                  dataKey=\"activity\"\n                  type=\"category\"\n                  tickLine={false}\n                  tickMargin={4}\n                  axisLine={false}\n                  className=\"capitalize\"\n                />\n                <Bar dataKey=\"value\" radius={5}>\n                  <LabelList\n                    position=\"insideLeft\"\n                    dataKey=\"label\"\n                    fill=\"white\"\n                    offset={8}\n                    fontSize={12}\n                  />\n                </Bar>\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n          <CardFooter className=\"flex flex-row border-t p-4\">\n            <div className=\"flex w-full items-center gap-2\">\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-xs text-muted-foreground\">Move</div>\n                <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                  562\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    kcal\n                  </span>\n                </div>\n              </div>\n              <Separator orientation=\"vertical\" className=\"mx-2 h-10 w-px\" />\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-xs text-muted-foreground\">Exercise</div>\n                <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                  73\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    min\n                  </span>\n                </div>\n              </div>\n              <Separator orientation=\"vertical\" className=\"mx-2 h-10 w-px\" />\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-xs text-muted-foreground\">Stand</div>\n                <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                  14\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    hr\n                  </span>\n                </div>\n              </div>\n            </div>\n          </CardFooter>\n        </Card>\n      </div>\n      <div className=\"grid w-full flex-1 gap-6\">\n        <Card\n          x-chunk=\"A radial bar chart showing the percentage of time spent moving, exercising, and standing.\"\n          className=\"max-w-xs\"\n        >\n          <CardContent className=\"flex gap-4 p-4\">\n            <div className=\"grid items-center gap-2\">\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-sm text-muted-foreground\">Move</div>\n                <div className=\"flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none\">\n                  562/600\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    kcal\n                  </span>\n                </div>\n              </div>\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-sm text-muted-foreground\">Exercise</div>\n                <div className=\"flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none\">\n                  73/120\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    min\n                  </span>\n                </div>\n              </div>\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-sm text-muted-foreground\">Stand</div>\n                <div className=\"flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none\">\n                  8/12\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    hr\n                  </span>\n                </div>\n              </div>\n            </div>\n            <ChartContainer\n              config={{\n                move: {\n                  label: \"Move\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n                exercise: {\n                  label: \"Exercise\",\n                  color: \"hsl(var(--chart-2))\",\n                },\n                stand: {\n                  label: \"Stand\",\n                  color: \"hsl(var(--chart-3))\",\n                },\n              }}\n              className=\"mx-auto aspect-square w-full max-w-[80%]\"\n            >\n              <RadialBarChart\n                margin={{\n                  left: -10,\n                  right: -10,\n                  top: -10,\n                  bottom: -10,\n                }}\n                data={[\n                  {\n                    activity: \"stand\",\n                    value: (8 / 12) * 100,\n                    fill: \"var(--color-stand)\",\n                  },\n                  {\n                    activity: \"exercise\",\n                    value: (46 / 60) * 100,\n                    fill: \"var(--color-exercise)\",\n                  },\n                  {\n                    activity: \"move\",\n                    value: (245 / 360) * 100,\n                    fill: \"var(--color-move)\",\n                  },\n                ]}\n                innerRadius=\"20%\"\n                barSize={24}\n                startAngle={90}\n                endAngle={450}\n              >\n                <PolarAngleAxis\n                  type=\"number\"\n                  domain={[0, 100]}\n                  dataKey=\"value\"\n                  tick={false}\n                />\n                <RadialBar dataKey=\"value\" background cornerRadius={5} />\n              </RadialBarChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"A bar chart showing active energy in the past 7 days.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader className=\"p-4 pb-0\">\n            <CardTitle>Active Energy</CardTitle>\n            <CardDescription>\n              You're burning an average of 754 calories per day. Good job!\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"flex flex-row items-baseline gap-4 p-4 pt-2\">\n            <div className=\"flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none\">\n              1,254\n              <span className=\"text-sm font-normal text-muted-foreground\">\n                kcal/day\n              </span>\n            </div>\n            <ChartContainer\n              config={{\n                calories: {\n                  label: \"Calories\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n              className=\"ml-auto w-[64px]\"\n            >\n              <BarChart\n                accessibilityLayer\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 0,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    calories: 354,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    calories: 514,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    calories: 345,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    calories: 734,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    calories: 645,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    calories: 456,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    calories: 345,\n                  },\n                ]}\n              >\n                <Bar\n                  dataKey=\"calories\"\n                  fill=\"var(--color-calories)\"\n                  radius={2}\n                  fillOpacity={0.2}\n                  activeIndex={6}\n                  activeBar={<Rectangle fillOpacity={0.8} />}\n                />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={4}\n                  hide\n                />\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"An area chart showing the time spent in bed for the past 7 days.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader className=\"space-y-0 pb-0\">\n            <CardDescription>Time in Bed</CardDescription>\n            <CardTitle className=\"flex items-baseline gap-1 text-4xl tabular-nums\">\n              8\n              <span className=\"font-sans text-sm font-normal tracking-normal text-muted-foreground\">\n                hr\n              </span>\n              35\n              <span className=\"font-sans text-sm font-normal tracking-normal text-muted-foreground\">\n                min\n              </span>\n            </CardTitle>\n          </CardHeader>\n          <CardContent className=\"p-0\">\n            <ChartContainer\n              config={{\n                time: {\n                  label: \"Time\",\n                  color: \"hsl(var(--chart-2))\",\n                },\n              }}\n            >\n              <AreaChart\n                accessibilityLayer\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    time: 8.5,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    time: 7.2,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    time: 8.1,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    time: 6.2,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    time: 5.2,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    time: 8.1,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    time: 7.0,\n                  },\n                ]}\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 0,\n                }}\n              >\n                <XAxis dataKey=\"date\" hide />\n                <YAxis domain={[\"dataMin - 5\", \"dataMax + 2\"]} hide />\n                <defs>\n                  <linearGradient id=\"fillTime\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop\n                      offset=\"5%\"\n                      stopColor=\"var(--color-time)\"\n                      stopOpacity={0.8}\n                    />\n                    <stop\n                      offset=\"95%\"\n                      stopColor=\"var(--color-time)\"\n                      stopOpacity={0.1}\n                    />\n                  </linearGradient>\n                </defs>\n                <Area\n                  dataKey=\"time\"\n                  type=\"natural\"\n                  fill=\"url(#fillTime)\"\n                  fillOpacity={0.4}\n                  stroke=\"var(--color-time)\"\n                />\n                <ChartTooltip\n                  cursor={false}\n                  content={<ChartTooltipContent hideLabel />}\n                  formatter={(value) => (\n                    <div className=\"flex min-w-[120px] items-center text-xs text-muted-foreground\">\n                      Time in bed\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                          hr\n                        </span>\n                      </div>\n                    </div>\n                  )}\n                />\n              </AreaChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/checkbox-demo.json b/apps/www/public/r/styles/default/checkbox-demo.json
index 0b54cec7fa1..33b03f9d945 100644
--- a/apps/www/public/r/styles/default/checkbox-demo.json
+++ b/apps/www/public/r/styles/default/checkbox-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/checkbox-demo.tsx",
+      "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/www/public/r/styles/default/checkbox-disabled.json b/apps/www/public/r/styles/default/checkbox-disabled.json
index 7f9eb70de39..d7839c8ff7c 100644
--- a/apps/www/public/r/styles/default/checkbox-disabled.json
+++ b/apps/www/public/r/styles/default/checkbox-disabled.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/checkbox-disabled.tsx",
+      "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/www/public/r/styles/default/checkbox-form-multiple.json b/apps/www/public/r/styles/default/checkbox-form-multiple.json
index 38eaf0f4b0d..551767026e1 100644
--- a/apps/www/public/r/styles/default/checkbox-form-multiple.json
+++ b/apps/www/public/r/styles/default/checkbox-form-multiple.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/checkbox-form-multiple.tsx",
+      "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 { toast } from \"@/registry/default/hooks/use-toast\"\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\"\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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/checkbox-form-single.json b/apps/www/public/r/styles/default/checkbox-form-single.json
index e9af019e78d..54249b2fe14 100644
--- a/apps/www/public/r/styles/default/checkbox-form-single.json
+++ b/apps/www/public/r/styles/default/checkbox-form-single.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/checkbox-form-single.tsx",
+      "path": "examples/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 { toast } from \"@/registry/default/hooks/use-toast\"\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\"\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                  <Link href=\"/examples/forms\">mobile settings</Link> 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/www/public/r/styles/default/checkbox-with-text.json b/apps/www/public/r/styles/default/checkbox-with-text.json
index 81bfdcb425a..914562cbc7c 100644
--- a/apps/www/public/r/styles/default/checkbox-with-text.json
+++ b/apps/www/public/r/styles/default/checkbox-with-text.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/checkbox-with-text.tsx",
+      "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-sm text-muted-foreground\">\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/www/public/r/styles/default/collapsible-demo.json b/apps/www/public/r/styles/default/collapsible-demo.json
index 0a0a4db4a2b..063910967df 100644
--- a/apps/www/public/r/styles/default/collapsible-demo.json
+++ b/apps/www/public/r/styles/default/collapsible-demo.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/collapsible-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown, Plus, X } 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=\"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-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",
+      "path": "examples/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=\"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-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/www/public/r/styles/default/combobox-demo.json b/apps/www/public/r/styles/default/combobox-demo.json
index f70dafacd42..ac82fda4010 100644
--- a/apps/www/public/r/styles/default/combobox-demo.json
+++ b/apps/www/public/r/styles/default/combobox-demo.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/combobox-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } 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=\"ml-2 h-4 w-4 shrink-0 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                  <Check\n                    className={cn(\n                      \"mr-2 h-4 w-4\",\n                      value === framework.value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                  {framework.label}\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "path": "examples/combobox-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } 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={cn(\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:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/combobox-dropdown-menu.json b/apps/www/public/r/styles/default/combobox-dropdown-menu.json
index 0890d07b69c..66b3fc3664f 100644
--- a/apps/www/public/r/styles/default/combobox-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/combobox-dropdown-menu.json
@@ -8,7 +8,7 @@
   ],
   "files": [
     {
-      "path": "example/combobox-dropdown-menu.tsx",
+      "path": "examples/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=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\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={true}\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/www/public/r/styles/default/combobox-form.json b/apps/www/public/r/styles/default/combobox-form.json
index cafa55503ba..eb1fe9dde3b 100644
--- a/apps/www/public/r/styles/default/combobox-form.json
+++ b/apps/www/public/r/styles/default/combobox-form.json
@@ -7,8 +7,8 @@
   ],
   "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 { cn } 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={cn(\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 h-4 w-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                            <Check\n                              className={cn(\n                                \"mr-2 h-4 w-4\",\n                                language.value === field.value\n                                  ? \"opacity-100\"\n                                  : \"opacity-0\"\n                              )}\n                            />\n                            {language.label}\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",
+      "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 \"@/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={cn(\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 h-4 w-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={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": ""
     }
diff --git a/apps/www/public/r/styles/default/combobox-popover.json b/apps/www/public/r/styles/default/combobox-popover.json
index ead4f3a878f..dcc829956d8 100644
--- a/apps/www/public/r/styles/default/combobox-popover.json
+++ b/apps/www/public/r/styles/default/combobox-popover.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/combobox-popover.tsx",
+      "path": "examples/combobox-popover.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowUpCircle,\n  CheckCircle2,\n  Circle,\n  HelpCircle,\n  LucideIcon,\n  XCircle,\n} from \"lucide-react\"\n\nimport { cn } 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\ntype 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-sm text-muted-foreground\">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 h-4 w-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((priority) => priority.value === value) ||\n                          null\n                      )\n                      setOpen(false)\n                    }}\n                  >\n                    <status.icon\n                      className={cn(\n                        \"mr-2 h-4 w-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/www/public/r/styles/default/combobox-responsive.json b/apps/www/public/r/styles/default/combobox-responsive.json
index 53049295953..8a915d952cd 100644
--- a/apps/www/public/r/styles/default/combobox-responsive.json
+++ b/apps/www/public/r/styles/default/combobox-responsive.json
@@ -8,7 +8,7 @@
   ],
   "files": [
     {
-      "path": "example/combobox-responsive.tsx",
+      "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\ntype 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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/command-demo.json b/apps/www/public/r/styles/default/command-demo.json
index 083464782cf..444e8d98f7e 100644
--- a/apps/www/public/r/styles/default/command-demo.json
+++ b/apps/www/public/r/styles/default/command-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/command-demo.tsx",
+      "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 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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/command-dialog.json b/apps/www/public/r/styles/default/command-dialog.json
index 94b53857db5..2e9b4437d76 100644
--- a/apps/www/public/r/styles/default/command-dialog.json
+++ b/apps/www/public/r/styles/default/command-dialog.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/command-dialog.tsx",
+      "path": "examples/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-sm text-muted-foreground\">\n        Press{\" \"}\n        <kbd className=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground 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 />\n              <span>Calendar</span>\n            </CommandItem>\n            <CommandItem>\n              <Smile />\n              <span>Search Emoji</span>\n            </CommandItem>\n            <CommandItem>\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      </CommandDialog>\n    </>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/command.json b/apps/www/public/r/styles/default/command.json
index e3198894991..10fb06efb02 100644
--- a/apps/www/public/r/styles/default/command.json
+++ b/apps/www/public/r/styles/default/command.json
@@ -10,7 +10,7 @@
   "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 { cn } 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={cn(\n      \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\ninterface CommandDialogProps extends DialogProps {}\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\n        <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\">\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 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        \"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\",\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(\"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={cn(\n      \"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\",\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(\"-mx-1 h-px bg-border\", 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      \"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\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\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",
+      "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 { cn } 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={cn(\n      \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nconst CommandDialog = ({ children, ...props }: DialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\n        <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\">\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 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        \"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\",\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(\"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={cn(\n      \"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\",\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(\"-mx-1 h-px bg-border\", 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      \"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\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\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/www/public/r/styles/default/context-menu-demo.json b/apps/www/public/r/styles/default/context-menu-demo.json
index b0347a61c48..9e6bd21c436 100644
--- a/apps/www/public/r/styles/default/context-menu-demo.json
+++ b/apps/www/public/r/styles/default/context-menu-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/context-menu-demo.tsx",
+      "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\">Colm Tuite</ContextMenuRadioItem>\n        </ContextMenuRadioGroup>\n      </ContextMenuContent>\n    </ContextMenu>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/dashboard-01.json b/apps/www/public/r/styles/default/dashboard-01.json
deleted file mode 100644
index ce05767c8f2..00000000000
--- a/apps/www/public/r/styles/default/dashboard-01.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "dashboard-01",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "dropdown-menu",
-    "input",
-    "sheet"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-01.tsx",
-      "content": "import Link from \"next/link\"\nimport {\n  Activity,\n  ArrowUpRight,\n  CircleUser,\n  CreditCard,\n  DollarSign,\n  Menu,\n  Package2,\n  Search,\n  Users,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport { Badge } from \"@/registry/default/ui/badge\"\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 {\n  DropdownMenu,\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 { Sheet, SheetContent, SheetTrigger } from \"@/registry/default/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col\">\n      <header className=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n        <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\">\n          <Link\n            href=\"#\"\n            className=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n          >\n            <Package2 className=\"h-6 w-6\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-foreground transition-colors hover:text-foreground\"\n          >\n            Dashboard\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Orders\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Products\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Customers\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Analytics\n          </Link>\n        </nav>\n        <Sheet>\n          <SheetTrigger asChild>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              className=\"shrink-0 md:hidden\"\n            >\n              <Menu className=\"h-5 w-5\" />\n              <span className=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\">\n            <nav className=\"grid gap-6 text-lg font-medium\">\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 className=\"h-6 w-6\" />\n                <span className=\"sr-only\">Acme Inc</span>\n              </Link>\n              <Link href=\"#\" className=\"hover:text-foreground\">\n                Dashboard\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Orders\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Products\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Customers\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Analytics\n              </Link>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <div className=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n          <form className=\"ml-auto flex-1 sm:flex-initial\">\n            <div className=\"relative\">\n              <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                className=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n              />\n            </div>\n          </form>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" size=\"icon\" className=\"rounded-full\">\n                <CircleUser className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle user menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </header>\n      <main className=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n        <div className=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n          <Card x-chunk=\"A card showing the total revenue in USD and the percentage difference from last month.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">\n                Total Revenue\n              </CardTitle>\n              <DollarSign className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">$45,231.89</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +20.1% from last month\n              </p>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing the total subscriptions and the percentage difference from last month.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">\n                Subscriptions\n              </CardTitle>\n              <Users className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">+2350</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +180.1% from last month\n              </p>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing the total sales and the percentage difference from last month.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">Sales</CardTitle>\n              <CreditCard className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">+12,234</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +19% from last month\n              </p>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing the total active users and the percentage difference from last hour.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">Active Now</CardTitle>\n              <Activity className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">+573</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +201 since last hour\n              </p>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n          <Card\n            className=\"xl:col-span-2\"\n            x-chunk=\"A card showing a table of recent transactions with a link to view all transactions.\"\n          >\n            <CardHeader className=\"flex flex-row items-center\">\n              <div className=\"grid gap-2\">\n                <CardTitle>Transactions</CardTitle>\n                <CardDescription>\n                  Recent transactions from your store.\n                </CardDescription>\n              </div>\n              <Button asChild size=\"sm\" className=\"ml-auto gap-1\">\n                <Link href=\"#\">\n                  View All\n                  <ArrowUpRight className=\"h-4 w-4\" />\n                </Link>\n              </Button>\n            </CardHeader>\n            <CardContent>\n              <Table>\n                <TableHeader>\n                  <TableRow>\n                    <TableHead>Customer</TableHead>\n                    <TableHead className=\"hidden xl:table-column\">\n                      Type\n                    </TableHead>\n                    <TableHead className=\"hidden xl:table-column\">\n                      Status\n                    </TableHead>\n                    <TableHead className=\"hidden xl:table-column\">\n                      Date\n                    </TableHead>\n                    <TableHead className=\"text-right\">Amount</TableHead>\n                  </TableRow>\n                </TableHeader>\n                <TableBody>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Liam Johnson</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        liam@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Sale\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-23\n                    </TableCell>\n                    <TableCell className=\"text-right\">$250.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Olivia Smith</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        olivia@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Refund\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Declined\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-24\n                    </TableCell>\n                    <TableCell className=\"text-right\">$150.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Noah Williams</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        noah@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Subscription\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-25\n                    </TableCell>\n                    <TableCell className=\"text-right\">$350.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Emma Brown</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        emma@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Sale\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-26\n                    </TableCell>\n                    <TableCell className=\"text-right\">$450.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Liam Johnson</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        liam@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Sale\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-27\n                    </TableCell>\n                    <TableCell className=\"text-right\">$550.00</TableCell>\n                  </TableRow>\n                </TableBody>\n              </Table>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing a list of recent sales with customer names and email addresses.\">\n            <CardHeader>\n              <CardTitle>Recent Sales</CardTitle>\n            </CardHeader>\n            <CardContent className=\"grid gap-8\">\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                  <AvatarFallback>OM</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Olivia Martin\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    olivia.martin@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$1,999.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                  <AvatarFallback>JL</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Jackson Lee\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    jackson.lee@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$39.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                  <AvatarFallback>IN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Isabella Nguyen\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    isabella.nguyen@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$299.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                  <AvatarFallback>WK</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    William Kim\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    will@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$99.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                  <AvatarFallback>SD</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Sofia Davis\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    sofia.davis@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$39.00</div>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </main>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/dashboard-02.json b/apps/www/public/r/styles/default/dashboard-02.json
deleted file mode 100644
index 77053d542ae..00000000000
--- a/apps/www/public/r/styles/default/dashboard-02.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "dashboard-02",
-  "type": "registry:block",
-  "registryDependencies": [
-    "badge",
-    "button",
-    "card",
-    "dropdown-menu",
-    "input"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-02.tsx",
-      "content": "import Link from \"next/link\"\nimport {\n  Bell,\n  CircleUser,\n  Home,\n  LineChart,\n  Menu,\n  Package,\n  Package2,\n  Search,\n  ShoppingCart,\n  Users,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\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 {\n  DropdownMenu,\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 { Sheet, SheetContent, SheetTrigger } from \"@/registry/default/ui/sheet\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]\">\n      <div className=\"hidden border-r bg-muted/40 md:block\">\n        <div className=\"flex h-full max-h-screen flex-col gap-2\">\n          <div className=\"flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6\">\n            <Link href=\"/\" className=\"flex items-center gap-2 font-semibold\">\n              <Package2 className=\"h-6 w-6\" />\n              <span className=\"\">Acme Inc</span>\n            </Link>\n            <Button variant=\"outline\" size=\"icon\" className=\"ml-auto h-8 w-8\">\n              <Bell className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Toggle notifications</span>\n            </Button>\n          </div>\n          <div className=\"flex-1\">\n            <nav className=\"grid items-start px-2 text-sm font-medium lg:px-4\">\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <Home className=\"h-4 w-4\" />\n                Dashboard\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <ShoppingCart className=\"h-4 w-4\" />\n                Orders\n                <Badge className=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  6\n                </Badge>\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary\"\n              >\n                <Package className=\"h-4 w-4\" />\n                Products{\" \"}\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <Users className=\"h-4 w-4\" />\n                Customers\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <LineChart className=\"h-4 w-4\" />\n                Analytics\n              </Link>\n            </nav>\n          </div>\n          <div className=\"mt-auto p-4\">\n            <Card x-chunk=\"A card with a call to action\">\n              <CardHeader className=\"p-2 pt-0 md:p-4\">\n                <CardTitle>Upgrade to Pro</CardTitle>\n                <CardDescription>\n                  Unlock all features and get unlimited access to our support\n                  team.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"p-2 pt-0 md:p-4 md:pt-0\">\n                <Button size=\"sm\" className=\"w-full\">\n                  Upgrade\n                </Button>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </div>\n      <div className=\"flex flex-col\">\n        <header className=\"flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"shrink-0 md:hidden\"\n              >\n                <Menu className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle navigation menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"flex flex-col\">\n              <nav className=\"grid gap-2 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-2 text-lg font-semibold\"\n                >\n                  <Package2 className=\"h-6 w-6\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                  <Badge className=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                    6\n                  </Badge>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Analytics\n                </Link>\n              </nav>\n              <div className=\"mt-auto\">\n                <Card>\n                  <CardHeader>\n                    <CardTitle>Upgrade to Pro</CardTitle>\n                    <CardDescription>\n                      Unlock all features and get unlimited access to our\n                      support team.\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <Button size=\"sm\" className=\"w-full\">\n                      Upgrade\n                    </Button>\n                  </CardContent>\n                </Card>\n              </div>\n            </SheetContent>\n          </Sheet>\n          <div className=\"w-full flex-1\">\n            <form>\n              <div className=\"relative\">\n                <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n                <Input\n                  type=\"search\"\n                  placeholder=\"Search products...\"\n                  className=\"w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3\"\n                />\n              </div>\n            </form>\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" size=\"icon\" className=\"rounded-full\">\n                <CircleUser className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle user menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\">\n          <div className=\"flex items-center\">\n            <h1 className=\"text-lg font-semibold md:text-2xl\">Inventory</h1>\n          </div>\n          <div\n            x-chunk=\"An empty state showing no products with a heading, description and a call to action to add a product.\"\n            className=\"flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm\"\n          >\n            <div className=\"flex flex-col items-center gap-1 text-center\">\n              <h3 className=\"text-2xl font-bold tracking-tight\">\n                You have no products\n              </h3>\n              <p className=\"text-sm text-muted-foreground\">\n                You can start selling as soon as you add a product.\n              </p>\n              <Button className=\"mt-4\">Add Product</Button>\n            </div>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/dashboard-03.json b/apps/www/public/r/styles/default/dashboard-03.json
deleted file mode 100644
index e7aa6658d91..00000000000
--- a/apps/www/public/r/styles/default/dashboard-03.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "dashboard-03",
-  "type": "registry:block",
-  "registryDependencies": [
-    "badge",
-    "button",
-    "drawer",
-    "input",
-    "label",
-    "select",
-    "textarea",
-    "tooltip"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-03.tsx",
-      "content": "import {\n  Bird,\n  Book,\n  Bot,\n  Code2,\n  CornerDownLeft,\n  LifeBuoy,\n  Mic,\n  Paperclip,\n  Rabbit,\n  Settings,\n  Settings2,\n  Share,\n  SquareTerminal,\n  SquareUser,\n  Triangle,\n  Turtle,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerDescription,\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\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"grid h-screen w-full pl-[56px]\">\n      <aside className=\"inset-y fixed  left-0 z-20 flex h-full flex-col border-r\">\n        <div className=\"border-b p-2\">\n          <Button variant=\"outline\" size=\"icon\" aria-label=\"Home\">\n            <Triangle className=\"w-5 h-5 fill-foreground\" />\n          </Button>\n        </div>\n        <nav className=\"grid gap-1 p-2\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg bg-muted\"\n                aria-label=\"Playground\"\n              >\n                <SquareTerminal className=\"w-5 h-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Playground\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"Models\"\n              >\n                <Bot className=\"w-5 h-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Models\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"API\"\n              >\n                <Code2 className=\"w-5 h-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              API\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"Documentation\"\n              >\n                <Book className=\"w-5 h-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Documentation\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"Settings\"\n              >\n                <Settings2 className=\"w-5 h-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto grid gap-1 p-2\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"mt-auto rounded-lg\"\n                aria-label=\"Help\"\n              >\n                <LifeBuoy className=\"w-5 h-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Help\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"mt-auto rounded-lg\"\n                aria-label=\"Account\"\n              >\n                <SquareUser className=\"w-5 h-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Account\n            </TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col\">\n        <header className=\"sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-background px-4\">\n          <h1 className=\"text-xl font-semibold\">Playground</h1>\n          <Drawer>\n            <DrawerTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"md:hidden\">\n                <Settings className=\"w-4 h-4\" />\n                <span className=\"sr-only\">Settings</span>\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"max-h-[80vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Configuration</DrawerTitle>\n                <DrawerDescription>\n                  Configure the settings for the model and messages.\n                </DrawerDescription>\n              </DrawerHeader>\n              <form className=\"grid w-full items-start gap-6 overflow-auto p-4 pt-0\">\n                <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                  <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                    Settings\n                  </legend>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"model\">Model</Label>\n                    <Select>\n                      <SelectTrigger\n                        id=\"model\"\n                        className=\"items-start [&_[data-description]]:hidden\"\n                      >\n                        <SelectValue placeholder=\"Select a model\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"genesis\">\n                          <div className=\"flex items-start gap-3 text-muted-foreground\">\n                            <Rabbit className=\"w-5 h-5\" />\n                            <div className=\"grid gap-0.5\">\n                              <p>\n                                Neural{\" \"}\n                                <span className=\"font-medium text-foreground\">\n                                  Genesis\n                                </span>\n                              </p>\n                              <p className=\"text-xs\" data-description>\n                                Our fastest model for general use cases.\n                              </p>\n                            </div>\n                          </div>\n                        </SelectItem>\n                        <SelectItem value=\"explorer\">\n                          <div className=\"flex items-start gap-3 text-muted-foreground\">\n                            <Bird className=\"w-5 h-5\" />\n                            <div className=\"grid gap-0.5\">\n                              <p>\n                                Neural{\" \"}\n                                <span className=\"font-medium text-foreground\">\n                                  Explorer\n                                </span>\n                              </p>\n                              <p className=\"text-xs\" data-description>\n                                Performance and speed for efficiency.\n                              </p>\n                            </div>\n                          </div>\n                        </SelectItem>\n                        <SelectItem value=\"quantum\">\n                          <div className=\"flex items-start gap-3 text-muted-foreground\">\n                            <Turtle className=\"w-5 h-5\" />\n                            <div className=\"grid gap-0.5\">\n                              <p>\n                                Neural{\" \"}\n                                <span className=\"font-medium text-foreground\">\n                                  Quantum\n                                </span>\n                              </p>\n                              <p className=\"text-xs\" data-description>\n                                The most powerful model for complex\n                                computations.\n                              </p>\n                            </div>\n                          </div>\n                        </SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"temperature\">Temperature</Label>\n                    <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-p\">Top P</Label>\n                    <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-k\">Top K</Label>\n                    <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                  </div>\n                </fieldset>\n                <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                  <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                    Messages\n                  </legend>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"role\">Role</Label>\n                    <Select defaultValue=\"system\">\n                      <SelectTrigger>\n                        <SelectValue placeholder=\"Select a role\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"system\">System</SelectItem>\n                        <SelectItem value=\"user\">User</SelectItem>\n                        <SelectItem value=\"assistant\">Assistant</SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"content\">Content</Label>\n                    <Textarea id=\"content\" placeholder=\"You are a...\" />\n                  </div>\n                </fieldset>\n              </form>\n            </DrawerContent>\n          </Drawer>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"ml-auto gap-1.5 text-sm\"\n          >\n            <Share className=\"w-3.5 h-3.5\" />\n            Share\n          </Button>\n        </header>\n        <main className=\"grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3\">\n          <div\n            className=\"relative hidden flex-col items-start gap-8 md:flex\"\n            x-chunk=\"A settings form a configuring an AI model and messages.\"\n          >\n            <form className=\"grid w-full items-start gap-6\">\n              <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                  Settings\n                </legend>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"model\">Model</Label>\n                  <Select>\n                    <SelectTrigger\n                      id=\"model\"\n                      className=\"items-start [&_[data-description]]:hidden\"\n                    >\n                      <SelectValue placeholder=\"Select a model\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"genesis\">\n                        <div className=\"flex items-start gap-3 text-muted-foreground\">\n                          <Rabbit className=\"w-5 h-5\" />\n                          <div className=\"grid gap-0.5\">\n                            <p>\n                              Neural{\" \"}\n                              <span className=\"font-medium text-foreground\">\n                                Genesis\n                              </span>\n                            </p>\n                            <p className=\"text-xs\" data-description>\n                              Our fastest model for general use cases.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"explorer\">\n                        <div className=\"flex items-start gap-3 text-muted-foreground\">\n                          <Bird className=\"w-5 h-5\" />\n                          <div className=\"grid gap-0.5\">\n                            <p>\n                              Neural{\" \"}\n                              <span className=\"font-medium text-foreground\">\n                                Explorer\n                              </span>\n                            </p>\n                            <p className=\"text-xs\" data-description>\n                              Performance and speed for efficiency.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"quantum\">\n                        <div className=\"flex items-start gap-3 text-muted-foreground\">\n                          <Turtle className=\"w-5 h-5\" />\n                          <div className=\"grid gap-0.5\">\n                            <p>\n                              Neural{\" \"}\n                              <span className=\"font-medium text-foreground\">\n                                Quantum\n                              </span>\n                            </p>\n                            <p className=\"text-xs\" data-description>\n                              The most powerful model for complex computations.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"temperature\">Temperature</Label>\n                  <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                </div>\n                <div className=\"grid grid-cols-2 gap-4\">\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-p\">Top P</Label>\n                    <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-k\">Top K</Label>\n                    <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                  </div>\n                </div>\n              </fieldset>\n              <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                  Messages\n                </legend>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"role\">Role</Label>\n                  <Select defaultValue=\"system\">\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"system\">System</SelectItem>\n                      <SelectItem value=\"user\">User</SelectItem>\n                      <SelectItem value=\"assistant\">Assistant</SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"content\">Content</Label>\n                  <Textarea\n                    id=\"content\"\n                    placeholder=\"You are a...\"\n                    className=\"min-h-[9.5rem]\"\n                  />\n                </div>\n              </fieldset>\n            </form>\n          </div>\n          <div className=\"relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2\">\n            <Badge variant=\"outline\" className=\"absolute right-3 top-3\">\n              Output\n            </Badge>\n            <div className=\"flex-1\" />\n            <form\n              className=\"relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring\"\n              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.\"\n            >\n              <Label htmlFor=\"message\" className=\"sr-only\">\n                Message\n              </Label>\n              <Textarea\n                id=\"message\"\n                placeholder=\"Type your message here...\"\n                className=\"min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0\"\n              />\n              <div className=\"flex items-center p-3 pt-0\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Paperclip className=\"w-4 h-4\" />\n                      <span className=\"sr-only\">Attach file</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">Attach File</TooltipContent>\n                </Tooltip>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Mic className=\"w-4 h-4\" />\n                      <span className=\"sr-only\">Use Microphone</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">Use Microphone</TooltipContent>\n                </Tooltip>\n                <Button type=\"submit\" size=\"sm\" className=\"ml-auto gap-1.5\">\n                  Send Message\n                  <CornerDownLeft className=\"w-3.5 h-3.5\" />\n                </Button>\n              </div>\n            </form>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/dashboard-04.json b/apps/www/public/r/styles/default/dashboard-04.json
deleted file mode 100644
index dcc13f46511..00000000000
--- a/apps/www/public/r/styles/default/dashboard-04.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "dashboard-04",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "card",
-    "dropdown-menu",
-    "input"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-04.tsx",
-      "content": "import Link from \"next/link\"\nimport { CircleUser, Menu, Package2, Search } from \"lucide-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 { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport {\n  DropdownMenu,\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 { Sheet, SheetContent, SheetTrigger } from \"@/registry/default/ui/sheet\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col\">\n      <header className=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n        <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\">\n          <Link\n            href=\"#\"\n            className=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n          >\n            <Package2 className=\"h-6 w-6\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Dashboard\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Orders\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Products\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Customers\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-foreground transition-colors hover:text-foreground\"\n          >\n            Settings\n          </Link>\n        </nav>\n        <Sheet>\n          <SheetTrigger asChild>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              className=\"shrink-0 md:hidden\"\n            >\n              <Menu className=\"h-5 w-5\" />\n              <span className=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\">\n            <nav className=\"grid gap-6 text-lg font-medium\">\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 className=\"h-6 w-6\" />\n                <span className=\"sr-only\">Acme Inc</span>\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Dashboard\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Orders\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Products\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Customers\n              </Link>\n              <Link href=\"#\" className=\"hover:text-foreground\">\n                Settings\n              </Link>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <div className=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n          <form className=\"ml-auto flex-1 sm:flex-initial\">\n            <div className=\"relative\">\n              <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                className=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n              />\n            </div>\n          </form>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" size=\"icon\" className=\"rounded-full\">\n                <CircleUser className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle user menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </header>\n      <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\">\n        <div className=\"mx-auto grid w-full max-w-6xl gap-2\">\n          <h1 className=\"text-3xl font-semibold\">Settings</h1>\n        </div>\n        <div className=\"mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]\">\n          <nav\n            className=\"grid gap-4 text-sm text-muted-foreground\"\n            x-chunk=\"A sidebar navigation with links to general, security, integrations, support, organizations, and advanced settings.\"\n            x-chunk-container=\"chunk-container after:right-0\"\n          >\n            <Link href=\"#\" className=\"font-semibold text-primary\">\n              General\n            </Link>\n            <Link href=\"#\">Security</Link>\n            <Link href=\"#\">Integrations</Link>\n            <Link href=\"#\">Support</Link>\n            <Link href=\"#\">Organizations</Link>\n            <Link href=\"#\">Advanced</Link>\n          </nav>\n          <div className=\"grid gap-6\">\n            <Card x-chunk=\"A form to update the store name.\">\n              <CardHeader>\n                <CardTitle>Store Name</CardTitle>\n                <CardDescription>\n                  Used to identify your store in the marketplace.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Input placeholder=\"Store Name\" />\n                </form>\n              </CardContent>\n              <CardFooter className=\"border-t px-6 py-4\">\n                <Button>Save</Button>\n              </CardFooter>\n            </Card>\n            <Card x-chunk=\"A form to update the plugins directory with a checkbox to allow administrators to change the directory.\">\n              <CardHeader>\n                <CardTitle>Plugins Directory</CardTitle>\n                <CardDescription>\n                  The directory within your project, in which your plugins are\n                  located.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form className=\"flex flex-col gap-4\">\n                  <Input\n                    placeholder=\"Project Name\"\n                    defaultValue=\"/content/plugins\"\n                  />\n                  <div className=\"flex items-center space-x-2\">\n                    <Checkbox id=\"include\" defaultChecked />\n                    <label\n                      htmlFor=\"include\"\n                      className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                    >\n                      Allow administrators to change the directory.\n                    </label>\n                  </div>\n                </form>\n              </CardContent>\n              <CardFooter className=\"border-t px-6 py-4\">\n                <Button>Save</Button>\n              </CardFooter>\n            </Card>\n          </div>\n        </div>\n      </main>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/dashboard-05.json b/apps/www/public/r/styles/default/dashboard-05.json
deleted file mode 100644
index de850a63d8c..00000000000
--- a/apps/www/public/r/styles/default/dashboard-05.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "name": "dashboard-05",
-  "type": "registry:block",
-  "registryDependencies": [
-    "badge",
-    "breadcrumb",
-    "button",
-    "card",
-    "dropdown-menu",
-    "input",
-    "pagination",
-    "progress",
-    "separator",
-    "sheet",
-    "table",
-    "tabs",
-    "tooltip"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-05.tsx",
-      "content": "import Image from \"next/image\"\nimport Link from \"next/link\"\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Copy,\n  CreditCard,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreVertical,\n  Package,\n  Package2,\n  PanelLeft,\n  Search,\n  Settings,\n  ShoppingCart,\n  Truck,\n  Users2,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\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  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\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  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\"\nimport { Progress } from \"@/registry/default/ui/progress\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/default/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col bg-muted/40\">\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n        <nav className=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n          <Link\n            href=\"#\"\n            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\"\n          >\n            <Package2 className=\"h-4 w-4 transition-all group-hover:scale-110\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Home className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Dashboard</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Dashboard</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <ShoppingCart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Orders</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Orders</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Package className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Products</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Products</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Users2 className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Customers</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Customers</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <LineChart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Analytics</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Analytics</TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Settings className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Settings</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Settings</TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n        <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\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button size=\"icon\" variant=\"outline\" className=\"sm:hidden\">\n                <PanelLeft className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle Menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"sm:max-w-xs\">\n              <nav className=\"grid gap-6 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  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\"\n                >\n                  <Package2 className=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users2 className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Settings\n                </Link>\n              </nav>\n            </SheetContent>\n          </Sheet>\n          <Breadcrumb className=\"hidden md:flex\">\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Dashboard</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Orders</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Recent Orders</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <div className=\"relative ml-auto flex-1 md:grow-0\">\n            <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n            />\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"overflow-hidden rounded-full\"\n              >\n                <Image\n                  src=\"/placeholder-user.jpg\"\n                  width={36}\n                  height={36}\n                  alt=\"Avatar\"\n                  className=\"overflow-hidden rounded-full\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <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\">\n          <div className=\"grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2\">\n            <div className=\"grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4\">\n              <Card\n                className=\"sm:col-span-2\"\n                x-chunk=\"A card for an orders dashboard with a description and a button to create a new order.\"\n              >\n                <CardHeader className=\"pb-3\">\n                  <CardTitle>Your Orders</CardTitle>\n                  <CardDescription className=\"max-w-lg text-balance leading-relaxed\">\n                    Introducing Our Dynamic Orders Dashboard for Seamless\n                    Management and Insightful Analysis.\n                  </CardDescription>\n                </CardHeader>\n                <CardFooter>\n                  <Button>Create New Order</Button>\n                </CardFooter>\n              </Card>\n              <Card x-chunk=\"A stats card showing this week's total sales in USD, the percentage difference from last week, and a progress bar.\">\n                <CardHeader className=\"pb-2\">\n                  <CardDescription>This Week</CardDescription>\n                  <CardTitle className=\"text-4xl\">$1,329</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div className=\"text-xs text-muted-foreground\">\n                    +25% from last week\n                  </div>\n                </CardContent>\n                <CardFooter>\n                  <Progress value={25} aria-label=\"25% increase\" />\n                </CardFooter>\n              </Card>\n              <Card x-chunk=\"A stats card showing this month's total sales in USD, the percentage difference from last month, and a progress bar.\">\n                <CardHeader className=\"pb-2\">\n                  <CardDescription>This Month</CardDescription>\n                  <CardTitle className=\"text-4xl\">$5,329</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div className=\"text-xs text-muted-foreground\">\n                    +10% from last month\n                  </div>\n                </CardContent>\n                <CardFooter>\n                  <Progress value={12} aria-label=\"12% increase\" />\n                </CardFooter>\n              </Card>\n            </div>\n            <Tabs defaultValue=\"week\">\n              <div className=\"flex items-center\">\n                <TabsList>\n                  <TabsTrigger value=\"week\">Week</TabsTrigger>\n                  <TabsTrigger value=\"month\">Month</TabsTrigger>\n                  <TabsTrigger value=\"year\">Year</TabsTrigger>\n                </TabsList>\n                <div className=\"ml-auto flex items-center gap-2\">\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button\n                        variant=\"outline\"\n                        size=\"sm\"\n                        className=\"h-7 gap-1 text-sm\"\n                      >\n                        <ListFilter className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only sm:not-sr-only\">Filter</span>\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent align=\"end\">\n                      <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuCheckboxItem checked>\n                        Fulfilled\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem>\n                        Declined\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem>\n                        Refunded\n                      </DropdownMenuCheckboxItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                  <Button\n                    size=\"sm\"\n                    variant=\"outline\"\n                    className=\"h-7 gap-1 text-sm\"\n                  >\n                    <File className=\"h-3.5 w-3.5\" />\n                    <span className=\"sr-only sm:not-sr-only\">Export</span>\n                  </Button>\n                </div>\n              </div>\n              <TabsContent value=\"week\">\n                <Card x-chunk=\"A table of recent orders showing the following columns: Customer, Type, Status, Date, and Amount.\">\n                  <CardHeader className=\"px-7\">\n                    <CardTitle>Orders</CardTitle>\n                    <CardDescription>\n                      Recent orders from your store.\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <Table>\n                      <TableHeader>\n                        <TableRow>\n                          <TableHead>Customer</TableHead>\n                          <TableHead className=\"hidden sm:table-cell\">\n                            Type\n                          </TableHead>\n                          <TableHead className=\"hidden sm:table-cell\">\n                            Status\n                          </TableHead>\n                          <TableHead className=\"hidden md:table-cell\">\n                            Date\n                          </TableHead>\n                          <TableHead className=\"text-right\">Amount</TableHead>\n                        </TableRow>\n                      </TableHeader>\n                      <TableBody>\n                        <TableRow className=\"bg-accent\">\n                          <TableCell>\n                            <div className=\"font-medium\">Liam Johnson</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              liam@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-23\n                          </TableCell>\n                          <TableCell className=\"text-right\">$250.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Olivia Smith</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              olivia@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Refund\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"outline\">\n                              Declined\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-24\n                          </TableCell>\n                          <TableCell className=\"text-right\">$150.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Noah Williams</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              noah@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Subscription\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-25\n                          </TableCell>\n                          <TableCell className=\"text-right\">$350.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Emma Brown</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              emma@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-26\n                          </TableCell>\n                          <TableCell className=\"text-right\">$450.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Liam Johnson</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              liam@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-23\n                          </TableCell>\n                          <TableCell className=\"text-right\">$250.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Liam Johnson</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              liam@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-23\n                          </TableCell>\n                          <TableCell className=\"text-right\">$250.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Olivia Smith</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              olivia@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Refund\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"outline\">\n                              Declined\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-24\n                          </TableCell>\n                          <TableCell className=\"text-right\">$150.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Emma Brown</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              emma@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-26\n                          </TableCell>\n                          <TableCell className=\"text-right\">$450.00</TableCell>\n                        </TableRow>\n                      </TableBody>\n                    </Table>\n                  </CardContent>\n                </Card>\n              </TabsContent>\n            </Tabs>\n          </div>\n          <div>\n            <Card\n              className=\"overflow-hidden\"\n              x-chunk=\"An order details card with order details, shipping information, customer information and payment information.\"\n            >\n              <CardHeader className=\"flex flex-row items-start bg-muted/50\">\n                <div className=\"grid gap-0.5\">\n                  <CardTitle className=\"group flex items-center gap-2 text-lg\">\n                    Order Oe31b70H\n                    <Button\n                      size=\"icon\"\n                      variant=\"outline\"\n                      className=\"h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100\"\n                    >\n                      <Copy className=\"h-3 w-3\" />\n                      <span className=\"sr-only\">Copy Order ID</span>\n                    </Button>\n                  </CardTitle>\n                  <CardDescription>Date: November 23, 2023</CardDescription>\n                </div>\n                <div className=\"ml-auto flex items-center gap-1\">\n                  <Button size=\"sm\" variant=\"outline\" className=\"h-8 gap-1\">\n                    <Truck className=\"h-3.5 w-3.5\" />\n                    <span className=\"lg:sr-only xl:not-sr-only xl:whitespace-nowrap\">\n                      Track Order\n                    </span>\n                  </Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-8 w-8\">\n                        <MoreVertical className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only\">More</span>\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent align=\"end\">\n                      <DropdownMenuItem>Edit</DropdownMenuItem>\n                      <DropdownMenuItem>Export</DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>Trash</DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </div>\n              </CardHeader>\n              <CardContent className=\"p-6 text-sm\">\n                <div className=\"grid gap-3\">\n                  <div className=\"font-semibold\">Order Details</div>\n                  <ul className=\"grid gap-3\">\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">\n                        Glimmer Lamps x <span>2</span>\n                      </span>\n                      <span>$250.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">\n                        Aqua Filters x <span>1</span>\n                      </span>\n                      <span>$49.00</span>\n                    </li>\n                  </ul>\n                  <Separator className=\"my-2\" />\n                  <ul className=\"grid gap-3\">\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">Subtotal</span>\n                      <span>$299.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">Shipping</span>\n                      <span>$5.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">Tax</span>\n                      <span>$25.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between font-semibold\">\n                      <span className=\"text-muted-foreground\">Total</span>\n                      <span>$329.00</span>\n                    </li>\n                  </ul>\n                </div>\n                <Separator className=\"my-4\" />\n                <div className=\"grid grid-cols-2 gap-4\">\n                  <div className=\"grid gap-3\">\n                    <div className=\"font-semibold\">Shipping Information</div>\n                    <address className=\"grid gap-0.5 not-italic text-muted-foreground\">\n                      <span>Liam Johnson</span>\n                      <span>1234 Main St.</span>\n                      <span>Anytown, CA 12345</span>\n                    </address>\n                  </div>\n                  <div className=\"grid auto-rows-max gap-3\">\n                    <div className=\"font-semibold\">Billing Information</div>\n                    <div className=\"text-muted-foreground\">\n                      Same as shipping address\n                    </div>\n                  </div>\n                </div>\n                <Separator className=\"my-4\" />\n                <div className=\"grid gap-3\">\n                  <div className=\"font-semibold\">Customer Information</div>\n                  <dl className=\"grid gap-3\">\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"text-muted-foreground\">Customer</dt>\n                      <dd>Liam Johnson</dd>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"text-muted-foreground\">Email</dt>\n                      <dd>\n                        <a href=\"mailto:\">liam@acme.com</a>\n                      </dd>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"text-muted-foreground\">Phone</dt>\n                      <dd>\n                        <a href=\"tel:\">+1 234 567 890</a>\n                      </dd>\n                    </div>\n                  </dl>\n                </div>\n                <Separator className=\"my-4\" />\n                <div className=\"grid gap-3\">\n                  <div className=\"font-semibold\">Payment Information</div>\n                  <dl className=\"grid gap-3\">\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"flex items-center gap-1 text-muted-foreground\">\n                        <CreditCard className=\"h-4 w-4\" />\n                        Visa\n                      </dt>\n                      <dd>**** **** **** 4532</dd>\n                    </div>\n                  </dl>\n                </div>\n              </CardContent>\n              <CardFooter className=\"flex flex-row items-center border-t bg-muted/50 px-6 py-3\">\n                <div className=\"text-xs text-muted-foreground\">\n                  Updated <time dateTime=\"2023-11-23\">November 23, 2023</time>\n                </div>\n                <Pagination className=\"ml-auto mr-0 w-auto\">\n                  <PaginationContent>\n                    <PaginationItem>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-6 w-6\">\n                        <ChevronLeft className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only\">Previous Order</span>\n                      </Button>\n                    </PaginationItem>\n                    <PaginationItem>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-6 w-6\">\n                        <ChevronRight className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only\">Next Order</span>\n                      </Button>\n                    </PaginationItem>\n                  </PaginationContent>\n                </Pagination>\n              </CardFooter>\n            </Card>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/dashboard-06.json b/apps/www/public/r/styles/default/dashboard-06.json
deleted file mode 100644
index 64efad051a1..00000000000
--- a/apps/www/public/r/styles/default/dashboard-06.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "name": "dashboard-06",
-  "type": "registry:block",
-  "registryDependencies": [
-    "badge",
-    "breadcrumb",
-    "button",
-    "card",
-    "dropdown-menu",
-    "input",
-    "sheet",
-    "table",
-    "tabs",
-    "tooltip"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-06.tsx",
-      "content": "import Image from \"next/image\"\nimport Link from \"next/link\"\nimport {\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreHorizontal,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Users2,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\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  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\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 { Sheet, SheetContent, SheetTrigger } from \"@/registry/default/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col bg-muted/40\">\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n        <nav className=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n          <Link\n            href=\"#\"\n            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\"\n          >\n            <Package2 className=\"h-4 w-4 transition-all group-hover:scale-110\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Home className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Dashboard</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Dashboard</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <ShoppingCart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Orders</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Orders</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Package className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Products</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Products</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Users2 className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Customers</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Customers</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <LineChart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Analytics</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Analytics</TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Settings className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Settings</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Settings</TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n        <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\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button size=\"icon\" variant=\"outline\" className=\"sm:hidden\">\n                <PanelLeft className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle Menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"sm:max-w-xs\">\n              <nav className=\"grid gap-6 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  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\"\n                >\n                  <Package2 className=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users2 className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Settings\n                </Link>\n              </nav>\n            </SheetContent>\n          </Sheet>\n          <Breadcrumb className=\"hidden md:flex\">\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Dashboard</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Products</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbPage>All Products</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <div className=\"relative ml-auto flex-1 md:grow-0\">\n            <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n            />\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"overflow-hidden rounded-full\"\n              >\n                <Image\n                  src=\"/placeholder-user.jpg\"\n                  width={36}\n                  height={36}\n                  alt=\"Avatar\"\n                  className=\"overflow-hidden rounded-full\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n          <Tabs defaultValue=\"all\">\n            <div className=\"flex items-center\">\n              <TabsList>\n                <TabsTrigger value=\"all\">All</TabsTrigger>\n                <TabsTrigger value=\"active\">Active</TabsTrigger>\n                <TabsTrigger value=\"draft\">Draft</TabsTrigger>\n                <TabsTrigger value=\"archived\" className=\"hidden sm:flex\">\n                  Archived\n                </TabsTrigger>\n              </TabsList>\n              <div className=\"ml-auto flex items-center gap-2\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"outline\" size=\"sm\" className=\"h-8 gap-1\">\n                      <ListFilter className=\"h-3.5 w-3.5\" />\n                      <span className=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                        Filter\n                      </span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuCheckboxItem checked>\n                      Active\n                    </DropdownMenuCheckboxItem>\n                    <DropdownMenuCheckboxItem>Draft</DropdownMenuCheckboxItem>\n                    <DropdownMenuCheckboxItem>\n                      Archived\n                    </DropdownMenuCheckboxItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n                <Button size=\"sm\" variant=\"outline\" className=\"h-8 gap-1\">\n                  <File className=\"h-3.5 w-3.5\" />\n                  <span className=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                    Export\n                  </span>\n                </Button>\n                <Button size=\"sm\" className=\"h-8 gap-1\">\n                  <PlusCircle className=\"h-3.5 w-3.5\" />\n                  <span className=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                    Add Product\n                  </span>\n                </Button>\n              </div>\n            </div>\n            <TabsContent value=\"all\">\n              <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.\">\n                <CardHeader>\n                  <CardTitle>Products</CardTitle>\n                  <CardDescription>\n                    Manage your products and view their sales performance.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead className=\"hidden w-[100px] sm:table-cell\">\n                          <span className=\"sr-only\">Image</span>\n                        </TableHead>\n                        <TableHead>Name</TableHead>\n                        <TableHead>Status</TableHead>\n                        <TableHead className=\"hidden md:table-cell\">\n                          Price\n                        </TableHead>\n                        <TableHead className=\"hidden md:table-cell\">\n                          Total Sales\n                        </TableHead>\n                        <TableHead className=\"hidden md:table-cell\">\n                          Created at\n                        </TableHead>\n                        <TableHead>\n                          <span className=\"sr-only\">Actions</span>\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Laser Lemonade Machine\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Draft</Badge>\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          $499.99\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          25\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-07-12 10:42 AM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Hypernova Headphones\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          $129.99\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          100\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-10-18 03:21 PM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          AeroGlow Desk Lamp\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          $39.99\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          50\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-11-29 08:15 AM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          TechTonic Energy Drink\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"secondary\">Draft</Badge>\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          $2.99\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          0\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-12-25 11:59 PM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Gamer Gear Pro Controller\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          $59.99\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          75\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2024-01-01 12:00 AM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Luminous VR Headset\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          $199.99\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          30\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2024-02-14 02:14 PM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n                <CardFooter>\n                  <div className=\"text-xs text-muted-foreground\">\n                    Showing <strong>1-10</strong> of <strong>32</strong>{\" \"}\n                    products\n                  </div>\n                </CardFooter>\n              </Card>\n            </TabsContent>\n          </Tabs>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/dashboard-07.json b/apps/www/public/r/styles/default/dashboard-07.json
deleted file mode 100644
index 6dee0025780..00000000000
--- a/apps/www/public/r/styles/default/dashboard-07.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "name": "dashboard-07",
-  "type": "registry:block",
-  "registryDependencies": [
-    "badge",
-    "breadcrumb",
-    "button",
-    "card",
-    "dropdown-menu",
-    "input",
-    "pagination",
-    "progress",
-    "separator",
-    "sheet",
-    "table",
-    "tabs",
-    "tooltip"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-07.tsx",
-      "content": "import Image from \"next/image\"\nimport Link from \"next/link\"\nimport {\n  ChevronLeft,\n  Home,\n  LineChart,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Upload,\n  Users2,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\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  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  DropdownMenu,\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 { Label } from \"@/registry/default/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/default/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col bg-muted/40\">\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n        <nav className=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n          <Link\n            href=\"#\"\n            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\"\n          >\n            <Package2 className=\"h-4 w-4 transition-all group-hover:scale-110\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Home className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Dashboard</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Dashboard</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <ShoppingCart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Orders</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Orders</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Package className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Products</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Products</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Users2 className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Customers</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Customers</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <LineChart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Analytics</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Analytics</TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Settings className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Settings</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Settings</TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n        <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\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button size=\"icon\" variant=\"outline\" className=\"sm:hidden\">\n                <PanelLeft className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle Menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"sm:max-w-xs\">\n              <nav className=\"grid gap-6 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  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\"\n                >\n                  <Package2 className=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users2 className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Settings\n                </Link>\n              </nav>\n            </SheetContent>\n          </Sheet>\n          <Breadcrumb className=\"hidden md:flex\">\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Dashboard</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Products</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Edit Product</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <div className=\"relative ml-auto flex-1 md:grow-0\">\n            <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n            />\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"overflow-hidden rounded-full\"\n              >\n                <Image\n                  src=\"/placeholder-user.jpg\"\n                  width={36}\n                  height={36}\n                  alt=\"Avatar\"\n                  className=\"overflow-hidden rounded-full\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n          <div className=\"mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4\">\n            <div className=\"flex items-center gap-4\">\n              <Button variant=\"outline\" size=\"icon\" className=\"h-7 w-7\">\n                <ChevronLeft className=\"h-4 w-4\" />\n                <span className=\"sr-only\">Back</span>\n              </Button>\n              <h1 className=\"flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0\">\n                Pro Controller\n              </h1>\n              <Badge variant=\"outline\" className=\"ml-auto sm:ml-0\">\n                In stock\n              </Badge>\n              <div className=\"hidden items-center gap-2 md:ml-auto md:flex\">\n                <Button variant=\"outline\" size=\"sm\">\n                  Discard\n                </Button>\n                <Button size=\"sm\">Save Product</Button>\n              </div>\n            </div>\n            <div className=\"grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8\">\n              <div className=\"grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8\">\n                <Card x-chunk=\"A card with a form to edit the product details\">\n                  <CardHeader>\n                    <CardTitle>Product Details</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-6\">\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"name\">Name</Label>\n                        <Input\n                          id=\"name\"\n                          type=\"text\"\n                          className=\"w-full\"\n                          defaultValue=\"Gamer Gear Pro Controller\"\n                        />\n                      </div>\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"description\">Description</Label>\n                        <Textarea\n                          id=\"description\"\n                          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.\"\n                          className=\"min-h-32\"\n                        />\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n                <Card x-chunk=\"A card with a form to edit the product stock and variants\">\n                  <CardHeader>\n                    <CardTitle>Stock</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <Table>\n                      <TableHeader>\n                        <TableRow>\n                          <TableHead className=\"w-[100px]\">SKU</TableHead>\n                          <TableHead>Stock</TableHead>\n                          <TableHead>Price</TableHead>\n                          <TableHead className=\"w-[100px]\">Size</TableHead>\n                        </TableRow>\n                      </TableHeader>\n                      <TableBody>\n                        <TableRow>\n                          <TableCell className=\"font-semibold\">\n                            GGPC-001\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"stock-1\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"stock-1\"\n                              type=\"number\"\n                              defaultValue=\"100\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"price-1\" className=\"sr-only\">\n                              Price\n                            </Label>\n                            <Input\n                              id=\"price-1\"\n                              type=\"number\"\n                              defaultValue=\"99.99\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <ToggleGroup\n                              type=\"single\"\n                              defaultValue=\"s\"\n                              variant=\"outline\"\n                            >\n                              <ToggleGroupItem value=\"s\">S</ToggleGroupItem>\n                              <ToggleGroupItem value=\"m\">M</ToggleGroupItem>\n                              <ToggleGroupItem value=\"l\">L</ToggleGroupItem>\n                            </ToggleGroup>\n                          </TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell className=\"font-semibold\">\n                            GGPC-002\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"stock-2\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"stock-2\"\n                              type=\"number\"\n                              defaultValue=\"143\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"price-2\" className=\"sr-only\">\n                              Price\n                            </Label>\n                            <Input\n                              id=\"price-2\"\n                              type=\"number\"\n                              defaultValue=\"99.99\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <ToggleGroup\n                              type=\"single\"\n                              defaultValue=\"m\"\n                              variant=\"outline\"\n                            >\n                              <ToggleGroupItem value=\"s\">S</ToggleGroupItem>\n                              <ToggleGroupItem value=\"m\">M</ToggleGroupItem>\n                              <ToggleGroupItem value=\"l\">L</ToggleGroupItem>\n                            </ToggleGroup>\n                          </TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell className=\"font-semibold\">\n                            GGPC-003\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"stock-3\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"stock-3\"\n                              type=\"number\"\n                              defaultValue=\"32\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"price-3\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"price-3\"\n                              type=\"number\"\n                              defaultValue=\"99.99\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <ToggleGroup\n                              type=\"single\"\n                              defaultValue=\"s\"\n                              variant=\"outline\"\n                            >\n                              <ToggleGroupItem value=\"s\">S</ToggleGroupItem>\n                              <ToggleGroupItem value=\"m\">M</ToggleGroupItem>\n                              <ToggleGroupItem value=\"l\">L</ToggleGroupItem>\n                            </ToggleGroup>\n                          </TableCell>\n                        </TableRow>\n                      </TableBody>\n                    </Table>\n                  </CardContent>\n                  <CardFooter className=\"justify-center border-t p-4\">\n                    <Button size=\"sm\" variant=\"ghost\" className=\"gap-1\">\n                      <PlusCircle className=\"h-3.5 w-3.5\" />\n                      Add Variant\n                    </Button>\n                  </CardFooter>\n                </Card>\n                <Card x-chunk=\"A card with a form to edit the product category and subcategory\">\n                  <CardHeader>\n                    <CardTitle>Product Category</CardTitle>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-6 sm:grid-cols-3\">\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"category\">Category</Label>\n                        <Select>\n                          <SelectTrigger\n                            id=\"category\"\n                            aria-label=\"Select category\"\n                          >\n                            <SelectValue placeholder=\"Select category\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            <SelectItem value=\"clothing\">Clothing</SelectItem>\n                            <SelectItem value=\"electronics\">\n                              Electronics\n                            </SelectItem>\n                            <SelectItem value=\"accessories\">\n                              Accessories\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </div>\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"subcategory\">\n                          Subcategory (optional)\n                        </Label>\n                        <Select>\n                          <SelectTrigger\n                            id=\"subcategory\"\n                            aria-label=\"Select subcategory\"\n                          >\n                            <SelectValue placeholder=\"Select subcategory\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            <SelectItem value=\"t-shirts\">T-Shirts</SelectItem>\n                            <SelectItem value=\"hoodies\">Hoodies</SelectItem>\n                            <SelectItem value=\"sweatshirts\">\n                              Sweatshirts\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n              </div>\n              <div className=\"grid auto-rows-max items-start gap-4 lg:gap-8\">\n                <Card x-chunk=\"A card with a form to edit the product status\">\n                  <CardHeader>\n                    <CardTitle>Product Status</CardTitle>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-6\">\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"status\">Status</Label>\n                        <Select>\n                          <SelectTrigger id=\"status\" aria-label=\"Select status\">\n                            <SelectValue placeholder=\"Select status\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            <SelectItem value=\"draft\">Draft</SelectItem>\n                            <SelectItem value=\"published\">Active</SelectItem>\n                            <SelectItem value=\"archived\">Archived</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n                <Card\n                  className=\"overflow-hidden\"\n                  x-chunk=\"A card with a form to upload product images\"\n                >\n                  <CardHeader>\n                    <CardTitle>Product Images</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-2\">\n                      <Image\n                        alt=\"Product image\"\n                        className=\"aspect-square w-full rounded-md object-cover\"\n                        height=\"300\"\n                        src=\"/placeholder.svg\"\n                        width=\"300\"\n                      />\n                      <div className=\"grid grid-cols-3 gap-2\">\n                        <button>\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square w-full rounded-md object-cover\"\n                            height=\"84\"\n                            src=\"/placeholder.svg\"\n                            width=\"84\"\n                          />\n                        </button>\n                        <button>\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square w-full rounded-md object-cover\"\n                            height=\"84\"\n                            src=\"/placeholder.svg\"\n                            width=\"84\"\n                          />\n                        </button>\n                        <button className=\"flex aspect-square w-full items-center justify-center rounded-md border border-dashed\">\n                          <Upload className=\"h-4 w-4 text-muted-foreground\" />\n                          <span className=\"sr-only\">Upload</span>\n                        </button>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n                <Card x-chunk=\"A card with a call to action to archive the product\">\n                  <CardHeader>\n                    <CardTitle>Archive Product</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit.\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <div></div>\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Archive Product\n                    </Button>\n                  </CardContent>\n                </Card>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-center gap-2 md:hidden\">\n              <Button variant=\"outline\" size=\"sm\">\n                Discard\n              </Button>\n              <Button size=\"sm\">Save Product</Button>\n            </div>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/data-table-demo.json b/apps/www/public/r/styles/default/data-table-demo.json
index f9dbcec58c2..3dda9e6937e 100644
--- a/apps/www/public/r/styles/default/data-table-demo.json
+++ b/apps/www/public/r/styles/default/data-table-demo.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/data-table-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  SortingState,\n  VisibilityState,\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 type 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 h-4 w-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 = 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=\"h-8 w-8 p-0\">\n              <span className=\"sr-only\">Open menu</span>\n              <MoreHorizontal className=\"h-4 w-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          }\n          className=\"max-w-sm\"\n        />\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"ml-auto\">\n              Columns <ChevronDown className=\"ml-2 h-4 w-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=\"flex-1 text-sm text-muted-foreground\">\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",
+      "path": "examples/data-table-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  SortingState,\n  VisibilityState,\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 type 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 />\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 = 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=\"h-8 w-8 p-0\">\n              <span className=\"sr-only\">Open menu</span>\n              <MoreHorizontal />\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          }\n          className=\"max-w-sm\"\n        />\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"ml-auto\">\n              Columns <ChevronDown />\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=\"flex-1 text-sm text-muted-foreground\">\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/www/public/r/styles/default/date-picker-demo.json b/apps/www/public/r/styles/default/date-picker-demo.json
index 712ad3d8b6f..9d2261df835 100644
--- a/apps/www/public/r/styles/default/date-picker-demo.json
+++ b/apps/www/public/r/styles/default/date-picker-demo.json
@@ -11,8 +11,8 @@
   ],
   "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 { cn } 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={cn(\n            \"w-[280px] 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\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          initialFocus\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "path": "examples/date-picker-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } 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={cn(\n            \"w-[280px] 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\">\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/www/public/r/styles/default/date-picker-form.json b/apps/www/public/r/styles/default/date-picker-form.json
index 07af6dfcf69..4334a3bf591 100644
--- a/apps/www/public/r/styles/default/date-picker-form.json
+++ b/apps/www/public/r/styles/default/date-picker-form.json
@@ -12,7 +12,7 @@
   ],
   "files": [
     {
-      "path": "example/date-picker-form.tsx",
+      "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 { toast } from \"@/registry/default/hooks/use-toast\"\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\"\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={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 h-4 w-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                    }\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/www/public/r/styles/default/date-picker-with-presets.json b/apps/www/public/r/styles/default/date-picker-with-presets.json
index b70426b6a12..f1a628e3230 100644
--- a/apps/www/public/r/styles/default/date-picker-with-presets.json
+++ b/apps/www/public/r/styles/default/date-picker-with-presets.json
@@ -12,7 +12,7 @@
   ],
   "files": [
     {
-      "path": "example/date-picker-with-presets.tsx",
+      "path": "examples/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 { cn } 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={cn(\n            \"w-[280px] 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=\"flex w-auto flex-col space-y-2 p-2\">\n        <Select\n          onValueChange={(value) =>\n            setDate(addDays(new Date(), 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/www/public/r/styles/default/date-picker-with-range.json b/apps/www/public/r/styles/default/date-picker-with-range.json
index 53e03e0b22b..34757a945ac 100644
--- a/apps/www/public/r/styles/default/date-picker-with-range.json
+++ b/apps/www/public/r/styles/default/date-picker-with-range.json
@@ -11,7 +11,7 @@
   ],
   "files": [
     {
-      "path": "example/date-picker-with-range.tsx",
+      "path": "examples/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 { DateRange } from \"react-day-picker\"\n\nimport { cn } 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={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 />\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/www/public/r/styles/default/demo-sidebar-controlled.json b/apps/www/public/r/styles/default/demo-sidebar-controlled.json
deleted file mode 100644
index 24d9bf9b065..00000000000
--- a/apps/www/public/r/styles/default/demo-sidebar-controlled.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-controlled",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-sidebar-controlled.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PieChart,\n  Send,\n} from \"lucide-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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/demo-sidebar-footer.json b/apps/www/public/r/styles/default/demo-sidebar-footer.json
deleted file mode 100644
index 5766814bc88..00000000000
--- a/apps/www/public/r/styles/default/demo-sidebar-footer.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-footer",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/demo-sidebar-group-action.json b/apps/www/public/r/styles/default/demo-sidebar-group-action.json
deleted file mode 100644
index 0a26af49f5b..00000000000
--- a/apps/www/public/r/styles/default/demo-sidebar-group-action.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-group-action",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/demo-sidebar-group-collapsible.json b/apps/www/public/r/styles/default/demo-sidebar-group-collapsible.json
deleted file mode 100644
index 9b160877911..00000000000
--- a/apps/www/public/r/styles/default/demo-sidebar-group-collapsible.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-group-collapsible",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/demo-sidebar-group.json b/apps/www/public/r/styles/default/demo-sidebar-group.json
deleted file mode 100644
index 16102d39393..00000000000
--- a/apps/www/public/r/styles/default/demo-sidebar-group.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-group",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/demo-sidebar-header.json b/apps/www/public/r/styles/default/demo-sidebar-header.json
deleted file mode 100644
index 2635faaa498..00000000000
--- a/apps/www/public/r/styles/default/demo-sidebar-header.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-header",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/demo-sidebar-menu-action.json b/apps/www/public/r/styles/default/demo-sidebar-menu-action.json
deleted file mode 100644
index 3e8e1c36d37..00000000000
--- a/apps/www/public/r/styles/default/demo-sidebar-menu-action.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-menu-action",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-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 side=\"right\" align=\"start\">\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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/demo-sidebar-menu-badge.json b/apps/www/public/r/styles/default/demo-sidebar-menu-badge.json
deleted file mode 100644
index 3cddb67bf5b..00000000000
--- a/apps/www/public/r/styles/default/demo-sidebar-menu-badge.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-menu-badge",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-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>{project.badge}</SidebarMenuBadge>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/demo-sidebar-menu-collapsible.json b/apps/www/public/r/styles/default/demo-sidebar-menu-collapsible.json
deleted file mode 100644
index b97bda7086e..00000000000
--- a/apps/www/public/r/styles/default/demo-sidebar-menu-collapsible.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-menu-collapsible",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/demo-sidebar-menu-sub.json b/apps/www/public/r/styles/default/demo-sidebar-menu-sub.json
deleted file mode 100644
index 4fc4ed4853d..00000000000
--- a/apps/www/public/r/styles/default/demo-sidebar-menu-sub.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-menu-sub",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/demo-sidebar-menu.json b/apps/www/public/r/styles/default/demo-sidebar-menu.json
deleted file mode 100644
index 57d16de3ab8..00000000000
--- a/apps/www/public/r/styles/default/demo-sidebar-menu.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-menu",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/demo-sidebar-rsc.json b/apps/www/public/r/styles/default/demo-sidebar-rsc.json
deleted file mode 100644
index 08683f49230..00000000000
--- a/apps/www/public/r/styles/default/demo-sidebar-rsc.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-rsc",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-sidebar-rsc.tsx",
-      "content": "import * as React from \"react\"\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  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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/demo-sidebar.json b/apps/www/public/r/styles/default/demo-sidebar.json
deleted file mode 100644
index 3a2ee380582..00000000000
--- a/apps/www/public/r/styles/default/demo-sidebar.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-sidebar.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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/dialog-close-button.json b/apps/www/public/r/styles/default/dialog-close-button.json
index 9062a7a6498..0537f73f64e 100644
--- a/apps/www/public/r/styles/default/dialog-close-button.json
+++ b/apps/www/public/r/styles/default/dialog-close-button.json
@@ -7,8 +7,8 @@
   ],
   "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://ui.shadcn.com/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=\"h-4 w-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",
+      "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://ui.shadcn.com/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 />\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/www/public/r/styles/default/dialog-demo.json b/apps/www/public/r/styles/default/dialog-demo.json
index c0e9f781e3e..a26f93a3e8f 100644
--- a/apps/www/public/r/styles/default/dialog-demo.json
+++ b/apps/www/public/r/styles/default/dialog-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/dialog-demo.tsx",
+      "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 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/www/public/r/styles/default/drawer-demo.json b/apps/www/public/r/styles/default/drawer-demo.json
index cde34c0c0fd..4ff1a133b00 100644
--- a/apps/www/public/r/styles/default/drawer-demo.json
+++ b/apps/www/public/r/styles/default/drawer-demo.json
@@ -6,8 +6,8 @@
   ],
   "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=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus className=\"h-4 w-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-[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 className=\"h-4 w-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",
+      "path": "examples/drawer-demo.tsx",
+      "content": "\"use client\"\n\nimport * 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=\"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:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/drawer-dialog.json b/apps/www/public/r/styles/default/drawer-dialog.json
index b531342a4e9..3465e269856 100644
--- a/apps/www/public/r/styles/default/drawer-dialog.json
+++ b/apps/www/public/r/styles/default/drawer-dialog.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/drawer-dialog.tsx",
+      "path": "examples/drawer-dialog.tsx",
       "content": "import * as React from \"react\"\n\nimport { cn } 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={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=\"shadcn@example.com\" />\n      </div>\n      <div className=\"grid gap-2\">\n        <Label htmlFor=\"username\">Username</Label>\n        <Input id=\"username\" defaultValue=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">Save changes</Button>\n    </form>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/dropdown-menu-checkboxes.json b/apps/www/public/r/styles/default/dropdown-menu-checkboxes.json
index f5f1f6174ff..1da209192d0 100644
--- a/apps/www/public/r/styles/default/dropdown-menu-checkboxes.json
+++ b/apps/www/public/r/styles/default/dropdown-menu-checkboxes.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/dropdown-menu-checkboxes.tsx",
+      "path": "examples/dropdown-menu-checkboxes.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { 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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/dropdown-menu-demo.json b/apps/www/public/r/styles/default/dropdown-menu-demo.json
index 208243dcff5..5cb0113ba0d 100644
--- a/apps/www/public/r/styles/default/dropdown-menu-demo.json
+++ b/apps/www/public/r/styles/default/dropdown-menu-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/dropdown-menu-demo.tsx",
+      "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/www/public/r/styles/default/dropdown-menu-radio-group.json b/apps/www/public/r/styles/default/dropdown-menu-radio-group.json
index f1a08d49274..731a67d9592 100644
--- a/apps/www/public/r/styles/default/dropdown-menu-radio-group.json
+++ b/apps/www/public/r/styles/default/dropdown-menu-radio-group.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/dropdown-menu-radio-group.tsx",
+      "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 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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/hover-card-demo.json b/apps/www/public/r/styles/default/hover-card-demo.json
index 9a17825dd6e..c0ea2c87290 100644
--- a/apps/www/public/r/styles/default/hover-card-demo.json
+++ b/apps/www/public/r/styles/default/hover-card-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/hover-card-demo.tsx",
+      "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 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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/input-demo.json b/apps/www/public/r/styles/default/input-demo.json
index 14795e8c635..333bda78e85 100644
--- a/apps/www/public/r/styles/default/input-demo.json
+++ b/apps/www/public/r/styles/default/input-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/input-demo.tsx",
+      "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/www/public/r/styles/default/input-disabled.json b/apps/www/public/r/styles/default/input-disabled.json
index dae91f9c396..8cd65cc434b 100644
--- a/apps/www/public/r/styles/default/input-disabled.json
+++ b/apps/www/public/r/styles/default/input-disabled.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/input-disabled.tsx",
+      "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/www/public/r/styles/default/input-file.json b/apps/www/public/r/styles/default/input-file.json
index fb3cf3d4adf..9e47e550353 100644
--- a/apps/www/public/r/styles/default/input-file.json
+++ b/apps/www/public/r/styles/default/input-file.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/input-file.tsx",
+      "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/www/public/r/styles/default/input-form.json b/apps/www/public/r/styles/default/input-form.json
index ee87141425f..3a6c3af3d78 100644
--- a/apps/www/public/r/styles/default/input-form.json
+++ b/apps/www/public/r/styles/default/input-form.json
@@ -8,7 +8,7 @@
   ],
   "files": [
     {
-      "path": "example/input-form.tsx",
+      "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 { toast } from \"@/registry/default/hooks/use-toast\"\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\"\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=\"shadcn\" {...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/www/public/r/styles/default/input-otp-controlled.json b/apps/www/public/r/styles/default/input-otp-controlled.json
index 82c2a61cef8..30f8166643c 100644
--- a/apps/www/public/r/styles/default/input-otp-controlled.json
+++ b/apps/www/public/r/styles/default/input-otp-controlled.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/input-otp-controlled.tsx",
+      "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          <>You entered: {value}</>\n        )}\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/input-otp-demo.json b/apps/www/public/r/styles/default/input-otp-demo.json
index a418a835da0..a71e5d5c9bc 100644
--- a/apps/www/public/r/styles/default/input-otp-demo.json
+++ b/apps/www/public/r/styles/default/input-otp-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/input-otp-demo.tsx",
+      "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/www/public/r/styles/default/input-otp-form.json b/apps/www/public/r/styles/default/input-otp-form.json
index b4347348ca7..31fa707ed1f 100644
--- a/apps/www/public/r/styles/default/input-otp-form.json
+++ b/apps/www/public/r/styles/default/input-otp-form.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/input-otp-form.tsx",
+      "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 { toast } from \"@/registry/default/hooks/use-toast\"\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\"\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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/input-otp-pattern.json b/apps/www/public/r/styles/default/input-otp-pattern.json
index 9f2bcb58e58..b5e20863cb1 100644
--- a/apps/www/public/r/styles/default/input-otp-pattern.json
+++ b/apps/www/public/r/styles/default/input-otp-pattern.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/input-otp-pattern.tsx",
+      "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 maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>\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/www/public/r/styles/default/input-otp-separator.json b/apps/www/public/r/styles/default/input-otp-separator.json
index cec8e3305cc..c31c1604662 100644
--- a/apps/www/public/r/styles/default/input-otp-separator.json
+++ b/apps/www/public/r/styles/default/input-otp-separator.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/input-otp-separator.tsx",
+      "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/www/public/r/styles/default/input-with-button.json b/apps/www/public/r/styles/default/input-with-button.json
index 50bda6bd91e..60252f80b46 100644
--- a/apps/www/public/r/styles/default/input-with-button.json
+++ b/apps/www/public/r/styles/default/input-with-button.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/input-with-button.tsx",
+      "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/www/public/r/styles/default/input-with-label.json b/apps/www/public/r/styles/default/input-with-label.json
index 21f2d5cecd3..0d615e56cbe 100644
--- a/apps/www/public/r/styles/default/input-with-label.json
+++ b/apps/www/public/r/styles/default/input-with-label.json
@@ -8,7 +8,7 @@
   ],
   "files": [
     {
-      "path": "example/input-with-label.tsx",
+      "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/www/public/r/styles/default/input-with-text.json b/apps/www/public/r/styles/default/input-with-text.json
index de90792cc9a..bd2d1f1c112 100644
--- a/apps/www/public/r/styles/default/input-with-text.json
+++ b/apps/www/public/r/styles/default/input-with-text.json
@@ -8,7 +8,7 @@
   ],
   "files": [
     {
-      "path": "example/input-with-text.tsx",
+      "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-sm text-muted-foreground\">Enter your email address.</p>\n    </div>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/input.json b/apps/www/public/r/styles/default/input.json
index 24dcd50e3c1..865f74f5a6e 100644
--- a/apps/www/public/r/styles/default/input.json
+++ b/apps/www/public/r/styles/default/input.json
@@ -4,7 +4,7 @@
   "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          \"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm 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\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Input = React.forwardRef<HTMLInputElement, React.ComponentProps<\"input\">>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"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\",\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/www/public/r/styles/default/label-demo.json b/apps/www/public/r/styles/default/label-demo.json
index c8e85715472..0a26d355e12 100644
--- a/apps/www/public/r/styles/default/label-demo.json
+++ b/apps/www/public/r/styles/default/label-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/label-demo.tsx",
+      "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/www/public/r/styles/default/login-01.json b/apps/www/public/r/styles/default/login-01.json
index 97acdc72ca0..35053a70877 100644
--- a/apps/www/public/r/styles/default/login-01.json
+++ b/apps/www/public/r/styles/default/login-01.json
@@ -10,15 +10,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          <Link href=\"#\" className=\"underline\">\n            Sign up\n          </Link>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
+      "path": "blocks/login-01/components/login-form.tsx",
+      "content": "import { cn } 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={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/www/public/r/styles/default/login-02.json b/apps/www/public/r/styles/default/login-02.json
new file mode 100644
index 00000000000..d10991cc6e8
--- /dev/null
+++ b/apps/www/public/r/styles/default/login-02.json
@@ -0,0 +1,29 @@
+{
+  "name": "login-02",
+  "type": "registry:block",
+  "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 { cn } 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={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 id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </div>\n        <div className=\"grid gap-2\">\n          <div className=\"flex items-center\">\n            <Label htmlFor=\"password\">Password</Label>\n            <a\n              href=\"#\"\n              className=\"ml-auto 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 variant=\"outline\" className=\"w-full\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\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/www/public/r/styles/default/login-03.json b/apps/www/public/r/styles/default/login-03.json
new file mode 100644
index 00000000000..4b1e6a49db9
--- /dev/null
+++ b/apps/www/public/r/styles/default/login-03.json
@@ -0,0 +1,29 @@
+{
+  "name": "login-03",
+  "type": "registry:block",
+  "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 href=\"#\" className=\"flex items-center gap-2 self-center 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        <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 \"@/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={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 variant=\"outline\" className=\"w-full\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\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 variant=\"outline\" className=\"w-full\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\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 <a href=\"#\">Terms of Service</a>{\" \"}\n        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/www/public/r/styles/default/login-04.json b/apps/www/public/r/styles/default/login-04.json
new file mode 100644
index 00000000000..3889fe15579
--- /dev/null
+++ b/apps/www/public/r/styles/default/login-04.json
@@ -0,0 +1,29 @@
+{
+  "name": "login-04",
+  "type": "registry:block",
+  "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 { cn } 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={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 variant=\"outline\" className=\"w-full\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\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 variant=\"outline\" className=\"w-full\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\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 variant=\"outline\" className=\"w-full\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\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 <a href=\"#\">Terms of Service</a>{\" \"}\n        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/www/public/r/styles/default/login-05.json b/apps/www/public/r/styles/default/login-05.json
new file mode 100644
index 00000000000..d644a48be0d
--- /dev/null
+++ b/apps/www/public/r/styles/default/login-05.json
@@ -0,0 +1,29 @@
+{
+  "name": "login-05",
+  "type": "registry:block",
+  "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 { cn } 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={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 xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\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 xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\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 <a href=\"#\">Terms of Service</a>{\" \"}\n        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/www/public/r/styles/default/menubar-demo.json b/apps/www/public/r/styles/default/menubar-demo.json
index dabf3e59eea..8dba2b97b4e 100644
--- a/apps/www/public/r/styles/default/menubar-demo.json
+++ b/apps/www/public/r/styles/default/menubar-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/menubar-demo.tsx",
+      "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>Always Show Bookmarks Bar</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/www/public/r/styles/default/mode-toggle.json b/apps/www/public/r/styles/default/mode-toggle.json
index 1392c9d904c..b3c694438e1 100644
--- a/apps/www/public/r/styles/default/mode-toggle.json
+++ b/apps/www/public/r/styles/default/mode-toggle.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/mode-toggle.tsx",
+      "path": "examples/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=\"h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n          <Moon className=\"absolute h-[1.2rem] w-[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/www/public/r/styles/default/navigation-menu-demo.json b/apps/www/public/r/styles/default/navigation-menu-demo.json
index 97646b815b0..085f394005f 100644
--- a/apps/www/public/r/styles/default/navigation-menu-demo.json
+++ b/apps/www/public/r/styles/default/navigation-menu-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/navigation-menu-demo.tsx",
+      "path": "examples/navigation-menu-demo.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { cn } 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=\"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                    <Icons.logo className=\"h-6 w-6\" />\n                    <div className=\"mb-2 mt-4 text-lg font-medium\">\n                      shadcn/ui\n                    </div>\n                    <p className=\"text-sm leading-tight text-muted-foreground\">\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={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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/pagination-demo.json b/apps/www/public/r/styles/default/pagination-demo.json
index a79be42cec0..3d8889b6828 100644
--- a/apps/www/public/r/styles/default/pagination-demo.json
+++ b/apps/www/public/r/styles/default/pagination-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/pagination-demo.tsx",
+      "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/www/public/r/styles/default/popover-demo.json b/apps/www/public/r/styles/default/popover-demo.json
index 7e8bb49e842..40b051327f6 100644
--- a/apps/www/public/r/styles/default/popover-demo.json
+++ b/apps/www/public/r/styles/default/popover-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/popover-demo.tsx",
+      "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-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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/progress-demo.json b/apps/www/public/r/styles/default/progress-demo.json
index a291a76ebbc..3f1e7f5e381 100644
--- a/apps/www/public/r/styles/default/progress-demo.json
+++ b/apps/www/public/r/styles/default/progress-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/progress-demo.tsx",
+      "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-[60%]\" />\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/radio-group-demo.json b/apps/www/public/r/styles/default/radio-group-demo.json
index e7bd3ca4981..f2189034d78 100644
--- a/apps/www/public/r/styles/default/radio-group-demo.json
+++ b/apps/www/public/r/styles/default/radio-group-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/radio-group-demo.tsx",
+      "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/www/public/r/styles/default/radio-group-form.json b/apps/www/public/r/styles/default/radio-group-form.json
index 3f01cf606cc..cbbf4ac9f17 100644
--- a/apps/www/public/r/styles/default/radio-group-form.json
+++ b/apps/www/public/r/styles/default/radio-group-form.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/radio-group-form.tsx",
+      "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 { toast } from \"@/registry/default/hooks/use-toast\"\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\"\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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/resizable-demo-with-handle.json b/apps/www/public/r/styles/default/resizable-demo-with-handle.json
index 1f4eb67889a..38c5d00a428 100644
--- a/apps/www/public/r/styles/default/resizable-demo-with-handle.json
+++ b/apps/www/public/r/styles/default/resizable-demo-with-handle.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/resizable-demo-with-handle.tsx",
+      "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 md:min-w-[450px]\"\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/www/public/r/styles/default/resizable-demo.json b/apps/www/public/r/styles/default/resizable-demo.json
index 5b4cb18655d..0343be7614b 100644
--- a/apps/www/public/r/styles/default/resizable-demo.json
+++ b/apps/www/public/r/styles/default/resizable-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/resizable-demo.tsx",
+      "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 md:min-w-[450px]\"\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/www/public/r/styles/default/resizable-handle.json b/apps/www/public/r/styles/default/resizable-handle.json
index c7f66a76c9f..bae5efc0708 100644
--- a/apps/www/public/r/styles/default/resizable-handle.json
+++ b/apps/www/public/r/styles/default/resizable-handle.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/resizable-handle.tsx",
+      "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 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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/resizable-vertical.json b/apps/www/public/r/styles/default/resizable-vertical.json
index 0ad73a64162..ec4f2e425b7 100644
--- a/apps/www/public/r/styles/default/resizable-vertical.json
+++ b/apps/www/public/r/styles/default/resizable-vertical.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/resizable-vertical.tsx",
+      "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 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\">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/www/public/r/styles/default/scroll-area-demo.json b/apps/www/public/r/styles/default/scroll-area-demo.json
index 3021a54df52..04d29d4d595 100644
--- a/apps/www/public/r/styles/default/scroll-area-demo.json
+++ b/apps/www/public/r/styles/default/scroll-area-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/scroll-area-demo.tsx",
+      "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/www/public/r/styles/default/scroll-area-horizontal-demo.json b/apps/www/public/r/styles/default/scroll-area-horizontal-demo.json
index b6abfbefd34..39a6afaba8b 100644
--- a/apps/www/public/r/styles/default/scroll-area-horizontal-demo.json
+++ b/apps/www/public/r/styles/default/scroll-area-horizontal-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/scroll-area-horizontal-demo.tsx",
+      "path": "examples/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] h-fit w-fit object-cover\"\n                width={300}\n                height={400}\n              />\n            </div>\n            <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n              Photo by{\" \"}\n              <span className=\"font-semibold text-foreground\">\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/www/public/r/styles/default/select-demo.json b/apps/www/public/r/styles/default/select-demo.json
index 4fc98a3a98e..202f23a199c 100644
--- a/apps/www/public/r/styles/default/select-demo.json
+++ b/apps/www/public/r/styles/default/select-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/select-demo.tsx",
+      "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/www/public/r/styles/default/select-form.json b/apps/www/public/r/styles/default/select-form.json
index 5fd7543fb5e..533a220c956 100644
--- a/apps/www/public/r/styles/default/select-form.json
+++ b/apps/www/public/r/styles/default/select-form.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/select-form.tsx",
+      "path": "examples/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 { toast } from \"@/registry/default/hooks/use-toast\"\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\"\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                <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/www/public/r/styles/default/select-scrollable.json b/apps/www/public/r/styles/default/select-scrollable.json
index 78b24f103a3..bc484cca1d4 100644
--- a/apps/www/public/r/styles/default/select-scrollable.json
+++ b/apps/www/public/r/styles/default/select-scrollable.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/select-scrollable.tsx",
+      "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\">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",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/separator-demo.json b/apps/www/public/r/styles/default/separator-demo.json
index 826958105ff..4c5e62f1a18 100644
--- a/apps/www/public/r/styles/default/separator-demo.json
+++ b/apps/www/public/r/styles/default/separator-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/separator-demo.tsx",
+      "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\">Radix Primitives</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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/sheet-demo.json b/apps/www/public/r/styles/default/sheet-demo.json
index e7d3271e2ba..dfec694bc8e 100644
--- a/apps/www/public/r/styles/default/sheet-demo.json
+++ b/apps/www/public/r/styles/default/sheet-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/sheet-demo.tsx",
+      "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 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",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/sheet-side.json b/apps/www/public/r/styles/default/sheet-side.json
index b2201afb036..63eb3b31677 100644
--- a/apps/www/public/r/styles/default/sheet-side.json
+++ b/apps/www/public/r/styles/default/sheet-side.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/sheet-side.tsx",
+      "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 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",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/sidebar-01.json b/apps/www/public/r/styles/default/sidebar-01.json
index 0fd46c5f39e..6cb568a10b0 100644
--- a/apps/www/public/r/styles/default/sidebar-01.json
+++ b/apps/www/public/r/styles/default/sidebar-01.json
@@ -11,25 +11,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=\"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",
+      "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",
-      "type": "registry:component"
+      "path": "blocks/sidebar-01/components/app-sidebar.tsx",
+      "content": "import * 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 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",
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-01/components/search-form.tsx",
+      "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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-01/components/version-switcher.tsx",
+      "path": "blocks/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=\"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 && <Check className=\"ml-auto\" />}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-02.json b/apps/www/public/r/styles/default/sidebar-02.json
index 06db8437b15..4a98160b54a 100644
--- a/apps/www/public/r/styles/default/sidebar-02.json
+++ b/apps/www/public/r/styles/default/sidebar-02.json
@@ -11,25 +11,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=\"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",
+      "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-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 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",
-      "type": "registry:component"
+      "path": "blocks/sidebar-02/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { ChevronRight } from \"lucide-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 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",
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-02/components/search-form.tsx",
+      "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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-02/components/version-switcher.tsx",
+      "path": "blocks/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=\"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 && <Check className=\"ml-auto\" />}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-03.json b/apps/www/public/r/styles/default/sidebar-03.json
index a941f4f00f9..966a036ff08 100644
--- a/apps/www/public/r/styles/default/sidebar-03.json
+++ b/apps/www/public/r/styles/default/sidebar-03.json
@@ -8,15 +8,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=\"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",
+      "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",
+      "path": "blocks/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=\"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 asChild isActive={item.isActive}>\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"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-04.json b/apps/www/public/r/styles/default/sidebar-04.json
index 26bdc4fc134..f95fa2d04f8 100644
--- a/apps/www/public/r/styles/default/sidebar-04.json
+++ b/apps/www/public/r/styles/default/sidebar-04.json
@@ -9,15 +9,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=\"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",
+      "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",
+      "path": "blocks/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=\"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 asChild isActive={item.isActive}>\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"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-05.json b/apps/www/public/r/styles/default/sidebar-05.json
index caeb5dbb00e..668f9b0ef44 100644
--- a/apps/www/public/r/styles/default/sidebar-05.json
+++ b/apps/www/public/r/styles/default/sidebar-05.json
@@ -11,20 +11,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=\"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",
+      "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=\"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"
+      "path": "blocks/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/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",
+      "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"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-06.json b/apps/www/public/r/styles/default/sidebar-06.json
index 22fb95114a3..3713fc9e0d3 100644
--- a/apps/www/public/r/styles/default/sidebar-06.json
+++ b/apps/www/public/r/styles/default/sidebar-06.json
@@ -11,25 +11,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=\"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",
+      "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=\"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"
+      "path": "blocks/sidebar-06/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-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",
+      "path": "blocks/sidebar-06/components/nav-main.tsx",
       "content": "\"use client\"\n\nimport { MoreHorizontal, type LucideIcon } 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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-06/components/sidebar-opt-in-form.tsx",
+      "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\">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=\"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"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-07.json b/apps/www/public/r/styles/default/sidebar-07.json
index a88124f4e91..d113c0c9fa0 100644
--- a/apps/www/public/r/styles/default/sidebar-07.json
+++ b/apps/www/public/r/styles/default/sidebar-07.json
@@ -12,35 +12,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=\"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",
+      "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/shadcn.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"
+      "path": "blocks/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/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: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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",
+      "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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-07/components/nav-projects.tsx",
+      "path": "blocks/sidebar-07/components/nav-projects.tsx",
       "content": "\"use client\"\n\nimport {\n  Folder,\n  Forward,\n  MoreHorizontal,\n  Trash2,\n  type LucideIcon,\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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-07/components/nav-user.tsx",
+      "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 {\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=\"h-8 w-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=\"h-8 w-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",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-07/components/team-switcher.tsx",
+      "path": "blocks/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=\"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\">{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-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>⌘{index + 1}</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\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-08.json b/apps/www/public/r/styles/default/sidebar-08.json
index 6743e29a32b..53e74c17a4b 100644
--- a/apps/www/public/r/styles/default/sidebar-08.json
+++ b/apps/www/public/r/styles/default/sidebar-08.json
@@ -12,35 +12,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=\"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",
+      "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/shadcn.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\">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",
-      "type": "registry:component"
+      "path": "blocks/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/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: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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\">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",
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-08/components/nav-main.tsx",
+      "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 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                  <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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-08/components/nav-projects.tsx",
+      "path": "blocks/sidebar-08/components/nav-projects.tsx",
       "content": "\"use client\"\n\nimport {\n  Folder,\n  MoreHorizontal,\n  Share,\n  Trash2,\n  type LucideIcon,\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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-08/components/nav-secondary.tsx",
+      "path": "blocks/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",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-08/components/nav-user.tsx",
+      "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 {\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=\"h-8 w-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=\"h-8 w-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",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-09.json b/apps/www/public/r/styles/default/sidebar-09.json
index 8fca0ef4277..ef59e8615a6 100644
--- a/apps/www/public/r/styles/default/sidebar-09.json
+++ b/apps/www/public/r/styles/default/sidebar-09.json
@@ -13,15 +13,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=\"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",
+      "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/nav-user.tsx",
+      "path": "blocks/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/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: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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=\"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\">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-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\">{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",
+      "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 {\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=\"h-8 w-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=\"h-8 w-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",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-10.json b/apps/www/public/r/styles/default/sidebar-10.json
index b8861595270..0a0a362aa08 100644
--- a/apps/www/public/r/styles/default/sidebar-10.json
+++ b/apps/www/public/r/styles/default/sidebar-10.json
@@ -12,45 +12,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=\"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",
+      "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",
-      "type": "registry:component"
+      "path": "blocks/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/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",
+      "path": "blocks/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=\"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 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 /> <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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-10/components/nav-favorites.tsx",
+      "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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-10/components/nav-main.tsx",
+      "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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-10/components/nav-secondary.tsx",
+      "path": "blocks/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",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-10/components/nav-workspaces.tsx",
+      "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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-10/components/team-switcher.tsx",
+      "path": "blocks/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=\"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\">{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-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>⌘{index + 1}</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\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-11.json b/apps/www/public/r/styles/default/sidebar-11.json
index c9943653c74..48ff824dc31 100644
--- a/apps/www/public/r/styles/default/sidebar-11.json
+++ b/apps/www/public/r/styles/default/sidebar-11.json
@@ -10,15 +10,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=\"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",
+      "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",
+      "path": "blocks/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",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-12.json b/apps/www/public/r/styles/default/sidebar-12.json
index decba07f7b2..27213e827bb 100644
--- a/apps/www/public/r/styles/default/sidebar-12.json
+++ b/apps/www/public/r/styles/default/sidebar-12.json
@@ -13,30 +13,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=\"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 key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\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 key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\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/shadcn.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"
+      "path": "blocks/sidebar-12/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-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: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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",
+      "path": "blocks/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 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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-12/components/date-picker.tsx",
+      "path": "blocks/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",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-12/components/nav-user.tsx",
+      "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 {\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=\"h-8 w-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=\"h-8 w-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",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-13.json b/apps/www/public/r/styles/default/sidebar-13.json
index 66896db3ef0..24cc0116b39 100644
--- a/apps/www/public/r/styles/default/sidebar-13.json
+++ b/apps/www/public/r/styles/default/sidebar-13.json
@@ -10,15 +10,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",
+      "path": "blocks/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=\"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"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-14.json b/apps/www/public/r/styles/default/sidebar-14.json
index 308ab7bcd8f..82abd62f2d5 100644
--- a/apps/www/public/r/styles/default/sidebar-14.json
+++ b/apps/www/public/r/styles/default/sidebar-14.json
@@ -8,15 +8,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=\"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",
+      "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",
+      "path": "blocks/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                    <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"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-15.json b/apps/www/public/r/styles/default/sidebar-15.json
index 0da86af98b8..0e00bdd4d08 100644
--- a/apps/www/public/r/styles/default/sidebar-15.json
+++ b/apps/www/public/r/styles/default/sidebar-15.json
@@ -14,60 +14,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=\"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",
+      "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",
+      "path": "blocks/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 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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-15/components/date-picker.tsx",
+      "path": "blocks/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",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-15/components/nav-favorites.tsx",
+      "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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-15/components/nav-main.tsx",
+      "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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-15/components/nav-secondary.tsx",
+      "path": "blocks/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",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-15/components/nav-user.tsx",
+      "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 {\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=\"h-8 w-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=\"h-8 w-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",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-15/components/nav-workspaces.tsx",
+      "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"
+      "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",
-      "type": "registry:component"
+      "path": "blocks/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/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/shadcn.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"
+      "path": "blocks/sidebar-15/components/sidebar-right.tsx",
+      "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-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: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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",
+      "path": "blocks/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=\"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\">{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-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>⌘{index + 1}</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\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/sidebar-controlled.json b/apps/www/public/r/styles/default/sidebar-controlled.json
new file mode 100644
index 00000000000..eced8642905
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-controlled.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-controlled",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "internal/sidebar-controlled.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PieChart,\n  Send,\n} from \"lucide-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/www/public/r/styles/default/sidebar-demo.json b/apps/www/public/r/styles/default/sidebar-demo.json
new file mode 100644
index 00000000000..e310b1b9b67
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-demo.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-demo",
+  "type": "registry:internal",
+  "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/www/public/r/styles/default/sidebar-footer.json b/apps/www/public/r/styles/default/sidebar-footer.json
new file mode 100644
index 00000000000..868367e06ea
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-footer.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-footer",
+  "type": "registry:internal",
+  "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/www/public/r/styles/default/sidebar-group-action.json b/apps/www/public/r/styles/default/sidebar-group-action.json
new file mode 100644
index 00000000000..4014b441ce2
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-group-action.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-group-action",
+  "type": "registry:internal",
+  "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/www/public/r/styles/default/sidebar-group-collapsible.json b/apps/www/public/r/styles/default/sidebar-group-collapsible.json
new file mode 100644
index 00000000000..7c38dff0da5
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-group-collapsible.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-group-collapsible",
+  "type": "registry:internal",
+  "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/www/public/r/styles/default/sidebar-group.json b/apps/www/public/r/styles/default/sidebar-group.json
new file mode 100644
index 00000000000..f19ad725849
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-group.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-group",
+  "type": "registry:internal",
+  "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/www/public/r/styles/default/sidebar-header.json b/apps/www/public/r/styles/default/sidebar-header.json
new file mode 100644
index 00000000000..4a7923f2a4a
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-header.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-header",
+  "type": "registry:internal",
+  "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/www/public/r/styles/default/sidebar-menu-action.json b/apps/www/public/r/styles/default/sidebar-menu-action.json
new file mode 100644
index 00000000000..976f90b7c30
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-menu-action.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-menu-action",
+  "type": "registry:internal",
+  "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 side=\"right\" align=\"start\">\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/www/public/r/styles/default/sidebar-menu-badge.json b/apps/www/public/r/styles/default/sidebar-menu-badge.json
new file mode 100644
index 00000000000..02a3ec7b25d
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-menu-badge.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-menu-badge",
+  "type": "registry:internal",
+  "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>{project.badge}</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/www/public/r/styles/default/sidebar-menu-collapsible.json b/apps/www/public/r/styles/default/sidebar-menu-collapsible.json
new file mode 100644
index 00000000000..d59265fd772
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-menu-collapsible.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-menu-collapsible",
+  "type": "registry:internal",
+  "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/www/public/r/styles/default/sidebar-menu-sub.json b/apps/www/public/r/styles/default/sidebar-menu-sub.json
new file mode 100644
index 00000000000..ae93f2efb84
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-menu-sub.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-menu-sub",
+  "type": "registry:internal",
+  "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/www/public/r/styles/default/sidebar-menu.json b/apps/www/public/r/styles/default/sidebar-menu.json
new file mode 100644
index 00000000000..1dae02e73bb
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-menu.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-menu",
+  "type": "registry:internal",
+  "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/www/public/r/styles/default/sidebar-rsc.json b/apps/www/public/r/styles/default/sidebar-rsc.json
new file mode 100644
index 00000000000..bac0d2a6edd
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-rsc.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-rsc",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "internal/sidebar-rsc.tsx",
+      "content": "import * as React from \"react\"\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  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/www/public/r/styles/default/sink.json b/apps/www/public/r/styles/default/sink.json
new file mode 100644
index 00000000000..d6a19c59af1
--- /dev/null
+++ b/apps/www/public/r/styles/default/sink.json
@@ -0,0 +1,450 @@
+{
+  "name": "sink",
+  "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": "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 name=\"NavigationMenu\" className=\"col-span-2\">\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 * 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/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: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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 \"@/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={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 \"@/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  MoreHorizontal,\n  Trash2,\n  type LucideIcon,\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 {\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=\"h-8 w-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=\"h-8 w-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",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/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=\"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\">{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-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>⌘{index + 1}</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\">Add team</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 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 {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} 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 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",
+      "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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nexport function AvatarDemo() {\n  return (\n    <Avatar>\n      <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\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\">Components</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 { cn } 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={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 \"@/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\">{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",
+      "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 * 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 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 * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } 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)?.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={cn(\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",
+      "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\">Colm Tuite</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 * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } 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={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 \"@/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 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",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/drawer-demo.tsx",
+      "content": "\"use client\"\n\nimport * 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 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=\"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 {\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 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>Always Show Bookmarks Bar</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 * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { cn } 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                      shadcn/ui\n                    </div>\n                    <p className=\"text-sm leading-tight text-muted-foreground\">\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={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 \"@/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\">Radix Primitives</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 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",
+      "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 { cn } 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={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 \"@/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\">{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",
+      "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 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",
+      "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\">Undo</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 {\n  ToggleGroup,\n  ToggleGroupItem,\n} 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 value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\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/www/public/r/styles/default/skeleton-card.json b/apps/www/public/r/styles/default/skeleton-card.json
index a65f9e510b4..c5825cc4ac0 100644
--- a/apps/www/public/r/styles/default/skeleton-card.json
+++ b/apps/www/public/r/styles/default/skeleton-card.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/skeleton-card.tsx",
+      "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/www/public/r/styles/default/skeleton-demo.json b/apps/www/public/r/styles/default/skeleton-demo.json
index 0a6b9f3b06b..a0344ed690b 100644
--- a/apps/www/public/r/styles/default/skeleton-demo.json
+++ b/apps/www/public/r/styles/default/skeleton-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/skeleton-demo.tsx",
+      "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=\"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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/slider-demo.json b/apps/www/public/r/styles/default/slider-demo.json
index 536d7b8505b..fa668947eda 100644
--- a/apps/www/public/r/styles/default/slider-demo.json
+++ b/apps/www/public/r/styles/default/slider-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/slider-demo.tsx",
+      "path": "examples/slider-demo.tsx",
       "content": "import { cn } 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={cn(\"w-[60%]\", className)}\n      {...props}\n    />\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/sonner-demo.json b/apps/www/public/r/styles/default/sonner-demo.json
index 0c5d7192063..c9e9be7f268 100644
--- a/apps/www/public/r/styles/default/sonner-demo.json
+++ b/apps/www/public/r/styles/default/sonner-demo.json
@@ -6,8 +6,8 @@
   ],
   "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            onClick: () => console.log(\"Undo\"),\n          },\n        })\n      }\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "path": "examples/sonner-demo.tsx",
+      "content": "\"use client\"\n\nimport { 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            onClick: () => console.log(\"Undo\"),\n          },\n        })\n      }\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/switch-demo.json b/apps/www/public/r/styles/default/switch-demo.json
index 35b43ac812b..f42fea053ae 100644
--- a/apps/www/public/r/styles/default/switch-demo.json
+++ b/apps/www/public/r/styles/default/switch-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/switch-demo.tsx",
+      "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/www/public/r/styles/default/switch-form.json b/apps/www/public/r/styles/default/switch-form.json
index ad1a9a51576..072330f1f58 100644
--- a/apps/www/public/r/styles/default/switch-form.json
+++ b/apps/www/public/r/styles/default/switch-form.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/switch-form.tsx",
+      "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 { toast } from \"@/registry/default/hooks/use-toast\"\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\"\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",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/table-demo.json b/apps/www/public/r/styles/default/table-demo.json
index 179388f874d..6ae35aed5e5 100644
--- a/apps/www/public/r/styles/default/table-demo.json
+++ b/apps/www/public/r/styles/default/table-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/table-demo.tsx",
+      "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\">{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",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/tabs-demo.json b/apps/www/public/r/styles/default/tabs-demo.json
index 1549c50a5a0..f3d7c190f06 100644
--- a/apps/www/public/r/styles/default/tabs-demo.json
+++ b/apps/www/public/r/styles/default/tabs-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/tabs-demo.tsx",
+      "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 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",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/textarea-demo.json b/apps/www/public/r/styles/default/textarea-demo.json
index 14bba595560..575a87759e6 100644
--- a/apps/www/public/r/styles/default/textarea-demo.json
+++ b/apps/www/public/r/styles/default/textarea-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/textarea-demo.tsx",
+      "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/www/public/r/styles/default/textarea-disabled.json b/apps/www/public/r/styles/default/textarea-disabled.json
index 3237d8df93e..3f681d65dfb 100644
--- a/apps/www/public/r/styles/default/textarea-disabled.json
+++ b/apps/www/public/r/styles/default/textarea-disabled.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/textarea-disabled.tsx",
+      "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/www/public/r/styles/default/textarea-form.json b/apps/www/public/r/styles/default/textarea-form.json
index 5164c956344..2b971604826 100644
--- a/apps/www/public/r/styles/default/textarea-form.json
+++ b/apps/www/public/r/styles/default/textarea-form.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/textarea-form.tsx",
+      "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 { toast } from \"@/registry/default/hooks/use-toast\"\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\"\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 <span>@mention</span> 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",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/textarea-with-button.json b/apps/www/public/r/styles/default/textarea-with-button.json
index 49308e8bd07..ffd11b8cec4 100644
--- a/apps/www/public/r/styles/default/textarea-with-button.json
+++ b/apps/www/public/r/styles/default/textarea-with-button.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/textarea-with-button.tsx",
+      "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/www/public/r/styles/default/textarea-with-label.json b/apps/www/public/r/styles/default/textarea-with-label.json
index cbd4a66d6c4..642fb2f523e 100644
--- a/apps/www/public/r/styles/default/textarea-with-label.json
+++ b/apps/www/public/r/styles/default/textarea-with-label.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/textarea-with-label.tsx",
+      "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/www/public/r/styles/default/textarea-with-text.json b/apps/www/public/r/styles/default/textarea-with-text.json
index a9f1750b5cb..5c69ce0941f 100644
--- a/apps/www/public/r/styles/default/textarea-with-text.json
+++ b/apps/www/public/r/styles/default/textarea-with-text.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/textarea-with-text.tsx",
+      "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-sm text-muted-foreground\">\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/www/public/r/styles/default/textarea.json b/apps/www/public/r/styles/default/textarea.json
index ae74544af29..c70d854379d 100644
--- a/apps/www/public/r/styles/default/textarea.json
+++ b/apps/www/public/r/styles/default/textarea.json
@@ -4,7 +4,7 @@
   "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          \"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Textarea = React.forwardRef<\n  HTMLTextAreaElement,\n  React.ComponentProps<\"textarea\">\n>(({ className, ...props }, ref) => {\n  return (\n    <textarea\n      className={cn(\n        \"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background 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\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n})\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/default/toast-demo.json b/apps/www/public/r/styles/default/toast-demo.json
index 090631e4e2b..88dd48dcffc 100644
--- a/apps/www/public/r/styles/default/toast-demo.json
+++ b/apps/www/public/r/styles/default/toast-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toast-demo.tsx",
+      "path": "examples/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 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",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/toast-destructive.json b/apps/www/public/r/styles/default/toast-destructive.json
index 90e28a2e61b..3b7f0bd6fa0 100644
--- a/apps/www/public/r/styles/default/toast-destructive.json
+++ b/apps/www/public/r/styles/default/toast-destructive.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toast-destructive.tsx",
+      "path": "examples/toast-destructive.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 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/www/public/r/styles/default/toast-simple.json b/apps/www/public/r/styles/default/toast-simple.json
index ed7d9518f01..83eb83ce546 100644
--- a/apps/www/public/r/styles/default/toast-simple.json
+++ b/apps/www/public/r/styles/default/toast-simple.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toast-simple.tsx",
+      "path": "examples/toast-simple.tsx",
       "content": "\"use client\"\n\nimport { useToast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\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/www/public/r/styles/default/toast-with-action.json b/apps/www/public/r/styles/default/toast-with-action.json
index 6c8532c4444..bc511e755f4 100644
--- a/apps/www/public/r/styles/default/toast-with-action.json
+++ b/apps/www/public/r/styles/default/toast-with-action.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toast-with-action.tsx",
+      "path": "examples/toast-with-action.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 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/www/public/r/styles/default/toast-with-title.json b/apps/www/public/r/styles/default/toast-with-title.json
index e7cb1675918..01453083ba7 100644
--- a/apps/www/public/r/styles/default/toast-with-title.json
+++ b/apps/www/public/r/styles/default/toast-with-title.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toast-with-title.tsx",
+      "path": "examples/toast-with-title.tsx",
       "content": "\"use client\"\n\nimport { useToast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\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/www/public/r/styles/default/toast.json b/apps/www/public/r/styles/default/toast.json
index b63de369762..32a7111a83c 100644
--- a/apps/www/public/r/styles/default/toast.json
+++ b/apps/www/public/r/styles/default/toast.json
@@ -8,17 +8,20 @@
     {
       "path": "ui/toast.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToastPrimitives from \"@radix-ui/react-toast\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-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      \"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 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\",\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      \"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground 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=\"h-4 w-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"
+      "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\nconst 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: toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nexport const 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: 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",
-      "type": "registry:hook"
+      "type": "registry:hook",
+      "target": ""
     },
     {
       "path": "ui/toaster.tsx",
       "content": "\"use client\"\n\nimport { useToast } from \"@/registry/default/hooks/use-toast\"\nimport {\n  Toast,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n} from \"@/registry/default/ui/toast\"\n\nexport function Toaster() {\n  const { toasts } = useToast()\n\n  return (\n    <ToastProvider>\n      {toasts.map(function ({ 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"
+      "type": "registry:ui",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/toggle-demo.json b/apps/www/public/r/styles/default/toggle-demo.json
index 7e5154a0ad4..881002916e2 100644
--- a/apps/www/public/r/styles/default/toggle-demo.json
+++ b/apps/www/public/r/styles/default/toggle-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toggle-demo.tsx",
+      "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=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/toggle-disabled.json b/apps/www/public/r/styles/default/toggle-disabled.json
index 89074b08de7..4f131125647 100644
--- a/apps/www/public/r/styles/default/toggle-disabled.json
+++ b/apps/www/public/r/styles/default/toggle-disabled.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toggle-disabled.tsx",
+      "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=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/toggle-group-demo.json b/apps/www/public/r/styles/default/toggle-group-demo.json
index d08832d56a1..6472a9c8add 100644
--- a/apps/www/public/r/styles/default/toggle-group-demo.json
+++ b/apps/www/public/r/styles/default/toggle-group-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toggle-group-demo.tsx",
+      "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=\"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 value=\"underline\" aria-label=\"Toggle underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/toggle-group-disabled.json b/apps/www/public/r/styles/default/toggle-group-disabled.json
index 613645dd19a..a372dc6be93 100644
--- a/apps/www/public/r/styles/default/toggle-group-disabled.json
+++ b/apps/www/public/r/styles/default/toggle-group-disabled.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toggle-group-disabled.tsx",
+      "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=\"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 value=\"underline\" aria-label=\"Toggle underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/toggle-group-lg.json b/apps/www/public/r/styles/default/toggle-group-lg.json
index 9024dfe1807..e4ef1a9d4d1 100644
--- a/apps/www/public/r/styles/default/toggle-group-lg.json
+++ b/apps/www/public/r/styles/default/toggle-group-lg.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toggle-group-lg.tsx",
+      "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=\"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 value=\"underline\" aria-label=\"Toggle underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/toggle-group-outline.json b/apps/www/public/r/styles/default/toggle-group-outline.json
index cbaf72edfd8..1d4f1a2c85b 100644
--- a/apps/www/public/r/styles/default/toggle-group-outline.json
+++ b/apps/www/public/r/styles/default/toggle-group-outline.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toggle-group-outline.tsx",
+      "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=\"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 value=\"underline\" aria-label=\"Toggle underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/toggle-group-single.json b/apps/www/public/r/styles/default/toggle-group-single.json
index 93b68f6aacb..5c7e4b7db00 100644
--- a/apps/www/public/r/styles/default/toggle-group-single.json
+++ b/apps/www/public/r/styles/default/toggle-group-single.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toggle-group-single.tsx",
+      "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=\"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 value=\"underline\" aria-label=\"Toggle underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/toggle-group-sm.json b/apps/www/public/r/styles/default/toggle-group-sm.json
index d8a5ff74f0a..91bda9a746c 100644
--- a/apps/www/public/r/styles/default/toggle-group-sm.json
+++ b/apps/www/public/r/styles/default/toggle-group-sm.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toggle-group-sm.tsx",
+      "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=\"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 value=\"underline\" aria-label=\"Toggle underline\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/toggle-lg.json b/apps/www/public/r/styles/default/toggle-lg.json
index fad8668bee5..76cf0d9a787 100644
--- a/apps/www/public/r/styles/default/toggle-lg.json
+++ b/apps/www/public/r/styles/default/toggle-lg.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toggle-lg.tsx",
+      "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=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/toggle-outline.json b/apps/www/public/r/styles/default/toggle-outline.json
index a1dc247fe20..54a4915f1df 100644
--- a/apps/www/public/r/styles/default/toggle-outline.json
+++ b/apps/www/public/r/styles/default/toggle-outline.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toggle-outline.tsx",
+      "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=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/toggle-sm.json b/apps/www/public/r/styles/default/toggle-sm.json
index b111e6f1752..5dd789033a4 100644
--- a/apps/www/public/r/styles/default/toggle-sm.json
+++ b/apps/www/public/r/styles/default/toggle-sm.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toggle-sm.tsx",
+      "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=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/toggle-with-text.json b/apps/www/public/r/styles/default/toggle-with-text.json
index 25a8e0a3bc1..b4a461c52b9 100644
--- a/apps/www/public/r/styles/default/toggle-with-text.json
+++ b/apps/www/public/r/styles/default/toggle-with-text.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toggle-with-text.tsx",
+      "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 />\n      Italic\n    </Toggle>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/toggle.json b/apps/www/public/r/styles/default/toggle.json
index 85ea4cfe50a..9e360284920 100644
--- a/apps/www/public/r/styles/default/toggle.json
+++ b/apps/www/public/r/styles/default/toggle.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "ui/toggle.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2\",\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 min-w-10\",\n        sm: \"h-9 px-2.5 min-w-9\",\n        lg: \"h-11 px-5 min-w-11\",\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": ""
     }
diff --git a/apps/www/public/r/styles/default/tooltip-demo.json b/apps/www/public/r/styles/default/tooltip-demo.json
index d26e4cdc440..1e0a89a6823 100644
--- a/apps/www/public/r/styles/default/tooltip-demo.json
+++ b/apps/www/public/r/styles/default/tooltip-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/tooltip-demo.tsx",
+      "path": "examples/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 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        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/typography-blockquote.json b/apps/www/public/r/styles/default/typography-blockquote.json
index abf8908ca33..08ddcfd9a20 100644
--- a/apps/www/public/r/styles/default/typography-blockquote.json
+++ b/apps/www/public/r/styles/default/typography-blockquote.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/typography-blockquote.tsx",
+      "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 that\n      they should pay for the privilege.\"\n    </blockquote>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/typography-demo.json b/apps/www/public/r/styles/default/typography-demo.json
index a16f60c8fd2..8db6def4d14 100644
--- a/apps/www/public/r/styles/default/typography-demo.json
+++ b/apps/www/public/r/styles/default/typography-demo.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/typography-demo.tsx",
+      "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 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        <a\n          href=\"#\"\n          className=\"font-medium text-primary 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=\"m-0 border-t p-0 even:bg-muted\">\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=\"m-0 border-t p-0 even:bg-muted\">\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=\"m-0 border-t p-0 even:bg-muted\">\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=\"m-0 border-t p-0 even:bg-muted\">\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",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/typography-h1.json b/apps/www/public/r/styles/default/typography-h1.json
index a0433accb4b..ac9b2a69f50 100644
--- a/apps/www/public/r/styles/default/typography-h1.json
+++ b/apps/www/public/r/styles/default/typography-h1.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "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": ""
diff --git a/apps/www/public/r/styles/default/typography-h2.json b/apps/www/public/r/styles/default/typography-h2.json
index 453bc704872..57909033817 100644
--- a/apps/www/public/r/styles/default/typography-h2.json
+++ b/apps/www/public/r/styles/default/typography-h2.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "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": ""
diff --git a/apps/www/public/r/styles/default/typography-h3.json b/apps/www/public/r/styles/default/typography-h3.json
index 36915c00567..193e089e74e 100644
--- a/apps/www/public/r/styles/default/typography-h3.json
+++ b/apps/www/public/r/styles/default/typography-h3.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "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": ""
diff --git a/apps/www/public/r/styles/default/typography-h4.json b/apps/www/public/r/styles/default/typography-h4.json
index 1803fb69524..19852b679e2 100644
--- a/apps/www/public/r/styles/default/typography-h4.json
+++ b/apps/www/public/r/styles/default/typography-h4.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "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": ""
diff --git a/apps/www/public/r/styles/default/typography-inline-code.json b/apps/www/public/r/styles/default/typography-inline-code.json
index c713bcec7c1..eee8b57bd6d 100644
--- a/apps/www/public/r/styles/default/typography-inline-code.json
+++ b/apps/www/public/r/styles/default/typography-inline-code.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/typography-inline-code.tsx",
+      "path": "examples/typography-inline-code.tsx",
       "content": "export default function TypographyInlineCode() {\n  return (\n    <code className=\"relative rounded bg-muted 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": ""
diff --git a/apps/www/public/r/styles/default/typography-large.json b/apps/www/public/r/styles/default/typography-large.json
index 66dc2f9c4da..553e9e70fa1 100644
--- a/apps/www/public/r/styles/default/typography-large.json
+++ b/apps/www/public/r/styles/default/typography-large.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "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": ""
diff --git a/apps/www/public/r/styles/default/typography-lead.json b/apps/www/public/r/styles/default/typography-lead.json
index dcd56d7c8b0..d07c6a0c1d0 100644
--- a/apps/www/public/r/styles/default/typography-lead.json
+++ b/apps/www/public/r/styles/default/typography-lead.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/typography-lead.tsx",
+      "path": "examples/typography-lead.tsx",
       "content": "export default function TypographyLead() {\n  return (\n    <p className=\"text-xl text-muted-foreground\">\n      A modal dialog that interrupts the user with important content and expects\n      a response.\n    </p>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/typography-list.json b/apps/www/public/r/styles/default/typography-list.json
index 32fc5d7c5a3..a53659185b8 100644
--- a/apps/www/public/r/styles/default/typography-list.json
+++ b/apps/www/public/r/styles/default/typography-list.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "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": ""
diff --git a/apps/www/public/r/styles/default/typography-muted.json b/apps/www/public/r/styles/default/typography-muted.json
index 62dca4a7abd..b8b411d0846 100644
--- a/apps/www/public/r/styles/default/typography-muted.json
+++ b/apps/www/public/r/styles/default/typography-muted.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/typography-muted.tsx",
+      "path": "examples/typography-muted.tsx",
       "content": "export default function TypographyMuted() {\n  return (\n    <p className=\"text-sm text-muted-foreground\">Enter your email address.</p>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/typography-p.json b/apps/www/public/r/styles/default/typography-p.json
index 4f7448285c0..7d9847196b0 100644
--- a/apps/www/public/r/styles/default/typography-p.json
+++ b/apps/www/public/r/styles/default/typography-p.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/typography-p.tsx",
+      "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 of\n      his ways and repealed the joke tax.\n    </p>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/default/typography-small.json b/apps/www/public/r/styles/default/typography-small.json
index ec40fee6b50..79bae7bb51f 100644
--- a/apps/www/public/r/styles/default/typography-small.json
+++ b/apps/www/public/r/styles/default/typography-small.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "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": ""
diff --git a/apps/www/public/r/styles/default/typography-table.json b/apps/www/public/r/styles/default/typography-table.json
index 38bbc34855f..904c6d14179 100644
--- a/apps/www/public/r/styles/default/typography-table.json
+++ b/apps/www/public/r/styles/default/typography-table.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "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=\"m-0 border-t p-0 even:bg-muted\">\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=\"m-0 border-t p-0 even:bg-muted\">\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=\"m-0 border-t p-0 even:bg-muted\">\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=\"m-0 border-t p-0 even:bg-muted\">\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": ""
diff --git a/apps/www/public/r/styles/default/use-mobile.json b/apps/www/public/r/styles/default/use-mobile.json
index 079f52478dd..c2ca883e72f 100644
--- a/apps/www/public/r/styles/default/use-mobile.json
+++ b/apps/www/public/r/styles/default/use-mobile.json
@@ -5,7 +5,8 @@
     {
       "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",
-      "type": "registry:hook"
+      "type": "registry:hook",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/use-toast.json b/apps/www/public/r/styles/default/use-toast.json
index 5bc9d30e230..9380de6baad 100644
--- a/apps/www/public/r/styles/default/use-toast.json
+++ b/apps/www/public/r/styles/default/use-toast.json
@@ -5,7 +5,8 @@
     {
       "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\nconst 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: toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nexport const 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: 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",
-      "type": "registry:hook"
+      "type": "registry:hook",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/utils.json b/apps/www/public/r/styles/default/utils.json
index 987ce3b08f1..35a61098015 100644
--- a/apps/www/public/r/styles/default/utils.json
+++ b/apps/www/public/r/styles/default/utils.json
@@ -9,7 +9,8 @@
     {
       "path": "lib/utils.ts",
       "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
-      "type": "registry:lib"
+      "type": "registry:lib",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-login-01.json b/apps/www/public/r/styles/default/v0-login-01.json
index 77e2af719a0..a2730d2ce30 100644
--- a/apps/www/public/r/styles/default/v0-login-01.json
+++ b/apps/www/public/r/styles/default/v0-login-01.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-login-01",
-  "type": "registry:block",
-  "description": "A simple login form.",
+  "type": "registry:internal",
   "registryDependencies": [
     "button",
     "card",
@@ -10,10 +9,10 @@
   ],
   "files": [
     {
-      "path": "v0/login-01.tsx",
+      "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:block",
-      "target": "components/login-01.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-01.json b/apps/www/public/r/styles/default/v0-sidebar-01.json
index 386cb8c3341..17304d64c16 100644
--- a/apps/www/public/r/styles/default/v0-sidebar-01.json
+++ b/apps/www/public/r/styles/default/v0-sidebar-01.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-01",
-  "type": "registry:block",
-  "description": "A simple sidebar with navigation grouped by section.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -11,7 +10,7 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-01.tsx",
+      "path": "internal/sidebar-01.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, 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  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(data.versions[0])\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\">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                  {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 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      <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"
diff --git a/apps/www/public/r/styles/default/v0-sidebar-02.json b/apps/www/public/r/styles/default/v0-sidebar-02.json
index 9cf3edbee03..ba2ca79a01a 100644
--- a/apps/www/public/r/styles/default/v0-sidebar-02.json
+++ b/apps/www/public/r/styles/default/v0-sidebar-02.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-02",
-  "type": "registry:block",
-  "description": "A sidebar with collapsible sections.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -11,10 +10,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-02.tsx",
+      "path": "internal/sidebar-02.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Check,\n  ChevronRight,\n  ChevronsUpDown,\n  GalleryVerticalEnd,\n  Search,\n} 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 {\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(data.versions[0])\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\">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                  {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 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      <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:block",
-      "target": "components/sidebar-02.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-03.json b/apps/www/public/r/styles/default/v0-sidebar-03.json
index 60ccce8f266..e7258d898fe 100644
--- a/apps/www/public/r/styles/default/v0-sidebar-03.json
+++ b/apps/www/public/r/styles/default/v0-sidebar-03.json
@@ -1,17 +1,16 @@
 {
   "name": "v0-sidebar-03",
-  "type": "registry:block",
-  "description": "A sidebar with nested navigation.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb"
   ],
   "files": [
     {
-      "path": "v0/sidebar-03.tsx",
+      "path": "internal/sidebar-03.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, 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  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\">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      <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:block",
-      "target": "components/sidebar-03.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-04.json b/apps/www/public/r/styles/default/v0-sidebar-04.json
index 769cc207632..b26408e96f7 100644
--- a/apps/www/public/r/styles/default/v0-sidebar-04.json
+++ b/apps/www/public/r/styles/default/v0-sidebar-04.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-04",
-  "type": "registry:block",
-  "description": "A floating sidebar with submenus.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -9,10 +8,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-04.tsx",
+      "path": "internal/sidebar-04.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-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\">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      <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:block",
-      "target": "components/sidebar-04.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-05.json b/apps/www/public/r/styles/default/v0-sidebar-05.json
index aa1478ee071..b1e49664e6b 100644
--- a/apps/www/public/r/styles/default/v0-sidebar-05.json
+++ b/apps/www/public/r/styles/default/v0-sidebar-05.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-05",
-  "type": "registry:block",
-  "description": "A sidebar with collapsible submenus.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -11,10 +10,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-05.tsx",
+      "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\">Documentation</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}>{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      <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:block",
-      "target": "components/sidebar-05.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-06.json b/apps/www/public/r/styles/default/v0-sidebar-06.json
index 9595b766eed..5d4e8d6ddd1 100644
--- a/apps/www/public/r/styles/default/v0-sidebar-06.json
+++ b/apps/www/public/r/styles/default/v0-sidebar-06.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-06",
-  "type": "registry:block",
-  "description": "A sidebar with submenus as dropdowns.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -11,10 +10,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-06.tsx",
+      "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\">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                <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=\"bottom\"\n                        align=\"end\"\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        </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 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:block",
-      "target": "components/sidebar-06.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-07.json b/apps/www/public/r/styles/default/v0-sidebar-07.json
index c52865d93e2..8dd0f174cde 100644
--- a/apps/www/public/r/styles/default/v0-sidebar-07.json
+++ b/apps/www/public/r/styles/default/v0-sidebar-07.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-07",
-  "type": "registry:block",
-  "description": "A sidebar that collapses to icons.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -12,10 +11,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-07.tsx",
+      "path": "internal/sidebar-07.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\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\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} 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: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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>⌘{index + 1}</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\">CN</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:block",
-      "target": "components/sidebar-07.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-08.json b/apps/www/public/r/styles/default/v0-sidebar-08.json
index b558cd418ef..dcb3f4c3838 100644
--- a/apps/www/public/r/styles/default/v0-sidebar-08.json
+++ b/apps/www/public/r/styles/default/v0-sidebar-08.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-08",
-  "type": "registry:block",
-  "description": "An inset sidebar with secondary navigation.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -12,10 +11,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-08.tsx",
+      "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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} 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: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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\">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            <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\">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          <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\">CN</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:block",
-      "target": "components/sidebar-08.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-09.json b/apps/www/public/r/styles/default/v0-sidebar-09.json
index 9bd1b20844f..ca19fdc1470 100644
--- a/apps/www/public/r/styles/default/v0-sidebar-09.json
+++ b/apps/www/public/r/styles/default/v0-sidebar-09.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-09",
-  "type": "registry:block",
-  "description": "Collapsible nested sidebars.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -13,10 +12,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-09.tsx",
+      "path": "internal/sidebar-09.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\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\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} 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: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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 size=\"lg\" asChild className=\"md:h-8 md:p-0\">\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\">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-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\">{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\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\">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=\"h-8 w-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",
-      "type": "registry:block",
-      "target": "components/sidebar-09.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-10.json b/apps/www/public/r/styles/default/v0-sidebar-10.json
index b2919ff9c02..3f7bbcf7aaf 100644
--- a/apps/www/public/r/styles/default/v0-sidebar-10.json
+++ b/apps/www/public/r/styles/default/v0-sidebar-10.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-10",
-  "type": "registry:block",
-  "description": "A sidebar in a popover.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -12,10 +11,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-10.tsx",
+      "path": "internal/sidebar-10.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\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  MessageCircleQuestion,\n  MoreHorizontal,\n  Plus,\n  Search,\n  Settings2,\n  Sparkles,\n  Star,\n  StarOff,\n  Trash,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-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 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 /> <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 && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\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\">{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-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>⌘{index + 1}</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\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
-      "type": "registry:block",
-      "target": "components/sidebar-10.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-11.json b/apps/www/public/r/styles/default/v0-sidebar-11.json
index 2cd8ab890de..84e227a03ee 100644
--- a/apps/www/public/r/styles/default/v0-sidebar-11.json
+++ b/apps/www/public/r/styles/default/v0-sidebar-11.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-11",
-  "type": "registry:block",
-  "description": "A sidebar with a collapsible file tree.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -10,10 +9,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-11.tsx",
+      "path": "internal/sidebar-11.tsx",
       "content": "import * as React from \"react\"\nimport { ChevronRight, File, Folder } 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 { 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:block",
-      "target": "components/sidebar-11.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-12.json b/apps/www/public/r/styles/default/v0-sidebar-12.json
index bc6d51b3b3f..3cd5cf51927 100644
--- a/apps/www/public/r/styles/default/v0-sidebar-12.json
+++ b/apps/www/public/r/styles/default/v0-sidebar-12.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-12",
-  "type": "registry:block",
-  "description": "A sidebar with a calendar.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -13,10 +12,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-12.tsx",
+      "path": "internal/sidebar-12.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BadgeCheck,\n  Bell,\n  Check,\n  ChevronRight,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Plus,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} 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: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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 key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\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\">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=\"h-8 w-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",
-      "type": "registry:block",
-      "target": "components/sidebar-12.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-13.json b/apps/www/public/r/styles/default/v0-sidebar-13.json
index e017a059d58..c52d553239a 100644
--- a/apps/www/public/r/styles/default/v0-sidebar-13.json
+++ b/apps/www/public/r/styles/default/v0-sidebar-13.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-13",
-  "type": "registry:block",
-  "description": "A sidebar in a dialog.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -10,10 +9,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-13.tsx",
+      "path": "internal/sidebar-13.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 \"@/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={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=\"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:block",
-      "target": "components/sidebar-13.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-14.json b/apps/www/public/r/styles/default/v0-sidebar-14.json
index 45dfec35784..89e58999aee 100644
--- a/apps/www/public/r/styles/default/v0-sidebar-14.json
+++ b/apps/www/public/r/styles/default/v0-sidebar-14.json
@@ -1,17 +1,16 @@
 {
   "name": "v0-sidebar-14",
-  "type": "registry:block",
-  "description": "A sidebar on the right.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb"
   ],
   "files": [
     {
-      "path": "v0/sidebar-14.tsx",
+      "path": "internal/sidebar-14.tsx",
       "content": "import * 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:block",
-      "target": "components/sidebar-14.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/v0-sidebar-15.json b/apps/www/public/r/styles/default/v0-sidebar-15.json
index fd7afa7a32d..2e9c9b0a2bc 100644
--- a/apps/www/public/r/styles/default/v0-sidebar-15.json
+++ b/apps/www/public/r/styles/default/v0-sidebar-15.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-15",
-  "type": "registry:block",
-  "description": "A left and right sidebar.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -14,10 +13,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-15.tsx",
+      "path": "internal/sidebar-15.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\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  MessageCircleQuestion,\n  MoreHorizontal,\n  Plus,\n  Search,\n  Settings2,\n  Sparkles,\n  StarOff,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} 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: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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 && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\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\">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=\"h-8 w-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\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\">{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-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>⌘{index + 1}</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\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
-      "type": "registry:block",
-      "target": "components/sidebar-15.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/accordion-demo.json b/apps/www/public/r/styles/new-york/accordion-demo.json
index 6c07c90769d..5eab887303d 100644
--- a/apps/www/public/r/styles/new-york/accordion-demo.json
+++ b/apps/www/public/r/styles/new-york/accordion-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/accordion-demo.tsx",
+      "path": "examples/accordion-demo.tsx",
       "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/new-york/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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/accordion.json b/apps/www/public/r/styles/new-york/accordion.json
index 200e7fea432..f2252b82d98 100644
--- a/apps/www/public/r/styles/new-york/accordion.json
+++ b/apps/www/public/r/styles/new-york/accordion.json
@@ -7,7 +7,7 @@
   "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 { 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=\"h-4 w-4 shrink-0 text-muted-foreground 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=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDown } from \"lucide-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 text-left [&[data-state=open]>svg]:rotate-180\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDown className=\"h-4 w-4 shrink-0 text-muted-foreground 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=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\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": ""
     }
diff --git a/apps/www/public/r/styles/new-york/alert-demo.json b/apps/www/public/r/styles/new-york/alert-demo.json
index 146e4ad6b1b..aa3a38a4050 100644
--- a/apps/www/public/r/styles/new-york/alert-demo.json
+++ b/apps/www/public/r/styles/new-york/alert-demo.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/alert-demo.tsx",
-      "content": "import { RocketIcon } from \"@radix-ui/react-icons\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/new-york/ui/alert\"\n\nexport default function AlertDemo() {\n  return (\n    <Alert>\n      <RocketIcon 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",
+      "path": "examples/alert-demo.tsx",
+      "content": "import { Terminal } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/new-york/ui/alert\"\n\nexport default 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:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/alert-destructive.json b/apps/www/public/r/styles/new-york/alert-destructive.json
index bd85a37050c..227444e01c6 100644
--- a/apps/www/public/r/styles/new-york/alert-destructive.json
+++ b/apps/www/public/r/styles/new-york/alert-destructive.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/alert-destructive.tsx",
-      "content": "import { ExclamationTriangleIcon } from \"@radix-ui/react-icons\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/new-york/ui/alert\"\n\nexport default function AlertDestructive() {\n  return (\n    <Alert variant=\"destructive\">\n      <ExclamationTriangleIcon className=\"h-4 w-4\" />\n      <AlertTitle>Error</AlertTitle>\n      <AlertDescription>\n        Your session has expired. Please log in again.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "path": "examples/alert-destructive.tsx",
+      "content": "import { AlertCircle } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/new-york/ui/alert\"\n\nexport default function AlertDestructive() {\n  return (\n    <Alert variant=\"destructive\">\n      <AlertCircle className=\"h-4 w-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/www/public/r/styles/new-york/alert-dialog-demo.json b/apps/www/public/r/styles/new-york/alert-dialog-demo.json
index 9ff7eeb8a6a..70ccb76fd1e 100644
--- a/apps/www/public/r/styles/new-york/alert-dialog-demo.json
+++ b/apps/www/public/r/styles/new-york/alert-dialog-demo.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/alert-dialog-demo.tsx",
+      "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/new-york/ui/alert-dialog\"\nimport { Button } from \"@/registry/new-york/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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/app-01-dark.png b/apps/www/public/r/styles/new-york/app-01-dark.png
new file mode 100644
index 00000000000..1e509caa6c0
Binary files /dev/null and b/apps/www/public/r/styles/new-york/app-01-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/app-01-light.png b/apps/www/public/r/styles/new-york/app-01-light.png
new file mode 100644
index 00000000000..8fd7d6cabf3
Binary files /dev/null and b/apps/www/public/r/styles/new-york/app-01-light.png differ
diff --git a/apps/www/public/r/styles/new-york/app-01.json b/apps/www/public/r/styles/new-york/app-01.json
new file mode 100644
index 00000000000..cab8dd0b316
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/app-01.json
@@ -0,0 +1,74 @@
+{
+  "name": "app-01",
+  "type": "registry:block",
+  "description": "A simple task app.",
+  "dependencies": [
+    "swr"
+  ],
+  "registryDependencies": [
+    "card",
+    "input",
+    "button",
+    "skeleton",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/app-01/page.tsx",
+      "content": "import { AddTaskForm } from \"@/registry/new-york/blocks/app-01/components/add-task-form\"\nimport { TasksList } from \"@/registry/new-york/blocks/app-01/components/tasks-list\"\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\n\nexport default function AppPage() {\n  return (\n    <div className=\"h-screen flex flex-col items-center justify-center\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Add Task</CardTitle>\n        </CardHeader>\n        <CardContent>\n          <TasksList />\n        </CardContent>\n        <CardFooter>\n          <AddTaskForm />\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/page.tsx"
+    },
+    {
+      "path": "blocks/app-01/api/tasks/route.ts",
+      "content": "import { NextResponse } from \"next/server\"\n\nimport { API_URL } from \"@/registry/new-york/blocks/app-01/lib/constants\"\n\nexport async function GET() {\n  const response = await fetch(API_URL)\n  const data = await response.json()\n  return NextResponse.json(data)\n}\n",
+      "type": "registry:page",
+      "target": "app/api/tasks/route.ts"
+    },
+    {
+      "path": "blocks/app-01/components/add-task-form.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Label } from \"@/registry/default/ui/label\"\nimport { SubmitButton } from \"@/registry/new-york/blocks/app-01/components/submit-button\"\nimport { useTasks } from \"@/registry/new-york/blocks/app-01/hooks/use-tasks\"\nimport { saveTask } from \"@/registry/new-york/blocks/app-01/lib/actions\"\nimport { Input } from \"@/registry/new-york/ui/input\"\n\nexport function AddTaskForm() {\n  const { mutate } = useTasks()\n  const formRef = React.useRef<HTMLFormElement>(null)\n\n  return (\n    <form\n      action={async (formData) => {\n        await saveTask(formData)\n        void mutate()\n        formRef.current?.reset()\n      }}\n      className=\"w-full\"\n      ref={formRef}\n    >\n      <div className=\"flex flex-col gap-2\">\n        <Label htmlFor=\"name\" className=\"sr-only\">\n          Task Name\n        </Label>\n        <Input\n          type=\"text\"\n          name=\"name\"\n          required\n          autoComplete=\"off\"\n          placeholder=\"Remember the milk\"\n        />\n        <SubmitButton className=\"w-full\">Add Task</SubmitButton>\n      </div>\n    </form>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/app-01/components/submit-button.tsx",
+      "content": "\"use client\"\n\nimport { Loader2 } from \"lucide-react\"\nimport { useFormStatus } from \"react-dom\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport function SubmitButton({\n  children,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { pending } = useFormStatus()\n\n  return (\n    <Button type=\"submit\" disabled={pending} {...props}>\n      {pending && <Loader2 className=\"animate-spin\" />}\n      {children}\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/app-01/components/tasks-list.tsx",
+      "content": "\"use client\"\n\nimport { useTasks } from \"@/registry/new-york/blocks/app-01/hooks/use-tasks\"\nimport { Skeleton } from \"@/registry/new-york/ui/skeleton\"\n\nexport function TasksList() {\n  const { tasks, isLoading } = useTasks()\n\n  if (isLoading)\n    return (\n      <div className=\"grid gap-2\">\n        {Array.from({ length: 5 }).map((_, index) => (\n          <Skeleton className=\"h-5 w-full\" key={index} />\n        ))}\n      </div>\n    )\n\n  return (\n    <div className=\"grid gap-2\">\n      {tasks.map((task, index) => (\n        <div key={index} className=\"h-5 text-sm\">\n          {task}\n        </div>\n      ))}\n    </div>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "blocks/app-01/hooks/use-tasks.ts",
+      "content": "\"use client\"\n\nimport useSWR from \"swr\"\n\nimport { API_URL } from \"@/registry/new-york/blocks/app-01/lib/constants\"\n\nexport function useTasks() {\n  const { data, isLoading, mutate } = useSWR<{ tasks: string[] }>(\n    \"/api/tasks\",\n    async () => {\n      const response = await fetch(API_URL)\n      return response.json()\n    }\n  )\n\n  return { tasks: data?.tasks || [], isLoading, mutate }\n}\n",
+      "type": "registry:hook",
+      "target": ""
+    },
+    {
+      "path": "blocks/app-01/lib/constants.ts",
+      "content": "export const API_URL = \"https://api.npoint.io/40ac2c2a67c912fa2120\"\n",
+      "type": "registry:lib",
+      "target": ""
+    },
+    {
+      "path": "blocks/app-01/lib/actions.ts",
+      "content": "\"use server\"\n\nimport { API_URL } from \"@/registry/new-york/blocks/app-01/lib/constants\"\n\nexport async function saveTask(formData: FormData) {\n  const name = formData.get(\"name\")\n\n  // Get current tasks\n  const response = await fetch(API_URL)\n  const data = await response.json()\n  const tasks = data.tasks || []\n\n  // Add new task to array\n  tasks.push(name)\n\n  // Save updated tasks array\n  await fetch(API_URL, {\n    method: \"POST\",\n    body: JSON.stringify({ tasks }),\n  })\n\n  return { success: true }\n}\n",
+      "type": "registry:lib",
+      "target": ""
+    }
+  ],
+  "cssVars": {
+    "light": {
+      "primary": "224.3 76.3% 48%",
+      "primary-foreground": "0 0% 100%"
+    }
+  },
+  "categories": [
+    "apps"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/aspect-ratio-demo.json b/apps/www/public/r/styles/new-york/aspect-ratio-demo.json
index e5628637e3a..0b6c3fcda1e 100644
--- a/apps/www/public/r/styles/new-york/aspect-ratio-demo.json
+++ b/apps/www/public/r/styles/new-york/aspect-ratio-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/aspect-ratio-demo.tsx",
+      "path": "examples/aspect-ratio-demo.tsx",
       "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/registry/new-york/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=\"h-full w-full rounded-md object-cover\"\n      />\n    </AspectRatio>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/authentication-01.json b/apps/www/public/r/styles/new-york/authentication-01.json
deleted file mode 100644
index b7ebfa2259e..00000000000
--- a/apps/www/public/r/styles/new-york/authentication-01.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "authentication-01",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input",
-    "label"
-  ],
-  "files": [
-    {
-      "path": "block/authentication-01.tsx",
-      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function LoginForm() {\n  return (\n    <Card className=\"w-full 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 className=\"grid gap-4\">\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"email\">Email</Label>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </div>\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"password\">Password</Label>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button className=\"w-full\">Sign in</Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/authentication-02.json b/apps/www/public/r/styles/new-york/authentication-02.json
deleted file mode 100644
index e3ffcfe4f78..00000000000
--- a/apps/www/public/r/styles/new-york/authentication-02.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "authentication-02",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input",
-    "label"
-  ],
-  "files": [
-    {
-      "path": "block/authentication-02.tsx",
-      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default 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          <Link href=\"#\" className=\"underline\">\n            Sign up\n          </Link>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/authentication-03.json b/apps/www/public/r/styles/new-york/authentication-03.json
deleted file mode 100644
index 1e3fe071a0b..00000000000
--- a/apps/www/public/r/styles/new-york/authentication-03.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "authentication-03",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input",
-    "label"
-  ],
-  "files": [
-    {
-      "path": "block/authentication-03.tsx",
-      "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function LoginForm() {\n  return (\n    <Card className=\"mx-auto max-w-sm\">\n      <CardHeader>\n        <CardTitle className=\"text-xl\">Sign Up</CardTitle>\n        <CardDescription>\n          Enter your information to create an account\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div className=\"grid gap-4\">\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div className=\"grid gap-2\">\n              <Label htmlFor=\"first-name\">First name</Label>\n              <Input id=\"first-name\" placeholder=\"Max\" required />\n            </div>\n            <div className=\"grid gap-2\">\n              <Label htmlFor=\"last-name\">Last name</Label>\n              <Input id=\"last-name\" placeholder=\"Robinson\" required />\n            </div>\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            <Label htmlFor=\"password\">Password</Label>\n            <Input id=\"password\" type=\"password\" />\n          </div>\n          <Button type=\"submit\" className=\"w-full\">\n            Create an account\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Sign up with GitHub\n          </Button>\n        </div>\n        <div className=\"mt-4 text-center text-sm\">\n          Already have an account?{\" \"}\n          <Link href=\"#\" className=\"underline\">\n            Sign in\n          </Link>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/authentication-04.json b/apps/www/public/r/styles/new-york/authentication-04.json
deleted file mode 100644
index 4ff69fe72c5..00000000000
--- a/apps/www/public/r/styles/new-york/authentication-04.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "authentication-04",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input",
-    "label"
-  ],
-  "files": [
-    {
-      "path": "block/authentication-04.tsx",
-      "content": "import Image from \"next/image\"\nimport Link from \"next/link\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]\">\n      <div className=\"flex items-center justify-center py-12\">\n        <div className=\"mx-auto grid w-[350px] gap-6\">\n          <div className=\"grid gap-2 text-center\">\n            <h1 className=\"text-3xl font-bold\">Login</h1>\n            <p className=\"text-balance text-muted-foreground\">\n              Enter your email below to login to your account\n            </p>\n          </div>\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=\"/forgot-password\"\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        </div>\n      </div>\n      <div className=\"hidden bg-muted lg:block\">\n        <Image\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          width=\"1920\"\n          height=\"1080\"\n          className=\"h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/avatar-demo.json b/apps/www/public/r/styles/new-york/avatar-demo.json
index 338714087ba..05406ecd6db 100644
--- a/apps/www/public/r/styles/new-york/avatar-demo.json
+++ b/apps/www/public/r/styles/new-york/avatar-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/avatar-demo.tsx",
+      "path": "examples/avatar-demo.tsx",
       "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\n\nexport default function AvatarDemo() {\n  return (\n    <Avatar>\n      <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n      <AvatarFallback>CN</AvatarFallback>\n    </Avatar>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/badge-demo.json b/apps/www/public/r/styles/new-york/badge-demo.json
index d502216bdcb..9a374e48956 100644
--- a/apps/www/public/r/styles/new-york/badge-demo.json
+++ b/apps/www/public/r/styles/new-york/badge-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/badge-demo.tsx",
+      "path": "examples/badge-demo.tsx",
       "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport default function BadgeDemo() {\n  return <Badge>Badge</Badge>\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/badge-destructive.json b/apps/www/public/r/styles/new-york/badge-destructive.json
index 8f2ab40aa4b..1c0f04db733 100644
--- a/apps/www/public/r/styles/new-york/badge-destructive.json
+++ b/apps/www/public/r/styles/new-york/badge-destructive.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/badge-destructive.tsx",
+      "path": "examples/badge-destructive.tsx",
       "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport default function BadgeDestructive() {\n  return <Badge variant=\"destructive\">Destructive</Badge>\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/badge-outline.json b/apps/www/public/r/styles/new-york/badge-outline.json
index 08075bac9e8..d6f9d88892a 100644
--- a/apps/www/public/r/styles/new-york/badge-outline.json
+++ b/apps/www/public/r/styles/new-york/badge-outline.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/badge-outline.tsx",
+      "path": "examples/badge-outline.tsx",
       "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport default function BadgeOutline() {\n  return <Badge variant=\"outline\">Outline</Badge>\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/badge-secondary.json b/apps/www/public/r/styles/new-york/badge-secondary.json
index a3701a5dedb..9aca89f0622 100644
--- a/apps/www/public/r/styles/new-york/badge-secondary.json
+++ b/apps/www/public/r/styles/new-york/badge-secondary.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/badge-secondary.tsx",
+      "path": "examples/badge-secondary.tsx",
       "content": "import { Badge } from \"@/registry/new-york/ui/badge\"\n\nexport default function BadgeSecondary() {\n  return <Badge variant=\"secondary\">Secondary</Badge>\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/breadcrumb-demo.json b/apps/www/public/r/styles/new-york/breadcrumb-demo.json
index 82360e58e96..6cb272086b0 100644
--- a/apps/www/public/r/styles/new-york/breadcrumb-demo.json
+++ b/apps/www/public/r/styles/new-york/breadcrumb-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/breadcrumb-demo.tsx",
+      "path": "examples/breadcrumb-demo.tsx",
       "content": "import {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/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=\"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\">Components</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/www/public/r/styles/new-york/breadcrumb-dropdown.json b/apps/www/public/r/styles/new-york/breadcrumb-dropdown.json
index 81a1a81d55e..f141cbe3a31 100644
--- a/apps/www/public/r/styles/new-york/breadcrumb-dropdown.json
+++ b/apps/www/public/r/styles/new-york/breadcrumb-dropdown.json
@@ -6,8 +6,8 @@
   ],
   "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/new-york/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/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",
+      "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/new-york/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/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 />\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/www/public/r/styles/new-york/breadcrumb-ellipsis.json b/apps/www/public/r/styles/new-york/breadcrumb-ellipsis.json
index 62a88cde459..db92b76f144 100644
--- a/apps/www/public/r/styles/new-york/breadcrumb-ellipsis.json
+++ b/apps/www/public/r/styles/new-york/breadcrumb-ellipsis.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/breadcrumb-ellipsis.tsx",
+      "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/new-york/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/www/public/r/styles/new-york/breadcrumb-link.json b/apps/www/public/r/styles/new-york/breadcrumb-link.json
index c725fabd380..603e4cbc7e5 100644
--- a/apps/www/public/r/styles/new-york/breadcrumb-link.json
+++ b/apps/www/public/r/styles/new-york/breadcrumb-link.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/breadcrumb-link.tsx",
+      "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/new-york/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/www/public/r/styles/new-york/breadcrumb-responsive.json b/apps/www/public/r/styles/new-york/breadcrumb-responsive.json
index 403aa7cbe5f..ffb59595484 100644
--- a/apps/www/public/r/styles/new-york/breadcrumb-responsive.json
+++ b/apps/www/public/r/styles/new-york/breadcrumb-responsive.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/breadcrumb-responsive.tsx",
+      "path": "examples/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/new-york/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/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            <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=\"h-4 w-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=\"h-4 w-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/www/public/r/styles/new-york/breadcrumb-separator.json b/apps/www/public/r/styles/new-york/breadcrumb-separator.json
index 16b4819a4e8..2e9673bb09b 100644
--- a/apps/www/public/r/styles/new-york/breadcrumb-separator.json
+++ b/apps/www/public/r/styles/new-york/breadcrumb-separator.json
@@ -6,8 +6,8 @@
   ],
   "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/new-york/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",
+      "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/new-york/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/www/public/r/styles/new-york/breadcrumb.json b/apps/www/public/r/styles/new-york/breadcrumb.json
index 2d62288f2cc..dda43065c6b 100644
--- a/apps/www/public/r/styles/new-york/breadcrumb.json
+++ b/apps/www/public/r/styles/new-york/breadcrumb.json
@@ -7,7 +7,7 @@
   "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 { 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      \"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground 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(\"transition-colors hover:text-foreground\", 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(\"font-normal text-foreground\", className)}\n    {...props}\n  />\n))\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nconst BreadcrumbSeparator = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) => (\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"[&>svg]:w-3.5 [&>svg]:h-3.5\", className)}\n    {...props}\n  >\n    {children ?? <ChevronRightIcon />}\n  </li>\n)\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nconst BreadcrumbEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <DotsHorizontalIcon className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More</span>\n  </span>\n)\nBreadcrumbEllipsis.displayName = \"BreadcrumbElipssis\"\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { ChevronRight, MoreHorizontal } from \"lucide-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      \"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground 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(\"transition-colors hover:text-foreground\", 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(\"font-normal text-foreground\", className)}\n    {...props}\n  />\n))\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nconst BreadcrumbSeparator = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) => (\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"[&>svg]:w-3.5 [&>svg]:h-3.5\", className)}\n    {...props}\n  >\n    {children ?? <ChevronRight />}\n  </li>\n)\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nconst BreadcrumbEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <MoreHorizontal className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More</span>\n  </span>\n)\nBreadcrumbEllipsis.displayName = \"BreadcrumbElipssis\"\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/www/public/r/styles/new-york/button-01-dark.png b/apps/www/public/r/styles/new-york/button-01-dark.png
new file mode 100644
index 00000000000..211238839bb
Binary files /dev/null and b/apps/www/public/r/styles/new-york/button-01-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/button-01-light.png b/apps/www/public/r/styles/new-york/button-01-light.png
new file mode 100644
index 00000000000..b46751b1ea7
Binary files /dev/null and b/apps/www/public/r/styles/new-york/button-01-light.png differ
diff --git a/apps/www/public/r/styles/new-york/button-01.json b/apps/www/public/r/styles/new-york/button-01.json
new file mode 100644
index 00000000000..2b3fe8ab6c9
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/button-01.json
@@ -0,0 +1,25 @@
+{
+  "name": "button-01",
+  "type": "registry:block",
+  "description": "A simple button.",
+  "files": [
+    {
+      "path": "blocks/button-01/page.tsx",
+      "content": "import { AmazingButton } from \"@/registry/new-york/blocks/button-01/components/amazing-button\"\n\nexport default function Page() {\n  return (\n    <div className=\"h-svh flex items-center justify-center\">\n      <AmazingButton />\n    </div>\n  )\n}\n",
+      "type": "registry:page",
+      "target": "app/page.tsx"
+    },
+    {
+      "path": "blocks/button-01/components/amazing-button.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport function AmazingButton() {\n  return (\n    <Button className=\"bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white\">\n      Amazing Button\n    </Button>\n  )\n}\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ],
+  "meta": {
+    "iframeHeight": "300px"
+  },
+  "categories": [
+    "misc"
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/button-as-child.json b/apps/www/public/r/styles/new-york/button-as-child.json
index 4aea61c78c3..c4a05308523 100644
--- a/apps/www/public/r/styles/new-york/button-as-child.json
+++ b/apps/www/public/r/styles/new-york/button-as-child.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/button-as-child.tsx",
+      "path": "examples/button-as-child.tsx",
       "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/new-york/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/www/public/r/styles/new-york/button-demo.json b/apps/www/public/r/styles/new-york/button-demo.json
index 5d51f0082a1..f3ccc42e080 100644
--- a/apps/www/public/r/styles/new-york/button-demo.json
+++ b/apps/www/public/r/styles/new-york/button-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/button-demo.tsx",
+      "path": "examples/button-demo.tsx",
       "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonDemo() {\n  return <Button>Button</Button>\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/button-destructive.json b/apps/www/public/r/styles/new-york/button-destructive.json
index dffcdbbdbca..a40978f9ac2 100644
--- a/apps/www/public/r/styles/new-york/button-destructive.json
+++ b/apps/www/public/r/styles/new-york/button-destructive.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/button-destructive.tsx",
+      "path": "examples/button-destructive.tsx",
       "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonDestructive() {\n  return <Button variant=\"destructive\">Destructive</Button>\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/button-ghost.json b/apps/www/public/r/styles/new-york/button-ghost.json
index c3a0e8a5b0a..ee946e2ff9f 100644
--- a/apps/www/public/r/styles/new-york/button-ghost.json
+++ b/apps/www/public/r/styles/new-york/button-ghost.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/button-ghost.tsx",
+      "path": "examples/button-ghost.tsx",
       "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonGhost() {\n  return <Button variant=\"ghost\">Ghost</Button>\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/button-icon.json b/apps/www/public/r/styles/new-york/button-icon.json
index 4579dac765d..23715a1c9a4 100644
--- a/apps/www/public/r/styles/new-york/button-icon.json
+++ b/apps/www/public/r/styles/new-york/button-icon.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/button-icon.tsx",
-      "content": "import { ChevronRightIcon } from \"@radix-ui/react-icons\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonIcon() {\n  return (\n    <Button variant=\"outline\" size=\"icon\">\n      <ChevronRightIcon className=\"h-4 w-4\" />\n    </Button>\n  )\n}\n",
+      "path": "examples/button-icon.tsx",
+      "content": "import { ChevronRight } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonIcon() {\n  return (\n    <Button variant=\"outline\" size=\"icon\">\n      <ChevronRight />\n    </Button>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/button-link.json b/apps/www/public/r/styles/new-york/button-link.json
index de1a8a98c98..4535e433593 100644
--- a/apps/www/public/r/styles/new-york/button-link.json
+++ b/apps/www/public/r/styles/new-york/button-link.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/button-link.tsx",
+      "path": "examples/button-link.tsx",
       "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonLink() {\n  return <Button variant=\"link\">Link</Button>\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/button-loading.json b/apps/www/public/r/styles/new-york/button-loading.json
index 97f55a5ce7e..207aab71f2b 100644
--- a/apps/www/public/r/styles/new-york/button-loading.json
+++ b/apps/www/public/r/styles/new-york/button-loading.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/button-loading.tsx",
-      "content": "import { ReloadIcon } from \"@radix-ui/react-icons\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonLoading() {\n  return (\n    <Button disabled>\n      <ReloadIcon className=\"mr-2 h-4 w-4 animate-spin\" />\n      Please wait\n    </Button>\n  )\n}\n",
+      "path": "examples/button-loading.tsx",
+      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonLoading() {\n  return (\n    <Button disabled>\n      <Loader2 className=\"animate-spin\" />\n      Please wait\n    </Button>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/button-outline.json b/apps/www/public/r/styles/new-york/button-outline.json
index 9188659d7af..09413306753 100644
--- a/apps/www/public/r/styles/new-york/button-outline.json
+++ b/apps/www/public/r/styles/new-york/button-outline.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/button-outline.tsx",
+      "path": "examples/button-outline.tsx",
       "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonOutline() {\n  return <Button variant=\"outline\">Outline</Button>\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/button-secondary.json b/apps/www/public/r/styles/new-york/button-secondary.json
index af769691d38..363360a1fa3 100644
--- a/apps/www/public/r/styles/new-york/button-secondary.json
+++ b/apps/www/public/r/styles/new-york/button-secondary.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/button-secondary.tsx",
+      "path": "examples/button-secondary.tsx",
       "content": "import { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonSecondary() {\n  return <Button variant=\"secondary\">Secondary</Button>\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/button-with-icon.json b/apps/www/public/r/styles/new-york/button-with-icon.json
index 9033b648da2..834dc60f237 100644
--- a/apps/www/public/r/styles/new-york/button-with-icon.json
+++ b/apps/www/public/r/styles/new-york/button-with-icon.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/button-with-icon.tsx",
-      "content": "import { EnvelopeOpenIcon } from \"@radix-ui/react-icons\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonWithIcon() {\n  return (\n    <Button>\n      <EnvelopeOpenIcon /> Login with Email\n    </Button>\n  )\n}\n",
+      "path": "examples/button-with-icon.tsx",
+      "content": "import { MailOpen } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonWithIcon() {\n  return (\n    <Button>\n      <MailOpen /> Login with Email\n    </Button>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/calendar-demo.json b/apps/www/public/r/styles/new-york/calendar-demo.json
index 5ac7325a4f2..ebbb762ea93 100644
--- a/apps/www/public/r/styles/new-york/calendar-demo.json
+++ b/apps/www/public/r/styles/new-york/calendar-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/calendar-demo.tsx",
+      "path": "examples/calendar-demo.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/new-york/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/www/public/r/styles/new-york/calendar-form.json b/apps/www/public/r/styles/new-york/calendar-form.json
index bb6c3614260..eb47a601942 100644
--- a/apps/www/public/r/styles/new-york/calendar-form.json
+++ b/apps/www/public/r/styles/new-york/calendar-form.json
@@ -8,8 +8,8 @@
   ],
   "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 { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\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={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 h-4 w-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                    }\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",
+      "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 { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\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={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 h-4 w-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                    }\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/www/public/r/styles/new-york/calendar.json b/apps/www/public/r/styles/new-york/calendar.json
index 2078a379618..634d2708210 100644
--- a/apps/www/public/r/styles/new-york/calendar.json
+++ b/apps/www/public/r/styles/new-york/calendar.json
@@ -11,7 +11,7 @@
   "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 { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york/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: \"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          \"h-7 w-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          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&: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          \"h-8 w-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=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRightIcon className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york/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: \"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          \"h-7 w-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          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&: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          \"h-8 w-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 aria-selected:bg-accent/50 aria-selected:text-muted-foreground\",\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: ({ className, ...props }) => (\n          <ChevronLeft className={cn(\"h-4 w-4\", className)} {...props} />\n        ),\n        IconRight: ({ className, ...props }) => (\n          <ChevronRight className={cn(\"h-4 w-4\", className)} {...props} />\n        ),\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/card-demo.json b/apps/www/public/r/styles/new-york/card-demo.json
index bf9a0f00833..922b10091cd 100644
--- a/apps/www/public/r/styles/new-york/card-demo.json
+++ b/apps/www/public/r/styles/new-york/card-demo.json
@@ -8,8 +8,8 @@
   ],
   "files": [
     {
-      "path": "example/card-demo.tsx",
-      "content": "import { BellIcon, CheckIcon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Switch } from \"@/registry/new-york/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-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          <CheckIcon /> Mark all as read\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "path": "examples/card-demo.tsx",
+      "content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Switch } from \"@/registry/new-york/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-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:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/card-with-form.json b/apps/www/public/r/styles/new-york/card-with-form.json
index c27294ed69a..ec60db1a7c1 100644
--- a/apps/www/public/r/styles/new-york/card-with-form.json
+++ b/apps/www/public/r/styles/new-york/card-with-form.json
@@ -10,7 +10,7 @@
   ],
   "files": [
     {
-      "path": "example/card-with-form.tsx",
+      "path": "examples/card-with-form.tsx",
       "content": "import * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/card.json b/apps/www/public/r/styles/new-york/card.json
index 31436e3e6f6..75b687da4fa 100644
--- a/apps/www/public/r/styles/new-york/card.json
+++ b/apps/www/public/r/styles/new-york/card.json
@@ -4,7 +4,7 @@
   "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      \"rounded-xl border bg-card text-card-foreground 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-sm text-muted-foreground\", 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",
+      "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      \"rounded-xl border bg-card text-card-foreground 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  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\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  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", 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": ""
     }
diff --git a/apps/www/public/r/styles/new-york/carousel-api.json b/apps/www/public/r/styles/new-york/carousel-api.json
index 8452738ad6d..bf090a8dae4 100644
--- a/apps/www/public/r/styles/new-york/carousel-api.json
+++ b/apps/www/public/r/styles/new-york/carousel-api.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/carousel-api.tsx",
+      "path": "examples/carousel-api.tsx",
       "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n  type CarouselApi,\n} from \"@/registry/new-york/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\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 className=\"mx-auto max-w-xs\">\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=\"py-2 text-center text-sm text-muted-foreground\">\n        Slide {current} of {count}\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/carousel-demo.json b/apps/www/public/r/styles/new-york/carousel-demo.json
index 33945c5143d..e0dea0cbd4d 100644
--- a/apps/www/public/r/styles/new-york/carousel-demo.json
+++ b/apps/www/public/r/styles/new-york/carousel-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/carousel-demo.tsx",
+      "path": "examples/carousel-demo.tsx",
       "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york/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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/carousel-orientation.json b/apps/www/public/r/styles/new-york/carousel-orientation.json
index d0f69e70c07..f2c247273bc 100644
--- a/apps/www/public/r/styles/new-york/carousel-orientation.json
+++ b/apps/www/public/r/styles/new-york/carousel-orientation.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/carousel-orientation.tsx",
+      "path": "examples/carousel-orientation.tsx",
       "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york/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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/carousel-plugin.json b/apps/www/public/r/styles/new-york/carousel-plugin.json
index 1a8d1d1330a..3e20e87e802 100644
--- a/apps/www/public/r/styles/new-york/carousel-plugin.json
+++ b/apps/www/public/r/styles/new-york/carousel-plugin.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/carousel-plugin.tsx",
+      "path": "examples/carousel-plugin.tsx",
       "content": "import * as React from \"react\"\nimport Autoplay from \"embla-carousel-autoplay\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york/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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/carousel-size.json b/apps/www/public/r/styles/new-york/carousel-size.json
index b9e37e20a78..5a52872ba8c 100644
--- a/apps/www/public/r/styles/new-york/carousel-size.json
+++ b/apps/www/public/r/styles/new-york/carousel-size.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/carousel-size.tsx",
+      "path": "examples/carousel-size.tsx",
       "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york/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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/carousel-spacing.json b/apps/www/public/r/styles/new-york/carousel-spacing.json
index d2f50972ad0..20b1ff50c7b 100644
--- a/apps/www/public/r/styles/new-york/carousel-spacing.json
+++ b/apps/www/public/r/styles/new-york/carousel-spacing.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/carousel-spacing.tsx",
+      "path": "examples/carousel-spacing.tsx",
       "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york/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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/carousel.json b/apps/www/public/r/styles/new-york/carousel.json
index 84f8290c59e..e914cba0061 100644
--- a/apps/www/public/r/styles/new-york/carousel.json
+++ b/apps/www/public/r/styles/new-york/carousel.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "ui/carousel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowLeftIcon, ArrowRightIcon } from \"@radix-ui/react-icons\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\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\n  return context\n}\n\nconst Carousel = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n  (\n    {\n      orientation = \"horizontal\",\n      opts,\n      setApi,\n      plugins,\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 onSelect = React.useCallback((api: CarouselApi) => {\n      if (!api) {\n        return\n      }\n\n      setCanScrollPrev(api.canScrollPrev())\n      setCanScrollNext(api.canScrollNext())\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) {\n        return\n      }\n\n      setApi(api)\n    }, [api, setApi])\n\n    React.useEffect(() => {\n      if (!api) {\n        return\n      }\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    return (\n      <CarouselContext.Provider\n        value={{\n          carouselRef,\n          api: api,\n          opts,\n          orientation:\n            orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n          scrollPrev,\n          scrollNext,\n          canScrollPrev,\n          canScrollNext,\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  h-8 w-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=\"h-4 w-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 h-8 w-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=\"h-4 w-4\" />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n})\nCarouselNext.displayName = \"CarouselNext\"\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\nimport { ArrowLeft, ArrowRight } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\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\n  return context\n}\n\nconst Carousel = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n  (\n    {\n      orientation = \"horizontal\",\n      opts,\n      setApi,\n      plugins,\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 onSelect = React.useCallback((api: CarouselApi) => {\n      if (!api) {\n        return\n      }\n\n      setCanScrollPrev(api.canScrollPrev())\n      setCanScrollNext(api.canScrollNext())\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) {\n        return\n      }\n\n      setApi(api)\n    }, [api, setApi])\n\n    React.useEffect(() => {\n      if (!api) {\n        return\n      }\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    return (\n      <CarouselContext.Provider\n        value={{\n          carouselRef,\n          api: api,\n          opts,\n          orientation:\n            orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n          scrollPrev,\n          scrollNext,\n          canScrollPrev,\n          canScrollNext,\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  h-8 w-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=\"h-4 w-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 h-8 w-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=\"h-4 w-4\" />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n})\nCarouselNext.displayName = \"CarouselNext\"\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/chart-area-axes.json b/apps/www/public/r/styles/new-york/chart-area-axes.json
index d74c3f1bcc5..c3e61497c6d 100644
--- a/apps/www/public/r/styles/new-york/chart-area-axes.json
+++ b/apps/www/public/r/styles/new-york/chart-area-axes.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-area-axes",
   "type": "registry:block",
-  "description": "An area chart with axes",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-axes.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-area-default.json b/apps/www/public/r/styles/new-york/chart-area-default.json
index 601021cfb29..66cc942a8fb 100644
--- a/apps/www/public/r/styles/new-york/chart-area-default.json
+++ b/apps/www/public/r/styles/new-york/chart-area-default.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-area-default",
   "type": "registry:block",
-  "description": "A simple area chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-default.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-area-gradient.json b/apps/www/public/r/styles/new-york/chart-area-gradient.json
index 963c6549435..4ee15a93327 100644
--- a/apps/www/public/r/styles/new-york/chart-area-gradient.json
+++ b/apps/www/public/r/styles/new-york/chart-area-gradient.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-area-gradient",
   "type": "registry:block",
-  "description": "An area chart with gradient fill",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-gradient.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-area-icons.json b/apps/www/public/r/styles/new-york/chart-area-icons.json
index acaa01fafab..2c8328cc216 100644
--- a/apps/www/public/r/styles/new-york/chart-area-icons.json
+++ b/apps/www/public/r/styles/new-york/chart-area-icons.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-area-icons",
   "type": "registry:block",
-  "description": "An area chart with icons",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-icons.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-area-interactive.json b/apps/www/public/r/styles/new-york/chart-area-interactive.json
index 3ad4dc94bab..0a0aa4b2a58 100644
--- a/apps/www/public/r/styles/new-york/chart-area-interactive.json
+++ b/apps/www/public/r/styles/new-york/chart-area-interactive.json
@@ -1,7 +1,6 @@
 {
   "name": "chart-area-interactive",
   "type": "registry:block",
-  "description": "An interactive area chart",
   "registryDependencies": [
     "card",
     "chart",
@@ -9,9 +8,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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/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    } 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",
-      "type": "registry:component"
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/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 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",
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-area"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-area-legend.json b/apps/www/public/r/styles/new-york/chart-area-legend.json
index ae727036445..3986cb56960 100644
--- a/apps/www/public/r/styles/new-york/chart-area-legend.json
+++ b/apps/www/public/r/styles/new-york/chart-area-legend.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-area-legend",
   "type": "registry:block",
-  "description": "An area chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-legend.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-area-linear.json b/apps/www/public/r/styles/new-york/chart-area-linear.json
index f3044066d63..27154efe579 100644
--- a/apps/www/public/r/styles/new-york/chart-area-linear.json
+++ b/apps/www/public/r/styles/new-york/chart-area-linear.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-area-linear",
   "type": "registry:block",
-  "description": "A linear area chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-linear.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-area-stacked-expand.json b/apps/www/public/r/styles/new-york/chart-area-stacked-expand.json
index 98a056de641..2ac25a50273 100644
--- a/apps/www/public/r/styles/new-york/chart-area-stacked-expand.json
+++ b/apps/www/public/r/styles/new-york/chart-area-stacked-expand.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-area-stacked-expand",
   "type": "registry:block",
-  "description": "A stacked area chart with expand stacking",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-stacked-expand.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-area-stacked.json b/apps/www/public/r/styles/new-york/chart-area-stacked.json
index 65026e12734..873ee57e32b 100644
--- a/apps/www/public/r/styles/new-york/chart-area-stacked.json
+++ b/apps/www/public/r/styles/new-york/chart-area-stacked.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-area-stacked",
   "type": "registry:block",
-  "description": "A stacked area chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-stacked.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-area-step.json b/apps/www/public/r/styles/new-york/chart-area-step.json
index a462292007d..11797844779 100644
--- a/apps/www/public/r/styles/new-york/chart-area-step.json
+++ b/apps/www/public/r/styles/new-york/chart-area-step.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-area-step",
   "type": "registry:block",
-  "description": "A step area chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-area-step.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-bar-active.json b/apps/www/public/r/styles/new-york/chart-bar-active.json
index 8a9890d80a4..b42f43af9a2 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-active.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-active.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-bar-active",
   "type": "registry:block",
-  "description": "A bar chart with an active bar",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-active.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-bar-default.json b/apps/www/public/r/styles/new-york/chart-bar-default.json
index 1b561d47c6d..65e675d1960 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-default.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-default.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-bar-default",
   "type": "registry:block",
-  "description": "A bar chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-default.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-bar-demo-axis.json b/apps/www/public/r/styles/new-york/chart-bar-demo-axis.json
index 2c2ec7bc9b0..6d161078094 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-demo-axis.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-demo-axis.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/chart-bar-demo-axis.tsx",
+      "path": "examples/chart-bar-demo-axis.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york/ui/chart\"\n\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: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\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        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/chart-bar-demo-grid.json b/apps/www/public/r/styles/new-york/chart-bar-demo-grid.json
index 50f025388a0..7273cdaf7c6 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-demo-grid.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-demo-grid.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/chart-bar-demo-grid.tsx",
+      "path": "examples/chart-bar-demo-grid.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york/ui/chart\"\n\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: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\n        <CartesianGrid vertical={false} />\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  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/chart-bar-demo-legend.json b/apps/www/public/r/styles/new-york/chart-bar-demo-legend.json
index c303be81018..1e4fcca299c 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-demo-legend.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-demo-legend.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/chart-bar-demo-legend.tsx",
+      "path": "examples/chart-bar-demo-legend.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\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: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\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 />} />\n        <ChartLegend content={<ChartLegendContent />} />\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  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/chart-bar-demo-tooltip.json b/apps/www/public/r/styles/new-york/chart-bar-demo-tooltip.json
index 1e694b5ba82..79b0f3848b2 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-demo-tooltip.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-demo-tooltip.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/chart-bar-demo-tooltip.tsx",
+      "path": "examples/chart-bar-demo-tooltip.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\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: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\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 />} />\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  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/chart-bar-demo.json b/apps/www/public/r/styles/new-york/chart-bar-demo.json
index 4266321c1e5..bed419e2459 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-demo.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-demo.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/chart-bar-demo.tsx",
+      "path": "examples/chart-bar-demo.tsx",
       "content": "\"use client\"\n\nimport { Bar, BarChart } from \"recharts\"\n\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york/ui/chart\"\n\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: \"#2563eb\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"#60a5fa\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n      <BarChart accessibilityLayer data={chartData}>\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  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/chart-bar-horizontal.json b/apps/www/public/r/styles/new-york/chart-bar-horizontal.json
index 4ceb23c0c6a..3d8f5ac6ae3 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-horizontal.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-horizontal.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-bar-horizontal",
   "type": "registry:block",
-  "description": "A horizontal bar chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-horizontal.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-bar-interactive.json b/apps/www/public/r/styles/new-york/chart-bar-interactive.json
index 063bdfb336c..a401ba07a35 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-interactive.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-interactive.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-bar-interactive",
   "type": "registry:block",
-  "description": "An interactive bar chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-interactive.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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(\"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",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-bar"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-bar-label-custom.json b/apps/www/public/r/styles/new-york/chart-bar-label-custom.json
index 9125efe147e..344ce0e35a4 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-label-custom.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-label-custom.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-bar-label-custom",
   "type": "registry:block",
-  "description": "A bar chart with a custom label",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-label-custom.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-bar-label.json b/apps/www/public/r/styles/new-york/chart-bar-label.json
index 8004311885a..98c3ff368e2 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-label.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-label.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-bar-label",
   "type": "registry:block",
-  "description": "A bar chart with a label",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-label.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-bar-mixed.json b/apps/www/public/r/styles/new-york/chart-bar-mixed.json
index 4703651837e..42ff9b4c60a 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-mixed.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-mixed.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-bar-mixed",
   "type": "registry:block",
-  "description": "A mixed bar chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-mixed.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-bar-multiple.json b/apps/www/public/r/styles/new-york/chart-bar-multiple.json
index fed87b7739c..bf129d4380c 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-multiple.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-multiple.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-bar-multiple",
   "type": "registry:block",
-  "description": "A multiple bar chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-multiple.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-bar-negative.json b/apps/www/public/r/styles/new-york/chart-bar-negative.json
index 9a9ff42d44f..e2aefefe769 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-negative.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-negative.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-bar-negative",
   "type": "registry:block",
-  "description": "A bar chart with negative values",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-negative.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-bar-stacked.json b/apps/www/public/r/styles/new-york/chart-bar-stacked.json
index 69b1a060c76..342f39ed1e1 100644
--- a/apps/www/public/r/styles/new-york/chart-bar-stacked.json
+++ b/apps/www/public/r/styles/new-york/chart-bar-stacked.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-bar-stacked",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-bar-stacked.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-line-default.json b/apps/www/public/r/styles/new-york/chart-line-default.json
index 2ee4bd0ec2e..1dc535c0132 100644
--- a/apps/www/public/r/styles/new-york/chart-line-default.json
+++ b/apps/www/public/r/styles/new-york/chart-line-default.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-line-default",
   "type": "registry:block",
-  "description": "A line chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-default.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-line-dots-colors.json b/apps/www/public/r/styles/new-york/chart-line-dots-colors.json
index ec157b862ed..68e37a03295 100644
--- a/apps/www/public/r/styles/new-york/chart-line-dots-colors.json
+++ b/apps/www/public/r/styles/new-york/chart-line-dots-colors.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-line-dots-colors",
   "type": "registry:block",
-  "description": "A line chart with dots and colors",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-dots-colors.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-line-dots-custom.json b/apps/www/public/r/styles/new-york/chart-line-dots-custom.json
index 264a1870c2d..853ebbec1a0 100644
--- a/apps/www/public/r/styles/new-york/chart-line-dots-custom.json
+++ b/apps/www/public/r/styles/new-york/chart-line-dots-custom.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-line-dots-custom",
   "type": "registry:block",
-  "description": "A line chart with custom dots",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-dots-custom.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-line-dots.json b/apps/www/public/r/styles/new-york/chart-line-dots.json
index 3cd2eeeb2e1..099e81a4038 100644
--- a/apps/www/public/r/styles/new-york/chart-line-dots.json
+++ b/apps/www/public/r/styles/new-york/chart-line-dots.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-line-dots",
   "type": "registry:block",
-  "description": "A line chart with dots",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-dots.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-line-interactive.json b/apps/www/public/r/styles/new-york/chart-line-interactive.json
index c72d2ee1001..9e35146d36c 100644
--- a/apps/www/public/r/styles/new-york/chart-line-interactive.json
+++ b/apps/www/public/r/styles/new-york/chart-line-interactive.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-line-interactive",
   "type": "registry:block",
-  "description": "An interactive line chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-interactive.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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(\"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",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-line"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-line-label-custom.json b/apps/www/public/r/styles/new-york/chart-line-label-custom.json
index 017ee9db0af..c524ebe5b48 100644
--- a/apps/www/public/r/styles/new-york/chart-line-label-custom.json
+++ b/apps/www/public/r/styles/new-york/chart-line-label-custom.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-line-label-custom",
   "type": "registry:block",
-  "description": "A line chart with a custom label",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-label-custom.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-line-label.json b/apps/www/public/r/styles/new-york/chart-line-label.json
index 8329be9608f..945d50cde9a 100644
--- a/apps/www/public/r/styles/new-york/chart-line-label.json
+++ b/apps/www/public/r/styles/new-york/chart-line-label.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-line-label",
   "type": "registry:block",
-  "description": "A line chart with a label",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-label.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-line-linear.json b/apps/www/public/r/styles/new-york/chart-line-linear.json
index b4118d05216..dcb923fa236 100644
--- a/apps/www/public/r/styles/new-york/chart-line-linear.json
+++ b/apps/www/public/r/styles/new-york/chart-line-linear.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-line-linear",
   "type": "registry:block",
-  "description": "A linear line chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-linear.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-line-multiple.json b/apps/www/public/r/styles/new-york/chart-line-multiple.json
index e8d6c7b969d..6f1d7ce99e6 100644
--- a/apps/www/public/r/styles/new-york/chart-line-multiple.json
+++ b/apps/www/public/r/styles/new-york/chart-line-multiple.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-line-multiple",
   "type": "registry:block",
-  "description": "A multiple line chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-multiple.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-line-step.json b/apps/www/public/r/styles/new-york/chart-line-step.json
index cd8567ef782..db979fc343a 100644
--- a/apps/www/public/r/styles/new-york/chart-line-step.json
+++ b/apps/www/public/r/styles/new-york/chart-line-step.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-line-step",
   "type": "registry:block",
-  "description": "A line chart with step",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-line-step.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-pie-donut-active.json b/apps/www/public/r/styles/new-york/chart-pie-donut-active.json
index 601d3b1d2c4..01d49d10731 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-donut-active.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-donut-active.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-donut-active",
   "type": "registry:block",
-  "description": "A donut chart with an active sector",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-donut-active.tsx",
+      "path": "charts/chart-pie-donut-active.tsx",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-pie-donut-text.json b/apps/www/public/r/styles/new-york/chart-pie-donut-text.json
index 5858bfc8376..b76228c8e34 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-donut-text.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-donut-text.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-donut-text",
   "type": "registry:block",
-  "description": "A donut chart with text",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-donut-text.tsx",
+      "path": "charts/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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-pie-donut.json b/apps/www/public/r/styles/new-york/chart-pie-donut.json
index 2db78bc5fd3..800f7c46cd1 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-donut.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-donut.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-donut",
   "type": "registry:block",
-  "description": "A donut chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-donut.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-pie-interactive.json b/apps/www/public/r/styles/new-york/chart-pie-interactive.json
index 0384ae5c7a8..fa3d65fb5b4 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-interactive.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-interactive.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-interactive",
   "type": "registry:block",
-  "description": "An interactive pie chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-interactive.tsx",
+      "path": "charts/chart-pie-interactive.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartStyle,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/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[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",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-pie"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-pie-label-custom.json b/apps/www/public/r/styles/new-york/chart-pie-label-custom.json
index 01fd3ea4031..c1293107fcc 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-label-custom.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-label-custom.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-label-custom",
   "type": "registry:block",
-  "description": "A pie chart with a custom label",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-label-custom.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-pie-label-list.json b/apps/www/public/r/styles/new-york/chart-pie-label-list.json
index 979d44dc5e9..6071919ed14 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-label-list.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-label-list.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-label-list",
   "type": "registry:block",
-  "description": "A pie chart with a label list",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-label-list.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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={<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              />\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/www/public/r/styles/new-york/chart-pie-label.json b/apps/www/public/r/styles/new-york/chart-pie-label.json
index 89647956dcb..00a8a6fd390 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-label.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-label.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-label",
   "type": "registry:block",
-  "description": "A pie chart with a label",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-label.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 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 <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/www/public/r/styles/new-york/chart-pie-legend.json b/apps/www/public/r/styles/new-york/chart-pie-legend.json
index 538b45b445e..7309bab3b95 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-legend.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-legend.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-legend",
   "type": "registry:block",
-  "description": "A pie chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-legend.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-pie-separator-none.json b/apps/www/public/r/styles/new-york/chart-pie-separator-none.json
index a6a84043fdb..ec1147614e5 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-separator-none.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-separator-none.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-separator-none",
   "type": "registry:block",
-  "description": "A pie chart with no separator",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-separator-none.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-pie-simple.json b/apps/www/public/r/styles/new-york/chart-pie-simple.json
index ca331b620c4..9a95ac6621e 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-simple.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-simple.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-simple",
   "type": "registry:block",
-  "description": "A simple pie chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-simple.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-pie-stacked.json b/apps/www/public/r/styles/new-york/chart-pie-stacked.json
index c58d58f209b..be91470b761 100644
--- a/apps/www/public/r/styles/new-york/chart-pie-stacked.json
+++ b/apps/www/public/r/styles/new-york/chart-pie-stacked.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-pie-stacked",
   "type": "registry:block",
-  "description": "A pie chart with stacked sections",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-pie-stacked.tsx",
+      "path": "charts/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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-radar-default.json b/apps/www/public/r/styles/new-york/chart-radar-default.json
index 9a2228957a2..d1b9c25ca1f 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-default.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-default.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-default",
   "type": "registry:block",
-  "description": "A radar chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-default.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-radar-dots.json b/apps/www/public/r/styles/new-york/chart-radar-dots.json
index d7cfbf60252..a8e7b9fca23 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-dots.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-dots.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-dots",
   "type": "registry:block",
-  "description": "A radar chart with dots",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-dots.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-radar-grid-circle-fill.json b/apps/www/public/r/styles/new-york/chart-radar-grid-circle-fill.json
index 709a9471c41..cc72d74e39a 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-grid-circle-fill.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-grid-circle-fill.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-grid-circle-fill",
   "type": "registry:block",
-  "description": "A radar chart with a grid and circle fill",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-circle-fill.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-radar-grid-circle-no-lines.json b/apps/www/public/r/styles/new-york/chart-radar-grid-circle-no-lines.json
index 017e2a38926..ab789a42ac3 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-grid-circle-no-lines.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-grid-circle-no-lines.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-grid-circle-no-lines",
   "type": "registry:block",
-  "description": "A radar chart with a grid and circle fill",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-circle-no-lines.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-radar-grid-circle.json b/apps/www/public/r/styles/new-york/chart-radar-grid-circle.json
index 2f18a45436f..2f90d2c05a2 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-grid-circle.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-grid-circle.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-grid-circle",
   "type": "registry:block",
-  "description": "A radar chart with a grid and circle",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-circle.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-radar-grid-custom.json b/apps/www/public/r/styles/new-york/chart-radar-grid-custom.json
index 2d28ad3d940..590afc07d0f 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-grid-custom.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-grid-custom.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-grid-custom",
   "type": "registry:block",
-  "description": "A radar chart with a custom grid",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-custom.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-radar-grid-fill.json b/apps/www/public/r/styles/new-york/chart-radar-grid-fill.json
index fdb0346c4e0..95c3a088046 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-grid-fill.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-grid-fill.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-grid-fill",
   "type": "registry:block",
-  "description": "A radar chart with a grid filled",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-fill.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-radar-grid-none.json b/apps/www/public/r/styles/new-york/chart-radar-grid-none.json
index 9e629af75fe..8cc6a862878 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-grid-none.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-grid-none.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-grid-none",
   "type": "registry:block",
-  "description": "A radar chart with no grid",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-grid-none.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-radar-icons.json b/apps/www/public/r/styles/new-york/chart-radar-icons.json
index f102fc15556..874575fe7ec 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-icons.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-icons.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-icons",
   "type": "registry:block",
-  "description": "A radar chart with icons",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-icons.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-radar-label-custom.json b/apps/www/public/r/styles/new-york/chart-radar-label-custom.json
index 23f8861c88a..7f2878af918 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-label-custom.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-label-custom.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-label-custom",
   "type": "registry:block",
-  "description": "A radar chart with a custom label",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-label-custom.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-radar-legend.json b/apps/www/public/r/styles/new-york/chart-radar-legend.json
index 475f1687ccd..a2b953e89ba 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-legend.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-legend.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-legend",
   "type": "registry:block",
-  "description": "A radar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-legend.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-radar-lines-only.json b/apps/www/public/r/styles/new-york/chart-radar-lines-only.json
index d535cc93cb4..22e205b0ecb 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-lines-only.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-lines-only.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-lines-only",
   "type": "registry:block",
-  "description": "A radar chart with lines only",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-lines-only.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-radar-multiple.json b/apps/www/public/r/styles/new-york/chart-radar-multiple.json
index e7b0e5a4d47..6bae396206c 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-multiple.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-multiple.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-multiple",
   "type": "registry:block",
-  "description": "A radar chart with multiple data",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-multiple.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-radar-radius.json b/apps/www/public/r/styles/new-york/chart-radar-radius.json
index 33fbc163f24..0070a7736f0 100644
--- a/apps/www/public/r/styles/new-york/chart-radar-radius.json
+++ b/apps/www/public/r/styles/new-york/chart-radar-radius.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radar-radius",
   "type": "registry:block",
-  "description": "A radar chart with a radius axis",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radar-radius.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-radial-grid.json b/apps/www/public/r/styles/new-york/chart-radial-grid.json
index 6ca1ff9c5bc..be975e5bc4b 100644
--- a/apps/www/public/r/styles/new-york/chart-radial-grid.json
+++ b/apps/www/public/r/styles/new-york/chart-radial-grid.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radial-grid",
   "type": "registry:block",
-  "description": "A radial chart with a grid",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-grid.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-radial-label.json b/apps/www/public/r/styles/new-york/chart-radial-label.json
index d7e4c915b67..bb3cdf12807 100644
--- a/apps/www/public/r/styles/new-york/chart-radial-label.json
+++ b/apps/www/public/r/styles/new-york/chart-radial-label.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radial-label",
   "type": "registry:block",
-  "description": "A radial chart with a label",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-label.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-radial-shape.json b/apps/www/public/r/styles/new-york/chart-radial-shape.json
index e06d504edba..56258680a09 100644
--- a/apps/www/public/r/styles/new-york/chart-radial-shape.json
+++ b/apps/www/public/r/styles/new-york/chart-radial-shape.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radial-shape",
   "type": "registry:block",
-  "description": "A radial chart with a custom shape",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-shape.tsx",
+      "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/new-york/ui/card\"\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-radial-simple.json b/apps/www/public/r/styles/new-york/chart-radial-simple.json
index 75e7fa550a1..acaaf2e3d9e 100644
--- a/apps/www/public/r/styles/new-york/chart-radial-simple.json
+++ b/apps/www/public/r/styles/new-york/chart-radial-simple.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radial-simple",
   "type": "registry:block",
-  "description": "A radial chart",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-simple.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-radial-stacked.json b/apps/www/public/r/styles/new-york/chart-radial-stacked.json
index f6f406011bc..6ef05250c0d 100644
--- a/apps/www/public/r/styles/new-york/chart-radial-stacked.json
+++ b/apps/www/public/r/styles/new-york/chart-radial-stacked.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radial-stacked",
   "type": "registry:block",
-  "description": "A radial chart with stacked sections",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-stacked.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-radial-text.json b/apps/www/public/r/styles/new-york/chart-radial-text.json
index 62bdfc1f0f9..6eba0d5d486 100644
--- a/apps/www/public/r/styles/new-york/chart-radial-text.json
+++ b/apps/www/public/r/styles/new-york/chart-radial-text.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-radial-text",
   "type": "registry:block",
-  "description": "A radial chart with text",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-radial-text.tsx",
+      "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/new-york/ui/card\"\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york/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 <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/www/public/r/styles/new-york/chart-tooltip-advanced.json b/apps/www/public/r/styles/new-york/chart-tooltip-advanced.json
index ec5b78e89cc..e273965040c 100644
--- a/apps/www/public/r/styles/new-york/chart-tooltip-advanced.json
+++ b/apps/www/public/r/styles/new-york/chart-tooltip-advanced.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-tooltip-advanced",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-advanced.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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]?.label ||\n                        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 + 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/www/public/r/styles/new-york/chart-tooltip-default.json b/apps/www/public/r/styles/new-york/chart-tooltip-default.json
index 1dfa8bf2ce9..25e59d13462 100644
--- a/apps/www/public/r/styles/new-york/chart-tooltip-default.json
+++ b/apps/www/public/r/styles/new-york/chart-tooltip-default.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-tooltip-default",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-default.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-tooltip-demo.json b/apps/www/public/r/styles/new-york/chart-tooltip-demo.json
index 4d84d0ebdee..3c7f01ae94d 100644
--- a/apps/www/public/r/styles/new-york/chart-tooltip-demo.json
+++ b/apps/www/public/r/styles/new-york/chart-tooltip-demo.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/chart-tooltip-demo.tsx",
+      "path": "examples/chart-tooltip-demo.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport default function Component() {\n  return (\n    <div className=\"grid aspect-video w-full max-w-md justify-center text-foreground md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4\">\n      <div>\n        <div className=\"absolute left-[-35px] top-[45px] z-10 text-sm font-medium\">\n          Label\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 193 40\"\n          width=\"50\"\n          height=\"12\"\n          fill=\"none\"\n          className=\"absolute left-[5px] top-[50px] z-10\"\n        >\n          <g clip-path=\"url(#a)\">\n            <path\n              fill=\"currentColor\"\n              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\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"a\">\n              <path fill=\"currentColor\" d=\"M0 0h193v40H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 186, fill: \"hsl(var(--chart-1))\" },\n            { name: \"Mobile\", value: 80, fill: \"hsl(var(--chart-2))\" },\n          ]}\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"items-end\">\n        <div className=\"absolute left-[122px] top-[0px] z-10 text-sm font-medium\">\n          Name\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"35\"\n          height=\"42\"\n          fill=\"none\"\n          viewBox=\"0 0 122 148\"\n          className=\"absolute left-[85px] top-[10px] z-10 -scale-x-100\"\n        >\n          <g clip-path=\"url(#ab)\">\n            <path\n              fill=\"currentColor\"\n              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\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"ab\">\n              <path fill=\"currentColor\" d=\"M0 0h122v148H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-3))\" },\n            { name: \"Firefox\", value: 1000, fill: \"hsl(var(--chart-4))\" },\n          ]}\n          indicator=\"dashed\"\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"!hidden md:!flex\">\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 12486, fill: \"hsl(var(--chart-3))\" },\n          ]}\n          className=\"w-[9rem]\"\n          indicator=\"line\"\n        />\n      </div>\n      <div className=\"!items-start !justify-start\">\n        <div className=\"absolute left-[50px] top-[60px] z-10 text-sm font-medium\">\n          Indicator\n        </div>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-1))\" },\n          ]}\n          indicator=\"dot\"\n          className=\"w-[8rem]\"\n        />\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"15\"\n          height=\"34\"\n          fill=\"none\"\n          viewBox=\"0 0 75 175\"\n          className=\"absolute left-[30px] top-[38px] z-10 rotate-[-40deg]\"\n        >\n          <g clip-path=\"url(#abc)\">\n            <path\n              fill=\"currentColor\"\n              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\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"abc\">\n              <path fill=\"currentColor\" d=\"M0 0h75v175H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </div>\n    </div>\n  )\n}\n\nfunction TooltipDemo({\n  indicator = \"dot\",\n  label,\n  payload,\n  hideLabel,\n  hideIndicator,\n  className,\n}: {\n  label: string\n  hideLabel?: boolean\n  hideIndicator?: boolean\n  indicator?: \"line\" | \"dot\" | \"dashed\"\n  payload: {\n    name: string\n    value: number\n    fill: string\n  }[]\n  nameKey?: string\n  labelKey?: string\n} & React.ComponentProps<\"div\">) {\n  const tooltipLabel = hideLabel ? null : (\n    <div className=\"font-medium\">{label}</div>\n  )\n\n  if (!payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const indicatorColor = item.fill\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                indicator === \"dot\" && \"items-center\"\n              )}\n            >\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\": nestLabel && indicator === \"dashed\",\n                      }\n                    )}\n                    style={\n                      {\n                        \"--color-bg\": indicatorColor,\n                        \"--color-border\": indicatorColor,\n                      } as React.CSSProperties\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\">{item.name}</span>\n                  </div>\n                  <span className=\"font-mono font-medium tabular-nums text-foreground\">\n                    {item.value.toLocaleString()}\n                  </span>\n                </div>\n              </>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/chart-tooltip-formatter.json b/apps/www/public/r/styles/new-york/chart-tooltip-formatter.json
index a4fe81c5589..ebbf40d2d26 100644
--- a/apps/www/public/r/styles/new-york/chart-tooltip-formatter.json
+++ b/apps/www/public/r/styles/new-york/chart-tooltip-formatter.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-tooltip-formatter",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-formatter.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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]?.label ||\n                        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/www/public/r/styles/new-york/chart-tooltip-icons.json b/apps/www/public/r/styles/new-york/chart-tooltip-icons.json
index 0d8caf251bb..119859cbdae 100644
--- a/apps/www/public/r/styles/new-york/chart-tooltip-icons.json
+++ b/apps/www/public/r/styles/new-york/chart-tooltip-icons.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-tooltip-icons",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-icons.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-tooltip-indicator-line.json b/apps/www/public/r/styles/new-york/chart-tooltip-indicator-line.json
index 2db10f6fcc7..ef87de1c835 100644
--- a/apps/www/public/r/styles/new-york/chart-tooltip-indicator-line.json
+++ b/apps/www/public/r/styles/new-york/chart-tooltip-indicator-line.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-tooltip-indicator-line",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-indicator-line.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-tooltip-indicator-none.json b/apps/www/public/r/styles/new-york/chart-tooltip-indicator-none.json
index 1c67c7c953b..a4544927126 100644
--- a/apps/www/public/r/styles/new-york/chart-tooltip-indicator-none.json
+++ b/apps/www/public/r/styles/new-york/chart-tooltip-indicator-none.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-tooltip-indicator-none",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-indicator-none.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart-tooltip-label-custom.json b/apps/www/public/r/styles/new-york/chart-tooltip-label-custom.json
index b3b8400d75e..80e6a44b94d 100644
--- a/apps/www/public/r/styles/new-york/chart-tooltip-label-custom.json
+++ b/apps/www/public/r/styles/new-york/chart-tooltip-label-custom.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-tooltip-label-custom",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-label-custom.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-tooltip-label-formatter.json b/apps/www/public/r/styles/new-york/chart-tooltip-label-formatter.json
index b7becce9716..cd3f7164bca 100644
--- a/apps/www/public/r/styles/new-york/chart-tooltip-label-formatter.json
+++ b/apps/www/public/r/styles/new-york/chart-tooltip-label-formatter.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-tooltip-label-formatter",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-label-formatter.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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",
       "type": "registry:block",
       "target": ""
     }
+  ],
+  "categories": [
+    "charts",
+    "charts-tooltip"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/chart-tooltip-label-none.json b/apps/www/public/r/styles/new-york/chart-tooltip-label-none.json
index 39c35802195..ac3493ec417 100644
--- a/apps/www/public/r/styles/new-york/chart-tooltip-label-none.json
+++ b/apps/www/public/r/styles/new-york/chart-tooltip-label-none.json
@@ -1,17 +1,20 @@
 {
   "name": "chart-tooltip-label-none",
   "type": "registry:block",
-  "description": "A stacked bar chart with a legend",
   "registryDependencies": [
     "card",
     "chart"
   ],
   "files": [
     {
-      "path": "block/chart-tooltip-label-none.tsx",
+      "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/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/chart.json b/apps/www/public/r/styles/new-york/chart.json
index 11e02bac295..ee4ff5bfb02 100644
--- a/apps/www/public/r/styles/new-york/chart.json
+++ b/apps/www/public/r/styles/new-york/chart.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport {\n  NameType,\n  Payload,\n  ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\"\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\ntype 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          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.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\nconst 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)\n          .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          .join(\"\\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          \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background 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={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\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\": 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={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 && (\n                        <span className=\"font-mono font-medium tabular-nums text-foreground\">\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={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                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-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",
+      "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\ntype 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          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.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\nconst 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)\n          .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          .join(\"\\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          \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background 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={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\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\": 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={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 && (\n                        <span className=\"font-mono font-medium tabular-nums text-foreground\">\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={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                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-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/www/public/r/styles/new-york/charts-01.json b/apps/www/public/r/styles/new-york/charts-01.json
deleted file mode 100644
index 9a8db19f3cc..00000000000
--- a/apps/www/public/r/styles/new-york/charts-01.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "name": "charts-01",
-  "type": "registry:block",
-  "registryDependencies": [
-    "chart"
-  ],
-  "files": [
-    {
-      "path": "block/charts-01.tsx",
-      "content": "\"use client\"\n\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  LabelList,\n  Line,\n  LineChart,\n  PolarAngleAxis,\n  RadialBar,\n  RadialBarChart,\n  Rectangle,\n  ReferenceLine,\n  XAxis,\n  YAxis,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york//ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york//ui/chart\"\nimport { Separator } from \"@/registry/new-york//ui/separator\"\n\nexport default function Charts() {\n  return (\n    <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\">\n      <div className=\"grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]\">\n        <Card\n          x-chunk=\"A bar chart showing the number of steps you have walked in the past 7 days.\"\n          className=\"lg:max-w-md\"\n        >\n          <CardHeader className=\"space-y-0 pb-2\">\n            <CardDescription>Today</CardDescription>\n            <CardTitle className=\"text-4xl tabular-nums\">\n              12,584{\" \"}\n              <span className=\"font-sans text-sm font-normal tracking-normal text-muted-foreground\">\n                steps\n              </span>\n            </CardTitle>\n          </CardHeader>\n          <CardContent>\n            <ChartContainer\n              config={{\n                steps: {\n                  label: \"Steps\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n            >\n              <BarChart\n                accessibilityLayer\n                margin={{\n                  left: -4,\n                  right: -4,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    steps: 2000,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    steps: 2100,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    steps: 2200,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    steps: 1300,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    steps: 1400,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    steps: 2500,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    steps: 1600,\n                  },\n                ]}\n              >\n                <Bar\n                  dataKey=\"steps\"\n                  fill=\"var(--color-steps)\"\n                  radius={5}\n                  fillOpacity={0.6}\n                  activeBar={<Rectangle fillOpacity={0.8} />}\n                />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={4}\n                  tickFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      weekday: \"short\",\n                    })\n                  }}\n                />\n                <ChartTooltip\n                  defaultIndex={2}\n                  content={\n                    <ChartTooltipContent\n                      hideIndicator\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                />\n                <ReferenceLine\n                  y={1200}\n                  stroke=\"hsl(var(--muted-foreground))\"\n                  strokeDasharray=\"3 3\"\n                  strokeWidth={1}\n                >\n                  <Label\n                    position=\"insideBottomLeft\"\n                    value=\"Average Steps\"\n                    offset={10}\n                    fill=\"hsl(var(--foreground))\"\n                  />\n                  <Label\n                    position=\"insideTopLeft\"\n                    value=\"12,343\"\n                    className=\"text-lg\"\n                    fill=\"hsl(var(--foreground))\"\n                    offset={10}\n                    startOffset={100}\n                  />\n                </ReferenceLine>\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n          <CardFooter className=\"flex-col items-start gap-1\">\n            <CardDescription>\n              Over the past 7 days, you have walked{\" \"}\n              <span className=\"font-medium text-foreground\">53,305</span> steps.\n            </CardDescription>\n            <CardDescription>\n              You need{\" \"}\n              <span className=\"font-medium text-foreground\">12,584</span> more\n              steps to reach your goal.\n            </CardDescription>\n          </CardFooter>\n        </Card>\n        <Card\n          x-chunk=\"A line chart showing the resting heart rate for the past 7 days.\"\n          className=\"flex flex-col lg:max-w-md\"\n        >\n          <CardHeader className=\"flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1\">\n            <div>\n              <CardDescription>Resting HR</CardDescription>\n              <CardTitle className=\"flex items-baseline gap-1 text-4xl tabular-nums\">\n                62\n                <span className=\"text-sm font-normal tracking-normal text-muted-foreground\">\n                  bpm\n                </span>\n              </CardTitle>\n            </div>\n            <div>\n              <CardDescription>Variability</CardDescription>\n              <CardTitle className=\"flex items-baseline gap-1 text-4xl tabular-nums\">\n                35\n                <span className=\"text-sm font-normal tracking-normal text-muted-foreground\">\n                  ms\n                </span>\n              </CardTitle>\n            </div>\n          </CardHeader>\n          <CardContent className=\"flex flex-1 items-center\">\n            <ChartContainer\n              config={{\n                resting: {\n                  label: \"Resting\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n              className=\"w-full\"\n            >\n              <LineChart\n                accessibilityLayer\n                margin={{\n                  left: 14,\n                  right: 14,\n                  top: 10,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    resting: 62,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    resting: 72,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    resting: 35,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    resting: 62,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    resting: 52,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    resting: 62,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    resting: 70,\n                  },\n                ]}\n              >\n                <CartesianGrid\n                  strokeDasharray=\"4 4\"\n                  vertical={false}\n                  stroke=\"hsl(var(--muted-foreground))\"\n                  strokeOpacity={0.5}\n                />\n                <YAxis hide domain={[\"dataMin - 10\", \"dataMax + 10\"]} />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={8}\n                  tickFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      weekday: \"short\",\n                    })\n                  }}\n                />\n                <Line\n                  dataKey=\"resting\"\n                  type=\"natural\"\n                  fill=\"var(--color-resting)\"\n                  stroke=\"var(--color-resting)\"\n                  strokeWidth={2}\n                  dot={false}\n                  activeDot={{\n                    fill: \"var(--color-resting)\",\n                    stroke: \"var(--color-resting)\",\n                    r: 4,\n                  }}\n                />\n                <ChartTooltip\n                  content={\n                    <ChartTooltipContent\n                      indicator=\"line\"\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                />\n              </LineChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n      </div>\n      <div className=\"grid w-full flex-1 gap-6 lg:max-w-[20rem]\">\n        <Card\n          x-chunk=\"Two horizontal bar charts showing total steps taken during the current year and last year.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader>\n            <CardTitle>Progress</CardTitle>\n            <CardDescription>\n              You're average more steps a day this year than last year.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"grid gap-4\">\n            <div className=\"grid auto-rows-min gap-2\">\n              <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                12,453\n                <span className=\"text-sm font-normal text-muted-foreground\">\n                  steps/day\n                </span>\n              </div>\n              <ChartContainer\n                config={{\n                  steps: {\n                    label: \"Steps\",\n                    color: \"hsl(var(--chart-1))\",\n                  },\n                }}\n                className=\"aspect-auto h-[32px] w-full\"\n              >\n                <BarChart\n                  accessibilityLayer\n                  layout=\"vertical\"\n                  margin={{\n                    left: 0,\n                    top: 0,\n                    right: 0,\n                    bottom: 0,\n                  }}\n                  data={[\n                    {\n                      date: \"2024\",\n                      steps: 12435,\n                    },\n                  ]}\n                >\n                  <Bar\n                    dataKey=\"steps\"\n                    fill=\"var(--color-steps)\"\n                    radius={4}\n                    barSize={32}\n                  >\n                    <LabelList\n                      position=\"insideLeft\"\n                      dataKey=\"date\"\n                      offset={8}\n                      fontSize={12}\n                      fill=\"white\"\n                    />\n                  </Bar>\n                  <YAxis dataKey=\"date\" type=\"category\" tickCount={1} hide />\n                  <XAxis dataKey=\"steps\" type=\"number\" hide />\n                </BarChart>\n              </ChartContainer>\n            </div>\n            <div className=\"grid auto-rows-min gap-2\">\n              <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                10,103\n                <span className=\"text-sm font-normal text-muted-foreground\">\n                  steps/day\n                </span>\n              </div>\n              <ChartContainer\n                config={{\n                  steps: {\n                    label: \"Steps\",\n                    color: \"hsl(var(--muted))\",\n                  },\n                }}\n                className=\"aspect-auto h-[32px] w-full\"\n              >\n                <BarChart\n                  accessibilityLayer\n                  layout=\"vertical\"\n                  margin={{\n                    left: 0,\n                    top: 0,\n                    right: 0,\n                    bottom: 0,\n                  }}\n                  data={[\n                    {\n                      date: \"2023\",\n                      steps: 10103,\n                    },\n                  ]}\n                >\n                  <Bar\n                    dataKey=\"steps\"\n                    fill=\"var(--color-steps)\"\n                    radius={4}\n                    barSize={32}\n                  >\n                    <LabelList\n                      position=\"insideLeft\"\n                      dataKey=\"date\"\n                      offset={8}\n                      fontSize={12}\n                      fill=\"hsl(var(--muted-foreground))\"\n                    />\n                  </Bar>\n                  <YAxis dataKey=\"date\" type=\"category\" tickCount={1} hide />\n                  <XAxis dataKey=\"steps\" type=\"number\" hide />\n                </BarChart>\n              </ChartContainer>\n            </div>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"A bar chart showing the walking and running distance for the past 7 days.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader className=\"p-4 pb-0\">\n            <CardTitle>Walking Distance</CardTitle>\n            <CardDescription>\n              Over the last 7 days, your distance walked and run was 12.5 miles\n              per day.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"flex flex-row items-baseline gap-4 p-4 pt-0\">\n            <div className=\"flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none\">\n              12.5\n              <span className=\"text-sm font-normal text-muted-foreground\">\n                miles/day\n              </span>\n            </div>\n            <ChartContainer\n              config={{\n                steps: {\n                  label: \"Steps\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n              className=\"ml-auto w-[72px]\"\n            >\n              <BarChart\n                accessibilityLayer\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 0,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    steps: 2000,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    steps: 2100,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    steps: 2200,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    steps: 1300,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    steps: 1400,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    steps: 2500,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    steps: 1600,\n                  },\n                ]}\n              >\n                <Bar\n                  dataKey=\"steps\"\n                  fill=\"var(--color-steps)\"\n                  radius={2}\n                  fillOpacity={0.2}\n                  activeIndex={6}\n                  activeBar={<Rectangle fillOpacity={0.8} />}\n                />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={4}\n                  hide\n                />\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"A bar chart showing move, exercise, and stand progress.\"\n          className=\"max-w-xs\"\n        >\n          <CardContent className=\"flex gap-4 p-4 pb-2\">\n            <ChartContainer\n              config={{\n                move: {\n                  label: \"Move\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n                stand: {\n                  label: \"Stand\",\n                  color: \"hsl(var(--chart-2))\",\n                },\n                exercise: {\n                  label: \"Exercise\",\n                  color: \"hsl(var(--chart-3))\",\n                },\n              }}\n              className=\"h-[140px] w-full\"\n            >\n              <BarChart\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 10,\n                }}\n                data={[\n                  {\n                    activity: \"stand\",\n                    value: (8 / 12) * 100,\n                    label: \"8/12 hr\",\n                    fill: \"var(--color-stand)\",\n                  },\n                  {\n                    activity: \"exercise\",\n                    value: (46 / 60) * 100,\n                    label: \"46/60 min\",\n                    fill: \"var(--color-exercise)\",\n                  },\n                  {\n                    activity: \"move\",\n                    value: (245 / 360) * 100,\n                    label: \"245/360 kcal\",\n                    fill: \"var(--color-move)\",\n                  },\n                ]}\n                layout=\"vertical\"\n                barSize={32}\n                barGap={2}\n              >\n                <XAxis type=\"number\" dataKey=\"value\" hide />\n                <YAxis\n                  dataKey=\"activity\"\n                  type=\"category\"\n                  tickLine={false}\n                  tickMargin={4}\n                  axisLine={false}\n                  className=\"capitalize\"\n                />\n                <Bar dataKey=\"value\" radius={5}>\n                  <LabelList\n                    position=\"insideLeft\"\n                    dataKey=\"label\"\n                    fill=\"white\"\n                    offset={8}\n                    fontSize={12}\n                  />\n                </Bar>\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n          <CardFooter className=\"flex flex-row border-t p-4\">\n            <div className=\"flex w-full items-center gap-2\">\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-xs text-muted-foreground\">Move</div>\n                <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                  562\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    kcal\n                  </span>\n                </div>\n              </div>\n              <Separator orientation=\"vertical\" className=\"mx-2 h-10 w-px\" />\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-xs text-muted-foreground\">Exercise</div>\n                <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                  73\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    min\n                  </span>\n                </div>\n              </div>\n              <Separator orientation=\"vertical\" className=\"mx-2 h-10 w-px\" />\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-xs text-muted-foreground\">Stand</div>\n                <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                  14\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    hr\n                  </span>\n                </div>\n              </div>\n            </div>\n          </CardFooter>\n        </Card>\n      </div>\n      <div className=\"grid w-full flex-1 gap-6\">\n        <Card\n          x-chunk=\"A radial bar chart showing the percentage of time spent moving, exercising, and standing.\"\n          className=\"max-w-xs\"\n        >\n          <CardContent className=\"flex gap-4 p-4\">\n            <div className=\"grid items-center gap-2\">\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-sm text-muted-foreground\">Move</div>\n                <div className=\"flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none\">\n                  562/600\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    kcal\n                  </span>\n                </div>\n              </div>\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-sm text-muted-foreground\">Exercise</div>\n                <div className=\"flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none\">\n                  73/120\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    min\n                  </span>\n                </div>\n              </div>\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-sm text-muted-foreground\">Stand</div>\n                <div className=\"flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none\">\n                  8/12\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    hr\n                  </span>\n                </div>\n              </div>\n            </div>\n            <ChartContainer\n              config={{\n                move: {\n                  label: \"Move\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n                exercise: {\n                  label: \"Exercise\",\n                  color: \"hsl(var(--chart-2))\",\n                },\n                stand: {\n                  label: \"Stand\",\n                  color: \"hsl(var(--chart-3))\",\n                },\n              }}\n              className=\"mx-auto aspect-square w-full max-w-[80%]\"\n            >\n              <RadialBarChart\n                margin={{\n                  left: -10,\n                  right: -10,\n                  top: -10,\n                  bottom: -10,\n                }}\n                data={[\n                  {\n                    activity: \"stand\",\n                    value: (8 / 12) * 100,\n                    fill: \"var(--color-stand)\",\n                  },\n                  {\n                    activity: \"exercise\",\n                    value: (46 / 60) * 100,\n                    fill: \"var(--color-exercise)\",\n                  },\n                  {\n                    activity: \"move\",\n                    value: (245 / 360) * 100,\n                    fill: \"var(--color-move)\",\n                  },\n                ]}\n                innerRadius=\"20%\"\n                barSize={24}\n                startAngle={90}\n                endAngle={450}\n              >\n                <PolarAngleAxis\n                  type=\"number\"\n                  domain={[0, 100]}\n                  dataKey=\"value\"\n                  tick={false}\n                />\n                <RadialBar dataKey=\"value\" background cornerRadius={5} />\n              </RadialBarChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"A bar chart showing active energy in the past 7 days.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader className=\"p-4 pb-0\">\n            <CardTitle>Active Energy</CardTitle>\n            <CardDescription>\n              You're burning an average of 754 calories per day. Good job!\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"flex flex-row items-baseline gap-4 p-4 pt-2\">\n            <div className=\"flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none\">\n              1,254\n              <span className=\"text-sm font-normal text-muted-foreground\">\n                kcal/day\n              </span>\n            </div>\n            <ChartContainer\n              config={{\n                calories: {\n                  label: \"Calories\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n              className=\"ml-auto w-[64px]\"\n            >\n              <BarChart\n                accessibilityLayer\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 0,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    calories: 354,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    calories: 514,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    calories: 345,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    calories: 734,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    calories: 645,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    calories: 456,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    calories: 345,\n                  },\n                ]}\n              >\n                <Bar\n                  dataKey=\"calories\"\n                  fill=\"var(--color-calories)\"\n                  radius={2}\n                  fillOpacity={0.2}\n                  activeIndex={6}\n                  activeBar={<Rectangle fillOpacity={0.8} />}\n                />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={4}\n                  hide\n                />\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"An area chart showing the time spent in bed for the past 7 days.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader className=\"space-y-0 pb-0\">\n            <CardDescription>Time in Bed</CardDescription>\n            <CardTitle className=\"flex items-baseline gap-1 text-4xl tabular-nums\">\n              8\n              <span className=\"font-sans text-sm font-normal tracking-normal text-muted-foreground\">\n                hr\n              </span>\n              35\n              <span className=\"font-sans text-sm font-normal tracking-normal text-muted-foreground\">\n                min\n              </span>\n            </CardTitle>\n          </CardHeader>\n          <CardContent className=\"p-0\">\n            <ChartContainer\n              config={{\n                time: {\n                  label: \"Time\",\n                  color: \"hsl(var(--chart-2))\",\n                },\n              }}\n            >\n              <AreaChart\n                accessibilityLayer\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    time: 8.5,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    time: 7.2,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    time: 8.1,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    time: 6.2,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    time: 5.2,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    time: 8.1,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    time: 7.0,\n                  },\n                ]}\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 0,\n                }}\n              >\n                <XAxis dataKey=\"date\" hide />\n                <YAxis domain={[\"dataMin - 5\", \"dataMax + 2\"]} hide />\n                <defs>\n                  <linearGradient id=\"fillTime\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop\n                      offset=\"5%\"\n                      stopColor=\"var(--color-time)\"\n                      stopOpacity={0.8}\n                    />\n                    <stop\n                      offset=\"95%\"\n                      stopColor=\"var(--color-time)\"\n                      stopOpacity={0.1}\n                    />\n                  </linearGradient>\n                </defs>\n                <Area\n                  dataKey=\"time\"\n                  type=\"natural\"\n                  fill=\"url(#fillTime)\"\n                  fillOpacity={0.4}\n                  stroke=\"var(--color-time)\"\n                />\n                <ChartTooltip\n                  cursor={false}\n                  content={<ChartTooltipContent hideLabel />}\n                  formatter={(value) => (\n                    <div className=\"flex min-w-[120px] items-center text-xs text-muted-foreground\">\n                      Time in bed\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                          hr\n                        </span>\n                      </div>\n                    </div>\n                  )}\n                />\n              </AreaChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/checkbox-demo.json b/apps/www/public/r/styles/new-york/checkbox-demo.json
index cd6a0054179..e8dc690fdd3 100644
--- a/apps/www/public/r/styles/new-york/checkbox-demo.json
+++ b/apps/www/public/r/styles/new-york/checkbox-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/checkbox-demo.tsx",
+      "path": "examples/checkbox-demo.tsx",
       "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/new-york/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/www/public/r/styles/new-york/checkbox-disabled.json b/apps/www/public/r/styles/new-york/checkbox-disabled.json
index dd75dcbecef..dddd94fcd6a 100644
--- a/apps/www/public/r/styles/new-york/checkbox-disabled.json
+++ b/apps/www/public/r/styles/new-york/checkbox-disabled.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/checkbox-disabled.tsx",
+      "path": "examples/checkbox-disabled.tsx",
       "content": "import { Checkbox } from \"@/registry/new-york/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/www/public/r/styles/new-york/checkbox-form-multiple.json b/apps/www/public/r/styles/new-york/checkbox-form-multiple.json
index d0aa54b6fdb..fbfa7b19855 100644
--- a/apps/www/public/r/styles/new-york/checkbox-form-multiple.json
+++ b/apps/www/public/r/styles/new-york/checkbox-form-multiple.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/checkbox-form-multiple.tsx",
+      "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 { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/checkbox-form-single.json b/apps/www/public/r/styles/new-york/checkbox-form-single.json
index bea7e1df92f..48c20204179 100644
--- a/apps/www/public/r/styles/new-york/checkbox-form-single.json
+++ b/apps/www/public/r/styles/new-york/checkbox-form-single.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/checkbox-form-single.tsx",
+      "path": "examples/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 { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from \"@/registry/new-york/ui/form\"\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                  <Link href=\"/examples/forms\">mobile settings</Link> 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/www/public/r/styles/new-york/checkbox-with-text.json b/apps/www/public/r/styles/new-york/checkbox-with-text.json
index 6d8f48dd89a..e36b720ef5e 100644
--- a/apps/www/public/r/styles/new-york/checkbox-with-text.json
+++ b/apps/www/public/r/styles/new-york/checkbox-with-text.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/checkbox-with-text.tsx",
+      "path": "examples/checkbox-with-text.tsx",
       "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/new-york/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-sm text-muted-foreground\">\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/www/public/r/styles/new-york/checkbox.json b/apps/www/public/r/styles/new-york/checkbox.json
index f2847a90507..8655d94433c 100644
--- a/apps/www/public/r/styles/new-york/checkbox.json
+++ b/apps/www/public/r/styles/new-york/checkbox.json
@@ -7,7 +7,7 @@
   "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 { 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      \"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator\n      className={cn(\"flex items-center justify-center text-current\")}\n    >\n      <CheckIcon className=\"h-4 w-4\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check } from \"lucide-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      \"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator\n      className={cn(\"flex items-center justify-center text-current\")}\n    >\n      <Check className=\"h-4 w-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/www/public/r/styles/new-york/collapsible-demo.json b/apps/www/public/r/styles/new-york/collapsible-demo.json
index 975293982d6..45d02bef7fe 100644
--- a/apps/www/public/r/styles/new-york/collapsible-demo.json
+++ b/apps/www/public/r/styles/new-york/collapsible-demo.json
@@ -6,8 +6,8 @@
   ],
   "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/new-york/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/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=\"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",
+      "path": "examples/collapsible-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/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            <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:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/combobox-demo.json b/apps/www/public/r/styles/new-york/combobox-demo.json
index f06a677c7cc..cc467015968 100644
--- a/apps/www/public/r/styles/new-york/combobox-demo.json
+++ b/apps/www/public/r/styles/new-york/combobox-demo.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/combobox-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CaretSortIcon, CheckIcon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/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          <CaretSortIcon className=\"ml-2 h-4 w-4 shrink-0 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                  <CheckIcon\n                    className={cn(\n                      \"ml-auto h-4 w-4\",\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",
+      "path": "examples/combobox-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/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={cn(\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:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/combobox-dropdown-menu.json b/apps/www/public/r/styles/new-york/combobox-dropdown-menu.json
index e3af13a9952..7da848d7043 100644
--- a/apps/www/public/r/styles/new-york/combobox-dropdown-menu.json
+++ b/apps/www/public/r/styles/new-york/combobox-dropdown-menu.json
@@ -8,8 +8,8 @@
   ],
   "files": [
     {
-      "path": "example/combobox-dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DotsHorizontalIcon } from \"@radix-ui/react-icons\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/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/new-york/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=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\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            <DotsHorizontalIcon />\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={true}\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",
+      "path": "examples/combobox-dropdown-menu.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/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/new-york/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=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\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={true}\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/www/public/r/styles/new-york/combobox-form.json b/apps/www/public/r/styles/new-york/combobox-form.json
index 3ba69edd9f3..afb74956439 100644
--- a/apps/www/public/r/styles/new-york/combobox-form.json
+++ b/apps/www/public/r/styles/new-york/combobox-form.json
@@ -7,8 +7,8 @@
   ],
   "files": [
     {
-      "path": "example/combobox-form.tsx",
-      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { CaretSortIcon, CheckIcon } from \"@radix-ui/react-icons\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/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={cn(\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                      <CaretSortIcon className=\"ml-2 h-4 w-4 shrink-0 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                            <CheckIcon\n                              className={cn(\n                                \"ml-auto h-4 w-4\",\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",
+      "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 \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/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={cn(\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={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": ""
     }
diff --git a/apps/www/public/r/styles/new-york/combobox-popover.json b/apps/www/public/r/styles/new-york/combobox-popover.json
index dca2c6f304d..0808a6927c7 100644
--- a/apps/www/public/r/styles/new-york/combobox-popover.json
+++ b/apps/www/public/r/styles/new-york/combobox-popover.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/combobox-popover.tsx",
+      "path": "examples/combobox-popover.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\ntype 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-sm text-muted-foreground\">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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/combobox-responsive.json b/apps/www/public/r/styles/new-york/combobox-responsive.json
index 35b98aa7ddc..ce2116edcc9 100644
--- a/apps/www/public/r/styles/new-york/combobox-responsive.json
+++ b/apps/www/public/r/styles/new-york/combobox-responsive.json
@@ -8,7 +8,7 @@
   ],
   "files": [
     {
-      "path": "example/combobox-responsive.tsx",
+      "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/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\ntype 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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/command-demo.json b/apps/www/public/r/styles/new-york/command-demo.json
index 3409b5abfe7..579181d1c0a 100644
--- a/apps/www/public/r/styles/new-york/command-demo.json
+++ b/apps/www/public/r/styles/new-york/command-demo.json
@@ -6,8 +6,8 @@
   ],
   "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/new-york/ui/command\"\n\nexport default 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            <CalendarIcon />\n            <span>Calendar</span>\n          </CommandItem>\n          <CommandItem>\n            <FaceIcon />\n            <span>Search Emoji</span>\n          </CommandItem>\n          <CommandItem disabled>\n            <RocketIcon />\n            <span>Launch</span>\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem>\n            <PersonIcon />\n            <span>Profile</span>\n            <CommandShortcut>⌘P</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <EnvelopeClosedIcon />\n            <span>Mail</span>\n            <CommandShortcut>⌘B</CommandShortcut>\n          </CommandItem>\n          <CommandItem>\n            <GearIcon />\n            <span>Settings</span>\n            <CommandShortcut>⌘S</CommandShortcut>\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n",
+      "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/new-york/ui/command\"\n\nexport default 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:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/command-dialog.json b/apps/www/public/r/styles/new-york/command-dialog.json
index 72f2dbb8c9b..17039ee3188 100644
--- a/apps/www/public/r/styles/new-york/command-dialog.json
+++ b/apps/www/public/r/styles/new-york/command-dialog.json
@@ -7,8 +7,8 @@
   ],
   "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/new-york/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-sm text-muted-foreground\">\n        Press{\" \"}\n        <kbd className=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground 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 />\n              <span>Calendar</span>\n            </CommandItem>\n            <CommandItem>\n              <FaceIcon />\n              <span>Search Emoji</span>\n            </CommandItem>\n            <CommandItem>\n              <RocketIcon />\n              <span>Launch</span>\n            </CommandItem>\n          </CommandGroup>\n          <CommandSeparator />\n          <CommandGroup heading=\"Settings\">\n            <CommandItem>\n              <PersonIcon />\n              <span>Profile</span>\n              <CommandShortcut>⌘P</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <EnvelopeClosedIcon />\n              <span>Mail</span>\n              <CommandShortcut>⌘B</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <GearIcon />\n              <span>Settings</span>\n              <CommandShortcut>⌘S</CommandShortcut>\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </CommandDialog>\n    </>\n  )\n}\n",
+      "path": "examples/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/new-york/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-sm text-muted-foreground\">\n        Press{\" \"}\n        <kbd className=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground 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 />\n              <span>Calendar</span>\n            </CommandItem>\n            <CommandItem>\n              <Smile />\n              <span>Search Emoji</span>\n            </CommandItem>\n            <CommandItem>\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      </CommandDialog>\n    </>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/command.json b/apps/www/public/r/styles/new-york/command.json
index 8042fdd39ff..922f9d09109 100644
--- a/apps/www/public/r/styles/new-york/command.json
+++ b/apps/www/public/r/styles/new-york/command.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DialogProps } from \"@radix-ui/react-dialog\"\nimport { MagnifyingGlassIcon } from \"@radix-ui/react-icons\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Dialog, DialogContent } from \"@/registry/new-york/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      \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\ninterface CommandDialogProps extends DialogProps {}\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0\">\n        <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\">\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    <MagnifyingGlassIcon className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground 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(\"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={cn(\n      \"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\",\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(\"-mx-1 h-px bg-border\", 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      \"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\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\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",
+      "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 { cn } from \"@/lib/utils\"\nimport { Dialog, DialogContent } from \"@/registry/new-york/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      \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\nconst CommandDialog = ({ children, ...props }: DialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0\">\n        <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\">\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 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground 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(\"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={cn(\n      \"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\",\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(\"-mx-1 h-px bg-border\", 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      \"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\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\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/www/public/r/styles/new-york/context-menu-demo.json b/apps/www/public/r/styles/new-york/context-menu-demo.json
index 9dc29195fb7..bc0c32bdcc6 100644
--- a/apps/www/public/r/styles/new-york/context-menu-demo.json
+++ b/apps/www/public/r/styles/new-york/context-menu-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/context-menu-demo.tsx",
+      "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/new-york/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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/context-menu.json b/apps/www/public/r/styles/new-york/context-menu.json
index 121d33b45ed..fdc5d4c05df 100644
--- a/apps/www/public/r/styles/new-york/context-menu.json
+++ b/apps/www/public/r/styles/new-york/context-menu.json
@@ -7,7 +7,7 @@
   "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 { 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      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRightIcon className=\"ml-auto h-4 w-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      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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\",\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        \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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\",\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      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground 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      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground 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 h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <CheckIcon className=\"h-4 w-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      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <DotFilledIcon className=\"h-4 w-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      \"px-2 py-1.5 text-sm font-semibold text-foreground\",\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(\"-mx-1 my-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\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",
+      "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 { 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      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-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      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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\",\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        \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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\",\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      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground 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      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground 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 h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-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      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Circle className=\"h-4 w-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      \"px-2 py-1.5 text-sm font-semibold text-foreground\",\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(\"-mx-1 my-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\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/www/public/r/styles/new-york/dashboard-01.json b/apps/www/public/r/styles/new-york/dashboard-01.json
deleted file mode 100644
index bd9d5071fed..00000000000
--- a/apps/www/public/r/styles/new-york/dashboard-01.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "dashboard-01",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "dropdown-menu",
-    "input",
-    "sheet"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-01.tsx",
-      "content": "import Link from \"next/link\"\nimport {\n  Activity,\n  ArrowUpRight,\n  CircleUser,\n  CreditCard,\n  DollarSign,\n  Menu,\n  Package2,\n  Search,\n  Users,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/new-york/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col\">\n      <header className=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n        <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\">\n          <Link\n            href=\"#\"\n            className=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n          >\n            <Package2 className=\"h-6 w-6\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-foreground transition-colors hover:text-foreground\"\n          >\n            Dashboard\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Orders\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Products\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Customers\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Analytics\n          </Link>\n        </nav>\n        <Sheet>\n          <SheetTrigger asChild>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              className=\"shrink-0 md:hidden\"\n            >\n              <Menu className=\"h-5 w-5\" />\n              <span className=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\">\n            <nav className=\"grid gap-6 text-lg font-medium\">\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 className=\"h-6 w-6\" />\n                <span className=\"sr-only\">Acme Inc</span>\n              </Link>\n              <Link href=\"#\" className=\"hover:text-foreground\">\n                Dashboard\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Orders\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Products\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Customers\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Analytics\n              </Link>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <div className=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n          <form className=\"ml-auto flex-1 sm:flex-initial\">\n            <div className=\"relative\">\n              <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                className=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n              />\n            </div>\n          </form>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" size=\"icon\" className=\"rounded-full\">\n                <CircleUser className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle user menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </header>\n      <main className=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n        <div className=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n          <Card x-chunk=\"A card showing the total revenue in USD and the percentage difference from last month.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">\n                Total Revenue\n              </CardTitle>\n              <DollarSign className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">$45,231.89</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +20.1% from last month\n              </p>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing the total subscriptions and the percentage difference from last month.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">\n                Subscriptions\n              </CardTitle>\n              <Users className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">+2350</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +180.1% from last month\n              </p>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing the total sales and the percentage difference from last month.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">Sales</CardTitle>\n              <CreditCard className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">+12,234</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +19% from last month\n              </p>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing the total active users and the percentage difference from last hour.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">Active Now</CardTitle>\n              <Activity className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">+573</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +201 since last hour\n              </p>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n          <Card\n            className=\"xl:col-span-2\"\n            x-chunk=\"A card showing a table of recent transactions with a link to view all transactions.\"\n          >\n            <CardHeader className=\"flex flex-row items-center\">\n              <div className=\"grid gap-2\">\n                <CardTitle>Transactions</CardTitle>\n                <CardDescription>\n                  Recent transactions from your store.\n                </CardDescription>\n              </div>\n              <Button asChild size=\"sm\" className=\"ml-auto gap-1\">\n                <Link href=\"#\">\n                  View All\n                  <ArrowUpRight className=\"h-4 w-4\" />\n                </Link>\n              </Button>\n            </CardHeader>\n            <CardContent>\n              <Table>\n                <TableHeader>\n                  <TableRow>\n                    <TableHead>Customer</TableHead>\n                    <TableHead className=\"hidden xl:table-column\">\n                      Type\n                    </TableHead>\n                    <TableHead className=\"hidden xl:table-column\">\n                      Status\n                    </TableHead>\n                    <TableHead className=\"hidden xl:table-column\">\n                      Date\n                    </TableHead>\n                    <TableHead className=\"text-right\">Amount</TableHead>\n                  </TableRow>\n                </TableHeader>\n                <TableBody>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Liam Johnson</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        liam@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Sale\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-23\n                    </TableCell>\n                    <TableCell className=\"text-right\">$250.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Olivia Smith</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        olivia@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Refund\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Declined\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-24\n                    </TableCell>\n                    <TableCell className=\"text-right\">$150.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Noah Williams</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        noah@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Subscription\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-25\n                    </TableCell>\n                    <TableCell className=\"text-right\">$350.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Emma Brown</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        emma@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Sale\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-26\n                    </TableCell>\n                    <TableCell className=\"text-right\">$450.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Liam Johnson</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        liam@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Sale\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-27\n                    </TableCell>\n                    <TableCell className=\"text-right\">$550.00</TableCell>\n                  </TableRow>\n                </TableBody>\n              </Table>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing a list of recent sales with customer names and email addresses.\">\n            <CardHeader>\n              <CardTitle>Recent Sales</CardTitle>\n            </CardHeader>\n            <CardContent className=\"grid gap-8\">\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                  <AvatarFallback>OM</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Olivia Martin\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    olivia.martin@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$1,999.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                  <AvatarFallback>JL</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Jackson Lee\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    jackson.lee@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$39.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                  <AvatarFallback>IN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Isabella Nguyen\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    isabella.nguyen@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$299.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                  <AvatarFallback>WK</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    William Kim\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    will@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$99.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                  <AvatarFallback>SD</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Sofia Davis\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    sofia.davis@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$39.00</div>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </main>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/dashboard-02.json b/apps/www/public/r/styles/new-york/dashboard-02.json
deleted file mode 100644
index 6aa64154715..00000000000
--- a/apps/www/public/r/styles/new-york/dashboard-02.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "dashboard-02",
-  "type": "registry:block",
-  "registryDependencies": [
-    "badge",
-    "button",
-    "card",
-    "dropdown-menu",
-    "input"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-02.tsx",
-      "content": "import Link from \"next/link\"\nimport {\n  Bell,\n  CircleUser,\n  Home,\n  LineChart,\n  Menu,\n  Package,\n  Package2,\n  Search,\n  ShoppingCart,\n  Users,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/new-york/ui/sheet\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]\">\n      <div className=\"hidden border-r bg-muted/40 md:block\">\n        <div className=\"flex h-full max-h-screen flex-col gap-2\">\n          <div className=\"flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6\">\n            <Link href=\"/\" className=\"flex items-center gap-2 font-semibold\">\n              <Package2 className=\"h-6 w-6\" />\n              <span className=\"\">Acme Inc</span>\n            </Link>\n            <Button variant=\"outline\" size=\"icon\" className=\"ml-auto h-8 w-8\">\n              <Bell className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Toggle notifications</span>\n            </Button>\n          </div>\n          <div className=\"flex-1\">\n            <nav className=\"grid items-start px-2 text-sm font-medium lg:px-4\">\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <Home className=\"h-4 w-4\" />\n                Dashboard\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <ShoppingCart className=\"h-4 w-4\" />\n                Orders\n                <Badge className=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  6\n                </Badge>\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary\"\n              >\n                <Package className=\"h-4 w-4\" />\n                Products{\" \"}\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <Users className=\"h-4 w-4\" />\n                Customers\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <LineChart className=\"h-4 w-4\" />\n                Analytics\n              </Link>\n            </nav>\n          </div>\n          <div className=\"mt-auto p-4\">\n            <Card x-chunk=\"A card with a call to action\">\n              <CardHeader className=\"p-2 pt-0 md:p-4\">\n                <CardTitle>Upgrade to Pro</CardTitle>\n                <CardDescription>\n                  Unlock all features and get unlimited access to our support\n                  team.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"p-2 pt-0 md:p-4 md:pt-0\">\n                <Button size=\"sm\" className=\"w-full\">\n                  Upgrade\n                </Button>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </div>\n      <div className=\"flex flex-col\">\n        <header className=\"flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"shrink-0 md:hidden\"\n              >\n                <Menu className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle navigation menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"flex flex-col\">\n              <nav className=\"grid gap-2 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-2 text-lg font-semibold\"\n                >\n                  <Package2 className=\"h-6 w-6\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                  <Badge className=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                    6\n                  </Badge>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Analytics\n                </Link>\n              </nav>\n              <div className=\"mt-auto\">\n                <Card>\n                  <CardHeader>\n                    <CardTitle>Upgrade to Pro</CardTitle>\n                    <CardDescription>\n                      Unlock all features and get unlimited access to our\n                      support team.\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <Button size=\"sm\" className=\"w-full\">\n                      Upgrade\n                    </Button>\n                  </CardContent>\n                </Card>\n              </div>\n            </SheetContent>\n          </Sheet>\n          <div className=\"w-full flex-1\">\n            <form>\n              <div className=\"relative\">\n                <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n                <Input\n                  type=\"search\"\n                  placeholder=\"Search products...\"\n                  className=\"w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3\"\n                />\n              </div>\n            </form>\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" size=\"icon\" className=\"rounded-full\">\n                <CircleUser className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle user menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\">\n          <div className=\"flex items-center\">\n            <h1 className=\"text-lg font-semibold md:text-2xl\">Inventory</h1>\n          </div>\n          <div\n            x-chunk=\"An empty state showing no products with a heading, description and a call to action to add a product.\"\n            className=\"flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm\"\n          >\n            <div className=\"flex flex-col items-center gap-1 text-center\">\n              <h3 className=\"text-2xl font-bold tracking-tight\">\n                You have no products\n              </h3>\n              <p className=\"text-sm text-muted-foreground\">\n                You can start selling as soon as you add a product.\n              </p>\n              <Button className=\"mt-4\">Add Product</Button>\n            </div>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/dashboard-03.json b/apps/www/public/r/styles/new-york/dashboard-03.json
deleted file mode 100644
index a0e5a33a030..00000000000
--- a/apps/www/public/r/styles/new-york/dashboard-03.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "dashboard-03",
-  "type": "registry:block",
-  "registryDependencies": [
-    "badge",
-    "button",
-    "drawer",
-    "input",
-    "label",
-    "select",
-    "textarea",
-    "tooltip"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-03.tsx",
-      "content": "import {\n  Bird,\n  Book,\n  Bot,\n  Code2,\n  CornerDownLeft,\n  LifeBuoy,\n  Mic,\n  Paperclip,\n  Rabbit,\n  Settings,\n  Settings2,\n  Share,\n  SquareTerminal,\n  SquareUser,\n  Triangle,\n  Turtle,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\nimport { Textarea } from \"@/registry/new-york/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"grid h-screen w-full pl-[53px]\">\n      <aside className=\"inset-y fixed  left-0 z-20 flex h-full flex-col border-r\">\n        <div className=\"border-b p-2\">\n          <Button variant=\"outline\" size=\"icon\" aria-label=\"Home\">\n            <Triangle className=\"w-5 h-5 fill-foreground\" />\n          </Button>\n        </div>\n        <nav className=\"grid gap-1 p-2\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg bg-muted\"\n                aria-label=\"Playground\"\n              >\n                <SquareTerminal className=\"w-5 h-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Playground\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"Models\"\n              >\n                <Bot className=\"w-5 h-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Models\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"API\"\n              >\n                <Code2 className=\"w-5 h-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              API\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"Documentation\"\n              >\n                <Book className=\"w-5 h-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Documentation\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"Settings\"\n              >\n                <Settings2 className=\"w-5 h-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto grid gap-1 p-2\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"mt-auto rounded-lg\"\n                aria-label=\"Help\"\n              >\n                <LifeBuoy className=\"w-5 h-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Help\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"mt-auto rounded-lg\"\n                aria-label=\"Account\"\n              >\n                <SquareUser className=\"w-5 h-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Account\n            </TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col\">\n        <header className=\"sticky top-0 z-10 flex h-[53px] items-center gap-1 border-b bg-background px-4\">\n          <h1 className=\"text-xl font-semibold\">Playground</h1>\n          <Drawer>\n            <DrawerTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"md:hidden\">\n                <Settings className=\"w-4 h-4\" />\n                <span className=\"sr-only\">Settings</span>\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"max-h-[80vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Configuration</DrawerTitle>\n                <DrawerDescription>\n                  Configure the settings for the model and messages.\n                </DrawerDescription>\n              </DrawerHeader>\n              <form className=\"grid w-full items-start gap-6 overflow-auto p-4 pt-0\">\n                <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                  <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                    Settings\n                  </legend>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"model\">Model</Label>\n                    <Select>\n                      <SelectTrigger\n                        id=\"model\"\n                        className=\"items-start [&_[data-description]]:hidden\"\n                      >\n                        <SelectValue placeholder=\"Select a model\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"genesis\">\n                          <div className=\"flex items-start gap-3 text-muted-foreground\">\n                            <Rabbit className=\"w-5 h-5\" />\n                            <div className=\"grid gap-0.5\">\n                              <p>\n                                Neural{\" \"}\n                                <span className=\"font-medium text-foreground\">\n                                  Genesis\n                                </span>\n                              </p>\n                              <p className=\"text-xs\" data-description>\n                                Our fastest model for general use cases.\n                              </p>\n                            </div>\n                          </div>\n                        </SelectItem>\n                        <SelectItem value=\"explorer\">\n                          <div className=\"flex items-start gap-3 text-muted-foreground\">\n                            <Bird className=\"w-5 h-5\" />\n                            <div className=\"grid gap-0.5\">\n                              <p>\n                                Neural{\" \"}\n                                <span className=\"font-medium text-foreground\">\n                                  Explorer\n                                </span>\n                              </p>\n                              <p className=\"text-xs\" data-description>\n                                Performance and speed for efficiency.\n                              </p>\n                            </div>\n                          </div>\n                        </SelectItem>\n                        <SelectItem value=\"quantum\">\n                          <div className=\"flex items-start gap-3 text-muted-foreground\">\n                            <Turtle className=\"w-5 h-5\" />\n                            <div className=\"grid gap-0.5\">\n                              <p>\n                                Neural{\" \"}\n                                <span className=\"font-medium text-foreground\">\n                                  Quantum\n                                </span>\n                              </p>\n                              <p className=\"text-xs\" data-description>\n                                The most powerful model for complex\n                                computations.\n                              </p>\n                            </div>\n                          </div>\n                        </SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"temperature\">Temperature</Label>\n                    <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-p\">Top P</Label>\n                    <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-k\">Top K</Label>\n                    <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                  </div>\n                </fieldset>\n                <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                  <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                    Messages\n                  </legend>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"role\">Role</Label>\n                    <Select defaultValue=\"system\">\n                      <SelectTrigger>\n                        <SelectValue placeholder=\"Select a role\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"system\">System</SelectItem>\n                        <SelectItem value=\"user\">User</SelectItem>\n                        <SelectItem value=\"assistant\">Assistant</SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"content\">Content</Label>\n                    <Textarea id=\"content\" placeholder=\"You are a...\" />\n                  </div>\n                </fieldset>\n              </form>\n            </DrawerContent>\n          </Drawer>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"ml-auto gap-1.5 text-sm\"\n          >\n            <Share className=\"w-3.5 h-3.5\" />\n            Share\n          </Button>\n        </header>\n        <main className=\"grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3\">\n          <div\n            className=\"relative hidden flex-col items-start gap-8 md:flex\"\n            x-chunk=\"A settings form a configuring an AI model and messages.\"\n          >\n            <form className=\"grid w-full items-start gap-6\">\n              <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                  Settings\n                </legend>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"model\">Model</Label>\n                  <Select>\n                    <SelectTrigger\n                      id=\"model\"\n                      className=\"items-start [&_[data-description]]:hidden\"\n                    >\n                      <SelectValue placeholder=\"Select a model\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"genesis\">\n                        <div className=\"flex items-start gap-3 text-muted-foreground\">\n                          <Rabbit className=\"w-5 h-5\" />\n                          <div className=\"grid gap-0.5\">\n                            <p>\n                              Neural{\" \"}\n                              <span className=\"font-medium text-foreground\">\n                                Genesis\n                              </span>\n                            </p>\n                            <p className=\"text-xs\" data-description>\n                              Our fastest model for general use cases.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"explorer\">\n                        <div className=\"flex items-start gap-3 text-muted-foreground\">\n                          <Bird className=\"w-5 h-5\" />\n                          <div className=\"grid gap-0.5\">\n                            <p>\n                              Neural{\" \"}\n                              <span className=\"font-medium text-foreground\">\n                                Explorer\n                              </span>\n                            </p>\n                            <p className=\"text-xs\" data-description>\n                              Performance and speed for efficiency.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"quantum\">\n                        <div className=\"flex items-start gap-3 text-muted-foreground\">\n                          <Turtle className=\"w-5 h-5\" />\n                          <div className=\"grid gap-0.5\">\n                            <p>\n                              Neural{\" \"}\n                              <span className=\"font-medium text-foreground\">\n                                Quantum\n                              </span>\n                            </p>\n                            <p className=\"text-xs\" data-description>\n                              The most powerful model for complex computations.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"temperature\">Temperature</Label>\n                  <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                </div>\n                <div className=\"grid grid-cols-2 gap-4\">\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-p\">Top P</Label>\n                    <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-k\">Top K</Label>\n                    <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                  </div>\n                </div>\n              </fieldset>\n              <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                  Messages\n                </legend>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"role\">Role</Label>\n                  <Select defaultValue=\"system\">\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"system\">System</SelectItem>\n                      <SelectItem value=\"user\">User</SelectItem>\n                      <SelectItem value=\"assistant\">Assistant</SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"content\">Content</Label>\n                  <Textarea\n                    id=\"content\"\n                    placeholder=\"You are a...\"\n                    className=\"min-h-[9.5rem]\"\n                  />\n                </div>\n              </fieldset>\n            </form>\n          </div>\n          <div className=\"relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2\">\n            <Badge variant=\"outline\" className=\"absolute right-3 top-3\">\n              Output\n            </Badge>\n            <div className=\"flex-1\" />\n            <form\n              className=\"relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring\"\n              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.\"\n            >\n              <Label htmlFor=\"message\" className=\"sr-only\">\n                Message\n              </Label>\n              <Textarea\n                id=\"message\"\n                placeholder=\"Type your message here...\"\n                className=\"min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0\"\n              />\n              <div className=\"flex items-center p-3 pt-0\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Paperclip className=\"w-4 h-4\" />\n                      <span className=\"sr-only\">Attach file</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">Attach File</TooltipContent>\n                </Tooltip>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Mic className=\"w-4 h-4\" />\n                      <span className=\"sr-only\">Use Microphone</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">Use Microphone</TooltipContent>\n                </Tooltip>\n                <Button type=\"submit\" size=\"sm\" className=\"ml-auto gap-1.5\">\n                  Send Message\n                  <CornerDownLeft className=\"w-3.5 h-3.5\" />\n                </Button>\n              </div>\n            </form>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/dashboard-04.json b/apps/www/public/r/styles/new-york/dashboard-04.json
deleted file mode 100644
index 6c6ad7fc652..00000000000
--- a/apps/www/public/r/styles/new-york/dashboard-04.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "dashboard-04",
-  "type": "registry:block",
-  "registryDependencies": [
-    "button",
-    "card",
-    "dropdown-menu",
-    "input"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-04.tsx",
-      "content": "import Link from \"next/link\"\nimport { CircleUser, Menu, Package2, Search } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/new-york/ui/sheet\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col\">\n      <header className=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n        <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\">\n          <Link\n            href=\"#\"\n            className=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n          >\n            <Package2 className=\"h-6 w-6\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Dashboard\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Orders\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Products\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Customers\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-foreground transition-colors hover:text-foreground\"\n          >\n            Settings\n          </Link>\n        </nav>\n        <Sheet>\n          <SheetTrigger asChild>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              className=\"shrink-0 md:hidden\"\n            >\n              <Menu className=\"h-5 w-5\" />\n              <span className=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\">\n            <nav className=\"grid gap-6 text-lg font-medium\">\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 className=\"h-6 w-6\" />\n                <span className=\"sr-only\">Acme Inc</span>\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Dashboard\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Orders\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Products\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Customers\n              </Link>\n              <Link href=\"#\" className=\"hover:text-foreground\">\n                Settings\n              </Link>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <div className=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n          <form className=\"ml-auto flex-1 sm:flex-initial\">\n            <div className=\"relative\">\n              <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                className=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n              />\n            </div>\n          </form>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" size=\"icon\" className=\"rounded-full\">\n                <CircleUser className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle user menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </header>\n      <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\">\n        <div className=\"mx-auto grid w-full max-w-6xl gap-2\">\n          <h1 className=\"text-3xl font-semibold\">Settings</h1>\n        </div>\n        <div className=\"mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]\">\n          <nav\n            className=\"grid gap-4 text-sm text-muted-foreground\"\n            x-chunk=\"A sidebar navigation with links to general, security, integrations, support, organizations, and advanced settings.\"\n            x-chunk-container=\"chunk-container after:right-0\"\n          >\n            <Link href=\"#\" className=\"font-semibold text-primary\">\n              General\n            </Link>\n            <Link href=\"#\">Security</Link>\n            <Link href=\"#\">Integrations</Link>\n            <Link href=\"#\">Support</Link>\n            <Link href=\"#\">Organizations</Link>\n            <Link href=\"#\">Advanced</Link>\n          </nav>\n          <div className=\"grid gap-6\">\n            <Card x-chunk=\"A form to update the store name.\">\n              <CardHeader>\n                <CardTitle>Store Name</CardTitle>\n                <CardDescription>\n                  Used to identify your store in the marketplace.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Input placeholder=\"Store Name\" />\n                </form>\n              </CardContent>\n              <CardFooter className=\"border-t px-6 py-4\">\n                <Button>Save</Button>\n              </CardFooter>\n            </Card>\n            <Card x-chunk=\"A form to update the plugins directory with a checkbox to allow administrators to change the directory.\">\n              <CardHeader>\n                <CardTitle>Plugins Directory</CardTitle>\n                <CardDescription>\n                  The directory within your project, in which your plugins are\n                  located.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form className=\"flex flex-col gap-4\">\n                  <Input\n                    placeholder=\"Project Name\"\n                    defaultValue=\"/content/plugins\"\n                  />\n                  <div className=\"flex items-center space-x-2\">\n                    <Checkbox id=\"include\" defaultChecked />\n                    <label\n                      htmlFor=\"include\"\n                      className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                    >\n                      Allow administrators to change the directory.\n                    </label>\n                  </div>\n                </form>\n              </CardContent>\n              <CardFooter className=\"border-t px-6 py-4\">\n                <Button>Save</Button>\n              </CardFooter>\n            </Card>\n          </div>\n        </div>\n      </main>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/dashboard-05.json b/apps/www/public/r/styles/new-york/dashboard-05.json
deleted file mode 100644
index 1504eaf2f16..00000000000
--- a/apps/www/public/r/styles/new-york/dashboard-05.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "name": "dashboard-05",
-  "type": "registry:block",
-  "registryDependencies": [
-    "badge",
-    "breadcrumb",
-    "button",
-    "card",
-    "dropdown-menu",
-    "input",
-    "pagination",
-    "progress",
-    "separator",
-    "sheet",
-    "table",
-    "tabs",
-    "tooltip"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-05.tsx",
-      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\nimport Link from \"next/link\"\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Copy,\n  CreditCard,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreVertical,\n  Package,\n  Package2,\n  PanelLeft,\n  Search,\n  Settings,\n  ShoppingCart,\n  Truck,\n  Users2,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/new-york/ui/pagination\"\nimport { Progress } from \"@/registry/new-york/ui/progress\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/new-york/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york/ui/tabs\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col bg-muted/40\">\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n        <nav className=\"flex flex-col items-center gap-4 px-2 sm:py-4\">\n          <Link\n            href=\"#\"\n            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\"\n          >\n            <Package2 className=\"h-4 w-4 transition-all group-hover:scale-110\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Home className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Dashboard</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Dashboard</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <ShoppingCart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Orders</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Orders</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Package className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Products</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Products</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Users2 className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Customers</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Customers</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <LineChart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Analytics</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Analytics</TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-4\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Settings className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Settings</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Settings</TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n        <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\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button size=\"icon\" variant=\"outline\" className=\"sm:hidden\">\n                <PanelLeft className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle Menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"sm:max-w-xs\">\n              <nav className=\"grid gap-6 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  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\"\n                >\n                  <Package2 className=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users2 className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Settings\n                </Link>\n              </nav>\n            </SheetContent>\n          </Sheet>\n          <Breadcrumb className=\"hidden md:flex\">\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Dashboard</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Orders</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Recent Orders</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <div className=\"relative ml-auto flex-1 md:grow-0\">\n            <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n            />\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"overflow-hidden rounded-full\"\n              >\n                <Image\n                  src=\"/placeholder-user.jpg\"\n                  width={36}\n                  height={36}\n                  alt=\"Avatar\"\n                  className=\"overflow-hidden rounded-full\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <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\">\n          <div className=\"grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2\">\n            <div className=\"grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4\">\n              <Card\n                className=\"sm:col-span-2\"\n                x-chunk=\"A card for an orders dashboard with a description and a button to create a new order.\"\n              >\n                <CardHeader className=\"pb-3\">\n                  <CardTitle>Your Orders</CardTitle>\n                  <CardDescription className=\"text-balance max-w-lg leading-relaxed\">\n                    Introducing Our Dynamic Orders Dashboard for Seamless\n                    Management and Insightful Analysis.\n                  </CardDescription>\n                </CardHeader>\n                <CardFooter>\n                  <Button>Create New Order</Button>\n                </CardFooter>\n              </Card>\n              <Card x-chunk=\"A stats card showing this week's total sales in USD, the percentage difference from last week, and a progress bar.\">\n                <CardHeader className=\"pb-2\">\n                  <CardDescription>This Week</CardDescription>\n                  <CardTitle className=\"text-4xl\">$1,329</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div className=\"text-xs text-muted-foreground\">\n                    +25% from last week\n                  </div>\n                </CardContent>\n                <CardFooter>\n                  <Progress value={25} aria-label=\"25% increase\" />\n                </CardFooter>\n              </Card>\n              <Card x-chunk=\"A stats card showing this month's total sales in USD, the percentage difference from last month, and a progress bar.\">\n                <CardHeader className=\"pb-2\">\n                  <CardDescription>This Month</CardDescription>\n                  <CardTitle className=\"text-4xl\">$5,329</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div className=\"text-xs text-muted-foreground\">\n                    +10% from last month\n                  </div>\n                </CardContent>\n                <CardFooter>\n                  <Progress value={12} aria-label=\"12% increase\" />\n                </CardFooter>\n              </Card>\n            </div>\n            <Tabs defaultValue=\"week\">\n              <div className=\"flex items-center\">\n                <TabsList>\n                  <TabsTrigger value=\"week\">Week</TabsTrigger>\n                  <TabsTrigger value=\"month\">Month</TabsTrigger>\n                  <TabsTrigger value=\"year\">Year</TabsTrigger>\n                </TabsList>\n                <div className=\"ml-auto flex items-center gap-2\">\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button\n                        variant=\"outline\"\n                        size=\"sm\"\n                        className=\"h-7 gap-1 text-sm\"\n                      >\n                        <ListFilter className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only sm:not-sr-only\">Filter</span>\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent align=\"end\">\n                      <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuCheckboxItem checked>\n                        Fulfilled\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem>\n                        Declined\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem>\n                        Refunded\n                      </DropdownMenuCheckboxItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                  <Button\n                    size=\"sm\"\n                    variant=\"outline\"\n                    className=\"h-7 gap-1 text-sm\"\n                  >\n                    <File className=\"h-3.5 w-3.5\" />\n                    <span className=\"sr-only sm:not-sr-only\">Export</span>\n                  </Button>\n                </div>\n              </div>\n              <TabsContent value=\"week\">\n                <Card x-chunk=\"A table of recent orders showing the following columns: Customer, Type, Status, Date, and Amount.\">\n                  <CardHeader className=\"px-7\">\n                    <CardTitle>Orders</CardTitle>\n                    <CardDescription>\n                      Recent orders from your store.\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <Table>\n                      <TableHeader>\n                        <TableRow>\n                          <TableHead>Customer</TableHead>\n                          <TableHead className=\"hidden sm:table-cell\">\n                            Type\n                          </TableHead>\n                          <TableHead className=\"hidden sm:table-cell\">\n                            Status\n                          </TableHead>\n                          <TableHead className=\"hidden md:table-cell\">\n                            Date\n                          </TableHead>\n                          <TableHead className=\"text-right\">Amount</TableHead>\n                        </TableRow>\n                      </TableHeader>\n                      <TableBody>\n                        <TableRow className=\"bg-accent\">\n                          <TableCell>\n                            <div className=\"font-medium\">Liam Johnson</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              liam@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-23\n                          </TableCell>\n                          <TableCell className=\"text-right\">$250.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Olivia Smith</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              olivia@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Refund\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"outline\">\n                              Declined\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-24\n                          </TableCell>\n                          <TableCell className=\"text-right\">$150.00</TableCell>\n                        </TableRow>\n                        {/* <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Liam Johnson</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              liam@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-23\n                          </TableCell>\n                          <TableCell className=\"text-right\">$250.00</TableCell>\n                        </TableRow> */}\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Noah Williams</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              noah@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Subscription\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-25\n                          </TableCell>\n                          <TableCell className=\"text-right\">$350.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Emma Brown</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              emma@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-26\n                          </TableCell>\n                          <TableCell className=\"text-right\">$450.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Liam Johnson</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              liam@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-23\n                          </TableCell>\n                          <TableCell className=\"text-right\">$250.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Olivia Smith</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              olivia@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Refund\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"outline\">\n                              Declined\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-24\n                          </TableCell>\n                          <TableCell className=\"text-right\">$150.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Emma Brown</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              emma@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-26\n                          </TableCell>\n                          <TableCell className=\"text-right\">$450.00</TableCell>\n                        </TableRow>\n                      </TableBody>\n                    </Table>\n                  </CardContent>\n                </Card>\n              </TabsContent>\n            </Tabs>\n          </div>\n          <div>\n            <Card\n              className=\"overflow-hidden\"\n              x-chunk=\"An order details card with order details, shipping information, customer information and payment information.\"\n            >\n              <CardHeader className=\"flex flex-row items-start bg-muted/50\">\n                <div className=\"grid gap-0.5\">\n                  <CardTitle className=\"group flex items-center gap-2 text-lg\">\n                    Order Oe31b70H\n                    <Button\n                      size=\"icon\"\n                      variant=\"outline\"\n                      className=\"h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100\"\n                    >\n                      <Copy className=\"h-3 w-3\" />\n                      <span className=\"sr-only\">Copy Order ID</span>\n                    </Button>\n                  </CardTitle>\n                  <CardDescription>Date: November 23, 2023</CardDescription>\n                </div>\n                <div className=\"ml-auto flex items-center gap-1\">\n                  <Button size=\"sm\" variant=\"outline\" className=\"h-8 gap-1\">\n                    <Truck className=\"h-3.5 w-3.5\" />\n                    <span className=\"lg:sr-only xl:not-sr-only xl:whitespace-nowrap\">\n                      Track Order\n                    </span>\n                  </Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-8 w-8\">\n                        <MoreVertical className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only\">More</span>\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent align=\"end\">\n                      <DropdownMenuItem>Edit</DropdownMenuItem>\n                      <DropdownMenuItem>Export</DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>Trash</DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </div>\n              </CardHeader>\n              <CardContent className=\"p-6 text-sm\">\n                <div className=\"grid gap-3\">\n                  <div className=\"font-semibold\">Order Details</div>\n                  <ul className=\"grid gap-3\">\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">\n                        Glimmer Lamps x <span>2</span>\n                      </span>\n                      <span>$250.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">\n                        Aqua Filters x <span>1</span>\n                      </span>\n                      <span>$49.00</span>\n                    </li>\n                  </ul>\n                  <Separator className=\"my-2\" />\n                  <ul className=\"grid gap-3\">\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">Subtotal</span>\n                      <span>$299.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">Shipping</span>\n                      <span>$5.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">Tax</span>\n                      <span>$25.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between font-semibold\">\n                      <span className=\"text-muted-foreground\">Total</span>\n                      <span>$329.00</span>\n                    </li>\n                  </ul>\n                </div>\n                <Separator className=\"my-4\" />\n                <div className=\"grid grid-cols-2 gap-4\">\n                  <div className=\"grid gap-3\">\n                    <div className=\"font-semibold\">Shipping Information</div>\n                    <address className=\"grid gap-0.5 not-italic text-muted-foreground\">\n                      <span>Liam Johnson</span>\n                      <span>1234 Main St.</span>\n                      <span>Anytown, CA 12345</span>\n                    </address>\n                  </div>\n                  <div className=\"grid auto-rows-max gap-3\">\n                    <div className=\"font-semibold\">Billing Information</div>\n                    <div className=\"text-muted-foreground\">\n                      Same as shipping address\n                    </div>\n                  </div>\n                </div>\n                <Separator className=\"my-4\" />\n                <div className=\"grid gap-3\">\n                  <div className=\"font-semibold\">Customer Information</div>\n                  <dl className=\"grid gap-3\">\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"text-muted-foreground\">Customer</dt>\n                      <dd>Liam Johnson</dd>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"text-muted-foreground\">Email</dt>\n                      <dd>\n                        <a href=\"mailto:\">liam@acme.com</a>\n                      </dd>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"text-muted-foreground\">Phone</dt>\n                      <dd>\n                        <a href=\"tel:\">+1 234 567 890</a>\n                      </dd>\n                    </div>\n                  </dl>\n                </div>\n                <Separator className=\"my-4\" />\n                <div className=\"grid gap-3\">\n                  <div className=\"font-semibold\">Payment Information</div>\n                  <dl className=\"grid gap-3\">\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"flex items-center gap-1 text-muted-foreground\">\n                        <CreditCard className=\"h-4 w-4\" />\n                        Visa\n                      </dt>\n                      <dd>**** **** **** 4532</dd>\n                    </div>\n                  </dl>\n                </div>\n              </CardContent>\n              <CardFooter className=\"flex flex-row items-center border-t bg-muted/50 px-6 py-3\">\n                <div className=\"text-xs text-muted-foreground\">\n                  Updated <time dateTime=\"2023-11-23\">November 23, 2023</time>\n                </div>\n                <Pagination className=\"ml-auto mr-0 w-auto\">\n                  <PaginationContent>\n                    <PaginationItem>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-6 w-6\">\n                        <ChevronLeft className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only\">Previous Order</span>\n                      </Button>\n                    </PaginationItem>\n                    <PaginationItem>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-6 w-6\">\n                        <ChevronRight className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only\">Next Order</span>\n                      </Button>\n                    </PaginationItem>\n                  </PaginationContent>\n                </Pagination>\n              </CardFooter>\n            </Card>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/dashboard-06.json b/apps/www/public/r/styles/new-york/dashboard-06.json
deleted file mode 100644
index 97a0b3c6961..00000000000
--- a/apps/www/public/r/styles/new-york/dashboard-06.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "name": "dashboard-06",
-  "type": "registry:block",
-  "registryDependencies": [
-    "badge",
-    "breadcrumb",
-    "button",
-    "card",
-    "dropdown-menu",
-    "input",
-    "sheet",
-    "table",
-    "tabs",
-    "tooltip"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-06.tsx",
-      "content": "import Image from \"next/image\"\nimport Link from \"next/link\"\nimport {\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreHorizontal,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Users2,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/new-york/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york/ui/tabs\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col bg-muted/40\">\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n        <nav className=\"flex flex-col items-center gap-4 px-2 py-4\">\n          <Link\n            href=\"#\"\n            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\"\n          >\n            <Package2 className=\"h-4 w-4 transition-all group-hover:scale-110\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Home className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Dashboard</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Dashboard</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Orders</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Orders</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Package className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Products</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Products</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Users2 className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Customers</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Customers</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <LineChart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Analytics</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Analytics</TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto flex flex-col items-center gap-4 px-2 py-4\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Settings className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Settings</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Settings</TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n        <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\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button size=\"icon\" variant=\"outline\" className=\"sm:hidden\">\n                <PanelLeft className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle Menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"sm:max-w-xs\">\n              <nav className=\"grid gap-6 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  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\"\n                >\n                  <Package2 className=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users2 className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Settings\n                </Link>\n              </nav>\n            </SheetContent>\n          </Sheet>\n          <Breadcrumb className=\"hidden md:flex\">\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Dashboard</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Products</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbPage>All Products</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <div className=\"relative ml-auto flex-1 md:grow-0\">\n            <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n            />\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"overflow-hidden rounded-full\"\n              >\n                <Image\n                  src=\"/placeholder-user.jpg\"\n                  width={36}\n                  height={36}\n                  alt=\"Avatar\"\n                  className=\"overflow-hidden rounded-full\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n          <Tabs defaultValue=\"all\">\n            <div className=\"flex items-center\">\n              <TabsList>\n                <TabsTrigger value=\"all\">All</TabsTrigger>\n                <TabsTrigger value=\"active\">Active</TabsTrigger>\n                <TabsTrigger value=\"draft\">Draft</TabsTrigger>\n                <TabsTrigger value=\"archived\" className=\"hidden sm:flex\">\n                  Archived\n                </TabsTrigger>\n              </TabsList>\n              <div className=\"ml-auto flex items-center gap-2\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"outline\" size=\"sm\" className=\"h-7 gap-1\">\n                      <ListFilter className=\"h-3.5 w-3.5\" />\n                      <span className=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                        Filter\n                      </span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuCheckboxItem checked>\n                      Active\n                    </DropdownMenuCheckboxItem>\n                    <DropdownMenuCheckboxItem>Draft</DropdownMenuCheckboxItem>\n                    <DropdownMenuCheckboxItem>\n                      Archived\n                    </DropdownMenuCheckboxItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n                <Button size=\"sm\" variant=\"outline\" className=\"h-7 gap-1\">\n                  <File className=\"h-3.5 w-3.5\" />\n                  <span className=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                    Export\n                  </span>\n                </Button>\n                <Button size=\"sm\" className=\"h-7 gap-1\">\n                  <PlusCircle className=\"h-3.5 w-3.5\" />\n                  <span className=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                    Add Product\n                  </span>\n                </Button>\n              </div>\n            </div>\n            <TabsContent value=\"all\">\n              <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.\">\n                <CardHeader>\n                  <CardTitle>Products</CardTitle>\n                  <CardDescription>\n                    Manage your products and view their sales performance.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead className=\"hidden w-[100px] sm:table-cell\">\n                          <span className=\"sr-only\">Image</span>\n                        </TableHead>\n                        <TableHead>Name</TableHead>\n                        <TableHead>Status</TableHead>\n                        <TableHead>Price</TableHead>\n                        <TableHead className=\"hidden md:table-cell\">\n                          Total Sales\n                        </TableHead>\n                        <TableHead className=\"hidden md:table-cell\">\n                          Created at\n                        </TableHead>\n                        <TableHead>\n                          <span className=\"sr-only\">Actions</span>\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Laser Lemonade Machine\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Draft</Badge>\n                        </TableCell>\n                        <TableCell>$499.99</TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          25\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-07-12 10:42 AM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Hypernova Headphones\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell>$129.99</TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          100\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-10-18 03:21 PM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          AeroGlow Desk Lamp\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell>$39.99</TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          50\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-11-29 08:15 AM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          TechTonic Energy Drink\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"secondary\">Draft</Badge>\n                        </TableCell>\n                        <TableCell>$2.99</TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          0\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-12-25 11:59 PM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Gamer Gear Pro Controller\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell>$59.99</TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          75\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2024-01-01 12:00 AM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Luminous VR Headset\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell>$199.99</TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          30\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2024-02-14 02:14 PM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n                <CardFooter>\n                  <div className=\"text-xs text-muted-foreground\">\n                    Showing <strong>1-10</strong> of <strong>32</strong>{\" \"}\n                    products\n                  </div>\n                </CardFooter>\n              </Card>\n            </TabsContent>\n          </Tabs>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/dashboard-07.json b/apps/www/public/r/styles/new-york/dashboard-07.json
deleted file mode 100644
index 1618e7dfd18..00000000000
--- a/apps/www/public/r/styles/new-york/dashboard-07.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "name": "dashboard-07",
-  "type": "registry:block",
-  "registryDependencies": [
-    "badge",
-    "breadcrumb",
-    "button",
-    "card",
-    "dropdown-menu",
-    "input",
-    "pagination",
-    "progress",
-    "separator",
-    "sheet",
-    "table",
-    "tabs",
-    "tooltip"
-  ],
-  "files": [
-    {
-      "path": "block/dashboard-07.tsx",
-      "content": "import Image from \"next/image\"\nimport Link from \"next/link\"\nimport {\n  ChevronLeft,\n  Home,\n  LineChart,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Upload,\n  Users2,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/new-york/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\nimport { Textarea } from \"@/registry/new-york/ui/textarea\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col bg-muted/40\">\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n        <nav className=\"flex flex-col items-center gap-4 px-2 py-4\">\n          <Link\n            href=\"#\"\n            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\"\n          >\n            <Package2 className=\"h-4 w-4 transition-all group-hover:scale-110\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Home className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Dashboard</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Dashboard</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Orders</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Orders</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Package className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Products</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Products</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Users2 className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Customers</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Customers</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <LineChart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Analytics</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Analytics</TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto flex flex-col items-center gap-4 px-2 py-4\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                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\"\n              >\n                <Settings className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Settings</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Settings</TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n        <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\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button size=\"icon\" variant=\"outline\" className=\"sm:hidden\">\n                <PanelLeft className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle Menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"sm:max-w-xs\">\n              <nav className=\"grid gap-6 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  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\"\n                >\n                  <Package2 className=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users2 className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Settings\n                </Link>\n              </nav>\n            </SheetContent>\n          </Sheet>\n          <Breadcrumb className=\"hidden md:flex\">\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Dashboard</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Products</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Edit Product</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <div className=\"relative ml-auto flex-1 md:grow-0\">\n            <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n            />\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"overflow-hidden rounded-full\"\n              >\n                <Image\n                  src=\"/placeholder-user.jpg\"\n                  width={36}\n                  height={36}\n                  alt=\"Avatar\"\n                  className=\"overflow-hidden rounded-full\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n          <div className=\"mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4\">\n            <div className=\"flex items-center gap-4\">\n              <Button variant=\"outline\" size=\"icon\" className=\"h-7 w-7\">\n                <ChevronLeft className=\"h-4 w-4\" />\n                <span className=\"sr-only\">Back</span>\n              </Button>\n              <h1 className=\"flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0\">\n                Pro Controller\n              </h1>\n              <Badge variant=\"outline\" className=\"ml-auto sm:ml-0\">\n                In stock\n              </Badge>\n              <div className=\"hidden items-center gap-2 md:ml-auto md:flex\">\n                <Button variant=\"outline\" size=\"sm\">\n                  Discard\n                </Button>\n                <Button size=\"sm\">Save Product</Button>\n              </div>\n            </div>\n            <div className=\"grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8\">\n              <div className=\"grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8\">\n                <Card x-chunk=\"A card with a form to edit the product details\">\n                  <CardHeader>\n                    <CardTitle>Product Details</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-6\">\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"name\">Name</Label>\n                        <Input\n                          id=\"name\"\n                          type=\"text\"\n                          className=\"w-full\"\n                          defaultValue=\"Gamer Gear Pro Controller\"\n                        />\n                      </div>\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"description\">Description</Label>\n                        <Textarea\n                          id=\"description\"\n                          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.\"\n                          className=\"min-h-32\"\n                        />\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n                <Card x-chunk=\"A card with a form to edit the product stock and variants\">\n                  <CardHeader>\n                    <CardTitle>Stock</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <Table>\n                      <TableHeader>\n                        <TableRow>\n                          <TableHead className=\"w-[100px]\">SKU</TableHead>\n                          <TableHead>Stock</TableHead>\n                          <TableHead>Price</TableHead>\n                          <TableHead className=\"w-[100px]\">Size</TableHead>\n                        </TableRow>\n                      </TableHeader>\n                      <TableBody>\n                        <TableRow>\n                          <TableCell className=\"font-semibold\">\n                            GGPC-001\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"stock-1\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"stock-1\"\n                              type=\"number\"\n                              defaultValue=\"100\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"price-1\" className=\"sr-only\">\n                              Price\n                            </Label>\n                            <Input\n                              id=\"price-1\"\n                              type=\"number\"\n                              defaultValue=\"99.99\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <ToggleGroup\n                              type=\"single\"\n                              defaultValue=\"s\"\n                              variant=\"outline\"\n                            >\n                              <ToggleGroupItem value=\"s\">S</ToggleGroupItem>\n                              <ToggleGroupItem value=\"m\">M</ToggleGroupItem>\n                              <ToggleGroupItem value=\"l\">L</ToggleGroupItem>\n                            </ToggleGroup>\n                          </TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell className=\"font-semibold\">\n                            GGPC-002\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"stock-2\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"stock-2\"\n                              type=\"number\"\n                              defaultValue=\"143\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"price-2\" className=\"sr-only\">\n                              Price\n                            </Label>\n                            <Input\n                              id=\"price-2\"\n                              type=\"number\"\n                              defaultValue=\"99.99\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <ToggleGroup\n                              type=\"single\"\n                              defaultValue=\"m\"\n                              variant=\"outline\"\n                            >\n                              <ToggleGroupItem value=\"s\">S</ToggleGroupItem>\n                              <ToggleGroupItem value=\"m\">M</ToggleGroupItem>\n                              <ToggleGroupItem value=\"l\">L</ToggleGroupItem>\n                            </ToggleGroup>\n                          </TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell className=\"font-semibold\">\n                            GGPC-003\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"stock-3\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"stock-3\"\n                              type=\"number\"\n                              defaultValue=\"32\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"price-3\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"price-3\"\n                              type=\"number\"\n                              defaultValue=\"99.99\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <ToggleGroup\n                              type=\"single\"\n                              defaultValue=\"s\"\n                              variant=\"outline\"\n                            >\n                              <ToggleGroupItem value=\"s\">S</ToggleGroupItem>\n                              <ToggleGroupItem value=\"m\">M</ToggleGroupItem>\n                              <ToggleGroupItem value=\"l\">L</ToggleGroupItem>\n                            </ToggleGroup>\n                          </TableCell>\n                        </TableRow>\n                      </TableBody>\n                    </Table>\n                  </CardContent>\n                  <CardFooter className=\"justify-center border-t p-4\">\n                    <Button size=\"sm\" variant=\"ghost\" className=\"gap-1\">\n                      <PlusCircle className=\"h-3.5 w-3.5\" />\n                      Add Variant\n                    </Button>\n                  </CardFooter>\n                </Card>\n                <Card x-chunk=\"A card with a form to edit the product category and subcategory\">\n                  <CardHeader>\n                    <CardTitle>Product Category</CardTitle>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-6 sm:grid-cols-3\">\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"category\">Category</Label>\n                        <Select>\n                          <SelectTrigger\n                            id=\"category\"\n                            aria-label=\"Select category\"\n                          >\n                            <SelectValue placeholder=\"Select category\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            <SelectItem value=\"clothing\">Clothing</SelectItem>\n                            <SelectItem value=\"electronics\">\n                              Electronics\n                            </SelectItem>\n                            <SelectItem value=\"accessories\">\n                              Accessories\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </div>\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"subcategory\">\n                          Subcategory (optional)\n                        </Label>\n                        <Select>\n                          <SelectTrigger\n                            id=\"subcategory\"\n                            aria-label=\"Select subcategory\"\n                          >\n                            <SelectValue placeholder=\"Select subcategory\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            <SelectItem value=\"t-shirts\">T-Shirts</SelectItem>\n                            <SelectItem value=\"hoodies\">Hoodies</SelectItem>\n                            <SelectItem value=\"sweatshirts\">\n                              Sweatshirts\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n              </div>\n              <div className=\"grid auto-rows-max items-start gap-4 lg:gap-8\">\n                <Card x-chunk=\"A card with a form to edit the product status\">\n                  <CardHeader>\n                    <CardTitle>Product Status</CardTitle>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-6\">\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"status\">Status</Label>\n                        <Select>\n                          <SelectTrigger id=\"status\" aria-label=\"Select status\">\n                            <SelectValue placeholder=\"Select status\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            <SelectItem value=\"draft\">Draft</SelectItem>\n                            <SelectItem value=\"published\">Active</SelectItem>\n                            <SelectItem value=\"archived\">Archived</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n                <Card\n                  className=\"overflow-hidden\"\n                  x-chunk=\"A card with a form to upload product images\"\n                >\n                  <CardHeader>\n                    <CardTitle>Product Images</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-2\">\n                      <Image\n                        alt=\"Product image\"\n                        className=\"aspect-square w-full rounded-md object-cover\"\n                        height=\"300\"\n                        src=\"/placeholder.svg\"\n                        width=\"300\"\n                      />\n                      <div className=\"grid grid-cols-3 gap-2\">\n                        <button>\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square w-full rounded-md object-cover\"\n                            height=\"84\"\n                            src=\"/placeholder.svg\"\n                            width=\"84\"\n                          />\n                        </button>\n                        <button>\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square w-full rounded-md object-cover\"\n                            height=\"84\"\n                            src=\"/placeholder.svg\"\n                            width=\"84\"\n                          />\n                        </button>\n                        <button className=\"flex aspect-square w-full items-center justify-center rounded-md border border-dashed\">\n                          <Upload className=\"h-4 w-4 text-muted-foreground\" />\n                          <span className=\"sr-only\">Upload</span>\n                        </button>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n                <Card x-chunk=\"A card with a call to action to archive the product\">\n                  <CardHeader>\n                    <CardTitle>Archive Product</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit.\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <div></div>\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Archive Product\n                    </Button>\n                  </CardContent>\n                </Card>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-center gap-2 md:hidden\">\n              <Button variant=\"outline\" size=\"sm\">\n                Discard\n              </Button>\n              <Button size=\"sm\">Save Product</Button>\n            </div>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:block",
-      "target": ""
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/data-table-demo.json b/apps/www/public/r/styles/new-york/data-table-demo.json
index 8db46bba321..7c92d065b6f 100644
--- a/apps/www/public/r/styles/new-york/data-table-demo.json
+++ b/apps/www/public/r/styles/new-york/data-table-demo.json
@@ -6,8 +6,8 @@
   ],
   "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 {\n  ColumnDef,\n  ColumnFiltersState,\n  SortingState,\n  VisibilityState,\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/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 type 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 h-4 w-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 = 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=\"h-8 w-8 p-0\">\n              <span className=\"sr-only\">Open menu</span>\n              <DotsHorizontalIcon className=\"h-4 w-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          }\n          className=\"max-w-sm\"\n        />\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"ml-auto\">\n              Columns <ChevronDownIcon className=\"ml-2 h-4 w-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=\"flex-1 text-sm text-muted-foreground\">\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",
+      "path": "examples/data-table-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  SortingState,\n  VisibilityState,\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/new-york/ui/button\"\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/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 type 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 />\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 = 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=\"h-8 w-8 p-0\">\n              <span className=\"sr-only\">Open menu</span>\n              <MoreHorizontal />\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          }\n          className=\"max-w-sm\"\n        />\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"ml-auto\">\n              Columns <ChevronDown />\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=\"flex-1 text-sm text-muted-foreground\">\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/www/public/r/styles/new-york/date-picker-demo.json b/apps/www/public/r/styles/new-york/date-picker-demo.json
index 13b35a4df78..0215e824a80 100644
--- a/apps/www/public/r/styles/new-york/date-picker-demo.json
+++ b/apps/www/public/r/styles/new-york/date-picker-demo.json
@@ -11,8 +11,8 @@
   ],
   "files": [
     {
-      "path": "example/date-picker-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"@radix-ui/react-icons\"\nimport { format } from \"date-fns\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/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 />\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",
+      "path": "examples/date-picker-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/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 />\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/www/public/r/styles/new-york/date-picker-form.json b/apps/www/public/r/styles/new-york/date-picker-form.json
index b08354035ad..3c507bd40f7 100644
--- a/apps/www/public/r/styles/new-york/date-picker-form.json
+++ b/apps/www/public/r/styles/new-york/date-picker-form.json
@@ -12,8 +12,8 @@
   ],
   "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 { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\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={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 h-4 w-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                    }\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",
+      "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 { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\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={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 h-4 w-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                    }\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/www/public/r/styles/new-york/date-picker-with-presets.json b/apps/www/public/r/styles/new-york/date-picker-with-presets.json
index 2a24bea81f4..ff1f50075c6 100644
--- a/apps/www/public/r/styles/new-york/date-picker-with-presets.json
+++ b/apps/www/public/r/styles/new-york/date-picker-with-presets.json
@@ -12,8 +12,8 @@
   ],
   "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 { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/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 />\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(), 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",
+      "path": "examples/date-picker-with-presets.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/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 />\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(), 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/www/public/r/styles/new-york/date-picker-with-range.json b/apps/www/public/r/styles/new-york/date-picker-with-range.json
index 96966b76e35..09db6c4a8e3 100644
--- a/apps/www/public/r/styles/new-york/date-picker-with-range.json
+++ b/apps/www/public/r/styles/new-york/date-picker-with-range.json
@@ -11,8 +11,8 @@
   ],
   "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 { DateRange } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/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 />\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",
+      "path": "examples/date-picker-with-range.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/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 />\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/www/public/r/styles/new-york/demo-sidebar-controlled.json b/apps/www/public/r/styles/new-york/demo-sidebar-controlled.json
deleted file mode 100644
index c90547cce52..00000000000
--- a/apps/www/public/r/styles/new-york/demo-sidebar-controlled.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-controlled",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-sidebar-controlled.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PieChart,\n  Send,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/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/new-york/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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/demo-sidebar-footer.json b/apps/www/public/r/styles/new-york/demo-sidebar-footer.json
deleted file mode 100644
index 80498c9fdf8..00000000000
--- a/apps/www/public/r/styles/new-york/demo-sidebar-footer.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-footer",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-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/new-york/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/new-york/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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/demo-sidebar-group-action.json b/apps/www/public/r/styles/new-york/demo-sidebar-group-action.json
deleted file mode 100644
index 9d60b6fb185..00000000000
--- a/apps/www/public/r/styles/new-york/demo-sidebar-group-action.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-group-action",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-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/new-york/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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/demo-sidebar-group-collapsible.json b/apps/www/public/r/styles/new-york/demo-sidebar-group-collapsible.json
deleted file mode 100644
index a3eef6f44bf..00000000000
--- a/apps/www/public/r/styles/new-york/demo-sidebar-group-collapsible.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-group-collapsible",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-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/new-york/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york/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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/demo-sidebar-group.json b/apps/www/public/r/styles/new-york/demo-sidebar-group.json
deleted file mode 100644
index 6b4f9a87587..00000000000
--- a/apps/www/public/r/styles/new-york/demo-sidebar-group.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-group",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-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/new-york/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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/demo-sidebar-header.json b/apps/www/public/r/styles/new-york/demo-sidebar-header.json
deleted file mode 100644
index 92b95eb84de..00000000000
--- a/apps/www/public/r/styles/new-york/demo-sidebar-header.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-header",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-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/new-york/ui/dropdown-menu\"\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/demo-sidebar-menu-action.json b/apps/www/public/r/styles/new-york/demo-sidebar-menu-action.json
deleted file mode 100644
index 5220a1d67fe..00000000000
--- a/apps/www/public/r/styles/new-york/demo-sidebar-menu-action.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-menu-action",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-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/new-york/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/new-york/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 side=\"right\" align=\"start\">\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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/demo-sidebar-menu-badge.json b/apps/www/public/r/styles/new-york/demo-sidebar-menu-badge.json
deleted file mode 100644
index c30ce6759b4..00000000000
--- a/apps/www/public/r/styles/new-york/demo-sidebar-menu-badge.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-menu-badge",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-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/new-york/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>{project.badge}</SidebarMenuBadge>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/demo-sidebar-menu-collapsible.json b/apps/www/public/r/styles/new-york/demo-sidebar-menu-collapsible.json
deleted file mode 100644
index c4b20cbb6ab..00000000000
--- a/apps/www/public/r/styles/new-york/demo-sidebar-menu-collapsible.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-menu-collapsible",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-sidebar-menu-collapsible.tsx",
-      "content": "\"use client\"\n\nimport { ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/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/new-york/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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/demo-sidebar-menu-sub.json b/apps/www/public/r/styles/new-york/demo-sidebar-menu-sub.json
deleted file mode 100644
index eb195caeaef..00000000000
--- a/apps/www/public/r/styles/new-york/demo-sidebar-menu-sub.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-menu-sub",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-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/new-york/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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/demo-sidebar-menu.json b/apps/www/public/r/styles/new-york/demo-sidebar-menu.json
deleted file mode 100644
index d6fbeccaa67..00000000000
--- a/apps/www/public/r/styles/new-york/demo-sidebar-menu.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-menu",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-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/new-york/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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/demo-sidebar-rsc.json b/apps/www/public/r/styles/new-york/demo-sidebar-rsc.json
deleted file mode 100644
index e4bec26ed9c..00000000000
--- a/apps/www/public/r/styles/new-york/demo-sidebar-rsc.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar-rsc",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-sidebar-rsc.tsx",
-      "content": "import * as React from \"react\"\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  SidebarMenuSkeleton,\n  SidebarProvider,\n} from \"@/registry/new-york/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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/demo-sidebar.json b/apps/www/public/r/styles/new-york/demo-sidebar.json
deleted file mode 100644
index d36a242ac54..00000000000
--- a/apps/www/public/r/styles/new-york/demo-sidebar.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "demo-sidebar",
-  "type": "registry:block",
-  "description": "",
-  "files": [
-    {
-      "path": "block/demo-sidebar.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/new-york/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"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/dialog-close-button.json b/apps/www/public/r/styles/new-york/dialog-close-button.json
index 1d00f253d96..e7de8faefbd 100644
--- a/apps/www/public/r/styles/new-york/dialog-close-button.json
+++ b/apps/www/public/r/styles/new-york/dialog-close-button.json
@@ -7,8 +7,8 @@
   ],
   "files": [
     {
-      "path": "example/dialog-close-button.tsx",
-      "content": "import { CopyIcon } from \"@radix-ui/react-icons\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york/ui/dialog\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/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://ui.shadcn.com/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=\"h-4 w-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",
+      "path": "examples/dialog-close-button.tsx",
+      "content": "import { Copy } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york/ui/dialog\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/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://ui.shadcn.com/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 />\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/www/public/r/styles/new-york/dialog-demo.json b/apps/www/public/r/styles/new-york/dialog-demo.json
index 256509fbb00..263dabf1dad 100644
--- a/apps/www/public/r/styles/new-york/dialog-demo.json
+++ b/apps/www/public/r/styles/new-york/dialog-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/dialog-demo.tsx",
+      "path": "examples/dialog-demo.tsx",
       "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york/ui/dialog\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/dialog.json b/apps/www/public/r/styles/new-york/dialog.json
index ed3b300be20..f4638d05848 100644
--- a/apps/www/public/r/styles/new-york/dialog.json
+++ b/apps/www/public/r/styles/new-york/dialog.json
@@ -7,7 +7,7 @@
   "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 { 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      \"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\",\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        \"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\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <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\">\n        <Cross2Icon className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\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)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\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)\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-sm text-muted-foreground\", 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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-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      \"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\",\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        \"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\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <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\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\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)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\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)\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-sm text-muted-foreground\", 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/www/public/r/styles/new-york/drawer-demo.json b/apps/www/public/r/styles/new-york/drawer-demo.json
index d493937e2a0..0fdbf274db9 100644
--- a/apps/www/public/r/styles/new-york/drawer-demo.json
+++ b/apps/www/public/r/styles/new-york/drawer-demo.json
@@ -6,8 +6,8 @@
   ],
   "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/new-york/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york/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=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <MinusIcon className=\"h-4 w-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-[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                <PlusIcon className=\"h-4 w-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",
+      "path": "examples/drawer-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york/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=\"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:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/drawer-dialog.json b/apps/www/public/r/styles/new-york/drawer-dialog.json
index e408543c8c8..18f1f2b1216 100644
--- a/apps/www/public/r/styles/new-york/drawer-dialog.json
+++ b/apps/www/public/r/styles/new-york/drawer-dialog.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/drawer-dialog.tsx",
+      "path": "examples/drawer-dialog.tsx",
       "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york/ui/dialog\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/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={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=\"shadcn@example.com\" />\n      </div>\n      <div className=\"grid gap-2\">\n        <Label htmlFor=\"username\">Username</Label>\n        <Input id=\"username\" defaultValue=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">Save changes</Button>\n    </form>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/dropdown-menu-checkboxes.json b/apps/www/public/r/styles/new-york/dropdown-menu-checkboxes.json
index a3ec48741d7..d846e665707 100644
--- a/apps/www/public/r/styles/new-york/dropdown-menu-checkboxes.json
+++ b/apps/www/public/r/styles/new-york/dropdown-menu-checkboxes.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/dropdown-menu-checkboxes.tsx",
+      "path": "examples/dropdown-menu-checkboxes.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenuCheckboxItemProps } from \"@radix-ui/react-dropdown-menu\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/dropdown-menu-demo.json b/apps/www/public/r/styles/new-york/dropdown-menu-demo.json
index 7bd129e1228..08e08b2bf9b 100644
--- a/apps/www/public/r/styles/new-york/dropdown-menu-demo.json
+++ b/apps/www/public/r/styles/new-york/dropdown-menu-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/dropdown-menu-demo.tsx",
+      "path": "examples/dropdown-menu-demo.tsx",
       "content": "import { Button } from \"@/registry/new-york/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/new-york/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/www/public/r/styles/new-york/dropdown-menu-radio-group.json b/apps/www/public/r/styles/new-york/dropdown-menu-radio-group.json
index f98ba85e33b..6d6d1dd1c4e 100644
--- a/apps/www/public/r/styles/new-york/dropdown-menu-radio-group.json
+++ b/apps/www/public/r/styles/new-york/dropdown-menu-radio-group.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/dropdown-menu-radio-group.tsx",
+      "path": "examples/dropdown-menu-radio-group.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/dropdown-menu.json b/apps/www/public/r/styles/new-york/dropdown-menu.json
index 2e3b16f15f4..5b63fcc0dd5 100644
--- a/apps/www/public/r/styles/new-york/dropdown-menu.json
+++ b/apps/www/public/r/styles/new-york/dropdown-menu.json
@@ -7,7 +7,7 @@
   "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 {\n  CheckIcon,\n  ChevronRightIcon,\n  DotFilledIcon,\n} from \"@radix-ui/react-icons\"\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      \"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRightIcon className=\"ml-auto\" />\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      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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\",\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        \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md\",\n        \"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\",\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      \"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>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      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground 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 h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <CheckIcon className=\"h-4 w-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      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <DotFilledIcon className=\"h-4 w-4 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(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst 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",
+      "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 { 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      \"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto\" />\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      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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\",\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        \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md\",\n        \"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\",\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      \"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>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      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground 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 h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-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      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Circle className=\"h-2 w-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(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst 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": ""
     }
diff --git a/apps/www/public/r/styles/new-york/hover-card-demo.json b/apps/www/public/r/styles/new-york/hover-card-demo.json
index 4ff5df81922..56a81fc2e54 100644
--- a/apps/www/public/r/styles/new-york/hover-card-demo.json
+++ b/apps/www/public/r/styles/new-york/hover-card-demo.json
@@ -6,8 +6,8 @@
   ],
   "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/new-york/ui/avatar\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/new-york/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 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",
+      "path": "examples/hover-card-demo.tsx",
+      "content": "import { CalendarIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/new-york/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 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:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/index.json b/apps/www/public/r/styles/new-york/index.json
index 8a9843ac17e..dd5e08b657a 100644
--- a/apps/www/public/r/styles/new-york/index.json
+++ b/apps/www/public/r/styles/new-york/index.json
@@ -4,8 +4,7 @@
   "dependencies": [
     "tailwindcss-animate",
     "class-variance-authority",
-    "lucide-react",
-    "@radix-ui/react-icons"
+    "lucide-react"
   ],
   "registryDependencies": [
     "utils"
diff --git a/apps/www/public/r/styles/new-york/input-demo.json b/apps/www/public/r/styles/new-york/input-demo.json
index 40cfa50c9a2..3c98d0eab71 100644
--- a/apps/www/public/r/styles/new-york/input-demo.json
+++ b/apps/www/public/r/styles/new-york/input-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/input-demo.tsx",
+      "path": "examples/input-demo.tsx",
       "content": "import { Input } from \"@/registry/new-york/ui/input\"\n\nexport default function InputDemo() {\n  return <Input type=\"email\" placeholder=\"Email\" />\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/input-disabled.json b/apps/www/public/r/styles/new-york/input-disabled.json
index 05164502607..5a92d5fc7a9 100644
--- a/apps/www/public/r/styles/new-york/input-disabled.json
+++ b/apps/www/public/r/styles/new-york/input-disabled.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/input-disabled.tsx",
+      "path": "examples/input-disabled.tsx",
       "content": "import { Input } from \"@/registry/new-york/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/www/public/r/styles/new-york/input-file.json b/apps/www/public/r/styles/new-york/input-file.json
index 56351fcbff4..629a3627c17 100644
--- a/apps/www/public/r/styles/new-york/input-file.json
+++ b/apps/www/public/r/styles/new-york/input-file.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/input-file.tsx",
+      "path": "examples/input-file.tsx",
       "content": "import { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/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/www/public/r/styles/new-york/input-form.json b/apps/www/public/r/styles/new-york/input-form.json
index bd110ba65d5..867f0acaee6 100644
--- a/apps/www/public/r/styles/new-york/input-form.json
+++ b/apps/www/public/r/styles/new-york/input-form.json
@@ -8,7 +8,7 @@
   ],
   "files": [
     {
-      "path": "example/input-form.tsx",
+      "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 { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport { Input } from \"@/registry/new-york/ui/input\"\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=\"shadcn\" {...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/www/public/r/styles/new-york/input-otp-controlled.json b/apps/www/public/r/styles/new-york/input-otp-controlled.json
index 11f07135356..4351e05b169 100644
--- a/apps/www/public/r/styles/new-york/input-otp-controlled.json
+++ b/apps/www/public/r/styles/new-york/input-otp-controlled.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/input-otp-controlled.tsx",
+      "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/new-york/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          <>You entered: {value}</>\n        )}\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/input-otp-demo.json b/apps/www/public/r/styles/new-york/input-otp-demo.json
index 63acdb47a08..1fceac2e6f1 100644
--- a/apps/www/public/r/styles/new-york/input-otp-demo.json
+++ b/apps/www/public/r/styles/new-york/input-otp-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/input-otp-demo.tsx",
+      "path": "examples/input-otp-demo.tsx",
       "content": "import {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/input-otp-form.json b/apps/www/public/r/styles/new-york/input-otp-form.json
index 136a80bde7f..79ad57885bc 100644
--- a/apps/www/public/r/styles/new-york/input-otp-form.json
+++ b/apps/www/public/r/styles/new-york/input-otp-form.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/input-otp-form.tsx",
+      "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 { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/new-york/ui/input-otp\"\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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/input-otp-pattern.json b/apps/www/public/r/styles/new-york/input-otp-pattern.json
index 5c31ff1844a..5351084dcf0 100644
--- a/apps/www/public/r/styles/new-york/input-otp-pattern.json
+++ b/apps/www/public/r/styles/new-york/input-otp-pattern.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/input-otp-pattern.tsx",
+      "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/new-york/ui/input-otp\"\n\nexport default function InputOTPPattern() {\n  return (\n    <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>\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/www/public/r/styles/new-york/input-otp-separator.json b/apps/www/public/r/styles/new-york/input-otp-separator.json
index aff715a5696..08ccd6baee4 100644
--- a/apps/www/public/r/styles/new-york/input-otp-separator.json
+++ b/apps/www/public/r/styles/new-york/input-otp-separator.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/input-otp-separator.tsx",
+      "path": "examples/input-otp-separator.tsx",
       "content": "import React from \"react\"\n\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/input-otp.json b/apps/www/public/r/styles/new-york/input-otp.json
index 45700c73f22..b56bdc6f4c9 100644
--- a/apps/www/public/r/styles/new-york/input-otp.json
+++ b/apps/www/public/r/styles/new-york/input-otp.json
@@ -7,7 +7,7 @@
   "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 { 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        \"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md\",\n        isActive && \"z-10 ring-1 ring-ring\",\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=\"h-4 w-px animate-caret-blink bg-foreground 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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { Minus } from \"lucide-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        \"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md\",\n        isActive && \"z-10 ring-1 ring-ring\",\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=\"h-4 w-px animate-caret-blink bg-foreground 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    <Minus />\n  </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/input-with-button.json b/apps/www/public/r/styles/new-york/input-with-button.json
index 62bd7439479..0ad141cdb1a 100644
--- a/apps/www/public/r/styles/new-york/input-with-button.json
+++ b/apps/www/public/r/styles/new-york/input-with-button.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/input-with-button.tsx",
+      "path": "examples/input-with-button.tsx",
       "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/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/www/public/r/styles/new-york/input-with-label.json b/apps/www/public/r/styles/new-york/input-with-label.json
index 077922d9593..99404158a36 100644
--- a/apps/www/public/r/styles/new-york/input-with-label.json
+++ b/apps/www/public/r/styles/new-york/input-with-label.json
@@ -8,7 +8,7 @@
   ],
   "files": [
     {
-      "path": "example/input-with-label.tsx",
+      "path": "examples/input-with-label.tsx",
       "content": "import { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/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/www/public/r/styles/new-york/input-with-text.json b/apps/www/public/r/styles/new-york/input-with-text.json
index 95399328157..1eb362f2ce5 100644
--- a/apps/www/public/r/styles/new-york/input-with-text.json
+++ b/apps/www/public/r/styles/new-york/input-with-text.json
@@ -8,7 +8,7 @@
   ],
   "files": [
     {
-      "path": "example/input-with-text.tsx",
+      "path": "examples/input-with-text.tsx",
       "content": "import { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/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-sm text-muted-foreground\">Enter your email address.</p>\n    </div>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/input.json b/apps/www/public/r/styles/new-york/input.json
index 20ca4956eb6..d083cd60ab2 100644
--- a/apps/www/public/r/styles/new-york/input.json
+++ b/apps/www/public/r/styles/new-york/input.json
@@ -4,7 +4,7 @@
   "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          \"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors 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-1 focus-visible:ring-ring 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",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Input = React.forwardRef<HTMLInputElement, React.ComponentProps<\"input\">>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors 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-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\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/www/public/r/styles/new-york/label-demo.json b/apps/www/public/r/styles/new-york/label-demo.json
index 30cb7452639..7c2c6a9d226 100644
--- a/apps/www/public/r/styles/new-york/label-demo.json
+++ b/apps/www/public/r/styles/new-york/label-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/label-demo.tsx",
+      "path": "examples/label-demo.tsx",
       "content": "import { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport { Label } from \"@/registry/new-york/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/www/public/r/styles/new-york/login-01-dark.png b/apps/www/public/r/styles/new-york/login-01-dark.png
new file mode 100644
index 00000000000..c250316cccc
Binary files /dev/null and b/apps/www/public/r/styles/new-york/login-01-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/login-01-light.png b/apps/www/public/r/styles/new-york/login-01-light.png
new file mode 100644
index 00000000000..69e4efcc891
Binary files /dev/null and b/apps/www/public/r/styles/new-york/login-01-light.png differ
diff --git a/apps/www/public/r/styles/new-york/login-01.json b/apps/www/public/r/styles/new-york/login-01.json
index 2fd3e6eff9a..d02939742ea 100644
--- a/apps/www/public/r/styles/new-york/login-01.json
+++ b/apps/www/public/r/styles/new-york/login-01.json
@@ -10,15 +10,20 @@
   ],
   "files": [
     {
-      "path": "block/login-01/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/new-york/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/new-york/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/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/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          <Link href=\"#\" className=\"underline\">\n            Sign up\n          </Link>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
+      "path": "blocks/login-01/components/login-form.tsx",
+      "content": "import { cn } from \"@/registry/new-york/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/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/www/public/r/styles/new-york/login-02-dark.png b/apps/www/public/r/styles/new-york/login-02-dark.png
new file mode 100644
index 00000000000..26a61e686bb
Binary files /dev/null and b/apps/www/public/r/styles/new-york/login-02-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/login-02-light.png b/apps/www/public/r/styles/new-york/login-02-light.png
new file mode 100644
index 00000000000..a5f7503403d
Binary files /dev/null and b/apps/www/public/r/styles/new-york/login-02-light.png differ
diff --git a/apps/www/public/r/styles/new-york/login-02.json b/apps/www/public/r/styles/new-york/login-02.json
new file mode 100644
index 00000000000..80f3b6c6f1d
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/login-02.json
@@ -0,0 +1,29 @@
+{
+  "name": "login-02",
+  "type": "registry:block",
+  "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/new-york/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 { cn } from \"@/registry/default/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/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 id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </div>\n        <div className=\"grid gap-2\">\n          <div className=\"flex items-center\">\n            <Label htmlFor=\"password\">Password</Label>\n            <a\n              href=\"#\"\n              className=\"ml-auto 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 variant=\"outline\" className=\"w-full\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\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/www/public/r/styles/new-york/login-03-dark.png b/apps/www/public/r/styles/new-york/login-03-dark.png
new file mode 100644
index 00000000000..430199c514f
Binary files /dev/null and b/apps/www/public/r/styles/new-york/login-03-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/login-03-light.png b/apps/www/public/r/styles/new-york/login-03-light.png
new file mode 100644
index 00000000000..5df8b428540
Binary files /dev/null and b/apps/www/public/r/styles/new-york/login-03-light.png differ
diff --git a/apps/www/public/r/styles/new-york/login-03.json b/apps/www/public/r/styles/new-york/login-03.json
new file mode 100644
index 00000000000..30712ed2c02
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/login-03.json
@@ -0,0 +1,29 @@
+{
+  "name": "login-03",
+  "type": "registry:block",
+  "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/new-york/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 href=\"#\" className=\"flex items-center gap-2 self-center 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        <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 \"@/registry/new-york/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/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 variant=\"outline\" className=\"w-full\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\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 variant=\"outline\" className=\"w-full\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\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 <a href=\"#\">Terms of Service</a>{\" \"}\n        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/www/public/r/styles/new-york/login-04-dark.png b/apps/www/public/r/styles/new-york/login-04-dark.png
new file mode 100644
index 00000000000..11bb75052dd
Binary files /dev/null and b/apps/www/public/r/styles/new-york/login-04-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/login-04-light.png b/apps/www/public/r/styles/new-york/login-04-light.png
new file mode 100644
index 00000000000..d41f49a5bd0
Binary files /dev/null and b/apps/www/public/r/styles/new-york/login-04-light.png differ
diff --git a/apps/www/public/r/styles/new-york/login-04.json b/apps/www/public/r/styles/new-york/login-04.json
new file mode 100644
index 00000000000..f1ae29ea2d6
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/login-04.json
@@ -0,0 +1,29 @@
+{
+  "name": "login-04",
+  "type": "registry:block",
+  "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/new-york/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 { cn } from \"@/registry/new-york/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Card, CardContent } from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/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 variant=\"outline\" className=\"w-full\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\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 variant=\"outline\" className=\"w-full\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\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 variant=\"outline\" className=\"w-full\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\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 <a href=\"#\">Terms of Service</a>{\" \"}\n        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/www/public/r/styles/new-york/login-05-dark.png b/apps/www/public/r/styles/new-york/login-05-dark.png
new file mode 100644
index 00000000000..fbd54d230bd
Binary files /dev/null and b/apps/www/public/r/styles/new-york/login-05-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/login-05-light.png b/apps/www/public/r/styles/new-york/login-05-light.png
new file mode 100644
index 00000000000..5799e89dc56
Binary files /dev/null and b/apps/www/public/r/styles/new-york/login-05-light.png differ
diff --git a/apps/www/public/r/styles/new-york/login-05.json b/apps/www/public/r/styles/new-york/login-05.json
new file mode 100644
index 00000000000..88ef334855b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/login-05.json
@@ -0,0 +1,29 @@
+{
+  "name": "login-05",
+  "type": "registry:block",
+  "description": "A simple email-only login page.",
+  "registryDependencies": [
+    "button",
+    "card",
+    "input",
+    "label"
+  ],
+  "files": [
+    {
+      "path": "blocks/login-05/page.tsx",
+      "content": "import { LoginForm } from \"@/registry/new-york/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 { cn } from \"@/registry/new-york/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/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 xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\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 xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\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 <a href=\"#\">Terms of Service</a>{\" \"}\n        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/www/public/r/styles/new-york/menubar-demo.json b/apps/www/public/r/styles/new-york/menubar-demo.json
index 0b6f9929394..109eeb582db 100644
--- a/apps/www/public/r/styles/new-york/menubar-demo.json
+++ b/apps/www/public/r/styles/new-york/menubar-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/menubar-demo.tsx",
+      "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/new-york/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>Always Show Bookmarks Bar</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/www/public/r/styles/new-york/menubar.json b/apps/www/public/r/styles/new-york/menubar.json
index 967cb08ae04..ab506f5d8f7 100644
--- a/apps/www/public/r/styles/new-york/menubar.json
+++ b/apps/www/public/r/styles/new-york/menubar.json
@@ -7,7 +7,7 @@
   "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 { 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      \"flex h-9 items-center space-x-1 rounded-md border bg-background 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      \"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\",\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      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRightIcon className=\"ml-auto h-4 w-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      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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\",\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={cn(\n          \"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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\",\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      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground 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      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground 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 h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <CheckIcon className=\"h-4 w-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      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <DotFilledIcon className=\"h-4 w-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(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nconst MenubarShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\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",
+      "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 { 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      \"flex h-9 items-center space-x-1 rounded-md border bg-background 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      \"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\",\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      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-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      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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\",\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={cn(\n          \"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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\",\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      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground 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      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground 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 h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-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      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <Circle className=\"h-4 w-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(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nconst MenubarShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\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/www/public/r/styles/new-york/mode-toggle.json b/apps/www/public/r/styles/new-york/mode-toggle.json
index 478cd3f5206..532a4a49ad1 100644
--- a/apps/www/public/r/styles/new-york/mode-toggle.json
+++ b/apps/www/public/r/styles/new-york/mode-toggle.json
@@ -3,8 +3,8 @@
   "type": "registry:example",
   "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/new-york/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/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=\"h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n          <MoonIcon className=\"absolute h-[1.2rem] w-[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 * as React from \"react\"\nimport { Moon, MoonIcon, Sun } from \"lucide-react\"\nimport { useTheme } from \"next-themes\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/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=\"h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n          <Moon className=\"absolute h-[1.2rem] w-[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/www/public/r/styles/new-york/navigation-menu-demo.json b/apps/www/public/r/styles/new-york/navigation-menu-demo.json
index 45f675b0d0c..453b7ce0994 100644
--- a/apps/www/public/r/styles/new-york/navigation-menu-demo.json
+++ b/apps/www/public/r/styles/new-york/navigation-menu-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/navigation-menu-demo.tsx",
+      "path": "examples/navigation-menu-demo.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { cn } 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/new-york/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=\"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                    <Icons.logo className=\"h-6 w-6\" />\n                    <div className=\"mb-2 mt-4 text-lg font-medium\">\n                      shadcn/ui\n                    </div>\n                    <p className=\"text-sm leading-tight text-muted-foreground\">\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={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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/navigation-menu.json b/apps/www/public/r/styles/new-york/navigation-menu.json
index 97ca99f2038..c84330a9fd2 100644
--- a/apps/www/public/r/styles/new-york/navigation-menu.json
+++ b/apps/www/public/r/styles/new-york/navigation-menu.json
@@ -7,7 +7,7 @@
   "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 { 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 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-[1px] ml-1 h-3 w-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      \"left-0 top-0 w-full 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 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 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 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      \"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\",\n      className\n    )}\n    {...props}\n  >\n    <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border 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",
+      "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 { 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 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-[1px] ml-1 h-3 w-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      \"left-0 top-0 w-full 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 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 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 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      \"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\",\n      className\n    )}\n    {...props}\n  >\n    <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border 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/www/public/r/styles/new-york/pagination-demo.json b/apps/www/public/r/styles/new-york/pagination-demo.json
index 4144e64eb58..fd0dfb35d8d 100644
--- a/apps/www/public/r/styles/new-york/pagination-demo.json
+++ b/apps/www/public/r/styles/new-york/pagination-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/pagination-demo.tsx",
+      "path": "examples/pagination-demo.tsx",
       "content": "import {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/pagination.json b/apps/www/public/r/styles/new-york/pagination.json
index 1ed4a074f5b..8bf0722c1d1 100644
--- a/apps/www/public/r/styles/new-york/pagination.json
+++ b/apps/www/public/r/styles/new-york/pagination.json
@@ -7,7 +7,7 @@
   "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 { cn } from \"@/lib/utils\"\nimport { ButtonProps, buttonVariants } from \"@/registry/new-york/ui/button\"\n\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\n  <nav\n    role=\"navigation\"\n    aria-label=\"pagination\"\n    className={cn(\"mx-auto flex w-full justify-center\", className)}\n    {...props}\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\nconst PaginationLink = ({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) => (\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)\nPaginationLink.displayName = \"PaginationLink\"\n\nconst PaginationPrevious = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\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=\"h-4 w-4\" />\n    <span>Previous</span>\n  </PaginationLink>\n)\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\nconst PaginationNext = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\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=\"h-4 w-4\" />\n  </PaginationLink>\n)\nPaginationNext.displayName = \"PaginationNext\"\n\nconst PaginationEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    aria-hidden\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <DotsHorizontalIcon className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More pages</span>\n  </span>\n)\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n}\n",
+      "content": "import * as React from \"react\"\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ButtonProps, buttonVariants } from \"@/registry/new-york/ui/button\"\n\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\n  <nav\n    role=\"navigation\"\n    aria-label=\"pagination\"\n    className={cn(\"mx-auto flex w-full justify-center\", className)}\n    {...props}\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\nconst PaginationLink = ({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) => (\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)\nPaginationLink.displayName = \"PaginationLink\"\n\nconst PaginationPrevious = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\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=\"h-4 w-4\" />\n    <span>Previous</span>\n  </PaginationLink>\n)\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\nconst PaginationNext = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\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=\"h-4 w-4\" />\n  </PaginationLink>\n)\nPaginationNext.displayName = \"PaginationNext\"\n\nconst PaginationEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    aria-hidden\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <MoreHorizontal className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More pages</span>\n  </span>\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/www/public/r/styles/new-york/popover-demo.json b/apps/www/public/r/styles/new-york/popover-demo.json
index b0ed740aed0..40fd7ecfe9c 100644
--- a/apps/www/public/r/styles/new-york/popover-demo.json
+++ b/apps/www/public/r/styles/new-york/popover-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/popover-demo.tsx",
+      "path": "examples/popover-demo.tsx",
       "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/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-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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/progress-demo.json b/apps/www/public/r/styles/new-york/progress-demo.json
index 834b4cbe3ad..992223ef98a 100644
--- a/apps/www/public/r/styles/new-york/progress-demo.json
+++ b/apps/www/public/r/styles/new-york/progress-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/progress-demo.tsx",
+      "path": "examples/progress-demo.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"@/registry/new-york/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-[60%]\" />\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/radio-group-demo.json b/apps/www/public/r/styles/new-york/radio-group-demo.json
index 8a8258f7fcd..ddd4aec236a 100644
--- a/apps/www/public/r/styles/new-york/radio-group-demo.json
+++ b/apps/www/public/r/styles/new-york/radio-group-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/radio-group-demo.tsx",
+      "path": "examples/radio-group-demo.tsx",
       "content": "import { Label } from \"@/registry/new-york/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/new-york/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/www/public/r/styles/new-york/radio-group-form.json b/apps/www/public/r/styles/new-york/radio-group-form.json
index 9d3fefbb6df..aec87917b42 100644
--- a/apps/www/public/r/styles/new-york/radio-group-form.json
+++ b/apps/www/public/r/styles/new-york/radio-group-form.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/radio-group-form.tsx",
+      "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 { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/new-york/ui/radio-group\"\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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/radio-group.json b/apps/www/public/r/styles/new-york/radio-group.json
index ae7c0c4bd50..9554c8e87af 100644
--- a/apps/www/public/r/styles/new-york/radio-group.json
+++ b/apps/www/public/r/styles/new-york/radio-group.json
@@ -7,7 +7,7 @@
   "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 { 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        \"aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring 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=\"h-3.5 w-3.5 fill-primary\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "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 { 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        \"aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring 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=\"h-3.5 w-3.5 fill-primary\" />\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/www/public/r/styles/new-york/resizable-demo-with-handle.json b/apps/www/public/r/styles/new-york/resizable-demo-with-handle.json
index cad80d1ab3f..baf7b169dad 100644
--- a/apps/www/public/r/styles/new-york/resizable-demo-with-handle.json
+++ b/apps/www/public/r/styles/new-york/resizable-demo-with-handle.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/resizable-demo-with-handle.tsx",
+      "path": "examples/resizable-demo-with-handle.tsx",
       "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"max-w-md rounded-lg border md:min-w-[450px]\"\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/www/public/r/styles/new-york/resizable-demo.json b/apps/www/public/r/styles/new-york/resizable-demo.json
index aa9b4c5fd0a..9008a8dd440 100644
--- a/apps/www/public/r/styles/new-york/resizable-demo.json
+++ b/apps/www/public/r/styles/new-york/resizable-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/resizable-demo.tsx",
+      "path": "examples/resizable-demo.tsx",
       "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york/ui/resizable\"\n\nexport default function ResizableDemo() {\n  return (\n    <ResizablePanelGroup\n      direction=\"horizontal\"\n      className=\"max-w-md rounded-lg border md:min-w-[450px]\"\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/www/public/r/styles/new-york/resizable-handle.json b/apps/www/public/r/styles/new-york/resizable-handle.json
index e4e0fb7d4db..fee3bb5b07c 100644
--- a/apps/www/public/r/styles/new-york/resizable-handle.json
+++ b/apps/www/public/r/styles/new-york/resizable-handle.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/resizable-handle.tsx",
-      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york/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 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",
+      "path": "examples/resizable-handle.tsx",
+      "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york/ui/resizable\"\n\nexport default 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:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/resizable-vertical.json b/apps/www/public/r/styles/new-york/resizable-vertical.json
index 7247dab9d94..a6cf4541d02 100644
--- a/apps/www/public/r/styles/new-york/resizable-vertical.json
+++ b/apps/www/public/r/styles/new-york/resizable-vertical.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/resizable-vertical.tsx",
+      "path": "examples/resizable-vertical.tsx",
       "content": "import {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/registry/new-york/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 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\">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/www/public/r/styles/new-york/resizable.json b/apps/www/public/r/styles/new-york/resizable.json
index fa20e695437..9b0f3007fac 100644
--- a/apps/www/public/r/styles/new-york/resizable.json
+++ b/apps/www/public/r/styles/new-york/resizable.json
@@ -7,7 +7,7 @@
   "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\nconst ResizablePanelGroup = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\n  <ResizablePrimitive.PanelGroup\n    className={cn(\n      \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n      className\n    )}\n    {...props}\n  />\n)\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nconst ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) => (\n  <ResizablePrimitive.PanelResizeHandle\n    className={cn(\n      \"relative flex w-px items-center justify-center bg-border 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-ring 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=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <DragHandleDots2Icon className=\"h-2.5 w-2.5\" />\n      </div>\n    )}\n  </ResizablePrimitive.PanelResizeHandle>\n)\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
+      "content": "\"use client\"\n\nimport { GripVertical } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ResizablePanelGroup = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\n  <ResizablePrimitive.PanelGroup\n    className={cn(\n      \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n      className\n    )}\n    {...props}\n  />\n)\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nconst ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) => (\n  <ResizablePrimitive.PanelResizeHandle\n    className={cn(\n      \"relative flex w-px items-center justify-center bg-border 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-ring 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=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical className=\"h-2.5 w-2.5\" />\n      </div>\n    )}\n  </ResizablePrimitive.PanelResizeHandle>\n)\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/scroll-area-demo.json b/apps/www/public/r/styles/new-york/scroll-area-demo.json
index 29043cc875f..d3af79de1b8 100644
--- a/apps/www/public/r/styles/new-york/scroll-area-demo.json
+++ b/apps/www/public/r/styles/new-york/scroll-area-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/scroll-area-demo.tsx",
+      "path": "examples/scroll-area-demo.tsx",
       "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"@/registry/new-york/ui/scroll-area\"\nimport { Separator } from \"@/registry/new-york/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/www/public/r/styles/new-york/scroll-area-horizontal-demo.json b/apps/www/public/r/styles/new-york/scroll-area-horizontal-demo.json
index 4ed56cbf918..1e73f9341f2 100644
--- a/apps/www/public/r/styles/new-york/scroll-area-horizontal-demo.json
+++ b/apps/www/public/r/styles/new-york/scroll-area-horizontal-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/scroll-area-horizontal-demo.tsx",
+      "path": "examples/scroll-area-horizontal-demo.tsx",
       "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport { ScrollArea, ScrollBar } from \"@/registry/new-york/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] h-fit w-fit object-cover\"\n                width={300}\n                height={400}\n              />\n            </div>\n            <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n              Photo by{\" \"}\n              <span className=\"font-semibold text-foreground\">\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/www/public/r/styles/new-york/select-demo.json b/apps/www/public/r/styles/new-york/select-demo.json
index 56dd3cfebc3..0c6dc2dfff5 100644
--- a/apps/www/public/r/styles/new-york/select-demo.json
+++ b/apps/www/public/r/styles/new-york/select-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/select-demo.tsx",
+      "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/new-york/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/www/public/r/styles/new-york/select-form.json b/apps/www/public/r/styles/new-york/select-form.json
index 6dd0cee3868..53780ad51a1 100644
--- a/apps/www/public/r/styles/new-york/select-form.json
+++ b/apps/www/public/r/styles/new-york/select-form.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/select-form.tsx",
+      "path": "examples/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 { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\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                <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/www/public/r/styles/new-york/select-scrollable.json b/apps/www/public/r/styles/new-york/select-scrollable.json
index f05fc6c411a..4a836287f18 100644
--- a/apps/www/public/r/styles/new-york/select-scrollable.json
+++ b/apps/www/public/r/styles/new-york/select-scrollable.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/select-scrollable.tsx",
+      "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/new-york/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",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/select.json b/apps/www/public/r/styles/new-york/select.json
index e998fc1a64a..d67e122b2fd 100644
--- a/apps/www/public/r/styles/new-york/select.json
+++ b/apps/www/public/r/styles/new-york/select.json
@@ -7,7 +7,7 @@
   "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 { 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      \"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <CaretSortIcon className=\"h-4 w-4 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        \"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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\",\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      \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <CheckIcon className=\"h-4 w-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(\"-mx-1 my-1 h-px bg-muted\", 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",
+      "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 { 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      \"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <ChevronDown className=\"h-4 w-4 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=\"h-4 w-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=\"h-4 w-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        \"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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\",\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      \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-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(\"-mx-1 my-1 h-px bg-muted\", 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/www/public/r/styles/new-york/separator-demo.json b/apps/www/public/r/styles/new-york/separator-demo.json
index 13bf6839dbd..206f96a860b 100644
--- a/apps/www/public/r/styles/new-york/separator-demo.json
+++ b/apps/www/public/r/styles/new-york/separator-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/separator-demo.tsx",
+      "path": "examples/separator-demo.tsx",
       "content": "import { Separator } from \"@/registry/new-york/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-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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/sheet-demo.json b/apps/www/public/r/styles/new-york/sheet-demo.json
index b0c9b53df2d..fb08de0b61e 100644
--- a/apps/www/public/r/styles/new-york/sheet-demo.json
+++ b/apps/www/public/r/styles/new-york/sheet-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/sheet-demo.tsx",
+      "path": "examples/sheet-demo.tsx",
       "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/new-york/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",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/sheet-side.json b/apps/www/public/r/styles/new-york/sheet-side.json
index c59f1cbee3f..6822d1d5659 100644
--- a/apps/www/public/r/styles/new-york/sheet-side.json
+++ b/apps/www/public/r/styles/new-york/sheet-side.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/sheet-side.tsx",
+      "path": "examples/sheet-side.tsx",
       "content": "\"use client\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/new-york/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",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/sheet.json b/apps/www/public/r/styles/new-york/sheet.json
index 39a262ba76b..a1801fcb12d 100644
--- a/apps/www/public/r/styles/new-york/sheet.json
+++ b/apps/www/public/r/styles/new-york/sheet.json
@@ -7,7 +7,7 @@
   "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 { cva, type VariantProps } from \"class-variance-authority\"\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      \"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\",\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={cn(sheetVariants({ side }), className)}\n      {...props}\n    >\n      <SheetPrimitive.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-secondary\">\n        <Cross2Icon className=\"h-4 w-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\nconst SheetHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\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)\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-lg font-semibold text-foreground\", 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-sm text-muted-foreground\", 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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-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      \"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\",\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={cn(sheetVariants({ side }), className)}\n      {...props}\n    >\n      <SheetPrimitive.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-secondary\">\n        <X className=\"h-4 w-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\nconst SheetHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\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)\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-lg font-semibold text-foreground\", 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-sm text-muted-foreground\", 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/www/public/r/styles/new-york/sidebar-01-dark.png b/apps/www/public/r/styles/new-york/sidebar-01-dark.png
new file mode 100644
index 00000000000..7b7cf8fa24c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-01-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-01-light.png b/apps/www/public/r/styles/new-york/sidebar-01-light.png
new file mode 100644
index 00000000000..d59e52ad973
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-01-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-01.json b/apps/www/public/r/styles/new-york/sidebar-01.json
index b0c3ad3c3b0..cec1e118fa6 100644
--- a/apps/www/public/r/styles/new-york/sidebar-01.json
+++ b/apps/www/public/r/styles/new-york/sidebar-01.json
@@ -11,25 +11,32 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-01/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york/block/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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",
+      "path": "blocks/sidebar-01/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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/new-york/block/sidebar-01/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/new-york/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/new-york/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",
-      "type": "registry:component"
+      "path": "blocks/sidebar-01/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/new-york/blocks/sidebar-01/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/new-york/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/new-york/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",
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-01/components/search-form.tsx",
+      "path": "blocks/sidebar-01/components/search-form.tsx",
       "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/new-york/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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-01/components/version-switcher.tsx",
+      "path": "blocks/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/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/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 && <Check className=\"ml-auto\" />}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-02-dark.png b/apps/www/public/r/styles/new-york/sidebar-02-dark.png
new file mode 100644
index 00000000000..e92a167de03
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-02-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-02-light.png b/apps/www/public/r/styles/new-york/sidebar-02-light.png
new file mode 100644
index 00000000000..287bb936ca3
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-02-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-02.json b/apps/www/public/r/styles/new-york/sidebar-02.json
index a2634ead64e..b259c749a2b 100644
--- a/apps/www/public/r/styles/new-york/sidebar-02.json
+++ b/apps/www/public/r/styles/new-york/sidebar-02.json
@@ -11,25 +11,32 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-02/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york/block/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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",
+      "path": "blocks/sidebar-02/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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/new-york/block/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/new-york/block/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/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/new-york/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 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",
-      "type": "registry:component"
+      "path": "blocks/sidebar-02/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { ChevronRight } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/new-york/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/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/new-york/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 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",
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-02/components/search-form.tsx",
+      "path": "blocks/sidebar-02/components/search-form.tsx",
       "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/new-york/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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-02/components/version-switcher.tsx",
+      "path": "blocks/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/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/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 && <Check className=\"ml-auto\" />}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-03-dark.png b/apps/www/public/r/styles/new-york/sidebar-03-dark.png
new file mode 100644
index 00000000000..f8321378c15
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-03-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-03-light.png b/apps/www/public/r/styles/new-york/sidebar-03-light.png
new file mode 100644
index 00000000000..77643fccb73
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-03-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-03.json b/apps/www/public/r/styles/new-york/sidebar-03.json
index cbee58db137..bd1180da077 100644
--- a/apps/www/public/r/styles/new-york/sidebar-03.json
+++ b/apps/www/public/r/styles/new-york/sidebar-03.json
@@ -8,15 +8,20 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-03/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york/block/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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",
+      "path": "blocks/sidebar-03/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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",
+      "path": "blocks/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/new-york/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 asChild isActive={item.isActive}>\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"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-04-dark.png b/apps/www/public/r/styles/new-york/sidebar-04-dark.png
new file mode 100644
index 00000000000..cfb5b162016
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-04-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-04-light.png b/apps/www/public/r/styles/new-york/sidebar-04-light.png
new file mode 100644
index 00000000000..07b0fa47a45
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-04-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-04.json b/apps/www/public/r/styles/new-york/sidebar-04.json
index 089bf36802e..0b8f09cff1d 100644
--- a/apps/www/public/r/styles/new-york/sidebar-04.json
+++ b/apps/www/public/r/styles/new-york/sidebar-04.json
@@ -9,15 +9,20 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-04/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york/block/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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",
+      "path": "blocks/sidebar-04/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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",
+      "path": "blocks/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/new-york/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 asChild isActive={item.isActive}>\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"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-05-dark.png b/apps/www/public/r/styles/new-york/sidebar-05-dark.png
new file mode 100644
index 00000000000..893ef968f3e
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-05-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-05-light.png b/apps/www/public/r/styles/new-york/sidebar-05-light.png
new file mode 100644
index 00000000000..a3a88c38e8c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-05-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-05.json b/apps/www/public/r/styles/new-york/sidebar-05.json
index 3f452b253bb..052d7ea2e21 100644
--- a/apps/www/public/r/styles/new-york/sidebar-05.json
+++ b/apps/www/public/r/styles/new-york/sidebar-05.json
@@ -11,20 +11,26 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-05/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york/block/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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",
+      "path": "blocks/sidebar-05/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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/new-york/block/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/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/new-york/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"
+      "path": "blocks/sidebar-05/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd, Minus, Plus } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/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/new-york/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",
+      "path": "blocks/sidebar-05/components/search-form.tsx",
       "content": "import { Search } from \"lucide-react\"\n\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from \"@/registry/new-york/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"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-06-dark.png b/apps/www/public/r/styles/new-york/sidebar-06-dark.png
new file mode 100644
index 00000000000..0115ddb1200
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-06-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-06-light.png b/apps/www/public/r/styles/new-york/sidebar-06-light.png
new file mode 100644
index 00000000000..f36a857718f
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-06-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-06.json b/apps/www/public/r/styles/new-york/sidebar-06.json
index 12cbc6c78e5..cf26d5f6ace 100644
--- a/apps/www/public/r/styles/new-york/sidebar-06.json
+++ b/apps/www/public/r/styles/new-york/sidebar-06.json
@@ -11,25 +11,32 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-06/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york/block/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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",
+      "path": "blocks/sidebar-06/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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/new-york/block/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/new-york/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/new-york/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"
+      "path": "blocks/sidebar-06/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/new-york/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/new-york/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",
+      "path": "blocks/sidebar-06/components/nav-main.tsx",
       "content": "\"use client\"\n\nimport { MoreHorizontal, type LucideIcon } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-06/components/sidebar-opt-in-form.tsx",
+      "path": "blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
       "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { SidebarInput } from \"@/registry/new-york/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=\"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"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-07-dark.png b/apps/www/public/r/styles/new-york/sidebar-07-dark.png
new file mode 100644
index 00000000000..43a9fb16d7a
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-07-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-07-light.png b/apps/www/public/r/styles/new-york/sidebar-07-light.png
new file mode 100644
index 00000000000..e66a7e58f9f
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-07-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-07.json b/apps/www/public/r/styles/new-york/sidebar-07.json
index 2398ea07192..ba635c5070b 100644
--- a/apps/www/public/r/styles/new-york/sidebar-07.json
+++ b/apps/www/public/r/styles/new-york/sidebar-07.json
@@ -12,35 +12,44 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-07/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york/block/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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",
+      "path": "blocks/sidebar-07/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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/new-york/block/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york/block/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"@/registry/new-york/block/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"@/registry/new-york/block/sidebar-07/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      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"
+      "path": "blocks/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/new-york/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"@/registry/new-york/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"@/registry/new-york/blocks/sidebar-07/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      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",
+      "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/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-07/components/nav-projects.tsx",
+      "path": "blocks/sidebar-07/components/nav-projects.tsx",
       "content": "\"use client\"\n\nimport {\n  Folder,\n  Forward,\n  MoreHorizontal,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-07/components/nav-user.tsx",
+      "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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/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\">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=\"h-8 w-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",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-07/components/team-switcher.tsx",
+      "path": "blocks/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/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/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\">{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-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>⌘{index + 1}</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\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-08-dark.png b/apps/www/public/r/styles/new-york/sidebar-08-dark.png
new file mode 100644
index 00000000000..6de2042e8e0
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-08-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-08-light.png b/apps/www/public/r/styles/new-york/sidebar-08-light.png
new file mode 100644
index 00000000000..8f36ab1d856
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-08-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-08.json b/apps/www/public/r/styles/new-york/sidebar-08.json
index c8079563baa..04326309403 100644
--- a/apps/www/public/r/styles/new-york/sidebar-08.json
+++ b/apps/www/public/r/styles/new-york/sidebar-08.json
@@ -12,35 +12,44 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-08/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york/block/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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",
+      "path": "blocks/sidebar-08/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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/new-york/block/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york/block/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/new-york/block/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york/block/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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\">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",
-      "type": "registry:component"
+      "path": "blocks/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/new-york/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/new-york/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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\">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",
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-08/components/nav-main.tsx",
+      "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/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/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                  <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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-08/components/nav-projects.tsx",
+      "path": "blocks/sidebar-08/components/nav-projects.tsx",
       "content": "\"use client\"\n\nimport {\n  Folder,\n  MoreHorizontal,\n  Share,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-08/components/nav-secondary.tsx",
+      "path": "blocks/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/new-york/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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-08/components/nav-user.tsx",
+      "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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/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\">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=\"h-8 w-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",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-09-dark.png b/apps/www/public/r/styles/new-york/sidebar-09-dark.png
new file mode 100644
index 00000000000..80833544957
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-09-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-09-light.png b/apps/www/public/r/styles/new-york/sidebar-09-light.png
new file mode 100644
index 00000000000..7b2e848f66c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-09-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-09.json b/apps/www/public/r/styles/new-york/sidebar-09.json
index f1a6a16d8cb..c050674e1a1 100644
--- a/apps/www/public/r/styles/new-york/sidebar-09.json
+++ b/apps/www/public/r/styles/new-york/sidebar-09.json
@@ -13,15 +13,26 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-09/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york/block/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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",
+      "path": "blocks/sidebar-09/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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/nav-user.tsx",
+      "path": "blocks/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/new-york/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/new-york/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/new-york/ui/sidebar\"\nimport { Switch } from \"@/registry/new-york/ui/switch\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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=\"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\">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-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\">{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",
+      "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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/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\">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=\"h-8 w-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",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-10-dark.png b/apps/www/public/r/styles/new-york/sidebar-10-dark.png
new file mode 100644
index 00000000000..9ac92d8e32b
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-10-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-10-light.png b/apps/www/public/r/styles/new-york/sidebar-10-light.png
new file mode 100644
index 00000000000..4ba7a53a646
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-10-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-10.json b/apps/www/public/r/styles/new-york/sidebar-10.json
index 199b0c20010..0970dbff4a4 100644
--- a/apps/www/public/r/styles/new-york/sidebar-10.json
+++ b/apps/www/public/r/styles/new-york/sidebar-10.json
@@ -12,45 +12,56 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-10/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york/block/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/new-york/block/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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",
+      "path": "blocks/sidebar-10/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/new-york/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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/new-york/block/sidebar-10/components/nav-favorites\"\nimport { NavMain } from \"@/registry/new-york/block/sidebar-10/components/nav-main\"\nimport { NavSecondary } from \"@/registry/new-york/block/sidebar-10/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/new-york/block/sidebar-10/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/new-york/block/sidebar-10/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york/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"
+      "path": "blocks/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/new-york/blocks/sidebar-10/components/nav-favorites\"\nimport { NavMain } from \"@/registry/new-york/blocks/sidebar-10/components/nav-main\"\nimport { NavSecondary } from \"@/registry/new-york/blocks/sidebar-10/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/new-york/blocks/sidebar-10/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/new-york/blocks/sidebar-10/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york/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",
+      "path": "blocks/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/new-york/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/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 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 /> <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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-10/components/nav-favorites.tsx",
+      "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/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-10/components/nav-main.tsx",
+      "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/new-york/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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-10/components/nav-secondary.tsx",
+      "path": "blocks/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/new-york/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",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-10/components/nav-workspaces.tsx",
+      "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/new-york/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/new-york/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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-10/components/team-switcher.tsx",
+      "path": "blocks/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/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/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\">{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-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>⌘{index + 1}</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\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-11-dark.png b/apps/www/public/r/styles/new-york/sidebar-11-dark.png
new file mode 100644
index 00000000000..fe7240b71be
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-11-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-11-light.png b/apps/www/public/r/styles/new-york/sidebar-11-light.png
new file mode 100644
index 00000000000..abd19a6a76c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-11-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-11.json b/apps/www/public/r/styles/new-york/sidebar-11.json
index 40cf25db9fc..0c48061bdca 100644
--- a/apps/www/public/r/styles/new-york/sidebar-11.json
+++ b/apps/www/public/r/styles/new-york/sidebar-11.json
@@ -10,15 +10,20 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-11/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york/block/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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",
+      "path": "blocks/sidebar-11/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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",
+      "path": "blocks/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/new-york/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/new-york/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"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-12-dark.png b/apps/www/public/r/styles/new-york/sidebar-12-dark.png
new file mode 100644
index 00000000000..9d6b6164c3c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-12-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-12-light.png b/apps/www/public/r/styles/new-york/sidebar-12-light.png
new file mode 100644
index 00000000000..b1fac8c4cf2
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-12-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-12.json b/apps/www/public/r/styles/new-york/sidebar-12.json
index 9ec9b040e60..80dbae38e70 100644
--- a/apps/www/public/r/styles/new-york/sidebar-12.json
+++ b/apps/www/public/r/styles/new-york/sidebar-12.json
@@ -13,30 +13,38 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-12/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york/block/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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 key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "path": "blocks/sidebar-12/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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 key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\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/new-york/block/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/new-york/block/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/new-york/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/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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"
+      "path": "blocks/sidebar-12/components/app-sidebar.tsx",
+      "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Calendars } from \"@/registry/new-york/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/new-york/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/new-york/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/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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",
+      "path": "blocks/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/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/new-york/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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-12/components/date-picker.tsx",
+      "path": "blocks/sidebar-12/components/date-picker.tsx",
       "content": "import { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/new-york/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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-12/components/nav-user.tsx",
+      "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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/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\">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=\"h-8 w-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",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-13-dark.png b/apps/www/public/r/styles/new-york/sidebar-13-dark.png
new file mode 100644
index 00000000000..34c2606f327
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-13-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-13-light.png b/apps/www/public/r/styles/new-york/sidebar-13-light.png
new file mode 100644
index 00000000000..cb5efd33e6a
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-13-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-13.json b/apps/www/public/r/styles/new-york/sidebar-13.json
index f4517dc73da..e7b995a5407 100644
--- a/apps/www/public/r/styles/new-york/sidebar-13.json
+++ b/apps/www/public/r/styles/new-york/sidebar-13.json
@@ -10,15 +10,20 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-13/page.tsx",
-      "content": "import { SettingsDialog } from \"@/registry/new-york/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/new-york/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",
+      "path": "blocks/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/new-york/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york/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=\"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"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-14-dark.png b/apps/www/public/r/styles/new-york/sidebar-14-dark.png
new file mode 100644
index 00000000000..ccbf36c07c5
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-14-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-14-light.png b/apps/www/public/r/styles/new-york/sidebar-14-light.png
new file mode 100644
index 00000000000..d19f20508a4
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-14-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-14.json b/apps/www/public/r/styles/new-york/sidebar-14.json
index 07bfbfcf0bb..029ca7c4166 100644
--- a/apps/www/public/r/styles/new-york/sidebar-14.json
+++ b/apps/www/public/r/styles/new-york/sidebar-14.json
@@ -8,15 +8,20 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-14/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york/block/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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",
+      "path": "blocks/sidebar-14/page.tsx",
+      "content": "import { AppSidebar } from \"@/registry/new-york/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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",
+      "path": "blocks/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/new-york/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"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-15-dark.png b/apps/www/public/r/styles/new-york/sidebar-15-dark.png
new file mode 100644
index 00000000000..dc7d52abbdf
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-15-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-15-light.png b/apps/www/public/r/styles/new-york/sidebar-15-light.png
new file mode 100644
index 00000000000..6b89b39681d
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-15-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-15.json b/apps/www/public/r/styles/new-york/sidebar-15.json
index d0a433c33d0..4130c42d67a 100644
--- a/apps/www/public/r/styles/new-york/sidebar-15.json
+++ b/apps/www/public/r/styles/new-york/sidebar-15.json
@@ -14,60 +14,74 @@
   ],
   "files": [
     {
-      "path": "block/sidebar-15/page.tsx",
-      "content": "import { SidebarLeft } from \"@/registry/new-york/block/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/new-york/block/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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",
+      "path": "blocks/sidebar-15/page.tsx",
+      "content": "import { SidebarLeft } from \"@/registry/new-york/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/new-york/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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",
+      "path": "blocks/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/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/new-york/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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-15/components/date-picker.tsx",
+      "path": "blocks/sidebar-15/components/date-picker.tsx",
       "content": "import { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/new-york/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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-15/components/nav-favorites.tsx",
+      "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/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-15/components/nav-main.tsx",
+      "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/new-york/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"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-15/components/nav-secondary.tsx",
+      "path": "blocks/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/new-york/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",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-15/components/nav-user.tsx",
+      "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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/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\">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=\"h-8 w-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",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     },
     {
-      "path": "block/sidebar-15/components/nav-workspaces.tsx",
+      "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/new-york/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/new-york/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"
+      "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/new-york/block/sidebar-15/components/nav-favorites\"\nimport { NavMain } from \"@/registry/new-york/block/sidebar-15/components/nav-main\"\nimport { NavSecondary } from \"@/registry/new-york/block/sidebar-15/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/new-york/block/sidebar-15/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/new-york/block/sidebar-15/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york/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"
+      "path": "blocks/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/new-york/blocks/sidebar-15/components/nav-favorites\"\nimport { NavMain } from \"@/registry/new-york/blocks/sidebar-15/components/nav-main\"\nimport { NavSecondary } from \"@/registry/new-york/blocks/sidebar-15/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/new-york/blocks/sidebar-15/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/new-york/blocks/sidebar-15/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york/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/new-york/block/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/new-york/block/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/new-york/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/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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"
+      "path": "blocks/sidebar-15/components/sidebar-right.tsx",
+      "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Calendars } from \"@/registry/new-york/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/new-york/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/new-york/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/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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",
+      "path": "blocks/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/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york/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\">{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-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>⌘{index + 1}</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\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": ""
     }
+  ],
+  "categories": [
+    "sidebar",
+    "dashboard"
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/sidebar-controlled-dark.png b/apps/www/public/r/styles/new-york/sidebar-controlled-dark.png
new file mode 100644
index 00000000000..a5c90ec88e2
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-controlled-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-controlled-light.png b/apps/www/public/r/styles/new-york/sidebar-controlled-light.png
new file mode 100644
index 00000000000..37f9fb17103
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-controlled-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-controlled.json b/apps/www/public/r/styles/new-york/sidebar-controlled.json
new file mode 100644
index 00000000000..1262aa5888b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-controlled.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-controlled",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "internal/sidebar-controlled.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Frame,\n  LifeBuoy,\n  Map,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PieChart,\n  Send,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/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/new-york/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/www/public/r/styles/new-york/sidebar-demo-dark.png b/apps/www/public/r/styles/new-york/sidebar-demo-dark.png
new file mode 100644
index 00000000000..66b72862973
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-demo-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-demo-light.png b/apps/www/public/r/styles/new-york/sidebar-demo-light.png
new file mode 100644
index 00000000000..c73e763cbe7
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-demo-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-demo.json b/apps/www/public/r/styles/new-york/sidebar-demo.json
new file mode 100644
index 00000000000..7001aa66445
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-demo.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-demo",
+  "type": "registry:internal",
+  "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/new-york/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/www/public/r/styles/new-york/sidebar-footer-dark.png b/apps/www/public/r/styles/new-york/sidebar-footer-dark.png
new file mode 100644
index 00000000000..590927dcc6f
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-footer-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-footer-light.png b/apps/www/public/r/styles/new-york/sidebar-footer-light.png
new file mode 100644
index 00000000000..b12fea3ac92
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-footer-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-footer.json b/apps/www/public/r/styles/new-york/sidebar-footer.json
new file mode 100644
index 00000000000..56aa335f535
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-footer.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-footer",
+  "type": "registry:internal",
+  "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/new-york/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/new-york/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/www/public/images/blocks/demo-sidebar-group-action-dark.png b/apps/www/public/r/styles/new-york/sidebar-group-action-dark.png
similarity index 100%
rename from apps/www/public/images/blocks/demo-sidebar-group-action-dark.png
rename to apps/www/public/r/styles/new-york/sidebar-group-action-dark.png
diff --git a/apps/www/public/images/blocks/demo-sidebar-group-action.png b/apps/www/public/r/styles/new-york/sidebar-group-action-light.png
similarity index 100%
rename from apps/www/public/images/blocks/demo-sidebar-group-action.png
rename to apps/www/public/r/styles/new-york/sidebar-group-action-light.png
diff --git a/apps/www/public/r/styles/new-york/sidebar-group-action.json b/apps/www/public/r/styles/new-york/sidebar-group-action.json
new file mode 100644
index 00000000000..b430e780a83
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-group-action.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-group-action",
+  "type": "registry:internal",
+  "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/new-york/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/www/public/images/blocks/demo-sidebar-group-collapsible-dark.png b/apps/www/public/r/styles/new-york/sidebar-group-collapsible-dark.png
similarity index 100%
rename from apps/www/public/images/blocks/demo-sidebar-group-collapsible-dark.png
rename to apps/www/public/r/styles/new-york/sidebar-group-collapsible-dark.png
diff --git a/apps/www/public/images/blocks/demo-sidebar-group-collapsible.png b/apps/www/public/r/styles/new-york/sidebar-group-collapsible-light.png
similarity index 100%
rename from apps/www/public/images/blocks/demo-sidebar-group-collapsible.png
rename to apps/www/public/r/styles/new-york/sidebar-group-collapsible-light.png
diff --git a/apps/www/public/r/styles/new-york/sidebar-group-collapsible.json b/apps/www/public/r/styles/new-york/sidebar-group-collapsible.json
new file mode 100644
index 00000000000..5735d9abfe3
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-group-collapsible.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-group-collapsible",
+  "type": "registry:internal",
+  "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/new-york/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york/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/www/public/images/blocks/demo-sidebar-group-dark.png b/apps/www/public/r/styles/new-york/sidebar-group-dark.png
similarity index 100%
rename from apps/www/public/images/blocks/demo-sidebar-group-dark.png
rename to apps/www/public/r/styles/new-york/sidebar-group-dark.png
diff --git a/apps/www/public/images/blocks/demo-sidebar-group.png b/apps/www/public/r/styles/new-york/sidebar-group-light.png
similarity index 100%
rename from apps/www/public/images/blocks/demo-sidebar-group.png
rename to apps/www/public/r/styles/new-york/sidebar-group-light.png
diff --git a/apps/www/public/r/styles/new-york/sidebar-group.json b/apps/www/public/r/styles/new-york/sidebar-group.json
new file mode 100644
index 00000000000..85b304b6ee5
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-group.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-group",
+  "type": "registry:internal",
+  "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/new-york/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/www/public/r/styles/new-york/sidebar-header-dark.png b/apps/www/public/r/styles/new-york/sidebar-header-dark.png
new file mode 100644
index 00000000000..4e83953edc7
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-header-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-header-light.png b/apps/www/public/r/styles/new-york/sidebar-header-light.png
new file mode 100644
index 00000000000..6af0e608d6c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sidebar-header-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sidebar-header.json b/apps/www/public/r/styles/new-york/sidebar-header.json
new file mode 100644
index 00000000000..c1a868fb64f
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-header.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-header",
+  "type": "registry:internal",
+  "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/new-york/ui/dropdown-menu\"\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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/www/public/images/blocks/demo-sidebar-menu-action-dark.png b/apps/www/public/r/styles/new-york/sidebar-menu-action-dark.png
similarity index 100%
rename from apps/www/public/images/blocks/demo-sidebar-menu-action-dark.png
rename to apps/www/public/r/styles/new-york/sidebar-menu-action-dark.png
diff --git a/apps/www/public/images/blocks/demo-sidebar-menu-action.png b/apps/www/public/r/styles/new-york/sidebar-menu-action-light.png
similarity index 100%
rename from apps/www/public/images/blocks/demo-sidebar-menu-action.png
rename to apps/www/public/r/styles/new-york/sidebar-menu-action-light.png
diff --git a/apps/www/public/r/styles/new-york/sidebar-menu-action.json b/apps/www/public/r/styles/new-york/sidebar-menu-action.json
new file mode 100644
index 00000000000..29dcd9deb62
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-menu-action.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-menu-action",
+  "type": "registry:internal",
+  "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/new-york/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/new-york/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 side=\"right\" align=\"start\">\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/www/public/images/blocks/demo-sidebar-menu-badge-dark.png b/apps/www/public/r/styles/new-york/sidebar-menu-badge-dark.png
similarity index 100%
rename from apps/www/public/images/blocks/demo-sidebar-menu-badge-dark.png
rename to apps/www/public/r/styles/new-york/sidebar-menu-badge-dark.png
diff --git a/apps/www/public/images/blocks/demo-sidebar-menu-badge.png b/apps/www/public/r/styles/new-york/sidebar-menu-badge-light.png
similarity index 100%
rename from apps/www/public/images/blocks/demo-sidebar-menu-badge.png
rename to apps/www/public/r/styles/new-york/sidebar-menu-badge-light.png
diff --git a/apps/www/public/r/styles/new-york/sidebar-menu-badge.json b/apps/www/public/r/styles/new-york/sidebar-menu-badge.json
new file mode 100644
index 00000000000..544b01a20ed
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-menu-badge.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-menu-badge",
+  "type": "registry:internal",
+  "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/new-york/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>{project.badge}</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/www/public/images/blocks/demo-sidebar-menu-collapsible-dark.png b/apps/www/public/r/styles/new-york/sidebar-menu-collapsible-dark.png
similarity index 100%
rename from apps/www/public/images/blocks/demo-sidebar-menu-collapsible-dark.png
rename to apps/www/public/r/styles/new-york/sidebar-menu-collapsible-dark.png
diff --git a/apps/www/public/images/blocks/demo-sidebar-menu-collapsible.png b/apps/www/public/r/styles/new-york/sidebar-menu-collapsible-light.png
similarity index 100%
rename from apps/www/public/images/blocks/demo-sidebar-menu-collapsible.png
rename to apps/www/public/r/styles/new-york/sidebar-menu-collapsible-light.png
diff --git a/apps/www/public/r/styles/new-york/sidebar-menu-collapsible.json b/apps/www/public/r/styles/new-york/sidebar-menu-collapsible.json
new file mode 100644
index 00000000000..51e12df95cf
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-menu-collapsible.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-menu-collapsible",
+  "type": "registry:internal",
+  "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/new-york/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/new-york/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/www/public/images/blocks/demo-sidebar-menu-dark.png b/apps/www/public/r/styles/new-york/sidebar-menu-dark.png
similarity index 100%
rename from apps/www/public/images/blocks/demo-sidebar-menu-dark.png
rename to apps/www/public/r/styles/new-york/sidebar-menu-dark.png
diff --git a/apps/www/public/images/blocks/demo-sidebar-menu.png b/apps/www/public/r/styles/new-york/sidebar-menu-light.png
similarity index 100%
rename from apps/www/public/images/blocks/demo-sidebar-menu.png
rename to apps/www/public/r/styles/new-york/sidebar-menu-light.png
diff --git a/apps/www/public/images/blocks/demo-sidebar-menu-sub-dark.png b/apps/www/public/r/styles/new-york/sidebar-menu-sub-dark.png
similarity index 100%
rename from apps/www/public/images/blocks/demo-sidebar-menu-sub-dark.png
rename to apps/www/public/r/styles/new-york/sidebar-menu-sub-dark.png
diff --git a/apps/www/public/images/blocks/demo-sidebar-menu-sub.png b/apps/www/public/r/styles/new-york/sidebar-menu-sub-light.png
similarity index 100%
rename from apps/www/public/images/blocks/demo-sidebar-menu-sub.png
rename to apps/www/public/r/styles/new-york/sidebar-menu-sub-light.png
diff --git a/apps/www/public/r/styles/new-york/sidebar-menu-sub.json b/apps/www/public/r/styles/new-york/sidebar-menu-sub.json
new file mode 100644
index 00000000000..4465eba9b6b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-menu-sub.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-menu-sub",
+  "type": "registry:internal",
+  "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/new-york/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/www/public/r/styles/new-york/sidebar-menu.json b/apps/www/public/r/styles/new-york/sidebar-menu.json
new file mode 100644
index 00000000000..5bb9d520690
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-menu.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-menu",
+  "type": "registry:internal",
+  "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/new-york/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/www/public/images/blocks/demo-sidebar-rsc-dark.png b/apps/www/public/r/styles/new-york/sidebar-rsc-dark.png
similarity index 100%
rename from apps/www/public/images/blocks/demo-sidebar-rsc-dark.png
rename to apps/www/public/r/styles/new-york/sidebar-rsc-dark.png
diff --git a/apps/www/public/images/blocks/demo-sidebar-rsc.png b/apps/www/public/r/styles/new-york/sidebar-rsc-light.png
similarity index 100%
rename from apps/www/public/images/blocks/demo-sidebar-rsc.png
rename to apps/www/public/r/styles/new-york/sidebar-rsc-light.png
diff --git a/apps/www/public/r/styles/new-york/sidebar-rsc.json b/apps/www/public/r/styles/new-york/sidebar-rsc.json
new file mode 100644
index 00000000000..96807cd2256
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-rsc.json
@@ -0,0 +1,12 @@
+{
+  "name": "sidebar-rsc",
+  "type": "registry:internal",
+  "files": [
+    {
+      "path": "internal/sidebar-rsc.tsx",
+      "content": "import * as React from \"react\"\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  SidebarMenuSkeleton,\n  SidebarProvider,\n} from \"@/registry/new-york/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/www/public/r/styles/new-york/sink-dark.png b/apps/www/public/r/styles/new-york/sink-dark.png
new file mode 100644
index 00000000000..0b84c2ed939
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sink-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/sink-light.png b/apps/www/public/r/styles/new-york/sink-light.png
new file mode 100644
index 00000000000..1c209b3082e
Binary files /dev/null and b/apps/www/public/r/styles/new-york/sink-light.png differ
diff --git a/apps/www/public/r/styles/new-york/sink.json b/apps/www/public/r/styles/new-york/sink.json
new file mode 100644
index 00000000000..98ff4963f9b
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sink.json
@@ -0,0 +1,450 @@
+{
+  "name": "sink",
+  "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": "internal/sink/page.tsx",
+      "content": "import { AccordionDemo } from \"@/registry/new-york/internal/sink/components/accordion-demo\"\nimport { AlertDemo } from \"@/registry/new-york/internal/sink/components/alert-demo\"\nimport { AlertDialogDemo } from \"@/registry/new-york/internal/sink/components/alert-dialog-demo\"\nimport { AppSidebar } from \"@/registry/new-york/internal/sink/components/app-sidebar\"\nimport { AspectRatioDemo } from \"@/registry/new-york/internal/sink/components/aspect-ratio-demo\"\nimport { AvatarDemo } from \"@/registry/new-york/internal/sink/components/avatar-demo\"\nimport { BadgeDemo } from \"@/registry/new-york/internal/sink/components/badge-demo\"\nimport { BadgeDestructive } from \"@/registry/new-york/internal/sink/components/badge-destructive\"\nimport { BadgeOutline } from \"@/registry/new-york/internal/sink/components/badge-outline\"\nimport { BadgeSecondary } from \"@/registry/new-york/internal/sink/components/badge-secondary\"\nimport { BreadcrumbDemo } from \"@/registry/new-york/internal/sink/components/breadcrumb-demo\"\nimport { ButtonDemo } from \"@/registry/new-york/internal/sink/components/button-demo\"\nimport { ButtonDestructive } from \"@/registry/new-york/internal/sink/components/button-destructive\"\nimport { ButtonGhost } from \"@/registry/new-york/internal/sink/components/button-ghost\"\nimport { ButtonLink } from \"@/registry/new-york/internal/sink/components/button-link\"\nimport { ButtonLoading } from \"@/registry/new-york/internal/sink/components/button-loading\"\nimport { ButtonOutline } from \"@/registry/new-york/internal/sink/components/button-outline\"\nimport { ButtonSecondary } from \"@/registry/new-york/internal/sink/components/button-secondary\"\nimport { ButtonWithIcon } from \"@/registry/new-york/internal/sink/components/button-with-icon\"\nimport { CalendarDemo } from \"@/registry/new-york/internal/sink/components/calendar-demo\"\nimport { CardDemo } from \"@/registry/new-york/internal/sink/components/card-demo\"\nimport { CarouselDemo } from \"@/registry/new-york/internal/sink/components/carousel-demo\"\nimport { CheckboxDemo } from \"@/registry/new-york/internal/sink/components/checkbox-demo\"\nimport { CollapsibleDemo } from \"@/registry/new-york/internal/sink/components/collapsible-demo\"\nimport { ComboboxDemo } from \"@/registry/new-york/internal/sink/components/combobox-demo\"\nimport { CommandDemo } from \"@/registry/new-york/internal/sink/components/command-demo\"\nimport { ComponentWrapper } from \"@/registry/new-york/internal/sink/components/component-wrapper\"\nimport { ContextMenuDemo } from \"@/registry/new-york/internal/sink/components/context-menu-demo\"\nimport { DatePickerDemo } from \"@/registry/new-york/internal/sink/components/date-picker-demo\"\nimport { DialogDemo } from \"@/registry/new-york/internal/sink/components/dialog-demo\"\nimport { DrawerDemo } from \"@/registry/new-york/internal/sink/components/drawer-demo\"\nimport { DropdownMenuDemo } from \"@/registry/new-york/internal/sink/components/dropdown-menu-demo\"\nimport { HoverCardDemo } from \"@/registry/new-york/internal/sink/components/hover-card-demo\"\nimport { InputDemo } from \"@/registry/new-york/internal/sink/components/input-demo\"\nimport { InputOTPDemo } from \"@/registry/new-york/internal/sink/components/input-otp-demo\"\nimport { LabelDemo } from \"@/registry/new-york/internal/sink/components/label-demo\"\nimport { MenubarDemo } from \"@/registry/new-york/internal/sink/components/menubar-demo\"\nimport { NavigationMenuDemo } from \"@/registry/new-york/internal/sink/components/navigation-menu-demo\"\nimport { PaginationDemo } from \"@/registry/new-york/internal/sink/components/pagination-demo\"\nimport { PopoverDemo } from \"@/registry/new-york/internal/sink/components/popover-demo\"\nimport { ProgressDemo } from \"@/registry/new-york/internal/sink/components/progress-demo\"\nimport { RadioGroupDemo } from \"@/registry/new-york/internal/sink/components/radio-group-demo\"\nimport { ResizableHandleDemo } from \"@/registry/new-york/internal/sink/components/resizable-handle\"\nimport { ScrollAreaDemo } from \"@/registry/new-york/internal/sink/components/scroll-area-demo\"\nimport { SelectDemo } from \"@/registry/new-york/internal/sink/components/select-demo\"\nimport { SeparatorDemo } from \"@/registry/new-york/internal/sink/components/separator-demo\"\nimport { SheetDemo } from \"@/registry/new-york/internal/sink/components/sheet-demo\"\nimport { SkeletonDemo } from \"@/registry/new-york/internal/sink/components/skeleton-demo\"\nimport { SliderDemo } from \"@/registry/new-york/internal/sink/components/slider-demo\"\nimport { SonnerDemo } from \"@/registry/new-york/internal/sink/components/sonner-demo\"\nimport { SwitchDemo } from \"@/registry/new-york/internal/sink/components/switch-demo\"\nimport { TableDemo } from \"@/registry/new-york/internal/sink/components/table-demo\"\nimport { TabsDemo } from \"@/registry/new-york/internal/sink/components/tabs-demo\"\nimport { TextareaDemo } from \"@/registry/new-york/internal/sink/components/textarea-demo\"\nimport { ToastDemo } from \"@/registry/new-york/internal/sink/components/toast-demo\"\nimport { ToggleDemo } from \"@/registry/new-york/internal/sink/components/toggle-demo\"\nimport { ToggleDisabled } from \"@/registry/new-york/internal/sink/components/toggle-disabled\"\nimport { ToggleGroupDemo } from \"@/registry/new-york/internal/sink/components/toggle-group-demo\"\nimport { ToggleOutline } from \"@/registry/new-york/internal/sink/components/toggle-outline\"\nimport { ToggleWithText } from \"@/registry/new-york/internal/sink/components/toggle-with-text\"\nimport { TooltipDemo } from \"@/registry/new-york/internal/sink/components/tooltip-demo\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york/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 name=\"NavigationMenu\" className=\"col-span-2\">\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 * 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/new-york/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"@/registry/new-york/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"@/registry/new-york/blocks/sidebar-07/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      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 \"@/registry/new-york/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 \"@/registry/new-york/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york/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  MoreHorizontal,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/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\">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=\"h-8 w-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",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/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/new-york/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york/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\">{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-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>⌘{index + 1}</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\">Add team</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/new-york/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 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 {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/new-york/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/new-york/ui/alert-dialog\"\nimport { Button } from \"@/registry/new-york/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 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",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/aspect-ratio-demo.tsx",
+      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/registry/new-york/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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\n\nexport function AvatarDemo() {\n  return (\n    <Avatar>\n      <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\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/new-york/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/new-york/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/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\">Components</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/new-york/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/new-york/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 \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Switch } from \"@/registry/new-york/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 \"@/registry/new-york/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york/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\">{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",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/checkbox-demo.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/new-york/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 * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/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 * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/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)?.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={cn(\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",
+      "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/new-york/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/new-york/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\">Colm Tuite</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 * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/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 \"@/registry/new-york/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york/ui/dialog\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/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 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",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/drawer-demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york/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>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=\"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/new-york/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/new-york/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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/new-york/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/new-york/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/new-york/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/new-york/ui/checkbox\"\nimport { Label } from \"@/registry/new-york/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/new-york/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>Always Show Bookmarks Bar</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 * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/new-york/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                      shadcn/ui\n                    </div>\n                    <p className=\"text-sm leading-tight text-muted-foreground\">\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={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 \"@/registry/new-york/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/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/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/new-york/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/new-york/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/new-york/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/new-york/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/new-york/ui/scroll-area\"\nimport { Separator } from \"@/registry/new-york/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/new-york/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/new-york/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\">Radix Primitives</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/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/new-york/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 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",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/skeleton-demo.tsx",
+      "content": "import { Skeleton } from \"@/registry/new-york/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 \"@/registry/new-york/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 \"@/registry/new-york/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/new-york/ui/label\"\nimport { Switch } from \"@/registry/new-york/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/new-york/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\">{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",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/tabs-demo.tsx",
+      "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york/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 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",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "internal/sink/components/textarea-demo.tsx",
+      "content": "import { Textarea } from \"@/registry/new-york/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/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { ToastAction } from \"@/registry/new-york/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\">Undo</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/new-york/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 {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/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 value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\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/new-york/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/new-york/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/new-york/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/new-york/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/new-york/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/new-york/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/new-york/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/new-york/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/new-york/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/new-york/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/new-york/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/new-york/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/new-york/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/new-york/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/new-york/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/www/public/r/styles/new-york/skeleton-card.json b/apps/www/public/r/styles/new-york/skeleton-card.json
index 92d1b8857ff..274f2beba47 100644
--- a/apps/www/public/r/styles/new-york/skeleton-card.json
+++ b/apps/www/public/r/styles/new-york/skeleton-card.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/skeleton-card.tsx",
+      "path": "examples/skeleton-card.tsx",
       "content": "import { Skeleton } from \"@/registry/new-york/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/www/public/r/styles/new-york/skeleton-demo.json b/apps/www/public/r/styles/new-york/skeleton-demo.json
index c46e4c4c92c..e1a34700719 100644
--- a/apps/www/public/r/styles/new-york/skeleton-demo.json
+++ b/apps/www/public/r/styles/new-york/skeleton-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/skeleton-demo.tsx",
+      "path": "examples/skeleton-demo.tsx",
       "content": "import { Skeleton } from \"@/registry/new-york/ui/skeleton\"\n\nexport default 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:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/slider-demo.json b/apps/www/public/r/styles/new-york/slider-demo.json
index bf6cb373243..3371a7904f2 100644
--- a/apps/www/public/r/styles/new-york/slider-demo.json
+++ b/apps/www/public/r/styles/new-york/slider-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/slider-demo.tsx",
+      "path": "examples/slider-demo.tsx",
       "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/registry/new-york/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-[60%]\", className)}\n      {...props}\n    />\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/sonner-demo.json b/apps/www/public/r/styles/new-york/sonner-demo.json
index 9ab09ea1c74..bf3c7e0c4f8 100644
--- a/apps/www/public/r/styles/new-york/sonner-demo.json
+++ b/apps/www/public/r/styles/new-york/sonner-demo.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/sonner-demo.tsx",
-      "content": "import { toast } from \"sonner\"\n\nimport { Button } from \"@/registry/new-york/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            onClick: () => console.log(\"Undo\"),\n          },\n        })\n      }\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "path": "examples/sonner-demo.tsx",
+      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/registry/new-york/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            onClick: () => console.log(\"Undo\"),\n          },\n        })\n      }\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/switch-demo.json b/apps/www/public/r/styles/new-york/switch-demo.json
index 2b6920473e5..8ecde98bafb 100644
--- a/apps/www/public/r/styles/new-york/switch-demo.json
+++ b/apps/www/public/r/styles/new-york/switch-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/switch-demo.tsx",
+      "path": "examples/switch-demo.tsx",
       "content": "import { Label } from \"@/registry/new-york/ui/label\"\nimport { Switch } from \"@/registry/new-york/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/www/public/r/styles/new-york/switch-form.json b/apps/www/public/r/styles/new-york/switch-form.json
index 2e00588e125..f94f12ac801 100644
--- a/apps/www/public/r/styles/new-york/switch-form.json
+++ b/apps/www/public/r/styles/new-york/switch-form.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/switch-form.tsx",
+      "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 { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from \"@/registry/new-york/ui/form\"\nimport { Switch } from \"@/registry/new-york/ui/switch\"\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",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/table-demo.json b/apps/www/public/r/styles/new-york/table-demo.json
index 198841f3324..0833568c2cc 100644
--- a/apps/www/public/r/styles/new-york/table-demo.json
+++ b/apps/www/public/r/styles/new-york/table-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/table-demo.tsx",
+      "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/new-york/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",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/tabs-demo.json b/apps/www/public/r/styles/new-york/tabs-demo.json
index 4678a46c20c..53b6817baf0 100644
--- a/apps/www/public/r/styles/new-york/tabs-demo.json
+++ b/apps/www/public/r/styles/new-york/tabs-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/tabs-demo.tsx",
+      "path": "examples/tabs-demo.tsx",
       "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york/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",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/textarea-demo.json b/apps/www/public/r/styles/new-york/textarea-demo.json
index 36a849dc570..342c53bc198 100644
--- a/apps/www/public/r/styles/new-york/textarea-demo.json
+++ b/apps/www/public/r/styles/new-york/textarea-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/textarea-demo.tsx",
+      "path": "examples/textarea-demo.tsx",
       "content": "import { Textarea } from \"@/registry/new-york/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/www/public/r/styles/new-york/textarea-disabled.json b/apps/www/public/r/styles/new-york/textarea-disabled.json
index a33e78144ab..7cdd2892b00 100644
--- a/apps/www/public/r/styles/new-york/textarea-disabled.json
+++ b/apps/www/public/r/styles/new-york/textarea-disabled.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/textarea-disabled.tsx",
+      "path": "examples/textarea-disabled.tsx",
       "content": "import { Textarea } from \"@/registry/new-york/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/www/public/r/styles/new-york/textarea-form.json b/apps/www/public/r/styles/new-york/textarea-form.json
index 1513097fa80..8c16b3a3250 100644
--- a/apps/www/public/r/styles/new-york/textarea-form.json
+++ b/apps/www/public/r/styles/new-york/textarea-form.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/textarea-form.tsx",
+      "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 { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport { Textarea } from \"@/registry/new-york/ui/textarea\"\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 <span>@mention</span> 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",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/textarea-with-button.json b/apps/www/public/r/styles/new-york/textarea-with-button.json
index 90f11a8e234..02a2a88ecc8 100644
--- a/apps/www/public/r/styles/new-york/textarea-with-button.json
+++ b/apps/www/public/r/styles/new-york/textarea-with-button.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/textarea-with-button.tsx",
+      "path": "examples/textarea-with-button.tsx",
       "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport { Textarea } from \"@/registry/new-york/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/www/public/r/styles/new-york/textarea-with-label.json b/apps/www/public/r/styles/new-york/textarea-with-label.json
index f6fa8f34ff1..5b2815bd6f1 100644
--- a/apps/www/public/r/styles/new-york/textarea-with-label.json
+++ b/apps/www/public/r/styles/new-york/textarea-with-label.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/textarea-with-label.tsx",
+      "path": "examples/textarea-with-label.tsx",
       "content": "import { Label } from \"@/registry/new-york/ui/label\"\nimport { Textarea } from \"@/registry/new-york/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/www/public/r/styles/new-york/textarea-with-text.json b/apps/www/public/r/styles/new-york/textarea-with-text.json
index 593f549cbe1..8995eed9fa0 100644
--- a/apps/www/public/r/styles/new-york/textarea-with-text.json
+++ b/apps/www/public/r/styles/new-york/textarea-with-text.json
@@ -7,7 +7,7 @@
   ],
   "files": [
     {
-      "path": "example/textarea-with-text.tsx",
+      "path": "examples/textarea-with-text.tsx",
       "content": "import { Label } from \"@/registry/new-york/ui/label\"\nimport { Textarea } from \"@/registry/new-york/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-sm text-muted-foreground\">\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/www/public/r/styles/new-york/textarea.json b/apps/www/public/r/styles/new-york/textarea.json
index 33b528dc7f1..1bb5747a3cb 100644
--- a/apps/www/public/r/styles/new-york/textarea.json
+++ b/apps/www/public/r/styles/new-york/textarea.json
@@ -4,7 +4,7 @@
   "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          \"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring 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",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Textarea = React.forwardRef<\n  HTMLTextAreaElement,\n  React.ComponentProps<\"textarea\">\n>(({ className, ...props }, ref) => {\n  return (\n    <textarea\n      className={cn(\n        \"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n})\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/toast-demo.json b/apps/www/public/r/styles/new-york/toast-demo.json
index f6025dd1f6d..8bd128ad312 100644
--- a/apps/www/public/r/styles/new-york/toast-demo.json
+++ b/apps/www/public/r/styles/new-york/toast-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toast-demo.tsx",
+      "path": "examples/toast-demo.tsx",
       "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { ToastAction } from \"@/registry/new-york/ui/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",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/toast-destructive.json b/apps/www/public/r/styles/new-york/toast-destructive.json
index 342f634e4af..a887f7cd879 100644
--- a/apps/www/public/r/styles/new-york/toast-destructive.json
+++ b/apps/www/public/r/styles/new-york/toast-destructive.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toast-destructive.tsx",
+      "path": "examples/toast-destructive.tsx",
       "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { ToastAction } from \"@/registry/new-york/ui/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/www/public/r/styles/new-york/toast-simple.json b/apps/www/public/r/styles/new-york/toast-simple.json
index dc19180823e..18a01f08c56 100644
--- a/apps/www/public/r/styles/new-york/toast-simple.json
+++ b/apps/www/public/r/styles/new-york/toast-simple.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toast-simple.tsx",
+      "path": "examples/toast-simple.tsx",
       "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\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/www/public/r/styles/new-york/toast-with-action.json b/apps/www/public/r/styles/new-york/toast-with-action.json
index 4099e354ce5..db60c5094fe 100644
--- a/apps/www/public/r/styles/new-york/toast-with-action.json
+++ b/apps/www/public/r/styles/new-york/toast-with-action.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toast-with-action.tsx",
+      "path": "examples/toast-with-action.tsx",
       "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { ToastAction } from \"@/registry/new-york/ui/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/www/public/r/styles/new-york/toast-with-title.json b/apps/www/public/r/styles/new-york/toast-with-title.json
index 107a1a598a6..058db06ae95 100644
--- a/apps/www/public/r/styles/new-york/toast-with-title.json
+++ b/apps/www/public/r/styles/new-york/toast-with-title.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/toast-with-title.tsx",
+      "path": "examples/toast-with-title.tsx",
       "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\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/www/public/r/styles/new-york/toast.json b/apps/www/public/r/styles/new-york/toast.json
index 652407b812f..692419dd315 100644
--- a/apps/www/public/r/styles/new-york/toast.json
+++ b/apps/www/public/r/styles/new-york/toast.json
@@ -7,18 +7,21 @@
   "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 { cva, type VariantProps } from \"class-variance-authority\"\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      \"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 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\",\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      \"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground 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=\"h-4 w-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"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToastPrimitives from \"@radix-ui/react-toast\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-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      \"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 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\",\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      \"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground 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    <X className=\"h-4 w-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 {\n  ToastActionElement,\n  ToastProps,\n} from \"@/registry/new-york/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\nconst 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: toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nexport const 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: 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",
-      "type": "registry:hook"
+      "type": "registry:hook",
+      "target": ""
     },
     {
       "path": "ui/toaster.tsx",
       "content": "\"use client\"\n\nimport { useToast } from \"@/registry/new-york/hooks/use-toast\"\nimport {\n  Toast,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n} from \"@/registry/new-york/ui/toast\"\n\nexport function Toaster() {\n  const { toasts } = useToast()\n\n  return (\n    <ToastProvider>\n      {toasts.map(function ({ 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"
+      "type": "registry:ui",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/toggle-demo.json b/apps/www/public/r/styles/new-york/toggle-demo.json
index 479784cdd8b..85242769152 100644
--- a/apps/www/public/r/styles/new-york/toggle-demo.json
+++ b/apps/www/public/r/styles/new-york/toggle-demo.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/toggle-demo.tsx",
-      "content": "import { FontBoldIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleDemo() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <FontBoldIcon className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "path": "examples/toggle-demo.tsx",
+      "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleDemo() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Bold className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/toggle-disabled.json b/apps/www/public/r/styles/new-york/toggle-disabled.json
index a63f927376b..57ca6ae02f2 100644
--- a/apps/www/public/r/styles/new-york/toggle-disabled.json
+++ b/apps/www/public/r/styles/new-york/toggle-disabled.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/toggle-disabled.tsx",
-      "content": "import { UnderlineIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleDisabled() {\n  return (\n    <Toggle aria-label=\"Toggle italic\" disabled>\n      <UnderlineIcon className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "path": "examples/toggle-disabled.tsx",
+      "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default 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:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/toggle-group-demo.json b/apps/www/public/r/styles/new-york/toggle-group-demo.json
index efe36fd5b5a..f4b96c725fd 100644
--- a/apps/www/public/r/styles/new-york/toggle-group-demo.json
+++ b/apps/www/public/r/styles/new-york/toggle-group-demo.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/toggle-group-demo.tsx",
-      "content": "import {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/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=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <FontItalicIcon className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <UnderlineIcon className=\"h-4 w-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/new-york/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=\"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 value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/toggle-group-disabled.json b/apps/www/public/r/styles/new-york/toggle-group-disabled.json
index 8ba434c3675..3cab377e765 100644
--- a/apps/www/public/r/styles/new-york/toggle-group-disabled.json
+++ b/apps/www/public/r/styles/new-york/toggle-group-disabled.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/toggle-group-disabled.tsx",
-      "content": "import {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/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=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <FontItalicIcon className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <UnderlineIcon className=\"h-4 w-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/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n  return (\n    <ToggleGroup type=\"multiple\" disabled>\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 value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/toggle-group-lg.json b/apps/www/public/r/styles/new-york/toggle-group-lg.json
index 634b2b08320..1b9b931f19a 100644
--- a/apps/www/public/r/styles/new-york/toggle-group-lg.json
+++ b/apps/www/public/r/styles/new-york/toggle-group-lg.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/toggle-group-lg.tsx",
-      "content": "import {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/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=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <FontItalicIcon className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <UnderlineIcon className=\"h-4 w-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/new-york/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        <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 value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/toggle-group-outline.json b/apps/www/public/r/styles/new-york/toggle-group-outline.json
index 0de52215ecf..8f9b72a66e8 100644
--- a/apps/www/public/r/styles/new-york/toggle-group-outline.json
+++ b/apps/www/public/r/styles/new-york/toggle-group-outline.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/toggle-group-outline.tsx",
-      "content": "import {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/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=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <FontItalicIcon className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <UnderlineIcon className=\"h-4 w-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/new-york/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        <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 value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/toggle-group-single.json b/apps/www/public/r/styles/new-york/toggle-group-single.json
index 1c869a9b6cc..804519adae1 100644
--- a/apps/www/public/r/styles/new-york/toggle-group-single.json
+++ b/apps/www/public/r/styles/new-york/toggle-group-single.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/toggle-group-single.tsx",
-      "content": "import {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/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=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <FontItalicIcon className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <UnderlineIcon className=\"h-4 w-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/new-york/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=\"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 value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/toggle-group-sm.json b/apps/www/public/r/styles/new-york/toggle-group-sm.json
index 5820770e066..c4df62483ca 100644
--- a/apps/www/public/r/styles/new-york/toggle-group-sm.json
+++ b/apps/www/public/r/styles/new-york/toggle-group-sm.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/toggle-group-sm.tsx",
-      "content": "import {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/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=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n        <FontItalicIcon className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <UnderlineIcon className=\"h-4 w-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/new-york/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        <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 value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline className=\"h-4 w-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/toggle-lg.json b/apps/www/public/r/styles/new-york/toggle-lg.json
index 882c7cf6876..560c903adb9 100644
--- a/apps/www/public/r/styles/new-york/toggle-lg.json
+++ b/apps/www/public/r/styles/new-york/toggle-lg.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/toggle-lg.tsx",
-      "content": "import { FontItalicIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleLg() {\n  return (\n    <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n      <FontItalicIcon className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "path": "examples/toggle-lg.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleLg() {\n  return (\n    <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/toggle-outline.json b/apps/www/public/r/styles/new-york/toggle-outline.json
index dd53e394134..6d4736b5ee3 100644
--- a/apps/www/public/r/styles/new-york/toggle-outline.json
+++ b/apps/www/public/r/styles/new-york/toggle-outline.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/toggle-outline.tsx",
-      "content": "import { FontItalicIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleOutline() {\n  return (\n    <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n      <FontItalicIcon className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "path": "examples/toggle-outline.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleOutline() {\n  return (\n    <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/toggle-sm.json b/apps/www/public/r/styles/new-york/toggle-sm.json
index 0460978b7af..35f243eaffd 100644
--- a/apps/www/public/r/styles/new-york/toggle-sm.json
+++ b/apps/www/public/r/styles/new-york/toggle-sm.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/toggle-sm.tsx",
-      "content": "import { FontItalicIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleSm() {\n  return (\n    <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n      <FontItalicIcon className=\"h-4 w-4\" />\n    </Toggle>\n  )\n}\n",
+      "path": "examples/toggle-sm.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleSm() {\n  return (\n    <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n      <Italic />\n    </Toggle>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/toggle-with-text.json b/apps/www/public/r/styles/new-york/toggle-with-text.json
index 20c0b16ad10..cf69190f299 100644
--- a/apps/www/public/r/styles/new-york/toggle-with-text.json
+++ b/apps/www/public/r/styles/new-york/toggle-with-text.json
@@ -6,8 +6,8 @@
   ],
   "files": [
     {
-      "path": "example/toggle-with-text.tsx",
-      "content": "import { FontItalicIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleWithText() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <FontItalicIcon />\n      Italic\n    </Toggle>\n  )\n}\n",
+      "path": "examples/toggle-with-text.tsx",
+      "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleWithText() {\n  return (\n    <Toggle aria-label=\"Toggle italic\">\n      <Italic />\n      Italic\n    </Toggle>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }
diff --git a/apps/www/public/r/styles/new-york/toggle.json b/apps/www/public/r/styles/new-york/toggle.json
index b2a0c6af093..4dbe77381e7 100644
--- a/apps/www/public/r/styles/new-york/toggle.json
+++ b/apps/www/public/r/styles/new-york/toggle.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "ui/toggle.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-2 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\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-2 min-w-9\",\n        sm: \"h-8 px-1.5 min-w-8\",\n        lg: \"h-10 px-2.5 min-w-10\",\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": ""
     }
diff --git a/apps/www/public/r/styles/new-york/tooltip-demo.json b/apps/www/public/r/styles/new-york/tooltip-demo.json
index a794d930b8d..e009869b1ae 100644
--- a/apps/www/public/r/styles/new-york/tooltip-demo.json
+++ b/apps/www/public/r/styles/new-york/tooltip-demo.json
@@ -6,7 +6,7 @@
   ],
   "files": [
     {
-      "path": "example/tooltip-demo.tsx",
+      "path": "examples/tooltip-demo.tsx",
       "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/new-york/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        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/typography-blockquote.json b/apps/www/public/r/styles/new-york/typography-blockquote.json
index abf8908ca33..08ddcfd9a20 100644
--- a/apps/www/public/r/styles/new-york/typography-blockquote.json
+++ b/apps/www/public/r/styles/new-york/typography-blockquote.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/typography-blockquote.tsx",
+      "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 that\n      they should pay for the privilege.\"\n    </blockquote>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/typography-demo.json b/apps/www/public/r/styles/new-york/typography-demo.json
index a16f60c8fd2..8db6def4d14 100644
--- a/apps/www/public/r/styles/new-york/typography-demo.json
+++ b/apps/www/public/r/styles/new-york/typography-demo.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/typography-demo.tsx",
+      "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 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        <a\n          href=\"#\"\n          className=\"font-medium text-primary 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=\"m-0 border-t p-0 even:bg-muted\">\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=\"m-0 border-t p-0 even:bg-muted\">\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=\"m-0 border-t p-0 even:bg-muted\">\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=\"m-0 border-t p-0 even:bg-muted\">\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",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/typography-h1.json b/apps/www/public/r/styles/new-york/typography-h1.json
index a0433accb4b..ac9b2a69f50 100644
--- a/apps/www/public/r/styles/new-york/typography-h1.json
+++ b/apps/www/public/r/styles/new-york/typography-h1.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "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": ""
diff --git a/apps/www/public/r/styles/new-york/typography-h2.json b/apps/www/public/r/styles/new-york/typography-h2.json
index 453bc704872..57909033817 100644
--- a/apps/www/public/r/styles/new-york/typography-h2.json
+++ b/apps/www/public/r/styles/new-york/typography-h2.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "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": ""
diff --git a/apps/www/public/r/styles/new-york/typography-h3.json b/apps/www/public/r/styles/new-york/typography-h3.json
index 36915c00567..193e089e74e 100644
--- a/apps/www/public/r/styles/new-york/typography-h3.json
+++ b/apps/www/public/r/styles/new-york/typography-h3.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "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": ""
diff --git a/apps/www/public/r/styles/new-york/typography-h4.json b/apps/www/public/r/styles/new-york/typography-h4.json
index 1803fb69524..19852b679e2 100644
--- a/apps/www/public/r/styles/new-york/typography-h4.json
+++ b/apps/www/public/r/styles/new-york/typography-h4.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "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": ""
diff --git a/apps/www/public/r/styles/new-york/typography-inline-code.json b/apps/www/public/r/styles/new-york/typography-inline-code.json
index c713bcec7c1..eee8b57bd6d 100644
--- a/apps/www/public/r/styles/new-york/typography-inline-code.json
+++ b/apps/www/public/r/styles/new-york/typography-inline-code.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/typography-inline-code.tsx",
+      "path": "examples/typography-inline-code.tsx",
       "content": "export default function TypographyInlineCode() {\n  return (\n    <code className=\"relative rounded bg-muted 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": ""
diff --git a/apps/www/public/r/styles/new-york/typography-large.json b/apps/www/public/r/styles/new-york/typography-large.json
index 66dc2f9c4da..553e9e70fa1 100644
--- a/apps/www/public/r/styles/new-york/typography-large.json
+++ b/apps/www/public/r/styles/new-york/typography-large.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "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": ""
diff --git a/apps/www/public/r/styles/new-york/typography-lead.json b/apps/www/public/r/styles/new-york/typography-lead.json
index dcd56d7c8b0..d07c6a0c1d0 100644
--- a/apps/www/public/r/styles/new-york/typography-lead.json
+++ b/apps/www/public/r/styles/new-york/typography-lead.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/typography-lead.tsx",
+      "path": "examples/typography-lead.tsx",
       "content": "export default function TypographyLead() {\n  return (\n    <p className=\"text-xl text-muted-foreground\">\n      A modal dialog that interrupts the user with important content and expects\n      a response.\n    </p>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/typography-list.json b/apps/www/public/r/styles/new-york/typography-list.json
index 32fc5d7c5a3..a53659185b8 100644
--- a/apps/www/public/r/styles/new-york/typography-list.json
+++ b/apps/www/public/r/styles/new-york/typography-list.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "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": ""
diff --git a/apps/www/public/r/styles/new-york/typography-muted.json b/apps/www/public/r/styles/new-york/typography-muted.json
index 62dca4a7abd..b8b411d0846 100644
--- a/apps/www/public/r/styles/new-york/typography-muted.json
+++ b/apps/www/public/r/styles/new-york/typography-muted.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/typography-muted.tsx",
+      "path": "examples/typography-muted.tsx",
       "content": "export default function TypographyMuted() {\n  return (\n    <p className=\"text-sm text-muted-foreground\">Enter your email address.</p>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/typography-p.json b/apps/www/public/r/styles/new-york/typography-p.json
index 4f7448285c0..7d9847196b0 100644
--- a/apps/www/public/r/styles/new-york/typography-p.json
+++ b/apps/www/public/r/styles/new-york/typography-p.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "files": [
     {
-      "path": "example/typography-p.tsx",
+      "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 of\n      his ways and repealed the joke tax.\n    </p>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
diff --git a/apps/www/public/r/styles/new-york/typography-small.json b/apps/www/public/r/styles/new-york/typography-small.json
index ec40fee6b50..79bae7bb51f 100644
--- a/apps/www/public/r/styles/new-york/typography-small.json
+++ b/apps/www/public/r/styles/new-york/typography-small.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "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": ""
diff --git a/apps/www/public/r/styles/new-york/typography-table.json b/apps/www/public/r/styles/new-york/typography-table.json
index 38bbc34855f..904c6d14179 100644
--- a/apps/www/public/r/styles/new-york/typography-table.json
+++ b/apps/www/public/r/styles/new-york/typography-table.json
@@ -3,7 +3,7 @@
   "type": "registry:example",
   "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=\"m-0 border-t p-0 even:bg-muted\">\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=\"m-0 border-t p-0 even:bg-muted\">\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=\"m-0 border-t p-0 even:bg-muted\">\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=\"m-0 border-t p-0 even:bg-muted\">\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": ""
diff --git a/apps/www/public/r/styles/new-york/use-mobile.json b/apps/www/public/r/styles/new-york/use-mobile.json
index 079f52478dd..c2ca883e72f 100644
--- a/apps/www/public/r/styles/new-york/use-mobile.json
+++ b/apps/www/public/r/styles/new-york/use-mobile.json
@@ -5,7 +5,8 @@
     {
       "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",
-      "type": "registry:hook"
+      "type": "registry:hook",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/use-toast.json b/apps/www/public/r/styles/new-york/use-toast.json
index e6799f3d61d..9c03605d71c 100644
--- a/apps/www/public/r/styles/new-york/use-toast.json
+++ b/apps/www/public/r/styles/new-york/use-toast.json
@@ -5,7 +5,8 @@
     {
       "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/new-york/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\nconst 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: toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nexport const 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: 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",
-      "type": "registry:hook"
+      "type": "registry:hook",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/utils.json b/apps/www/public/r/styles/new-york/utils.json
index 987ce3b08f1..35a61098015 100644
--- a/apps/www/public/r/styles/new-york/utils.json
+++ b/apps/www/public/r/styles/new-york/utils.json
@@ -9,7 +9,8 @@
     {
       "path": "lib/utils.ts",
       "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
-      "type": "registry:lib"
+      "type": "registry:lib",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-login-01-dark.png b/apps/www/public/r/styles/new-york/v0-login-01-dark.png
new file mode 100644
index 00000000000..a919e7811c2
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-login-01-dark.png differ
diff --git a/apps/www/public/images/blocks/login-01-dark.png b/apps/www/public/r/styles/new-york/v0-login-01-light.png
similarity index 100%
rename from apps/www/public/images/blocks/login-01-dark.png
rename to apps/www/public/r/styles/new-york/v0-login-01-light.png
diff --git a/apps/www/public/r/styles/new-york/v0-login-01.json b/apps/www/public/r/styles/new-york/v0-login-01.json
index 77e2af719a0..a2730d2ce30 100644
--- a/apps/www/public/r/styles/new-york/v0-login-01.json
+++ b/apps/www/public/r/styles/new-york/v0-login-01.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-login-01",
-  "type": "registry:block",
-  "description": "A simple login form.",
+  "type": "registry:internal",
   "registryDependencies": [
     "button",
     "card",
@@ -10,10 +9,10 @@
   ],
   "files": [
     {
-      "path": "v0/login-01.tsx",
+      "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:block",
-      "target": "components/login-01.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-01-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-01-dark.png
new file mode 100644
index 00000000000..7b7cf8fa24c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-01-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-01-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-01-light.png
new file mode 100644
index 00000000000..d59e52ad973
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-01-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-01.json b/apps/www/public/r/styles/new-york/v0-sidebar-01.json
index 386cb8c3341..17304d64c16 100644
--- a/apps/www/public/r/styles/new-york/v0-sidebar-01.json
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-01.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-01",
-  "type": "registry:block",
-  "description": "A simple sidebar with navigation grouped by section.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -11,7 +10,7 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-01.tsx",
+      "path": "internal/sidebar-01.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, 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  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(data.versions[0])\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\">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                  {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 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      <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"
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-02-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-02-dark.png
new file mode 100644
index 00000000000..e92a167de03
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-02-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-02-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-02-light.png
new file mode 100644
index 00000000000..287bb936ca3
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-02-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-02.json b/apps/www/public/r/styles/new-york/v0-sidebar-02.json
index 9cf3edbee03..ba2ca79a01a 100644
--- a/apps/www/public/r/styles/new-york/v0-sidebar-02.json
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-02.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-02",
-  "type": "registry:block",
-  "description": "A sidebar with collapsible sections.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -11,10 +10,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-02.tsx",
+      "path": "internal/sidebar-02.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Check,\n  ChevronRight,\n  ChevronsUpDown,\n  GalleryVerticalEnd,\n  Search,\n} 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 {\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(data.versions[0])\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\">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                  {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 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      <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:block",
-      "target": "components/sidebar-02.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-03-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-03-dark.png
new file mode 100644
index 00000000000..f8321378c15
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-03-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-03-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-03-light.png
new file mode 100644
index 00000000000..77643fccb73
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-03-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-03.json b/apps/www/public/r/styles/new-york/v0-sidebar-03.json
index 60ccce8f266..e7258d898fe 100644
--- a/apps/www/public/r/styles/new-york/v0-sidebar-03.json
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-03.json
@@ -1,17 +1,16 @@
 {
   "name": "v0-sidebar-03",
-  "type": "registry:block",
-  "description": "A sidebar with nested navigation.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb"
   ],
   "files": [
     {
-      "path": "v0/sidebar-03.tsx",
+      "path": "internal/sidebar-03.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, 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  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\">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      <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:block",
-      "target": "components/sidebar-03.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-04-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-04-dark.png
new file mode 100644
index 00000000000..cfb5b162016
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-04-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-04-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-04-light.png
new file mode 100644
index 00000000000..07b0fa47a45
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-04-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-04.json b/apps/www/public/r/styles/new-york/v0-sidebar-04.json
index 769cc207632..b26408e96f7 100644
--- a/apps/www/public/r/styles/new-york/v0-sidebar-04.json
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-04.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-04",
-  "type": "registry:block",
-  "description": "A floating sidebar with submenus.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -9,10 +8,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-04.tsx",
+      "path": "internal/sidebar-04.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-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\">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      <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:block",
-      "target": "components/sidebar-04.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-05-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-05-dark.png
new file mode 100644
index 00000000000..893ef968f3e
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-05-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-05-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-05-light.png
new file mode 100644
index 00000000000..a3a88c38e8c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-05-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-05.json b/apps/www/public/r/styles/new-york/v0-sidebar-05.json
index aa1478ee071..b1e49664e6b 100644
--- a/apps/www/public/r/styles/new-york/v0-sidebar-05.json
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-05.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-05",
-  "type": "registry:block",
-  "description": "A sidebar with collapsible submenus.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -11,10 +10,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-05.tsx",
+      "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\">Documentation</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}>{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      <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:block",
-      "target": "components/sidebar-05.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-06-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-06-dark.png
new file mode 100644
index 00000000000..0115ddb1200
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-06-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-06-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-06-light.png
new file mode 100644
index 00000000000..f36a857718f
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-06-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-06.json b/apps/www/public/r/styles/new-york/v0-sidebar-06.json
index 9595b766eed..5d4e8d6ddd1 100644
--- a/apps/www/public/r/styles/new-york/v0-sidebar-06.json
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-06.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-06",
-  "type": "registry:block",
-  "description": "A sidebar with submenus as dropdowns.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -11,10 +10,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-06.tsx",
+      "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\">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                <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=\"bottom\"\n                        align=\"end\"\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        </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 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:block",
-      "target": "components/sidebar-06.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-07-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-07-dark.png
new file mode 100644
index 00000000000..43a9fb16d7a
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-07-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-07-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-07-light.png
new file mode 100644
index 00000000000..e66a7e58f9f
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-07-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-07.json b/apps/www/public/r/styles/new-york/v0-sidebar-07.json
index c52865d93e2..8dd0f174cde 100644
--- a/apps/www/public/r/styles/new-york/v0-sidebar-07.json
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-07.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-07",
-  "type": "registry:block",
-  "description": "A sidebar that collapses to icons.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -12,10 +11,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-07.tsx",
+      "path": "internal/sidebar-07.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\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\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} 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: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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>⌘{index + 1}</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\">CN</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:block",
-      "target": "components/sidebar-07.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-08-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-08-dark.png
new file mode 100644
index 00000000000..6de2042e8e0
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-08-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-08-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-08-light.png
new file mode 100644
index 00000000000..8f36ab1d856
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-08-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-08.json b/apps/www/public/r/styles/new-york/v0-sidebar-08.json
index b558cd418ef..dcb3f4c3838 100644
--- a/apps/www/public/r/styles/new-york/v0-sidebar-08.json
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-08.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-08",
-  "type": "registry:block",
-  "description": "An inset sidebar with secondary navigation.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -12,10 +11,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-08.tsx",
+      "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 {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} 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: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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\">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            <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\">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          <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\">CN</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:block",
-      "target": "components/sidebar-08.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-09-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-09-dark.png
new file mode 100644
index 00000000000..80833544957
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-09-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-09-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-09-light.png
new file mode 100644
index 00000000000..7b2e848f66c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-09-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-09.json b/apps/www/public/r/styles/new-york/v0-sidebar-09.json
index 9bd1b20844f..ca19fdc1470 100644
--- a/apps/www/public/r/styles/new-york/v0-sidebar-09.json
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-09.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-09",
-  "type": "registry:block",
-  "description": "Collapsible nested sidebars.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -13,10 +12,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-09.tsx",
+      "path": "internal/sidebar-09.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\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\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} 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: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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 size=\"lg\" asChild className=\"md:h-8 md:p-0\">\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\">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-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\">{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\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\">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=\"h-8 w-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",
-      "type": "registry:block",
-      "target": "components/sidebar-09.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-10-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-10-dark.png
new file mode 100644
index 00000000000..9ac92d8e32b
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-10-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-10-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-10-light.png
new file mode 100644
index 00000000000..4ba7a53a646
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-10-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-10.json b/apps/www/public/r/styles/new-york/v0-sidebar-10.json
index b2919ff9c02..3f7bbcf7aaf 100644
--- a/apps/www/public/r/styles/new-york/v0-sidebar-10.json
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-10.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-10",
-  "type": "registry:block",
-  "description": "A sidebar in a popover.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -12,10 +11,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-10.tsx",
+      "path": "internal/sidebar-10.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\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  MessageCircleQuestion,\n  MoreHorizontal,\n  Plus,\n  Search,\n  Settings2,\n  Sparkles,\n  Star,\n  StarOff,\n  Trash,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-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 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 /> <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 && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\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\">{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-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>⌘{index + 1}</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\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
-      "type": "registry:block",
-      "target": "components/sidebar-10.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-11-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-11-dark.png
new file mode 100644
index 00000000000..fe7240b71be
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-11-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-11-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-11-light.png
new file mode 100644
index 00000000000..abd19a6a76c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-11-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-11.json b/apps/www/public/r/styles/new-york/v0-sidebar-11.json
index 2cd8ab890de..84e227a03ee 100644
--- a/apps/www/public/r/styles/new-york/v0-sidebar-11.json
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-11.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-11",
-  "type": "registry:block",
-  "description": "A sidebar with a collapsible file tree.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -10,10 +9,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-11.tsx",
+      "path": "internal/sidebar-11.tsx",
       "content": "import * as React from \"react\"\nimport { ChevronRight, File, Folder } 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 { 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:block",
-      "target": "components/sidebar-11.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-12-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-12-dark.png
new file mode 100644
index 00000000000..9d6b6164c3c
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-12-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-12-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-12-light.png
new file mode 100644
index 00000000000..b1fac8c4cf2
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-12-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-12.json b/apps/www/public/r/styles/new-york/v0-sidebar-12.json
index bc6d51b3b3f..3cd5cf51927 100644
--- a/apps/www/public/r/styles/new-york/v0-sidebar-12.json
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-12.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-12",
-  "type": "registry:block",
-  "description": "A sidebar with a calendar.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -13,10 +12,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-12.tsx",
+      "path": "internal/sidebar-12.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BadgeCheck,\n  Bell,\n  Check,\n  ChevronRight,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Plus,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} 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: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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 key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\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\">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=\"h-8 w-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",
-      "type": "registry:block",
-      "target": "components/sidebar-12.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-13-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-13-dark.png
new file mode 100644
index 00000000000..34c2606f327
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-13-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-13-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-13-light.png
new file mode 100644
index 00000000000..cb5efd33e6a
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-13-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-13.json b/apps/www/public/r/styles/new-york/v0-sidebar-13.json
index e017a059d58..c52d553239a 100644
--- a/apps/www/public/r/styles/new-york/v0-sidebar-13.json
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-13.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-13",
-  "type": "registry:block",
-  "description": "A sidebar in a dialog.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -10,10 +9,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-13.tsx",
+      "path": "internal/sidebar-13.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 \"@/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={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=\"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:block",
-      "target": "components/sidebar-13.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-14-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-14-dark.png
new file mode 100644
index 00000000000..ccbf36c07c5
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-14-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-14-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-14-light.png
new file mode 100644
index 00000000000..d19f20508a4
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-14-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-14.json b/apps/www/public/r/styles/new-york/v0-sidebar-14.json
index 45dfec35784..89e58999aee 100644
--- a/apps/www/public/r/styles/new-york/v0-sidebar-14.json
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-14.json
@@ -1,17 +1,16 @@
 {
   "name": "v0-sidebar-14",
-  "type": "registry:block",
-  "description": "A sidebar on the right.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb"
   ],
   "files": [
     {
-      "path": "v0/sidebar-14.tsx",
+      "path": "internal/sidebar-14.tsx",
       "content": "import * 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:block",
-      "target": "components/sidebar-14.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-15-dark.png b/apps/www/public/r/styles/new-york/v0-sidebar-15-dark.png
new file mode 100644
index 00000000000..dc7d52abbdf
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-15-dark.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-15-light.png b/apps/www/public/r/styles/new-york/v0-sidebar-15-light.png
new file mode 100644
index 00000000000..6b89b39681d
Binary files /dev/null and b/apps/www/public/r/styles/new-york/v0-sidebar-15-light.png differ
diff --git a/apps/www/public/r/styles/new-york/v0-sidebar-15.json b/apps/www/public/r/styles/new-york/v0-sidebar-15.json
index fd7afa7a32d..2e9c9b0a2bc 100644
--- a/apps/www/public/r/styles/new-york/v0-sidebar-15.json
+++ b/apps/www/public/r/styles/new-york/v0-sidebar-15.json
@@ -1,7 +1,6 @@
 {
   "name": "v0-sidebar-15",
-  "type": "registry:block",
-  "description": "A left and right sidebar.",
+  "type": "registry:internal",
   "registryDependencies": [
     "sidebar",
     "breadcrumb",
@@ -14,10 +13,10 @@
   ],
   "files": [
     {
-      "path": "v0/sidebar-15.tsx",
+      "path": "internal/sidebar-15.tsx",
       "content": "\"use client\"\n\nimport * as React from \"react\"\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  MessageCircleQuestion,\n  MoreHorizontal,\n  Plus,\n  Search,\n  Settings2,\n  Sparkles,\n  StarOff,\n  Trash2,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} 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: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.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 && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\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\">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=\"h-8 w-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\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\">{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-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>⌘{index + 1}</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\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
-      "type": "registry:block",
-      "target": "components/sidebar-15.tsx"
+      "type": "registry:internal",
+      "target": ""
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/registry.json b/apps/www/public/registry.json
new file mode 100644
index 00000000000..a6448ac56e9
--- /dev/null
+++ b/apps/www/public/registry.json
@@ -0,0 +1,129 @@
+{
+  "$schema": "http://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"
+      ]
+    },
+    "description": {
+      "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"
+            ]
+          },
+          "target": {
+            "type": "string"
+          }
+        },
+        "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/www/public/schema.json b/apps/www/public/schema.json
index 4d3e0ae64d9..8b89e39b5c1 100644
--- a/apps/www/public/schema.json
+++ b/apps/www/public/schema.json
@@ -33,6 +33,9 @@
     "tsx": {
       "type": "boolean"
     },
+    "iconLibrary": {
+      "type": "string"
+    },
     "aliases": {
       "type": "object",
       "properties": {
diff --git a/apps/www/registry/default/block/authentication-01.tsx b/apps/www/registry/default/block/authentication-01.tsx
deleted file mode 100644
index ad62585fa44..00000000000
--- a/apps/www/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/www/registry/default/block/authentication-02.tsx b/apps/www/registry/default/block/authentication-02.tsx
deleted file mode 100644
index b4ccaddd92b..00000000000
--- a/apps/www/registry/default/block/authentication-02.tsx
+++ /dev/null
@@ -1,67 +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/www/registry/default/block/authentication-03.tsx b/apps/www/registry/default/block/authentication-03.tsx
deleted file mode 100644
index 65e7c939a7a..00000000000
--- a/apps/www/registry/default/block/authentication-03.tsx
+++ /dev/null
@@ -1,72 +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/www/registry/default/block/authentication-04.tsx b/apps/www/registry/default/block/authentication-04.tsx
deleted file mode 100644
index 1ccce939230..00000000000
--- a/apps/www/registry/default/block/authentication-04.tsx
+++ /dev/null
@@ -1,74 +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-balance text-muted-foreground">
-              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="hidden bg-muted lg:block">
-        <Image
-          src="/placeholder.svg"
-          alt="Image"
-          width="1920"
-          height="1080"
-          className="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
-        />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/registry/default/block/chart-area-interactive.tsx b/apps/www/registry/default/block/chart-area-interactive.tsx
deleted file mode 100644
index 3044b7357a6..00000000000
--- a/apps/www/registry/default/block/chart-area-interactive.tsx
+++ /dev/null
@@ -1,265 +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 {
-  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 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/www/registry/default/block/chart-pie-label-custom.tsx b/apps/www/registry/default/block/chart-pie-label-custom.tsx
deleted file mode 100644
index 647712d505b..00000000000
--- a/apps/www/registry/default/block/chart-pie-label-custom.tsx
+++ /dev/null
@@ -1,110 +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 {
-  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]"
-        >
-          <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="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/www/registry/default/block/chart-pie-label-list.tsx b/apps/www/registry/default/block/chart-pie-label-list.tsx
deleted file mode 100644
index fa5f0038ce6..00000000000
--- a/apps/www/registry/default/block/chart-pie-label-list.tsx
+++ /dev/null
@@ -1,97 +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 {
-  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]"
-        >
-          <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/www/registry/default/block/chart-tooltip-default.tsx b/apps/www/registry/default/block/chart-tooltip-default.tsx
deleted file mode 100644
index a4951569374..00000000000
--- a/apps/www/registry/default/block/chart-tooltip-default.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 {
-  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 - 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/www/registry/default/block/chart-tooltip-indicator-line.tsx b/apps/www/registry/default/block/chart-tooltip-indicator-line.tsx
deleted file mode 100644
index c5cc9a676dc..00000000000
--- a/apps/www/registry/default/block/chart-tooltip-indicator-line.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-"use client"
-
-import { Bar, BarChart, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  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 - 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/www/registry/default/block/charts-01-chunk-0.tsx b/apps/www/registry/default/block/charts-01-chunk-0.tsx
deleted file mode 100644
index f854ced977e..00000000000
--- a/apps/www/registry/default/block/charts-01-chunk-0.tsx
+++ /dev/null
@@ -1,147 +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="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>
-  )
-}
diff --git a/apps/www/registry/default/block/charts-01-chunk-1.tsx b/apps/www/registry/default/block/charts-01-chunk-1.tsx
deleted file mode 100644
index c949cc06b77..00000000000
--- a/apps/www/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-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>
-  )
-}
diff --git a/apps/www/registry/default/block/charts-01-chunk-2.tsx b/apps/www/registry/default/block/charts-01-chunk-2.tsx
deleted file mode 100644
index f233b2facc1..00000000000
--- a/apps/www/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-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>
-  )
-}
diff --git a/apps/www/registry/default/block/charts-01-chunk-3.tsx b/apps/www/registry/default/block/charts-01-chunk-3.tsx
deleted file mode 100644
index 44d408b7848..00000000000
--- a/apps/www/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-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>
-  )
-}
diff --git a/apps/www/registry/default/block/charts-01-chunk-4.tsx b/apps/www/registry/default/block/charts-01-chunk-4.tsx
deleted file mode 100644
index 5ac2c7c52a2..00000000000
--- a/apps/www/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-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>
-  )
-}
diff --git a/apps/www/registry/default/block/charts-01-chunk-5.tsx b/apps/www/registry/default/block/charts-01-chunk-5.tsx
deleted file mode 100644
index d7ef4ab46dc..00000000000
--- a/apps/www/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-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>
-  )
-}
diff --git a/apps/www/registry/default/block/charts-01-chunk-6.tsx b/apps/www/registry/default/block/charts-01-chunk-6.tsx
deleted file mode 100644
index 27fed222a5c..00000000000
--- a/apps/www/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-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>
-  )
-}
diff --git a/apps/www/registry/default/block/charts-01-chunk-7.tsx b/apps/www/registry/default/block/charts-01-chunk-7.tsx
deleted file mode 100644
index e3b58ee8f6b..00000000000
--- a/apps/www/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="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>
-  )
-}
diff --git a/apps/www/registry/default/block/charts-01.tsx b/apps/www/registry/default/block/charts-01.tsx
deleted file mode 100644
index cfad88650a1..00000000000
--- a/apps/www/registry/default/block/charts-01.tsx
+++ /dev/null
@@ -1,895 +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="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/www/registry/default/block/dashboard-01-chunk-0.tsx b/apps/www/registry/default/block/dashboard-01-chunk-0.tsx
deleted file mode 100644
index 4fe27e7c82f..00000000000
--- a/apps/www/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="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>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-01-chunk-1.tsx b/apps/www/registry/default/block/dashboard-01-chunk-1.tsx
deleted file mode 100644
index ec3ac821535..00000000000
--- a/apps/www/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="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>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-01-chunk-2.tsx b/apps/www/registry/default/block/dashboard-01-chunk-2.tsx
deleted file mode 100644
index 312104c53f2..00000000000
--- a/apps/www/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="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>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-01-chunk-3.tsx b/apps/www/registry/default/block/dashboard-01-chunk-3.tsx
deleted file mode 100644
index 43252bbc4dd..00000000000
--- a/apps/www/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="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>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-01-chunk-4.tsx b/apps/www/registry/default/block/dashboard-01-chunk-4.tsx
deleted file mode 100644
index 59b3088227a..00000000000
--- a/apps/www/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="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>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-01-chunk-5.tsx b/apps/www/registry/default/block/dashboard-01-chunk-5.tsx
deleted file mode 100644
index af5efea9b7b..00000000000
--- a/apps/www/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 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>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-01.tsx b/apps/www/registry/default/block/dashboard-01.tsx
deleted file mode 100644
index 430bae9b200..00000000000
--- a/apps/www/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="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/www/registry/default/block/dashboard-02-chunk-0.tsx b/apps/www/registry/default/block/dashboard-02-chunk-0.tsx
deleted file mode 100644
index de9cf4fa936..00000000000
--- a/apps/www/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/www/registry/default/block/dashboard-02-chunk-1.tsx b/apps/www/registry/default/block/dashboard-02-chunk-1.tsx
deleted file mode 100644
index 63cf0f308b8..00000000000
--- a/apps/www/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-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>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-02.tsx b/apps/www/registry/default/block/dashboard-02.tsx
deleted file mode 100644
index f9224b5257f..00000000000
--- a/apps/www/registry/default/block/dashboard-02.tsx
+++ /dev/null
@@ -1,247 +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="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/www/registry/default/block/dashboard-03-chunk-0.tsx b/apps/www/registry/default/block/dashboard-03-chunk-0.tsx
deleted file mode 100644
index 54bf64ef1b3..00000000000
--- a/apps/www/registry/default/block/dashboard-03-chunk-0.tsx
+++ /dev/null
@@ -1,128 +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="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>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-03-chunk-1.tsx b/apps/www/registry/default/block/dashboard-03-chunk-1.tsx
deleted file mode 100644
index d6fb596f282..00000000000
--- a/apps/www/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="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring"
-      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/www/registry/default/block/dashboard-03.tsx b/apps/www/registry/default/block/dashboard-03.tsx
deleted file mode 100644
index 8b8ba39e308..00000000000
--- a/apps/www/registry/default/block/dashboard-03.tsx
+++ /dev/null
@@ -1,464 +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="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-[57px] 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/www/registry/default/block/dashboard-04-chunk-0.tsx b/apps/www/registry/default/block/dashboard-04-chunk-0.tsx
deleted file mode 100644
index 406f27e0896..00000000000
--- a/apps/www/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="grid gap-4 text-sm text-muted-foreground"
-      x-chunk="dashboard-04-chunk-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>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-04-chunk-1.tsx b/apps/www/registry/default/block/dashboard-04-chunk-1.tsx
deleted file mode 100644
index 1572ff5d51d..00000000000
--- a/apps/www/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/www/registry/default/block/dashboard-04-chunk-2.tsx b/apps/www/registry/default/block/dashboard-04-chunk-2.tsx
deleted file mode 100644
index e3011466e0a..00000000000
--- a/apps/www/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/www/registry/default/block/dashboard-04.tsx b/apps/www/registry/default/block/dashboard-04.tsx
deleted file mode 100644
index d375d6b6d86..00000000000
--- a/apps/www/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="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/www/registry/default/block/dashboard-05-chunk-0.tsx b/apps/www/registry/default/block/dashboard-05-chunk-0.tsx
deleted file mode 100644
index 2fd31e9eab7..00000000000
--- a/apps/www/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/www/registry/default/block/dashboard-05-chunk-1.tsx b/apps/www/registry/default/block/dashboard-05-chunk-1.tsx
deleted file mode 100644
index 32589143461..00000000000
--- a/apps/www/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-xs text-muted-foreground">+25% from last week</div>
-      </CardContent>
-      <CardFooter>
-        <Progress value={25} aria-label="25% increase" />
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-05-chunk-2.tsx b/apps/www/registry/default/block/dashboard-05-chunk-2.tsx
deleted file mode 100644
index 7fdf1ccbd29..00000000000
--- a/apps/www/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-xs text-muted-foreground">
-          +10% from last month
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Progress value={12} aria-label="12% increase" />
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-05-chunk-3.tsx b/apps/www/registry/default/block/dashboard-05-chunk-3.tsx
deleted file mode 100644
index 91cb414544b..00000000000
--- a/apps/www/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="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">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">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>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-05-chunk-4.tsx b/apps/www/registry/default/block/dashboard-05-chunk-4.tsx
deleted file mode 100644
index 14236a63a1c..00000000000
--- a/apps/www/registry/default/block/dashboard-05-chunk-4.tsx
+++ /dev/null
@@ -1,189 +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="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>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-05.tsx b/apps/www/registry/default/block/dashboard-05.tsx
deleted file mode 100644
index ac80bc89aca..00000000000
--- a/apps/www/registry/default/block/dashboard-05.tsx
+++ /dev/null
@@ -1,726 +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="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-5">
-          <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-5">
-          <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-[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-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">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">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/www/registry/default/block/dashboard-06-chunk-0.tsx b/apps/www/registry/default/block/dashboard-06-chunk-0.tsx
deleted file mode 100644
index 810e0505a64..00000000000
--- a/apps/www/registry/default/block/dashboard-06-chunk-0.tsx
+++ /dev/null
@@ -1,289 +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="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 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="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 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="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 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="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 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="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 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="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>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-06.tsx b/apps/www/registry/default/block/dashboard-06.tsx
deleted file mode 100644
index a5ac9b8f720..00000000000
--- a/apps/www/registry/default/block/dashboard-06.tsx
+++ /dev/null
@@ -1,637 +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="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-5">
-          <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-5">
-          <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-[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="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-8 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-8 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 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="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 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="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 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="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 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="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 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="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 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="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/www/registry/default/block/dashboard-07-chunk-0.tsx b/apps/www/registry/default/block/dashboard-07-chunk-0.tsx
deleted file mode 100644
index 7722f9d0437..00000000000
--- a/apps/www/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/www/registry/default/block/dashboard-07-chunk-1.tsx b/apps/www/registry/default/block/dashboard-07-chunk-1.tsx
deleted file mode 100644
index c9999aeebba..00000000000
--- a/apps/www/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="h-3.5 w-3.5" />
-          Add Variant
-        </Button>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-07-chunk-2.tsx b/apps/www/registry/default/block/dashboard-07-chunk-2.tsx
deleted file mode 100644
index 09283164fe4..00000000000
--- a/apps/www/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/www/registry/default/block/dashboard-07-chunk-3.tsx b/apps/www/registry/default/block/dashboard-07-chunk-3.tsx
deleted file mode 100644
index 33e68377a1f..00000000000
--- a/apps/www/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/www/registry/default/block/dashboard-07-chunk-4.tsx b/apps/www/registry/default/block/dashboard-07-chunk-4.tsx
deleted file mode 100644
index 824ecd44628..00000000000
--- a/apps/www/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="h-4 w-4 text-muted-foreground" />
-              <span className="sr-only">Upload</span>
-            </button>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/default/block/dashboard-07-chunk-5.tsx b/apps/www/registry/default/block/dashboard-07-chunk-5.tsx
deleted file mode 100644
index 0a83a596346..00000000000
--- a/apps/www/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/www/registry/default/block/dashboard-07.tsx b/apps/www/registry/default/block/dashboard-07.tsx
deleted file mode 100644
index 0160ce62bfc..00000000000
--- a/apps/www/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="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-5">
-          <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-5">
-          <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-[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="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/www/registry/default/block/demo-sidebar-controlled.tsx b/apps/www/registry/default/block/demo-sidebar-controlled.tsx
deleted file mode 100644
index 22b1e8124a8..00000000000
--- a/apps/www/registry/default/block/demo-sidebar-controlled.tsx
+++ /dev/null
@@ -1,96 +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 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/www/registry/default/block/demo-sidebar-footer.tsx b/apps/www/registry/default/block/demo-sidebar-footer.tsx
deleted file mode 100644
index c0aae54ef38..00000000000
--- a/apps/www/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 items-center justify-between px-4 h-12">
-          <SidebarTrigger />
-        </header>
-      </SidebarInset>
-    </SidebarProvider>
-  )
-}
diff --git a/apps/www/registry/default/block/demo-sidebar-group-action.tsx b/apps/www/registry/default/block/demo-sidebar-group-action.tsx
deleted file mode 100644
index eb68c907a6f..00000000000
--- a/apps/www/registry/default/block/demo-sidebar-group-action.tsx
+++ /dev/null
@@ -1,79 +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/www/registry/default/block/demo-sidebar-group-collapsible.tsx b/apps/www/registry/default/block/demo-sidebar-group-collapsible.tsx
deleted file mode 100644
index eb47f53f4d6..00000000000
--- a/apps/www/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="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/www/registry/default/block/demo-sidebar-group.tsx b/apps/www/registry/default/block/demo-sidebar-group.tsx
deleted file mode 100644
index 65d1d41626a..00000000000
--- a/apps/www/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/www/registry/default/block/demo-sidebar-header.tsx b/apps/www/registry/default/block/demo-sidebar-header.tsx
deleted file mode 100644
index cb1accc46e1..00000000000
--- a/apps/www/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 items-center justify-between px-4 h-12">
-          <SidebarTrigger />
-        </header>
-      </SidebarInset>
-    </SidebarProvider>
-  )
-}
diff --git a/apps/www/registry/default/block/demo-sidebar-menu-action.tsx b/apps/www/registry/default/block/demo-sidebar-menu-action.tsx
deleted file mode 100644
index 4887129c79c..00000000000
--- a/apps/www/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/www/registry/default/block/demo-sidebar-menu-badge.tsx b/apps/www/registry/default/block/demo-sidebar-menu-badge.tsx
deleted file mode 100644
index 835fdcc5c41..00000000000
--- a/apps/www/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/www/registry/default/block/demo-sidebar-menu-collapsible.tsx b/apps/www/registry/default/block/demo-sidebar-menu-collapsible.tsx
deleted file mode 100644
index a2745d08cef..00000000000
--- a/apps/www/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="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/www/registry/default/block/demo-sidebar-menu-sub.tsx b/apps/www/registry/default/block/demo-sidebar-menu-sub.tsx
deleted file mode 100644
index 437326bb0a6..00000000000
--- a/apps/www/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/www/registry/default/block/demo-sidebar-menu.tsx b/apps/www/registry/default/block/demo-sidebar-menu.tsx
deleted file mode 100644
index db3e83a8a0a..00000000000
--- a/apps/www/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/www/registry/default/block/demo-sidebar-rsc.tsx b/apps/www/registry/default/block/demo-sidebar-rsc.tsx
deleted file mode 100644
index 8912b2e18b0..00000000000
--- a/apps/www/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/www/registry/default/block/demo-sidebar.tsx b/apps/www/registry/default/block/demo-sidebar.tsx
deleted file mode 100644
index 75b173dfe45..00000000000
--- a/apps/www/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 items-center justify-between px-4 h-12">
-          <SidebarTrigger />
-        </header>
-      </SidebarInset>
-    </SidebarProvider>
-  )
-}
diff --git a/apps/www/registry/default/block/login-01/components/login-form.tsx b/apps/www/registry/default/block/login-01/components/login-form.tsx
deleted file mode 100644
index e5504442469..00000000000
--- a/apps/www/registry/default/block/login-01/components/login-form.tsx
+++ /dev/null
@@ -1,59 +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/www/registry/default/block/login-01/page.tsx b/apps/www/registry/default/block/login-01/page.tsx
deleted file mode 100644
index b4b8a2f7127..00000000000
--- a/apps/www/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/www/registry/default/block/sidebar-01/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-01/components/app-sidebar.tsx
deleted file mode 100644
index 67ac73c9a87..00000000000
--- a/apps/www/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/www/registry/default/block/sidebar-01/page.tsx b/apps/www/registry/default/block/sidebar-01/page.tsx
deleted file mode 100644
index 2a3d45f69ad..00000000000
--- a/apps/www/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="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/www/registry/default/block/sidebar-02/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-02/components/app-sidebar.tsx
deleted file mode 100644
index e5d3354ce0f..00000000000
--- a/apps/www/registry/default/block/sidebar-02/components/app-sidebar.tsx
+++ /dev/null
@@ -1,215 +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-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/www/registry/default/block/sidebar-02/page.tsx b/apps/www/registry/default/block/sidebar-02/page.tsx
deleted file mode 100644
index 58926063f60..00000000000
--- a/apps/www/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="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/www/registry/default/block/sidebar-03/page.tsx b/apps/www/registry/default/block/sidebar-03/page.tsx
deleted file mode 100644
index 14663d4cc2a..00000000000
--- a/apps/www/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="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/www/registry/default/block/sidebar-04/page.tsx b/apps/www/registry/default/block/sidebar-04/page.tsx
deleted file mode 100644
index d81bf6e7894..00000000000
--- a/apps/www/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="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/www/registry/default/block/sidebar-05/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-05/components/app-sidebar.tsx
deleted file mode 100644
index ab86a3573ed..00000000000
--- a/apps/www/registry/default/block/sidebar-05/components/app-sidebar.tsx
+++ /dev/null
@@ -1,228 +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="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/www/registry/default/block/sidebar-05/page.tsx b/apps/www/registry/default/block/sidebar-05/page.tsx
deleted file mode 100644
index 396283c4114..00000000000
--- a/apps/www/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="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/www/registry/default/block/sidebar-06/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-06/components/app-sidebar.tsx
deleted file mode 100644
index 8f9f1b355a3..00000000000
--- a/apps/www/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="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/www/registry/default/block/sidebar-06/page.tsx b/apps/www/registry/default/block/sidebar-06/page.tsx
deleted file mode 100644
index d58fc8701ce..00000000000
--- a/apps/www/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="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/www/registry/default/block/sidebar-07/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-07/components/app-sidebar.tsx
deleted file mode 100644
index 9965c1eb3a0..00000000000
--- a/apps/www/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/shadcn.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/www/registry/default/block/sidebar-07/page.tsx b/apps/www/registry/default/block/sidebar-07/page.tsx
deleted file mode 100644
index 9e5f2bbb271..00000000000
--- a/apps/www/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="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/www/registry/default/block/sidebar-08/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-08/components/app-sidebar.tsx
deleted file mode 100644
index 497472727b8..00000000000
--- a/apps/www/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/shadcn.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/www/registry/default/block/sidebar-08/page.tsx b/apps/www/registry/default/block/sidebar-08/page.tsx
deleted file mode 100644
index 247b000b947..00000000000
--- a/apps/www/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="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/www/registry/default/block/sidebar-09/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-09/components/app-sidebar.tsx
deleted file mode 100644
index 1feb5e0d208..00000000000
--- a/apps/www/registry/default/block/sidebar-09/components/app-sidebar.tsx
+++ /dev/null
@@ -1,262 +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/shadcn.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/www/registry/default/block/sidebar-09/page.tsx b/apps/www/registry/default/block/sidebar-09/page.tsx
deleted file mode 100644
index 8b06d835ec3..00000000000
--- a/apps/www/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="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/www/registry/default/block/sidebar-10/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-10/components/app-sidebar.tsx
deleted file mode 100644
index 81f2d3c9342..00000000000
--- a/apps/www/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/www/registry/default/block/sidebar-10/page.tsx b/apps/www/registry/default/block/sidebar-10/page.tsx
deleted file mode 100644
index e2ea56d5c9c..00000000000
--- a/apps/www/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="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/www/registry/default/block/sidebar-11/page.tsx b/apps/www/registry/default/block/sidebar-11/page.tsx
deleted file mode 100644
index 86a2db98e8a..00000000000
--- a/apps/www/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="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/www/registry/default/block/sidebar-12/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-12/components/app-sidebar.tsx
deleted file mode 100644
index fab237283f8..00000000000
--- a/apps/www/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/shadcn.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/www/registry/default/block/sidebar-12/page.tsx b/apps/www/registry/default/block/sidebar-12/page.tsx
deleted file mode 100644
index c6d09947fd5..00000000000
--- a/apps/www/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="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/www/registry/default/block/sidebar-13/page.tsx b/apps/www/registry/default/block/sidebar-13/page.tsx
deleted file mode 100644
index 90246ea6134..00000000000
--- a/apps/www/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/www/registry/default/block/sidebar-14/page.tsx b/apps/www/registry/default/block/sidebar-14/page.tsx
deleted file mode 100644
index 3ef694923a4..00000000000
--- a/apps/www/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="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/www/registry/default/block/sidebar-15/components/sidebar-left.tsx b/apps/www/registry/default/block/sidebar-15/components/sidebar-left.tsx
deleted file mode 100644
index f61eb945985..00000000000
--- a/apps/www/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/www/registry/default/block/sidebar-15/components/sidebar-right.tsx b/apps/www/registry/default/block/sidebar-15/components/sidebar-right.tsx
deleted file mode 100644
index d95cd673c43..00000000000
--- a/apps/www/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/shadcn.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/www/registry/default/block/sidebar-15/page.tsx b/apps/www/registry/default/block/sidebar-15/page.tsx
deleted file mode 100644
index f7f3966a4c1..00000000000
--- a/apps/www/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="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/www/registry/default/blocks/login-01/components/login-form.tsx b/apps/www/registry/default/blocks/login-01/components/login-form.tsx
new file mode 100644
index 00000000000..d5a73214d54
--- /dev/null
+++ b/apps/www/registry/default/blocks/login-01/components/login-form.tsx
@@ -0,0 +1,68 @@
+import { cn } from "@/registry/default/lib/utils"
+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({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div className={cn("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/www/registry/default/blocks/login-01/page.tsx b/apps/www/registry/default/blocks/login-01/page.tsx
new file mode 100644
index 00000000000..6e1c2cb4db1
--- /dev/null
+++ b/apps/www/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/www/registry/default/blocks/login-02/components/login-form.tsx b/apps/www/registry/default/blocks/login-02/components/login-form.tsx
new file mode 100644
index 00000000000..d0c7f1923af
--- /dev/null
+++ b/apps/www/registry/default/blocks/login-02/components/login-form.tsx
@@ -0,0 +1,61 @@
+import { cn } from "@/registry/default/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"form">) {
+  return (
+    <form className={cn("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">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <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/www/registry/default/blocks/login-02/page.tsx b/apps/www/registry/default/blocks/login-02/page.tsx
new file mode 100644
index 00000000000..56b73d32467
--- /dev/null
+++ b/apps/www/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/www/registry/default/blocks/login-03/components/login-form.tsx b/apps/www/registry/default/blocks/login-03/components/login-form.tsx
new file mode 100644
index 00000000000..5198cf63782
--- /dev/null
+++ b/apps/www/registry/default/blocks/login-03/components/login-form.tsx
@@ -0,0 +1,96 @@
+import { cn } from "@/registry/default/lib/utils"
+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({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div className={cn("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">
+                  <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>
+                  Login 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>
+                  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/www/registry/default/blocks/login-03/page.tsx b/apps/www/registry/default/blocks/login-03/page.tsx
new file mode 100644
index 00000000000..15a0ca451c8
--- /dev/null
+++ b/apps/www/registry/default/blocks/login-03/page.tsx
@@ -0,0 +1,19 @@
+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/www/registry/default/blocks/login-04/components/login-form.tsx b/apps/www/registry/default/blocks/login-04/components/login-form.tsx
new file mode 100644
index 00000000000..fa72a5d4b74
--- /dev/null
+++ b/apps/www/registry/default/blocks/login-04/components/login-form.tsx
@@ -0,0 +1,104 @@
+import { cn } from "@/registry/default/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import { Card, CardContent } from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div className={cn("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">
+                  <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>
+                  <span className="sr-only">Login with Apple</span>
+                </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>
+                  <span className="sr-only">Login with Google</span>
+                </Button>
+                <Button variant="outline" className="w-full">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <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/www/registry/default/blocks/login-04/page.tsx b/apps/www/registry/default/blocks/login-04/page.tsx
new file mode 100644
index 00000000000..d302b4fa447
--- /dev/null
+++ b/apps/www/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/www/registry/default/blocks/login-05/components/login-form.tsx b/apps/www/registry/default/blocks/login-05/components/login-form.tsx
new file mode 100644
index 00000000000..43a11bd495e
--- /dev/null
+++ b/apps/www/registry/default/blocks/login-05/components/login-form.tsx
@@ -0,0 +1,81 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { cn } from "@/registry/default/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div className={cn("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/www/registry/default/blocks/login-05/page.tsx b/apps/www/registry/default/blocks/login-05/page.tsx
new file mode 100644
index 00000000000..b9baa00d537
--- /dev/null
+++ b/apps/www/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/www/registry/default/blocks/sidebar-01/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-01/components/app-sidebar.tsx
new file mode 100644
index 00000000000..82613952bc0
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-01/components/app-sidebar.tsx
@@ -0,0 +1,182 @@
+import * as React from "react"
+
+import { SearchForm } from "@/registry/default/blocks/sidebar-01/components/search-form"
+import { VersionSwitcher } from "@/registry/default/blocks/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/www/registry/default/block/sidebar-01/components/search-form.tsx b/apps/www/registry/default/blocks/sidebar-01/components/search-form.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-01/components/search-form.tsx
rename to apps/www/registry/default/blocks/sidebar-01/components/search-form.tsx
diff --git a/apps/www/registry/default/block/sidebar-01/components/version-switcher.tsx b/apps/www/registry/default/blocks/sidebar-01/components/version-switcher.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-01/components/version-switcher.tsx
rename to apps/www/registry/default/blocks/sidebar-01/components/version-switcher.tsx
diff --git a/apps/www/registry/default/blocks/sidebar-01/page.tsx b/apps/www/registry/default/blocks/sidebar-01/page.tsx
new file mode 100644
index 00000000000..090e3eb248d
--- /dev/null
+++ b/apps/www/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/www/registry/default/blocks/sidebar-02/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-02/components/app-sidebar.tsx
new file mode 100644
index 00000000000..1ad5860bb49
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-02/components/app-sidebar.tsx
@@ -0,0 +1,215 @@
+import * as React from "react"
+import { ChevronRight } from "lucide-react"
+
+import { SearchForm } from "@/registry/default/blocks/sidebar-02/components/search-form"
+import { VersionSwitcher } from "@/registry/default/blocks/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-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/www/registry/default/block/sidebar-02/components/search-form.tsx b/apps/www/registry/default/blocks/sidebar-02/components/search-form.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-02/components/search-form.tsx
rename to apps/www/registry/default/blocks/sidebar-02/components/search-form.tsx
diff --git a/apps/www/registry/default/block/sidebar-02/components/version-switcher.tsx b/apps/www/registry/default/blocks/sidebar-02/components/version-switcher.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-02/components/version-switcher.tsx
rename to apps/www/registry/default/blocks/sidebar-02/components/version-switcher.tsx
diff --git a/apps/www/registry/default/blocks/sidebar-02/page.tsx b/apps/www/registry/default/blocks/sidebar-02/page.tsx
new file mode 100644
index 00000000000..179af7cf288
--- /dev/null
+++ b/apps/www/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/www/registry/default/block/sidebar-03/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-03/components/app-sidebar.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-03/components/app-sidebar.tsx
rename to apps/www/registry/default/blocks/sidebar-03/components/app-sidebar.tsx
diff --git a/apps/www/registry/default/blocks/sidebar-03/page.tsx b/apps/www/registry/default/blocks/sidebar-03/page.tsx
new file mode 100644
index 00000000000..a3b34b10804
--- /dev/null
+++ b/apps/www/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/www/registry/default/block/sidebar-04/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-04/components/app-sidebar.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-04/components/app-sidebar.tsx
rename to apps/www/registry/default/blocks/sidebar-04/components/app-sidebar.tsx
diff --git a/apps/www/registry/default/blocks/sidebar-04/page.tsx b/apps/www/registry/default/blocks/sidebar-04/page.tsx
new file mode 100644
index 00000000000..8a0dbbff759
--- /dev/null
+++ b/apps/www/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/www/registry/default/blocks/sidebar-05/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-05/components/app-sidebar.tsx
new file mode 100644
index 00000000000..bb9b8a853f2
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-05/components/app-sidebar.tsx
@@ -0,0 +1,228 @@
+import * as React from "react"
+import { GalleryVerticalEnd, Minus, Plus } from "lucide-react"
+
+import { SearchForm } from "@/registry/default/blocks/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="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/www/registry/default/block/sidebar-05/components/search-form.tsx b/apps/www/registry/default/blocks/sidebar-05/components/search-form.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-05/components/search-form.tsx
rename to apps/www/registry/default/blocks/sidebar-05/components/search-form.tsx
diff --git a/apps/www/registry/default/blocks/sidebar-05/page.tsx b/apps/www/registry/default/blocks/sidebar-05/page.tsx
new file mode 100644
index 00000000000..3bfc7a8b3f1
--- /dev/null
+++ b/apps/www/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/www/registry/default/blocks/sidebar-06/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-06/components/app-sidebar.tsx
new file mode 100644
index 00000000000..b6e607ecb7e
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-06/components/app-sidebar.tsx
@@ -0,0 +1,179 @@
+import * as React from "react"
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { NavMain } from "@/registry/default/blocks/sidebar-06/components/nav-main"
+import { SidebarOptInForm } from "@/registry/default/blocks/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="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/www/registry/default/block/sidebar-06/components/nav-main.tsx b/apps/www/registry/default/blocks/sidebar-06/components/nav-main.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-06/components/nav-main.tsx
rename to apps/www/registry/default/blocks/sidebar-06/components/nav-main.tsx
diff --git a/apps/www/registry/default/block/sidebar-06/components/sidebar-opt-in-form.tsx b/apps/www/registry/default/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-06/components/sidebar-opt-in-form.tsx
rename to apps/www/registry/default/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
diff --git a/apps/www/registry/default/blocks/sidebar-06/page.tsx b/apps/www/registry/default/blocks/sidebar-06/page.tsx
new file mode 100644
index 00000000000..028a7ba6209
--- /dev/null
+++ b/apps/www/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/www/registry/default/blocks/sidebar-07/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-07/components/app-sidebar.tsx
new file mode 100644
index 00000000000..0d18496fb2e
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-07/components/app-sidebar.tsx
@@ -0,0 +1,175 @@
+"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/blocks/sidebar-07/components/nav-main"
+import { NavProjects } from "@/registry/default/blocks/sidebar-07/components/nav-projects"
+import { NavUser } from "@/registry/default/blocks/sidebar-07/components/nav-user"
+import { TeamSwitcher } from "@/registry/default/blocks/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/shadcn.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/www/registry/default/block/sidebar-07/components/nav-main.tsx b/apps/www/registry/default/blocks/sidebar-07/components/nav-main.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-07/components/nav-main.tsx
rename to apps/www/registry/default/blocks/sidebar-07/components/nav-main.tsx
diff --git a/apps/www/registry/default/block/sidebar-07/components/nav-projects.tsx b/apps/www/registry/default/blocks/sidebar-07/components/nav-projects.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-07/components/nav-projects.tsx
rename to apps/www/registry/default/blocks/sidebar-07/components/nav-projects.tsx
diff --git a/apps/www/registry/default/block/sidebar-07/components/nav-user.tsx b/apps/www/registry/default/blocks/sidebar-07/components/nav-user.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-07/components/nav-user.tsx
rename to apps/www/registry/default/blocks/sidebar-07/components/nav-user.tsx
diff --git a/apps/www/registry/default/block/sidebar-07/components/team-switcher.tsx b/apps/www/registry/default/blocks/sidebar-07/components/team-switcher.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-07/components/team-switcher.tsx
rename to apps/www/registry/default/blocks/sidebar-07/components/team-switcher.tsx
diff --git a/apps/www/registry/default/blocks/sidebar-07/page.tsx b/apps/www/registry/default/blocks/sidebar-07/page.tsx
new file mode 100644
index 00000000000..1627996458d
--- /dev/null
+++ b/apps/www/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/www/registry/default/blocks/sidebar-08/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-08/components/app-sidebar.tsx
new file mode 100644
index 00000000000..72f594843b6
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-08/components/app-sidebar.tsx
@@ -0,0 +1,185 @@
+"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/blocks/sidebar-08/components/nav-main"
+import { NavProjects } from "@/registry/default/blocks/sidebar-08/components/nav-projects"
+import { NavSecondary } from "@/registry/default/blocks/sidebar-08/components/nav-secondary"
+import { NavUser } from "@/registry/default/blocks/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/shadcn.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/www/registry/default/block/sidebar-08/components/nav-main.tsx b/apps/www/registry/default/blocks/sidebar-08/components/nav-main.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-08/components/nav-main.tsx
rename to apps/www/registry/default/blocks/sidebar-08/components/nav-main.tsx
diff --git a/apps/www/registry/default/block/sidebar-08/components/nav-projects.tsx b/apps/www/registry/default/blocks/sidebar-08/components/nav-projects.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-08/components/nav-projects.tsx
rename to apps/www/registry/default/blocks/sidebar-08/components/nav-projects.tsx
diff --git a/apps/www/registry/default/block/sidebar-08/components/nav-secondary.tsx b/apps/www/registry/default/blocks/sidebar-08/components/nav-secondary.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-08/components/nav-secondary.tsx
rename to apps/www/registry/default/blocks/sidebar-08/components/nav-secondary.tsx
diff --git a/apps/www/registry/default/block/sidebar-08/components/nav-user.tsx b/apps/www/registry/default/blocks/sidebar-08/components/nav-user.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-08/components/nav-user.tsx
rename to apps/www/registry/default/blocks/sidebar-08/components/nav-user.tsx
diff --git a/apps/www/registry/default/blocks/sidebar-08/page.tsx b/apps/www/registry/default/blocks/sidebar-08/page.tsx
new file mode 100644
index 00000000000..052b62b38cf
--- /dev/null
+++ b/apps/www/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/www/registry/default/blocks/sidebar-09/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-09/components/app-sidebar.tsx
new file mode 100644
index 00000000000..f86500d14e2
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-09/components/app-sidebar.tsx
@@ -0,0 +1,262 @@
+"use client"
+
+import * as React from "react"
+import { ArchiveX, Command, File, Inbox, Send, Trash2 } from "lucide-react"
+
+import { NavUser } from "@/registry/default/blocks/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/shadcn.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/www/registry/default/block/sidebar-09/components/nav-user.tsx b/apps/www/registry/default/blocks/sidebar-09/components/nav-user.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-09/components/nav-user.tsx
rename to apps/www/registry/default/blocks/sidebar-09/components/nav-user.tsx
diff --git a/apps/www/registry/default/blocks/sidebar-09/page.tsx b/apps/www/registry/default/blocks/sidebar-09/page.tsx
new file mode 100644
index 00000000000..6ed155ad79d
--- /dev/null
+++ b/apps/www/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/www/registry/default/blocks/sidebar-10/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-10/components/app-sidebar.tsx
new file mode 100644
index 00000000000..180c8148abf
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-10/components/app-sidebar.tsx
@@ -0,0 +1,276 @@
+"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/blocks/sidebar-10/components/nav-favorites"
+import { NavMain } from "@/registry/default/blocks/sidebar-10/components/nav-main"
+import { NavSecondary } from "@/registry/default/blocks/sidebar-10/components/nav-secondary"
+import { NavWorkspaces } from "@/registry/default/blocks/sidebar-10/components/nav-workspaces"
+import { TeamSwitcher } from "@/registry/default/blocks/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/www/registry/default/block/sidebar-10/components/nav-actions.tsx b/apps/www/registry/default/blocks/sidebar-10/components/nav-actions.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-10/components/nav-actions.tsx
rename to apps/www/registry/default/blocks/sidebar-10/components/nav-actions.tsx
diff --git a/apps/www/registry/default/block/sidebar-10/components/nav-favorites.tsx b/apps/www/registry/default/blocks/sidebar-10/components/nav-favorites.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-10/components/nav-favorites.tsx
rename to apps/www/registry/default/blocks/sidebar-10/components/nav-favorites.tsx
diff --git a/apps/www/registry/default/block/sidebar-10/components/nav-main.tsx b/apps/www/registry/default/blocks/sidebar-10/components/nav-main.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-10/components/nav-main.tsx
rename to apps/www/registry/default/blocks/sidebar-10/components/nav-main.tsx
diff --git a/apps/www/registry/default/block/sidebar-10/components/nav-secondary.tsx b/apps/www/registry/default/blocks/sidebar-10/components/nav-secondary.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-10/components/nav-secondary.tsx
rename to apps/www/registry/default/blocks/sidebar-10/components/nav-secondary.tsx
diff --git a/apps/www/registry/default/block/sidebar-10/components/nav-workspaces.tsx b/apps/www/registry/default/blocks/sidebar-10/components/nav-workspaces.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-10/components/nav-workspaces.tsx
rename to apps/www/registry/default/blocks/sidebar-10/components/nav-workspaces.tsx
diff --git a/apps/www/registry/default/block/sidebar-10/components/team-switcher.tsx b/apps/www/registry/default/blocks/sidebar-10/components/team-switcher.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-10/components/team-switcher.tsx
rename to apps/www/registry/default/blocks/sidebar-10/components/team-switcher.tsx
diff --git a/apps/www/registry/default/blocks/sidebar-10/page.tsx b/apps/www/registry/default/blocks/sidebar-10/page.tsx
new file mode 100644
index 00000000000..a3570860058
--- /dev/null
+++ b/apps/www/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/www/registry/default/block/sidebar-11/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-11/components/app-sidebar.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-11/components/app-sidebar.tsx
rename to apps/www/registry/default/blocks/sidebar-11/components/app-sidebar.tsx
diff --git a/apps/www/registry/default/blocks/sidebar-11/page.tsx b/apps/www/registry/default/blocks/sidebar-11/page.tsx
new file mode 100644
index 00000000000..3e60984c5eb
--- /dev/null
+++ b/apps/www/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/www/registry/default/blocks/sidebar-12/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-12/components/app-sidebar.tsx
new file mode 100644
index 00000000000..82ea18d88e5
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-12/components/app-sidebar.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { Plus } from "lucide-react"
+
+import { Calendars } from "@/registry/default/blocks/sidebar-12/components/calendars"
+import { DatePicker } from "@/registry/default/blocks/sidebar-12/components/date-picker"
+import { NavUser } from "@/registry/default/blocks/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/shadcn.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/www/registry/default/block/sidebar-12/components/calendars.tsx b/apps/www/registry/default/blocks/sidebar-12/components/calendars.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-12/components/calendars.tsx
rename to apps/www/registry/default/blocks/sidebar-12/components/calendars.tsx
diff --git a/apps/www/registry/default/block/sidebar-12/components/date-picker.tsx b/apps/www/registry/default/blocks/sidebar-12/components/date-picker.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-12/components/date-picker.tsx
rename to apps/www/registry/default/blocks/sidebar-12/components/date-picker.tsx
diff --git a/apps/www/registry/default/block/sidebar-12/components/nav-user.tsx b/apps/www/registry/default/blocks/sidebar-12/components/nav-user.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-12/components/nav-user.tsx
rename to apps/www/registry/default/blocks/sidebar-12/components/nav-user.tsx
diff --git a/apps/www/registry/default/blocks/sidebar-12/page.tsx b/apps/www/registry/default/blocks/sidebar-12/page.tsx
new file mode 100644
index 00000000000..ac96a460267
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-12/page.tsx
@@ -0,0 +1,41 @@
+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/www/registry/default/block/sidebar-13/components/settings-dialog.tsx b/apps/www/registry/default/blocks/sidebar-13/components/settings-dialog.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-13/components/settings-dialog.tsx
rename to apps/www/registry/default/blocks/sidebar-13/components/settings-dialog.tsx
diff --git a/apps/www/registry/default/blocks/sidebar-13/page.tsx b/apps/www/registry/default/blocks/sidebar-13/page.tsx
new file mode 100644
index 00000000000..7bebc464af7
--- /dev/null
+++ b/apps/www/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/www/registry/default/block/sidebar-14/components/app-sidebar.tsx b/apps/www/registry/default/blocks/sidebar-14/components/app-sidebar.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-14/components/app-sidebar.tsx
rename to apps/www/registry/default/blocks/sidebar-14/components/app-sidebar.tsx
diff --git a/apps/www/registry/default/blocks/sidebar-14/page.tsx b/apps/www/registry/default/blocks/sidebar-14/page.tsx
new file mode 100644
index 00000000000..a299c067deb
--- /dev/null
+++ b/apps/www/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/www/registry/default/block/sidebar-15/components/calendars.tsx b/apps/www/registry/default/blocks/sidebar-15/components/calendars.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-15/components/calendars.tsx
rename to apps/www/registry/default/blocks/sidebar-15/components/calendars.tsx
diff --git a/apps/www/registry/default/block/sidebar-15/components/date-picker.tsx b/apps/www/registry/default/blocks/sidebar-15/components/date-picker.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-15/components/date-picker.tsx
rename to apps/www/registry/default/blocks/sidebar-15/components/date-picker.tsx
diff --git a/apps/www/registry/default/block/sidebar-15/components/nav-favorites.tsx b/apps/www/registry/default/blocks/sidebar-15/components/nav-favorites.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-15/components/nav-favorites.tsx
rename to apps/www/registry/default/blocks/sidebar-15/components/nav-favorites.tsx
diff --git a/apps/www/registry/default/block/sidebar-15/components/nav-main.tsx b/apps/www/registry/default/blocks/sidebar-15/components/nav-main.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-15/components/nav-main.tsx
rename to apps/www/registry/default/blocks/sidebar-15/components/nav-main.tsx
diff --git a/apps/www/registry/default/block/sidebar-15/components/nav-secondary.tsx b/apps/www/registry/default/blocks/sidebar-15/components/nav-secondary.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-15/components/nav-secondary.tsx
rename to apps/www/registry/default/blocks/sidebar-15/components/nav-secondary.tsx
diff --git a/apps/www/registry/default/block/sidebar-15/components/nav-user.tsx b/apps/www/registry/default/blocks/sidebar-15/components/nav-user.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-15/components/nav-user.tsx
rename to apps/www/registry/default/blocks/sidebar-15/components/nav-user.tsx
diff --git a/apps/www/registry/default/block/sidebar-15/components/nav-workspaces.tsx b/apps/www/registry/default/blocks/sidebar-15/components/nav-workspaces.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-15/components/nav-workspaces.tsx
rename to apps/www/registry/default/blocks/sidebar-15/components/nav-workspaces.tsx
diff --git a/apps/www/registry/default/blocks/sidebar-15/components/sidebar-left.tsx b/apps/www/registry/default/blocks/sidebar-15/components/sidebar-left.tsx
new file mode 100644
index 00000000000..9e512f857ca
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-15/components/sidebar-left.tsx
@@ -0,0 +1,278 @@
+"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/blocks/sidebar-15/components/nav-favorites"
+import { NavMain } from "@/registry/default/blocks/sidebar-15/components/nav-main"
+import { NavSecondary } from "@/registry/default/blocks/sidebar-15/components/nav-secondary"
+import { NavWorkspaces } from "@/registry/default/blocks/sidebar-15/components/nav-workspaces"
+import { TeamSwitcher } from "@/registry/default/blocks/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/www/registry/default/blocks/sidebar-15/components/sidebar-right.tsx b/apps/www/registry/default/blocks/sidebar-15/components/sidebar-right.tsx
new file mode 100644
index 00000000000..9cb89c8cdab
--- /dev/null
+++ b/apps/www/registry/default/blocks/sidebar-15/components/sidebar-right.tsx
@@ -0,0 +1,71 @@
+import * as React from "react"
+import { Plus } from "lucide-react"
+
+import { Calendars } from "@/registry/default/blocks/sidebar-15/components/calendars"
+import { DatePicker } from "@/registry/default/blocks/sidebar-15/components/date-picker"
+import { NavUser } from "@/registry/default/blocks/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/shadcn.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/www/registry/default/block/sidebar-15/components/team-switcher.tsx b/apps/www/registry/default/blocks/sidebar-15/components/team-switcher.tsx
similarity index 100%
rename from apps/www/registry/default/block/sidebar-15/components/team-switcher.tsx
rename to apps/www/registry/default/blocks/sidebar-15/components/team-switcher.tsx
diff --git a/apps/www/registry/default/blocks/sidebar-15/page.tsx b/apps/www/registry/default/blocks/sidebar-15/page.tsx
new file mode 100644
index 00000000000..3bf6087ecee
--- /dev/null
+++ b/apps/www/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/www/registry/default/charts/chart-area-axes.tsx b/apps/www/registry/default/charts/chart-area-axes.tsx
new file mode 100644
index 00000000000..e6c173dcb5a
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-area-axes.tsx
@@ -0,0 +1,110 @@
+"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 {
+  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/www/registry/default/charts/chart-area-default.tsx b/apps/www/registry/default/charts/chart-area-default.tsx
new file mode 100644
index 00000000000..925eb60367f
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-area-default.tsx
@@ -0,0 +1,94 @@
+"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 {
+  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/www/registry/default/charts/chart-area-gradient.tsx b/apps/www/registry/default/charts/chart-area-gradient.tsx
new file mode 100644
index 00000000000..0314f690fcd
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-area-gradient.tsx
@@ -0,0 +1,130 @@
+"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 {
+  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/www/registry/default/charts/chart-area-icons.tsx b/apps/www/registry/default/charts/chart-area-icons.tsx
new file mode 100644
index 00000000000..05d2e4ef0b0
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-area-icons.tsx
@@ -0,0 +1,112 @@
+"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 {
+  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/www/registry/default/charts/chart-area-interactive.tsx b/apps/www/registry/default/charts/chart-area-interactive.tsx
new file mode 100644
index 00000000000..16cbcca59f1
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-area-interactive.tsx
@@ -0,0 +1,266 @@
+"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 {
+  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/www/registry/default/charts/chart-area-legend.tsx b/apps/www/registry/default/charts/chart-area-legend.tsx
new file mode 100644
index 00000000000..9d7cfe3d1e2
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-area-legend.tsx
@@ -0,0 +1,110 @@
+"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 {
+  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/www/registry/default/charts/chart-area-linear.tsx b/apps/www/registry/default/charts/chart-area-linear.tsx
new file mode 100644
index 00000000000..4e584179940
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-area-linear.tsx
@@ -0,0 +1,94 @@
+"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 {
+  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/www/registry/default/charts/chart-area-stacked-expand.tsx b/apps/www/registry/default/charts/chart-area-stacked-expand.tsx
new file mode 100644
index 00000000000..ab66f895654
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-area-stacked-expand.tsx
@@ -0,0 +1,121 @@
+"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 {
+  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/www/registry/default/charts/chart-area-stacked.tsx b/apps/www/registry/default/charts/chart-area-stacked.tsx
new file mode 100644
index 00000000000..3820dd7a7b2
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-area-stacked.tsx
@@ -0,0 +1,107 @@
+"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 {
+  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/www/registry/default/charts/chart-area-step.tsx b/apps/www/registry/default/charts/chart-area-step.tsx
new file mode 100644
index 00000000000..4ca6623d268
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-area-step.tsx
@@ -0,0 +1,95 @@
+"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 {
+  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/www/registry/default/charts/chart-bar-active.tsx b/apps/www/registry/default/charts/chart-bar-active.tsx
new file mode 100644
index 00000000000..f1be5c77182
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-bar-default.tsx b/apps/www/registry/default/charts/chart-bar-default.tsx
new file mode 100644
index 00000000000..9fc5f15a157
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-bar-default.tsx
@@ -0,0 +1,75 @@
+"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 {
+  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/www/registry/default/charts/chart-bar-horizontal.tsx b/apps/www/registry/default/charts/chart-bar-horizontal.tsx
new file mode 100644
index 00000000000..ac74114ceea
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-bar-horizontal.tsx
@@ -0,0 +1,83 @@
+"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 {
+  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/www/registry/default/charts/chart-bar-interactive.tsx b/apps/www/registry/default/charts/chart-bar-interactive.tsx
new file mode 100644
index 00000000000..84bcc6a28c2
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-bar-interactive.tsx
@@ -0,0 +1,221 @@
+"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 {
+  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/www/registry/default/charts/chart-bar-label-custom.tsx b/apps/www/registry/default/charts/chart-bar-label-custom.tsx
new file mode 100644
index 00000000000..bd16655bc77
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-bar-label.tsx b/apps/www/registry/default/charts/chart-bar-label.tsx
new file mode 100644
index 00000000000..c7ebea70e06
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-bar-mixed.tsx b/apps/www/registry/default/charts/chart-bar-mixed.tsx
new file mode 100644
index 00000000000..fa3beea6fc9
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-bar-multiple.tsx b/apps/www/registry/default/charts/chart-bar-multiple.tsx
new file mode 100644
index 00000000000..39b80fa76f1
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-bar-multiple.tsx
@@ -0,0 +1,80 @@
+"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 {
+  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/www/registry/default/charts/chart-bar-negative.tsx b/apps/www/registry/default/charts/chart-bar-negative.tsx
new file mode 100644
index 00000000000..f9e3b3e360b
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-bar-negative.tsx
@@ -0,0 +1,79 @@
+"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 {
+  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/www/registry/default/charts/chart-bar-stacked.tsx b/apps/www/registry/default/charts/chart-bar-stacked.tsx
new file mode 100644
index 00000000000..211bfe6aeff
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-line-default.tsx b/apps/www/registry/default/charts/chart-line-default.tsx
new file mode 100644
index 00000000000..24972697fc1
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-line-dots-colors.tsx b/apps/www/registry/default/charts/chart-line-dots-colors.tsx
new file mode 100644
index 00000000000..e568ddd9900
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-line-dots-custom.tsx b/apps/www/registry/default/charts/chart-line-dots-custom.tsx
new file mode 100644
index 00000000000..4eae4da5759
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-line-dots.tsx b/apps/www/registry/default/charts/chart-line-dots.tsx
new file mode 100644
index 00000000000..d52f09148e6
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-line-interactive.tsx b/apps/www/registry/default/charts/chart-line-interactive.tsx
new file mode 100644
index 00000000000..6f618200719
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-line-interactive.tsx
@@ -0,0 +1,227 @@
+"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 {
+  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/www/registry/default/charts/chart-line-label-custom.tsx b/apps/www/registry/default/charts/chart-line-label-custom.tsx
new file mode 100644
index 00000000000..e6976bd892f
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-line-label.tsx b/apps/www/registry/default/charts/chart-line-label.tsx
new file mode 100644
index 00000000000..159e1031761
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-line-linear.tsx b/apps/www/registry/default/charts/chart-line-linear.tsx
new file mode 100644
index 00000000000..9d3e06f5e99
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-line-multiple.tsx b/apps/www/registry/default/charts/chart-line-multiple.tsx
new file mode 100644
index 00000000000..61ea1d960fe
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-line-multiple.tsx
@@ -0,0 +1,100 @@
+"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 {
+  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/www/registry/default/charts/chart-line-step.tsx b/apps/www/registry/default/charts/chart-line-step.tsx
new file mode 100644
index 00000000000..608bd5f628c
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-pie-donut-active.tsx b/apps/www/registry/default/charts/chart-pie-donut-active.tsx
new file mode 100644
index 00000000000..5a390419191
--- /dev/null
+++ b/apps/www/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 { PieSectorDataItem } from "recharts/types/polar/Pie"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  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/www/registry/default/charts/chart-pie-donut-text.tsx b/apps/www/registry/default/charts/chart-pie-donut-text.tsx
new file mode 100644
index 00000000000..ff5391ab1d3
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-pie-donut-text.tsx
@@ -0,0 +1,129 @@
+"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 {
+  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/www/registry/default/charts/chart-pie-donut.tsx b/apps/www/registry/default/charts/chart-pie-donut.tsx
new file mode 100644
index 00000000000..45d17ecdd27
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-pie-interactive.tsx b/apps/www/registry/default/charts/chart-pie-interactive.tsx
new file mode 100644
index 00000000000..e1abb04262c
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-pie-interactive.tsx
@@ -0,0 +1,192 @@
+"use client"
+
+import * as React from "react"
+import { Label, Pie, PieChart, Sector } from "recharts"
+import { PieSectorDataItem } from "recharts/types/polar/Pie"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  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/www/registry/default/charts/chart-pie-label-custom.tsx b/apps/www/registry/default/charts/chart-pie-label-custom.tsx
new file mode 100644
index 00000000000..4b8c616214e
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-pie-label-custom.tsx
@@ -0,0 +1,107 @@
+"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 {
+  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/www/registry/default/charts/chart-pie-label-list.tsx b/apps/www/registry/default/charts/chart-pie-label-list.tsx
new file mode 100644
index 00000000000..6b083fb02a1
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-pie-label-list.tsx
@@ -0,0 +1,97 @@
+"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 {
+  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/www/registry/default/charts/chart-pie-label.tsx b/apps/www/registry/default/charts/chart-pie-label.tsx
new file mode 100644
index 00000000000..26c294cd652
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-pie-label.tsx
@@ -0,0 +1,85 @@
+"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 {
+  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/www/registry/default/charts/chart-pie-legend.tsx b/apps/www/registry/default/charts/chart-pie-legend.tsx
new file mode 100644
index 00000000000..3e3d7534a82
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-pie-separator-none.tsx b/apps/www/registry/default/charts/chart-pie-separator-none.tsx
new file mode 100644
index 00000000000..08ec2b56338
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-pie-simple.tsx b/apps/www/registry/default/charts/chart-pie-simple.tsx
new file mode 100644
index 00000000000..5108126f71f
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-pie-stacked.tsx b/apps/www/registry/default/charts/chart-pie-stacked.tsx
new file mode 100644
index 00000000000..db8b0efbbc2
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-pie-stacked.tsx
@@ -0,0 +1,119 @@
+"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 {
+  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/www/registry/default/charts/chart-radar-default.tsx b/apps/www/registry/default/charts/chart-radar-default.tsx
new file mode 100644
index 00000000000..e4b41856847
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radar-default.tsx
@@ -0,0 +1,75 @@
+"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 {
+  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/www/registry/default/charts/chart-radar-dots.tsx b/apps/www/registry/default/charts/chart-radar-dots.tsx
new file mode 100644
index 00000000000..461a2295404
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radar-dots.tsx
@@ -0,0 +1,79 @@
+"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 {
+  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/www/registry/default/charts/chart-radar-grid-circle-fill.tsx b/apps/www/registry/default/charts/chart-radar-grid-circle-fill.tsx
new file mode 100644
index 00000000000..0bed543195d
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radar-grid-circle-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 {
+  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/www/registry/default/charts/chart-radar-grid-circle-no-lines.tsx b/apps/www/registry/default/charts/chart-radar-grid-circle-no-lines.tsx
new file mode 100644
index 00000000000..332a86b3cb3
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-radar-grid-circle.tsx b/apps/www/registry/default/charts/chart-radar-grid-circle.tsx
new file mode 100644
index 00000000000..e6b3a569c46
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-radar-grid-custom.tsx b/apps/www/registry/default/charts/chart-radar-grid-custom.tsx
new file mode 100644
index 00000000000..738d9f7c2a2
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radar-grid-custom.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 {
+  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/www/registry/default/charts/chart-radar-grid-fill.tsx b/apps/www/registry/default/charts/chart-radar-grid-fill.tsx
new file mode 100644
index 00000000000..182b08f51a8
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-radar-grid-none.tsx b/apps/www/registry/default/charts/chart-radar-grid-none.tsx
new file mode 100644
index 00000000000..348075e8322
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-radar-icons.tsx b/apps/www/registry/default/charts/chart-radar-icons.tsx
new file mode 100644
index 00000000000..efbbf89c8ba
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radar-icons.tsx
@@ -0,0 +1,94 @@
+"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 {
+  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/www/registry/default/charts/chart-radar-label-custom.tsx b/apps/www/registry/default/charts/chart-radar-label-custom.tsx
new file mode 100644
index 00000000000..4e65b8996dc
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-radar-legend.tsx b/apps/www/registry/default/charts/chart-radar-legend.tsx
new file mode 100644
index 00000000000..535bc82c07c
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radar-legend.tsx
@@ -0,0 +1,92 @@
+"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 {
+  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/www/registry/default/charts/chart-radar-lines-only.tsx b/apps/www/registry/default/charts/chart-radar-lines-only.tsx
new file mode 100644
index 00000000000..c6e0c52525e
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-radar-multiple.tsx b/apps/www/registry/default/charts/chart-radar-multiple.tsx
new file mode 100644
index 00000000000..2463d7ae313
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-radar-radius.tsx b/apps/www/registry/default/charts/chart-radar-radius.tsx
new file mode 100644
index 00000000000..22cbe8e1977
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radar-radius.tsx
@@ -0,0 +1,96 @@
+"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 {
+  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/www/registry/default/charts/chart-radial-grid.tsx b/apps/www/registry/default/charts/chart-radial-grid.tsx
new file mode 100644
index 00000000000..cc91ba2c8b3
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radial-grid.tsx
@@ -0,0 +1,89 @@
+"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 {
+  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/www/registry/default/charts/chart-radial-label.tsx b/apps/www/registry/default/charts/chart-radial-label.tsx
new file mode 100644
index 00000000000..179a919f6c0
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radial-label.tsx
@@ -0,0 +1,101 @@
+"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 {
+  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/www/registry/default/charts/chart-radial-shape.tsx b/apps/www/registry/default/charts/chart-radial-shape.tsx
new file mode 100644
index 00000000000..bd3754e986e
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radial-shape.tsx
@@ -0,0 +1,108 @@
+"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 { 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/www/registry/default/charts/chart-radial-simple.tsx b/apps/www/registry/default/charts/chart-radial-simple.tsx
new file mode 100644
index 00000000000..57a8030230c
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radial-simple.tsx
@@ -0,0 +1,88 @@
+"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 {
+  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/www/registry/default/charts/chart-radial-stacked.tsx b/apps/www/registry/default/charts/chart-radial-stacked.tsx
new file mode 100644
index 00000000000..a5b78f27fe5
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radial-stacked.tsx
@@ -0,0 +1,113 @@
+"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 {
+  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/www/registry/default/charts/chart-radial-text.tsx b/apps/www/registry/default/charts/chart-radial-text.tsx
new file mode 100644
index 00000000000..a798f66121a
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-radial-text.tsx
@@ -0,0 +1,109 @@
+"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 { 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/www/registry/default/charts/chart-tooltip-advanced.tsx b/apps/www/registry/default/charts/chart-tooltip-advanced.tsx
new file mode 100644
index 00000000000..7a700798212
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-tooltip-advanced.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  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/www/registry/default/charts/chart-tooltip-default.tsx b/apps/www/registry/default/charts/chart-tooltip-default.tsx
new file mode 100644
index 00000000000..e1ed0870752
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-tooltip-formatter.tsx b/apps/www/registry/default/charts/chart-tooltip-formatter.tsx
new file mode 100644
index 00000000000..8c1b6d7009a
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-tooltip-icons.tsx b/apps/www/registry/default/charts/chart-tooltip-icons.tsx
new file mode 100644
index 00000000000..a95db7a7b5f
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-tooltip-indicator-line.tsx b/apps/www/registry/default/charts/chart-tooltip-indicator-line.tsx
new file mode 100644
index 00000000000..8f59a417cde
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-tooltip-indicator-none.tsx b/apps/www/registry/default/charts/chart-tooltip-indicator-none.tsx
new file mode 100644
index 00000000000..52c3790224f
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/charts/chart-tooltip-label-custom.tsx b/apps/www/registry/default/charts/chart-tooltip-label-custom.tsx
new file mode 100644
index 00000000000..ebd735e0753
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-tooltip-label-custom.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  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/www/registry/default/charts/chart-tooltip-label-formatter.tsx b/apps/www/registry/default/charts/chart-tooltip-label-formatter.tsx
new file mode 100644
index 00000000000..ed1173c5b7b
--- /dev/null
+++ b/apps/www/registry/default/charts/chart-tooltip-label-formatter.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 {
+  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/www/registry/default/charts/chart-tooltip-label-none.tsx b/apps/www/registry/default/charts/chart-tooltip-label-none.tsx
new file mode 100644
index 00000000000..4aadf3fc795
--- /dev/null
+++ b/apps/www/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 {
+  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/www/registry/default/example/button-icon.tsx b/apps/www/registry/default/example/button-icon.tsx
deleted file mode 100644
index 1e790f85d4f..00000000000
--- a/apps/www/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="h-4 w-4" />
-    </Button>
-  )
-}
diff --git a/apps/www/registry/default/example/button-loading.tsx b/apps/www/registry/default/example/button-loading.tsx
deleted file mode 100644
index bdce9478b02..00000000000
--- a/apps/www/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 h-4 w-4 animate-spin" />
-      Please wait
-    </Button>
-  )
-}
diff --git a/apps/www/registry/default/example/cards/activity-goal.tsx b/apps/www/registry/default/example/cards/activity-goal.tsx
deleted file mode 100644
index be73bb2f6a4..00000000000
--- a/apps/www/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="h-8 w-8 shrink-0 rounded-full"
-            onClick={() => onClick(-10)}
-            disabled={goal <= 200}
-          >
-            <Minus className="h-4 w-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-[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 className="h-4 w-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/www/registry/default/example/cards/calendar.tsx b/apps/www/registry/default/example/cards/calendar.tsx
deleted file mode 100644
index 39785387d89..00000000000
--- a/apps/www/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/www/registry/default/example/cards/chat.tsx b/apps/www/registry/default/example/cards/chat.tsx
deleted file mode 100644
index c45dcd6bd17..00000000000
--- a/apps/www/registry/default/example/cards/chat.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-import * as React from "react"
-import { Check, Plus, Send } from "lucide-react"
-
-import { cn } 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-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 className="h-4 w-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={cn(
-                  "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 className="h-4 w-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-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/www/registry/default/example/cards/cookie-settings.tsx b/apps/www/registry/default/example/cards/cookie-settings.tsx
deleted file mode 100644
index 11e6df7fcde..00000000000
--- a/apps/www/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-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/www/registry/default/example/cards/create-account.tsx b/apps/www/registry/default/example/cards/create-account.tsx
deleted file mode 100644
index d4e9632c0fe..00000000000
--- a/apps/www/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 />
-            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-background 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/www/registry/default/example/cards/data-table.tsx b/apps/www/registry/default/example/cards/data-table.tsx
deleted file mode 100644
index cf58e890a57..00000000000
--- a/apps/www/registry/default/example/cards/data-table.tsx
+++ /dev/null
@@ -1,335 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  CaretSortIcon,
-  ChevronDownIcon,
-  DotsHorizontalIcon,
-} from "@radix-ui/react-icons"
-import {
-  ColumnDef,
-  ColumnFiltersState,
-  SortingState,
-  VisibilityState,
-  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 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
-          <CaretSortIcon className="ml-2 h-4 w-4" />
-        </Button>
-      )
-    },
-    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
-  },
-  {
-    accessorKey: "amount",
-    header: () => <div className="text-right">Amount</div>,
-    cell: ({ row }) => {
-      const amount = 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>
-              <DotsHorizontalIcon className="h-4 w-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 h-4 w-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="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/www/registry/default/example/cards/index.tsx b/apps/www/registry/default/example/cards/index.tsx
deleted file mode 100644
index 888fa37563c..00000000000
--- a/apps/www/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/www/registry/default/example/cards/metric.tsx b/apps/www/registry/default/example/cards/metric.tsx
deleted file mode 100644
index 1b6f1b3e40c..00000000000
--- a/apps/www/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="rounded-lg border bg-background p-2 shadow-sm">
-                        <div className="grid grid-cols-2 gap-2">
-                          <div className="flex flex-col">
-                            <span className="text-[0.70rem] uppercase text-muted-foreground">
-                              Average
-                            </span>
-                            <span className="font-bold text-muted-foreground">
-                              {payload[0].value}
-                            </span>
-                          </div>
-                          <div className="flex flex-col">
-                            <span className="text-[0.70rem] uppercase text-muted-foreground">
-                              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/www/registry/default/example/cards/payment-method.tsx b/apps/www/registry/default/example/cards/payment-method.tsx
deleted file mode 100644
index 111afcf05b5..00000000000
--- a/apps/www/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="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/www/registry/default/example/cards/report-issue.tsx b/apps/www/registry/default/example/cards/report-issue.tsx
deleted file mode 100644
index c2bf1317318..00000000000
--- a/apps/www/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/www/registry/default/example/cards/share.tsx b/apps/www/registry/default/example/cards/share.tsx
deleted file mode 100644
index e22c03f11ac..00000000000
--- a/apps/www/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-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/www/registry/default/example/cards/stats.tsx b/apps/www/registry/default/example/cards/stats.tsx
deleted file mode 100644
index 32e58f1acde..00000000000
--- a/apps/www/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-xs text-muted-foreground">
-            +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-xs text-muted-foreground">
-            +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/www/registry/default/example/cards/team-members.tsx b/apps/www/registry/default/example/cards/team-members.tsx
deleted file mode 100644
index 38162425436..00000000000
--- a/apps/www/registry/default/example/cards/team-members.tsx
+++ /dev/null
@@ -1,209 +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="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{" "}
-                <ChevronDownIcon className="ml-2 h-4 w-4 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{" "}
-                <ChevronDownIcon className="ml-2 h-4 w-4 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{" "}
-                <ChevronDownIcon className="ml-2 h-4 w-4 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/www/registry/default/example/collapsible-demo.tsx b/apps/www/registry/default/example/collapsible-demo.tsx
deleted file mode 100644
index 345d54adc67..00000000000
--- a/apps/www/registry/default/example/collapsible-demo.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ChevronsUpDown, Plus, X } 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="h-4 w-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/www/registry/default/example/combobox-demo.tsx b/apps/www/registry/default/example/combobox-demo.tsx
deleted file mode 100644
index 7c988850e61..00000000000
--- a/apps/www/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 { cn } 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="ml-2 h-4 w-4 shrink-0 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)
-                  }}
-                >
-                  <Check
-                    className={cn(
-                      "mr-2 h-4 w-4",
-                      value === framework.value ? "opacity-100" : "opacity-0"
-                    )}
-                  />
-                  {framework.label}
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/apps/www/registry/default/example/combobox-form.tsx b/apps/www/registry/default/example/combobox-form.tsx
deleted file mode 100644
index c1cc6f03218..00000000000
--- a/apps/www/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 { cn } 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={cn(
-                        "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 h-4 w-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)
-                            }}
-                          >
-                            <Check
-                              className={cn(
-                                "mr-2 h-4 w-4",
-                                language.value === field.value
-                                  ? "opacity-100"
-                                  : "opacity-0"
-                              )}
-                            />
-                            {language.label}
-                          </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/www/registry/default/example/data-table-demo.tsx b/apps/www/registry/default/example/data-table-demo.tsx
deleted file mode 100644
index f5fd232617a..00000000000
--- a/apps/www/registry/default/example/data-table-demo.tsx
+++ /dev/null
@@ -1,312 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  ColumnDef,
-  ColumnFiltersState,
-  SortingState,
-  VisibilityState,
-  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 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 className="ml-2 h-4 w-4" />
-        </Button>
-      )
-    },
-    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
-  },
-  {
-    accessorKey: "amount",
-    header: () => <div className="text-right">Amount</div>,
-    cell: ({ row }) => {
-      const amount = 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 className="h-4 w-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 h-4 w-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="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>
-    </div>
-  )
-}
diff --git a/apps/www/registry/default/example/date-picker-demo.tsx b/apps/www/registry/default/example/date-picker-demo.tsx
deleted file mode 100644
index 7599d9eabe3..00000000000
--- a/apps/www/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 { cn } 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={cn(
-            "w-[280px] 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">
-        <Calendar
-          mode="single"
-          selected={date}
-          onSelect={setDate}
-          initialFocus
-        />
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/apps/www/registry/default/example/dialog-close-button.tsx b/apps/www/registry/default/example/dialog-close-button.tsx
deleted file mode 100644
index 826d0661328..00000000000
--- a/apps/www/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://ui.shadcn.com/docs/installation"
-              readOnly
-            />
-          </div>
-          <Button type="submit" size="sm" className="px-3">
-            <span className="sr-only">Copy</span>
-            <Copy className="h-4 w-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/www/registry/default/example/drawer-demo.tsx b/apps/www/registry/default/example/drawer-demo.tsx
deleted file mode 100644
index 2c2038474f2..00000000000
--- a/apps/www/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="h-8 w-8 shrink-0 rounded-full"
-                onClick={() => onClick(-10)}
-                disabled={goal <= 200}
-              >
-                <Minus className="h-4 w-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-[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 className="h-4 w-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/www/registry/default/example/sonner-demo.tsx b/apps/www/registry/default/example/sonner-demo.tsx
deleted file mode 100644
index 1f61bdf185f..00000000000
--- a/apps/www/registry/default/example/sonner-demo.tsx
+++ /dev/null
@@ -1,22 +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",
-            onClick: () => console.log("Undo"),
-          },
-        })
-      }
-    >
-      Show Toast
-    </Button>
-  )
-}
diff --git a/apps/www/registry/default/example/accordion-demo.tsx b/apps/www/registry/default/examples/accordion-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/accordion-demo.tsx
rename to apps/www/registry/default/examples/accordion-demo.tsx
diff --git a/apps/www/registry/default/example/alert-demo.tsx b/apps/www/registry/default/examples/alert-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/alert-demo.tsx
rename to apps/www/registry/default/examples/alert-demo.tsx
diff --git a/apps/www/registry/default/example/alert-destructive.tsx b/apps/www/registry/default/examples/alert-destructive.tsx
similarity index 100%
rename from apps/www/registry/default/example/alert-destructive.tsx
rename to apps/www/registry/default/examples/alert-destructive.tsx
diff --git a/apps/www/registry/default/example/alert-dialog-demo.tsx b/apps/www/registry/default/examples/alert-dialog-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/alert-dialog-demo.tsx
rename to apps/www/registry/default/examples/alert-dialog-demo.tsx
diff --git a/apps/www/registry/default/example/aspect-ratio-demo.tsx b/apps/www/registry/default/examples/aspect-ratio-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/aspect-ratio-demo.tsx
rename to apps/www/registry/default/examples/aspect-ratio-demo.tsx
diff --git a/apps/www/registry/default/example/avatar-demo.tsx b/apps/www/registry/default/examples/avatar-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/avatar-demo.tsx
rename to apps/www/registry/default/examples/avatar-demo.tsx
diff --git a/apps/www/registry/default/example/badge-demo.tsx b/apps/www/registry/default/examples/badge-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/badge-demo.tsx
rename to apps/www/registry/default/examples/badge-demo.tsx
diff --git a/apps/www/registry/default/example/badge-destructive.tsx b/apps/www/registry/default/examples/badge-destructive.tsx
similarity index 100%
rename from apps/www/registry/default/example/badge-destructive.tsx
rename to apps/www/registry/default/examples/badge-destructive.tsx
diff --git a/apps/www/registry/default/example/badge-outline.tsx b/apps/www/registry/default/examples/badge-outline.tsx
similarity index 100%
rename from apps/www/registry/default/example/badge-outline.tsx
rename to apps/www/registry/default/examples/badge-outline.tsx
diff --git a/apps/www/registry/default/example/badge-secondary.tsx b/apps/www/registry/default/examples/badge-secondary.tsx
similarity index 100%
rename from apps/www/registry/default/example/badge-secondary.tsx
rename to apps/www/registry/default/examples/badge-secondary.tsx
diff --git a/apps/www/registry/default/example/breadcrumb-demo.tsx b/apps/www/registry/default/examples/breadcrumb-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/breadcrumb-demo.tsx
rename to apps/www/registry/default/examples/breadcrumb-demo.tsx
diff --git a/apps/www/registry/default/example/breadcrumb-dropdown.tsx b/apps/www/registry/default/examples/breadcrumb-dropdown.tsx
similarity index 100%
rename from apps/www/registry/default/example/breadcrumb-dropdown.tsx
rename to apps/www/registry/default/examples/breadcrumb-dropdown.tsx
diff --git a/apps/www/registry/default/example/breadcrumb-ellipsis.tsx b/apps/www/registry/default/examples/breadcrumb-ellipsis.tsx
similarity index 100%
rename from apps/www/registry/default/example/breadcrumb-ellipsis.tsx
rename to apps/www/registry/default/examples/breadcrumb-ellipsis.tsx
diff --git a/apps/www/registry/default/example/breadcrumb-link.tsx b/apps/www/registry/default/examples/breadcrumb-link.tsx
similarity index 100%
rename from apps/www/registry/default/example/breadcrumb-link.tsx
rename to apps/www/registry/default/examples/breadcrumb-link.tsx
diff --git a/apps/www/registry/default/example/breadcrumb-responsive.tsx b/apps/www/registry/default/examples/breadcrumb-responsive.tsx
similarity index 100%
rename from apps/www/registry/default/example/breadcrumb-responsive.tsx
rename to apps/www/registry/default/examples/breadcrumb-responsive.tsx
diff --git a/apps/www/registry/default/example/breadcrumb-separator.tsx b/apps/www/registry/default/examples/breadcrumb-separator.tsx
similarity index 100%
rename from apps/www/registry/default/example/breadcrumb-separator.tsx
rename to apps/www/registry/default/examples/breadcrumb-separator.tsx
diff --git a/apps/www/registry/default/example/button-as-child.tsx b/apps/www/registry/default/examples/button-as-child.tsx
similarity index 100%
rename from apps/www/registry/default/example/button-as-child.tsx
rename to apps/www/registry/default/examples/button-as-child.tsx
diff --git a/apps/www/registry/default/example/button-demo.tsx b/apps/www/registry/default/examples/button-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/button-demo.tsx
rename to apps/www/registry/default/examples/button-demo.tsx
diff --git a/apps/www/registry/default/example/button-destructive.tsx b/apps/www/registry/default/examples/button-destructive.tsx
similarity index 100%
rename from apps/www/registry/default/example/button-destructive.tsx
rename to apps/www/registry/default/examples/button-destructive.tsx
diff --git a/apps/www/registry/default/example/button-ghost.tsx b/apps/www/registry/default/examples/button-ghost.tsx
similarity index 100%
rename from apps/www/registry/default/example/button-ghost.tsx
rename to apps/www/registry/default/examples/button-ghost.tsx
diff --git a/apps/www/registry/default/examples/button-icon.tsx b/apps/www/registry/default/examples/button-icon.tsx
new file mode 100644
index 00000000000..6b7a115d050
--- /dev/null
+++ b/apps/www/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 />
+    </Button>
+  )
+}
diff --git a/apps/www/registry/default/example/button-link.tsx b/apps/www/registry/default/examples/button-link.tsx
similarity index 100%
rename from apps/www/registry/default/example/button-link.tsx
rename to apps/www/registry/default/examples/button-link.tsx
diff --git a/apps/www/registry/default/examples/button-loading.tsx b/apps/www/registry/default/examples/button-loading.tsx
new file mode 100644
index 00000000000..7d459f01309
--- /dev/null
+++ b/apps/www/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="animate-spin" />
+      Please wait
+    </Button>
+  )
+}
diff --git a/apps/www/registry/default/example/button-outline.tsx b/apps/www/registry/default/examples/button-outline.tsx
similarity index 100%
rename from apps/www/registry/default/example/button-outline.tsx
rename to apps/www/registry/default/examples/button-outline.tsx
diff --git a/apps/www/registry/default/example/button-secondary.tsx b/apps/www/registry/default/examples/button-secondary.tsx
similarity index 100%
rename from apps/www/registry/default/example/button-secondary.tsx
rename to apps/www/registry/default/examples/button-secondary.tsx
diff --git a/apps/www/registry/default/example/button-with-icon.tsx b/apps/www/registry/default/examples/button-with-icon.tsx
similarity index 100%
rename from apps/www/registry/default/example/button-with-icon.tsx
rename to apps/www/registry/default/examples/button-with-icon.tsx
diff --git a/apps/www/registry/default/example/calendar-demo.tsx b/apps/www/registry/default/examples/calendar-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/calendar-demo.tsx
rename to apps/www/registry/default/examples/calendar-demo.tsx
diff --git a/apps/www/registry/default/example/calendar-form.tsx b/apps/www/registry/default/examples/calendar-form.tsx
similarity index 100%
rename from apps/www/registry/default/example/calendar-form.tsx
rename to apps/www/registry/default/examples/calendar-form.tsx
diff --git a/apps/www/registry/default/example/calendar-react-hook-form.tsx b/apps/www/registry/default/examples/calendar-react-hook-form.tsx
similarity index 100%
rename from apps/www/registry/default/example/calendar-react-hook-form.tsx
rename to apps/www/registry/default/examples/calendar-react-hook-form.tsx
diff --git a/apps/www/registry/default/example/card-demo.tsx b/apps/www/registry/default/examples/card-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/card-demo.tsx
rename to apps/www/registry/default/examples/card-demo.tsx
diff --git a/apps/www/registry/default/example/card-with-form.tsx b/apps/www/registry/default/examples/card-with-form.tsx
similarity index 100%
rename from apps/www/registry/default/example/card-with-form.tsx
rename to apps/www/registry/default/examples/card-with-form.tsx
diff --git a/apps/www/registry/default/example/carousel-api.tsx b/apps/www/registry/default/examples/carousel-api.tsx
similarity index 100%
rename from apps/www/registry/default/example/carousel-api.tsx
rename to apps/www/registry/default/examples/carousel-api.tsx
diff --git a/apps/www/registry/default/example/carousel-demo.tsx b/apps/www/registry/default/examples/carousel-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/carousel-demo.tsx
rename to apps/www/registry/default/examples/carousel-demo.tsx
diff --git a/apps/www/registry/default/example/carousel-orientation.tsx b/apps/www/registry/default/examples/carousel-orientation.tsx
similarity index 100%
rename from apps/www/registry/default/example/carousel-orientation.tsx
rename to apps/www/registry/default/examples/carousel-orientation.tsx
diff --git a/apps/www/registry/default/example/carousel-plugin.tsx b/apps/www/registry/default/examples/carousel-plugin.tsx
similarity index 100%
rename from apps/www/registry/default/example/carousel-plugin.tsx
rename to apps/www/registry/default/examples/carousel-plugin.tsx
diff --git a/apps/www/registry/default/example/carousel-size.tsx b/apps/www/registry/default/examples/carousel-size.tsx
similarity index 100%
rename from apps/www/registry/default/example/carousel-size.tsx
rename to apps/www/registry/default/examples/carousel-size.tsx
diff --git a/apps/www/registry/default/example/carousel-spacing.tsx b/apps/www/registry/default/examples/carousel-spacing.tsx
similarity index 100%
rename from apps/www/registry/default/example/carousel-spacing.tsx
rename to apps/www/registry/default/examples/carousel-spacing.tsx
diff --git a/apps/www/registry/default/example/chart-bar-demo-axis.tsx b/apps/www/registry/default/examples/chart-bar-demo-axis.tsx
similarity index 100%
rename from apps/www/registry/default/example/chart-bar-demo-axis.tsx
rename to apps/www/registry/default/examples/chart-bar-demo-axis.tsx
diff --git a/apps/www/registry/default/example/chart-bar-demo-grid.tsx b/apps/www/registry/default/examples/chart-bar-demo-grid.tsx
similarity index 100%
rename from apps/www/registry/default/example/chart-bar-demo-grid.tsx
rename to apps/www/registry/default/examples/chart-bar-demo-grid.tsx
diff --git a/apps/www/registry/default/example/chart-bar-demo-legend.tsx b/apps/www/registry/default/examples/chart-bar-demo-legend.tsx
similarity index 100%
rename from apps/www/registry/default/example/chart-bar-demo-legend.tsx
rename to apps/www/registry/default/examples/chart-bar-demo-legend.tsx
diff --git a/apps/www/registry/default/example/chart-bar-demo-tooltip.tsx b/apps/www/registry/default/examples/chart-bar-demo-tooltip.tsx
similarity index 100%
rename from apps/www/registry/default/example/chart-bar-demo-tooltip.tsx
rename to apps/www/registry/default/examples/chart-bar-demo-tooltip.tsx
diff --git a/apps/www/registry/default/example/chart-bar-demo.tsx b/apps/www/registry/default/examples/chart-bar-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/chart-bar-demo.tsx
rename to apps/www/registry/default/examples/chart-bar-demo.tsx
diff --git a/apps/www/registry/default/example/chart-tooltip-demo.tsx b/apps/www/registry/default/examples/chart-tooltip-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/chart-tooltip-demo.tsx
rename to apps/www/registry/default/examples/chart-tooltip-demo.tsx
diff --git a/apps/www/registry/default/example/checkbox-demo.tsx b/apps/www/registry/default/examples/checkbox-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/checkbox-demo.tsx
rename to apps/www/registry/default/examples/checkbox-demo.tsx
diff --git a/apps/www/registry/default/example/checkbox-disabled.tsx b/apps/www/registry/default/examples/checkbox-disabled.tsx
similarity index 100%
rename from apps/www/registry/default/example/checkbox-disabled.tsx
rename to apps/www/registry/default/examples/checkbox-disabled.tsx
diff --git a/apps/www/registry/default/example/checkbox-form-multiple.tsx b/apps/www/registry/default/examples/checkbox-form-multiple.tsx
similarity index 100%
rename from apps/www/registry/default/example/checkbox-form-multiple.tsx
rename to apps/www/registry/default/examples/checkbox-form-multiple.tsx
diff --git a/apps/www/registry/default/example/checkbox-form-single.tsx b/apps/www/registry/default/examples/checkbox-form-single.tsx
similarity index 100%
rename from apps/www/registry/default/example/checkbox-form-single.tsx
rename to apps/www/registry/default/examples/checkbox-form-single.tsx
diff --git a/apps/www/registry/default/example/checkbox-with-text.tsx b/apps/www/registry/default/examples/checkbox-with-text.tsx
similarity index 100%
rename from apps/www/registry/default/example/checkbox-with-text.tsx
rename to apps/www/registry/default/examples/checkbox-with-text.tsx
diff --git a/apps/www/registry/default/examples/collapsible-demo.tsx b/apps/www/registry/default/examples/collapsible-demo.tsx
new file mode 100644
index 00000000000..043e0ef76a9
--- /dev/null
+++ b/apps/www/registry/default/examples/collapsible-demo.tsx
@@ -0,0 +1,46 @@
+"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="h-4 w-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/www/registry/default/examples/combobox-demo.tsx b/apps/www/registry/default/examples/combobox-demo.tsx
new file mode 100644
index 00000000000..edc8fca6c32
--- /dev/null
+++ b/apps/www/registry/default/examples/combobox-demo.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } 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={cn(
+                      "ml-auto",
+                      value === framework.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/www/registry/default/example/combobox-dropdown-menu.tsx b/apps/www/registry/default/examples/combobox-dropdown-menu.tsx
similarity index 100%
rename from apps/www/registry/default/example/combobox-dropdown-menu.tsx
rename to apps/www/registry/default/examples/combobox-dropdown-menu.tsx
diff --git a/apps/www/registry/default/examples/combobox-form.tsx b/apps/www/registry/default/examples/combobox-form.tsx
new file mode 100644
index 00000000000..68216125361
--- /dev/null
+++ b/apps/www/registry/default/examples/combobox-form.tsx
@@ -0,0 +1,138 @@
+"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 { cn } 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={cn(
+                        "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 h-4 w-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={cn(
+                                "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/www/registry/default/example/combobox-popover.tsx b/apps/www/registry/default/examples/combobox-popover.tsx
similarity index 100%
rename from apps/www/registry/default/example/combobox-popover.tsx
rename to apps/www/registry/default/examples/combobox-popover.tsx
diff --git a/apps/www/registry/default/example/combobox-responsive.tsx b/apps/www/registry/default/examples/combobox-responsive.tsx
similarity index 100%
rename from apps/www/registry/default/example/combobox-responsive.tsx
rename to apps/www/registry/default/examples/combobox-responsive.tsx
diff --git a/apps/www/registry/default/example/command-demo.tsx b/apps/www/registry/default/examples/command-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/command-demo.tsx
rename to apps/www/registry/default/examples/command-demo.tsx
diff --git a/apps/www/registry/default/example/command-dialog.tsx b/apps/www/registry/default/examples/command-dialog.tsx
similarity index 100%
rename from apps/www/registry/default/example/command-dialog.tsx
rename to apps/www/registry/default/examples/command-dialog.tsx
diff --git a/apps/www/registry/default/example/context-menu-demo.tsx b/apps/www/registry/default/examples/context-menu-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/context-menu-demo.tsx
rename to apps/www/registry/default/examples/context-menu-demo.tsx
diff --git a/apps/www/registry/default/examples/data-table-demo.tsx b/apps/www/registry/default/examples/data-table-demo.tsx
new file mode 100644
index 00000000000..05ea35b1d6d
--- /dev/null
+++ b/apps/www/registry/default/examples/data-table-demo.tsx
@@ -0,0 +1,312 @@
+"use client"
+
+import * as React from "react"
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  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 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 = 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 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 />
+            </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="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>
+    </div>
+  )
+}
diff --git a/apps/www/registry/default/examples/date-picker-demo.tsx b/apps/www/registry/default/examples/date-picker-demo.tsx
new file mode 100644
index 00000000000..ff787b11093
--- /dev/null
+++ b/apps/www/registry/default/examples/date-picker-demo.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+
+import { cn } 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={cn(
+            "w-[280px] 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">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/www/registry/default/example/date-picker-form.tsx b/apps/www/registry/default/examples/date-picker-form.tsx
similarity index 100%
rename from apps/www/registry/default/example/date-picker-form.tsx
rename to apps/www/registry/default/examples/date-picker-form.tsx
diff --git a/apps/www/registry/default/example/date-picker-with-presets.tsx b/apps/www/registry/default/examples/date-picker-with-presets.tsx
similarity index 100%
rename from apps/www/registry/default/example/date-picker-with-presets.tsx
rename to apps/www/registry/default/examples/date-picker-with-presets.tsx
diff --git a/apps/www/registry/default/example/date-picker-with-range.tsx b/apps/www/registry/default/examples/date-picker-with-range.tsx
similarity index 100%
rename from apps/www/registry/default/example/date-picker-with-range.tsx
rename to apps/www/registry/default/examples/date-picker-with-range.tsx
diff --git a/apps/www/registry/default/examples/dialog-close-button.tsx b/apps/www/registry/default/examples/dialog-close-button.tsx
new file mode 100644
index 00000000000..b2f5726093d
--- /dev/null
+++ b/apps/www/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://ui.shadcn.com/docs/installation"
+              readOnly
+            />
+          </div>
+          <Button type="submit" size="sm" className="px-3">
+            <span className="sr-only">Copy</span>
+            <Copy />
+          </Button>
+        </div>
+        <DialogFooter className="sm:justify-start">
+          <DialogClose asChild>
+            <Button type="button" variant="secondary">
+              Close
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/www/registry/default/example/dialog-demo.tsx b/apps/www/registry/default/examples/dialog-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/dialog-demo.tsx
rename to apps/www/registry/default/examples/dialog-demo.tsx
diff --git a/apps/www/registry/default/examples/drawer-demo.tsx b/apps/www/registry/default/examples/drawer-demo.tsx
new file mode 100644
index 00000000000..22827564540
--- /dev/null
+++ b/apps/www/registry/default/examples/drawer-demo.tsx
@@ -0,0 +1,136 @@
+"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 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="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/www/registry/default/example/drawer-dialog.tsx b/apps/www/registry/default/examples/drawer-dialog.tsx
similarity index 100%
rename from apps/www/registry/default/example/drawer-dialog.tsx
rename to apps/www/registry/default/examples/drawer-dialog.tsx
diff --git a/apps/www/registry/default/example/dropdown-menu-checkboxes.tsx b/apps/www/registry/default/examples/dropdown-menu-checkboxes.tsx
similarity index 100%
rename from apps/www/registry/default/example/dropdown-menu-checkboxes.tsx
rename to apps/www/registry/default/examples/dropdown-menu-checkboxes.tsx
diff --git a/apps/www/registry/default/example/dropdown-menu-demo.tsx b/apps/www/registry/default/examples/dropdown-menu-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/dropdown-menu-demo.tsx
rename to apps/www/registry/default/examples/dropdown-menu-demo.tsx
diff --git a/apps/www/registry/default/example/dropdown-menu-radio-group.tsx b/apps/www/registry/default/examples/dropdown-menu-radio-group.tsx
similarity index 100%
rename from apps/www/registry/default/example/dropdown-menu-radio-group.tsx
rename to apps/www/registry/default/examples/dropdown-menu-radio-group.tsx
diff --git a/apps/www/registry/default/example/hover-card-demo.tsx b/apps/www/registry/default/examples/hover-card-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/hover-card-demo.tsx
rename to apps/www/registry/default/examples/hover-card-demo.tsx
diff --git a/apps/www/registry/default/example/input-demo.tsx b/apps/www/registry/default/examples/input-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-demo.tsx
rename to apps/www/registry/default/examples/input-demo.tsx
diff --git a/apps/www/registry/default/example/input-disabled.tsx b/apps/www/registry/default/examples/input-disabled.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-disabled.tsx
rename to apps/www/registry/default/examples/input-disabled.tsx
diff --git a/apps/www/registry/default/example/input-file.tsx b/apps/www/registry/default/examples/input-file.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-file.tsx
rename to apps/www/registry/default/examples/input-file.tsx
diff --git a/apps/www/registry/default/example/input-form.tsx b/apps/www/registry/default/examples/input-form.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-form.tsx
rename to apps/www/registry/default/examples/input-form.tsx
diff --git a/apps/www/registry/default/example/input-otp-controlled.tsx b/apps/www/registry/default/examples/input-otp-controlled.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-otp-controlled.tsx
rename to apps/www/registry/default/examples/input-otp-controlled.tsx
diff --git a/apps/www/registry/default/example/input-otp-demo.tsx b/apps/www/registry/default/examples/input-otp-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-otp-demo.tsx
rename to apps/www/registry/default/examples/input-otp-demo.tsx
diff --git a/apps/www/registry/default/example/input-otp-form.tsx b/apps/www/registry/default/examples/input-otp-form.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-otp-form.tsx
rename to apps/www/registry/default/examples/input-otp-form.tsx
diff --git a/apps/www/registry/default/example/input-otp-pattern.tsx b/apps/www/registry/default/examples/input-otp-pattern.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-otp-pattern.tsx
rename to apps/www/registry/default/examples/input-otp-pattern.tsx
diff --git a/apps/www/registry/default/example/input-otp-separator.tsx b/apps/www/registry/default/examples/input-otp-separator.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-otp-separator.tsx
rename to apps/www/registry/default/examples/input-otp-separator.tsx
diff --git a/apps/www/registry/default/example/input-with-button.tsx b/apps/www/registry/default/examples/input-with-button.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-with-button.tsx
rename to apps/www/registry/default/examples/input-with-button.tsx
diff --git a/apps/www/registry/default/example/input-with-label.tsx b/apps/www/registry/default/examples/input-with-label.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-with-label.tsx
rename to apps/www/registry/default/examples/input-with-label.tsx
diff --git a/apps/www/registry/default/example/input-with-text.tsx b/apps/www/registry/default/examples/input-with-text.tsx
similarity index 100%
rename from apps/www/registry/default/example/input-with-text.tsx
rename to apps/www/registry/default/examples/input-with-text.tsx
diff --git a/apps/www/registry/default/example/label-demo.tsx b/apps/www/registry/default/examples/label-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/label-demo.tsx
rename to apps/www/registry/default/examples/label-demo.tsx
diff --git a/apps/www/registry/default/example/menubar-demo.tsx b/apps/www/registry/default/examples/menubar-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/menubar-demo.tsx
rename to apps/www/registry/default/examples/menubar-demo.tsx
diff --git a/apps/www/registry/default/example/mode-toggle.tsx b/apps/www/registry/default/examples/mode-toggle.tsx
similarity index 100%
rename from apps/www/registry/default/example/mode-toggle.tsx
rename to apps/www/registry/default/examples/mode-toggle.tsx
diff --git a/apps/www/registry/default/example/navigation-menu-demo.tsx b/apps/www/registry/default/examples/navigation-menu-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/navigation-menu-demo.tsx
rename to apps/www/registry/default/examples/navigation-menu-demo.tsx
diff --git a/apps/www/registry/default/example/pagination-demo.tsx b/apps/www/registry/default/examples/pagination-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/pagination-demo.tsx
rename to apps/www/registry/default/examples/pagination-demo.tsx
diff --git a/apps/www/registry/default/example/popover-demo.tsx b/apps/www/registry/default/examples/popover-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/popover-demo.tsx
rename to apps/www/registry/default/examples/popover-demo.tsx
diff --git a/apps/www/registry/default/example/progress-demo.tsx b/apps/www/registry/default/examples/progress-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/progress-demo.tsx
rename to apps/www/registry/default/examples/progress-demo.tsx
diff --git a/apps/www/registry/default/example/radio-group-demo.tsx b/apps/www/registry/default/examples/radio-group-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/radio-group-demo.tsx
rename to apps/www/registry/default/examples/radio-group-demo.tsx
diff --git a/apps/www/registry/default/example/radio-group-form.tsx b/apps/www/registry/default/examples/radio-group-form.tsx
similarity index 100%
rename from apps/www/registry/default/example/radio-group-form.tsx
rename to apps/www/registry/default/examples/radio-group-form.tsx
diff --git a/apps/www/registry/default/example/resizable-demo-with-handle.tsx b/apps/www/registry/default/examples/resizable-demo-with-handle.tsx
similarity index 100%
rename from apps/www/registry/default/example/resizable-demo-with-handle.tsx
rename to apps/www/registry/default/examples/resizable-demo-with-handle.tsx
diff --git a/apps/www/registry/default/example/resizable-demo.tsx b/apps/www/registry/default/examples/resizable-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/resizable-demo.tsx
rename to apps/www/registry/default/examples/resizable-demo.tsx
diff --git a/apps/www/registry/default/example/resizable-handle.tsx b/apps/www/registry/default/examples/resizable-handle.tsx
similarity index 100%
rename from apps/www/registry/default/example/resizable-handle.tsx
rename to apps/www/registry/default/examples/resizable-handle.tsx
diff --git a/apps/www/registry/default/example/resizable-vertical.tsx b/apps/www/registry/default/examples/resizable-vertical.tsx
similarity index 100%
rename from apps/www/registry/default/example/resizable-vertical.tsx
rename to apps/www/registry/default/examples/resizable-vertical.tsx
diff --git a/apps/www/registry/default/example/scroll-area-demo.tsx b/apps/www/registry/default/examples/scroll-area-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/scroll-area-demo.tsx
rename to apps/www/registry/default/examples/scroll-area-demo.tsx
diff --git a/apps/www/registry/default/example/scroll-area-horizontal-demo.tsx b/apps/www/registry/default/examples/scroll-area-horizontal-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/scroll-area-horizontal-demo.tsx
rename to apps/www/registry/default/examples/scroll-area-horizontal-demo.tsx
diff --git a/apps/www/registry/default/example/select-demo.tsx b/apps/www/registry/default/examples/select-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/select-demo.tsx
rename to apps/www/registry/default/examples/select-demo.tsx
diff --git a/apps/www/registry/default/example/select-form.tsx b/apps/www/registry/default/examples/select-form.tsx
similarity index 100%
rename from apps/www/registry/default/example/select-form.tsx
rename to apps/www/registry/default/examples/select-form.tsx
diff --git a/apps/www/registry/default/example/select-scrollable.tsx b/apps/www/registry/default/examples/select-scrollable.tsx
similarity index 100%
rename from apps/www/registry/default/example/select-scrollable.tsx
rename to apps/www/registry/default/examples/select-scrollable.tsx
diff --git a/apps/www/registry/default/example/separator-demo.tsx b/apps/www/registry/default/examples/separator-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/separator-demo.tsx
rename to apps/www/registry/default/examples/separator-demo.tsx
diff --git a/apps/www/registry/default/example/sheet-demo.tsx b/apps/www/registry/default/examples/sheet-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/sheet-demo.tsx
rename to apps/www/registry/default/examples/sheet-demo.tsx
diff --git a/apps/www/registry/default/example/sheet-side.tsx b/apps/www/registry/default/examples/sheet-side.tsx
similarity index 100%
rename from apps/www/registry/default/example/sheet-side.tsx
rename to apps/www/registry/default/examples/sheet-side.tsx
diff --git a/apps/www/registry/default/example/skeleton-card.tsx b/apps/www/registry/default/examples/skeleton-card.tsx
similarity index 100%
rename from apps/www/registry/default/example/skeleton-card.tsx
rename to apps/www/registry/default/examples/skeleton-card.tsx
diff --git a/apps/www/registry/default/example/skeleton-demo.tsx b/apps/www/registry/default/examples/skeleton-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/skeleton-demo.tsx
rename to apps/www/registry/default/examples/skeleton-demo.tsx
diff --git a/apps/www/registry/default/example/slider-demo.tsx b/apps/www/registry/default/examples/slider-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/slider-demo.tsx
rename to apps/www/registry/default/examples/slider-demo.tsx
diff --git a/apps/www/registry/default/examples/sonner-demo.tsx b/apps/www/registry/default/examples/sonner-demo.tsx
new file mode 100644
index 00000000000..cba3b3aeec1
--- /dev/null
+++ b/apps/www/registry/default/examples/sonner-demo.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+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",
+            onClick: () => console.log("Undo"),
+          },
+        })
+      }
+    >
+      Show Toast
+    </Button>
+  )
+}
diff --git a/apps/www/registry/default/example/switch-demo.tsx b/apps/www/registry/default/examples/switch-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/switch-demo.tsx
rename to apps/www/registry/default/examples/switch-demo.tsx
diff --git a/apps/www/registry/default/example/switch-form.tsx b/apps/www/registry/default/examples/switch-form.tsx
similarity index 100%
rename from apps/www/registry/default/example/switch-form.tsx
rename to apps/www/registry/default/examples/switch-form.tsx
diff --git a/apps/www/registry/default/example/table-demo.tsx b/apps/www/registry/default/examples/table-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/table-demo.tsx
rename to apps/www/registry/default/examples/table-demo.tsx
diff --git a/apps/www/registry/default/example/tabs-demo.tsx b/apps/www/registry/default/examples/tabs-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/tabs-demo.tsx
rename to apps/www/registry/default/examples/tabs-demo.tsx
diff --git a/apps/www/registry/default/example/textarea-demo.tsx b/apps/www/registry/default/examples/textarea-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/textarea-demo.tsx
rename to apps/www/registry/default/examples/textarea-demo.tsx
diff --git a/apps/www/registry/default/example/textarea-disabled.tsx b/apps/www/registry/default/examples/textarea-disabled.tsx
similarity index 100%
rename from apps/www/registry/default/example/textarea-disabled.tsx
rename to apps/www/registry/default/examples/textarea-disabled.tsx
diff --git a/apps/www/registry/default/example/textarea-form.tsx b/apps/www/registry/default/examples/textarea-form.tsx
similarity index 100%
rename from apps/www/registry/default/example/textarea-form.tsx
rename to apps/www/registry/default/examples/textarea-form.tsx
diff --git a/apps/www/registry/default/example/textarea-with-button.tsx b/apps/www/registry/default/examples/textarea-with-button.tsx
similarity index 100%
rename from apps/www/registry/default/example/textarea-with-button.tsx
rename to apps/www/registry/default/examples/textarea-with-button.tsx
diff --git a/apps/www/registry/default/example/textarea-with-label.tsx b/apps/www/registry/default/examples/textarea-with-label.tsx
similarity index 100%
rename from apps/www/registry/default/example/textarea-with-label.tsx
rename to apps/www/registry/default/examples/textarea-with-label.tsx
diff --git a/apps/www/registry/default/example/textarea-with-text.tsx b/apps/www/registry/default/examples/textarea-with-text.tsx
similarity index 100%
rename from apps/www/registry/default/example/textarea-with-text.tsx
rename to apps/www/registry/default/examples/textarea-with-text.tsx
diff --git a/apps/www/registry/default/example/toast-demo.tsx b/apps/www/registry/default/examples/toast-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/toast-demo.tsx
rename to apps/www/registry/default/examples/toast-demo.tsx
diff --git a/apps/www/registry/default/example/toast-destructive.tsx b/apps/www/registry/default/examples/toast-destructive.tsx
similarity index 100%
rename from apps/www/registry/default/example/toast-destructive.tsx
rename to apps/www/registry/default/examples/toast-destructive.tsx
diff --git a/apps/www/registry/default/example/toast-simple.tsx b/apps/www/registry/default/examples/toast-simple.tsx
similarity index 100%
rename from apps/www/registry/default/example/toast-simple.tsx
rename to apps/www/registry/default/examples/toast-simple.tsx
diff --git a/apps/www/registry/default/example/toast-with-action.tsx b/apps/www/registry/default/examples/toast-with-action.tsx
similarity index 100%
rename from apps/www/registry/default/example/toast-with-action.tsx
rename to apps/www/registry/default/examples/toast-with-action.tsx
diff --git a/apps/www/registry/default/example/toast-with-title.tsx b/apps/www/registry/default/examples/toast-with-title.tsx
similarity index 100%
rename from apps/www/registry/default/example/toast-with-title.tsx
rename to apps/www/registry/default/examples/toast-with-title.tsx
diff --git a/apps/www/registry/default/example/toggle-demo.tsx b/apps/www/registry/default/examples/toggle-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-demo.tsx
rename to apps/www/registry/default/examples/toggle-demo.tsx
diff --git a/apps/www/registry/default/example/toggle-disabled.tsx b/apps/www/registry/default/examples/toggle-disabled.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-disabled.tsx
rename to apps/www/registry/default/examples/toggle-disabled.tsx
diff --git a/apps/www/registry/default/example/toggle-group-demo.tsx b/apps/www/registry/default/examples/toggle-group-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-group-demo.tsx
rename to apps/www/registry/default/examples/toggle-group-demo.tsx
diff --git a/apps/www/registry/default/example/toggle-group-disabled.tsx b/apps/www/registry/default/examples/toggle-group-disabled.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-group-disabled.tsx
rename to apps/www/registry/default/examples/toggle-group-disabled.tsx
diff --git a/apps/www/registry/default/example/toggle-group-lg.tsx b/apps/www/registry/default/examples/toggle-group-lg.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-group-lg.tsx
rename to apps/www/registry/default/examples/toggle-group-lg.tsx
diff --git a/apps/www/registry/default/example/toggle-group-outline.tsx b/apps/www/registry/default/examples/toggle-group-outline.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-group-outline.tsx
rename to apps/www/registry/default/examples/toggle-group-outline.tsx
diff --git a/apps/www/registry/default/example/toggle-group-single.tsx b/apps/www/registry/default/examples/toggle-group-single.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-group-single.tsx
rename to apps/www/registry/default/examples/toggle-group-single.tsx
diff --git a/apps/www/registry/default/example/toggle-group-sm.tsx b/apps/www/registry/default/examples/toggle-group-sm.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-group-sm.tsx
rename to apps/www/registry/default/examples/toggle-group-sm.tsx
diff --git a/apps/www/registry/default/example/toggle-lg.tsx b/apps/www/registry/default/examples/toggle-lg.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-lg.tsx
rename to apps/www/registry/default/examples/toggle-lg.tsx
diff --git a/apps/www/registry/default/example/toggle-outline.tsx b/apps/www/registry/default/examples/toggle-outline.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-outline.tsx
rename to apps/www/registry/default/examples/toggle-outline.tsx
diff --git a/apps/www/registry/default/example/toggle-sm.tsx b/apps/www/registry/default/examples/toggle-sm.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-sm.tsx
rename to apps/www/registry/default/examples/toggle-sm.tsx
diff --git a/apps/www/registry/default/example/toggle-with-text.tsx b/apps/www/registry/default/examples/toggle-with-text.tsx
similarity index 100%
rename from apps/www/registry/default/example/toggle-with-text.tsx
rename to apps/www/registry/default/examples/toggle-with-text.tsx
diff --git a/apps/www/registry/default/example/tooltip-demo.tsx b/apps/www/registry/default/examples/tooltip-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/tooltip-demo.tsx
rename to apps/www/registry/default/examples/tooltip-demo.tsx
diff --git a/apps/www/registry/default/example/typography-blockquote.tsx b/apps/www/registry/default/examples/typography-blockquote.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-blockquote.tsx
rename to apps/www/registry/default/examples/typography-blockquote.tsx
diff --git a/apps/www/registry/default/example/typography-demo.tsx b/apps/www/registry/default/examples/typography-demo.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-demo.tsx
rename to apps/www/registry/default/examples/typography-demo.tsx
diff --git a/apps/www/registry/default/example/typography-h1.tsx b/apps/www/registry/default/examples/typography-h1.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-h1.tsx
rename to apps/www/registry/default/examples/typography-h1.tsx
diff --git a/apps/www/registry/default/example/typography-h2.tsx b/apps/www/registry/default/examples/typography-h2.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-h2.tsx
rename to apps/www/registry/default/examples/typography-h2.tsx
diff --git a/apps/www/registry/default/example/typography-h3.tsx b/apps/www/registry/default/examples/typography-h3.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-h3.tsx
rename to apps/www/registry/default/examples/typography-h3.tsx
diff --git a/apps/www/registry/default/example/typography-h4.tsx b/apps/www/registry/default/examples/typography-h4.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-h4.tsx
rename to apps/www/registry/default/examples/typography-h4.tsx
diff --git a/apps/www/registry/default/example/typography-inline-code.tsx b/apps/www/registry/default/examples/typography-inline-code.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-inline-code.tsx
rename to apps/www/registry/default/examples/typography-inline-code.tsx
diff --git a/apps/www/registry/default/example/typography-large.tsx b/apps/www/registry/default/examples/typography-large.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-large.tsx
rename to apps/www/registry/default/examples/typography-large.tsx
diff --git a/apps/www/registry/default/example/typography-lead.tsx b/apps/www/registry/default/examples/typography-lead.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-lead.tsx
rename to apps/www/registry/default/examples/typography-lead.tsx
diff --git a/apps/www/registry/default/example/typography-list.tsx b/apps/www/registry/default/examples/typography-list.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-list.tsx
rename to apps/www/registry/default/examples/typography-list.tsx
diff --git a/apps/www/registry/default/example/typography-muted.tsx b/apps/www/registry/default/examples/typography-muted.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-muted.tsx
rename to apps/www/registry/default/examples/typography-muted.tsx
diff --git a/apps/www/registry/default/example/typography-p.tsx b/apps/www/registry/default/examples/typography-p.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-p.tsx
rename to apps/www/registry/default/examples/typography-p.tsx
diff --git a/apps/www/registry/default/example/typography-small.tsx b/apps/www/registry/default/examples/typography-small.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-small.tsx
rename to apps/www/registry/default/examples/typography-small.tsx
diff --git a/apps/www/registry/default/example/typography-table.tsx b/apps/www/registry/default/examples/typography-table.tsx
similarity index 100%
rename from apps/www/registry/default/example/typography-table.tsx
rename to apps/www/registry/default/examples/typography-table.tsx
diff --git a/apps/www/registry/default/internal/login-01.tsx b/apps/www/registry/default/internal/login-01.tsx
new file mode 100644
index 00000000000..ca91479d440
--- /dev/null
+++ b/apps/www/registry/default/internal/login-01.tsx
@@ -0,0 +1,68 @@
+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 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/www/__registry__/default/v0/sidebar-01.tsx b/apps/www/registry/default/internal/sidebar-01.tsx
similarity index 100%
rename from apps/www/__registry__/default/v0/sidebar-01.tsx
rename to apps/www/registry/default/internal/sidebar-01.tsx
diff --git a/apps/www/__registry__/default/v0/sidebar-02.tsx b/apps/www/registry/default/internal/sidebar-02.tsx
similarity index 100%
rename from apps/www/__registry__/default/v0/sidebar-02.tsx
rename to apps/www/registry/default/internal/sidebar-02.tsx
diff --git a/apps/www/__registry__/default/v0/sidebar-03.tsx b/apps/www/registry/default/internal/sidebar-03.tsx
similarity index 100%
rename from apps/www/__registry__/default/v0/sidebar-03.tsx
rename to apps/www/registry/default/internal/sidebar-03.tsx
diff --git a/apps/www/__registry__/default/v0/sidebar-04.tsx b/apps/www/registry/default/internal/sidebar-04.tsx
similarity index 100%
rename from apps/www/__registry__/default/v0/sidebar-04.tsx
rename to apps/www/registry/default/internal/sidebar-04.tsx
diff --git a/apps/www/__registry__/default/v0/sidebar-05.tsx b/apps/www/registry/default/internal/sidebar-05.tsx
similarity index 100%
rename from apps/www/__registry__/default/v0/sidebar-05.tsx
rename to apps/www/registry/default/internal/sidebar-05.tsx
diff --git a/apps/www/__registry__/default/v0/sidebar-06.tsx b/apps/www/registry/default/internal/sidebar-06.tsx
similarity index 100%
rename from apps/www/__registry__/default/v0/sidebar-06.tsx
rename to apps/www/registry/default/internal/sidebar-06.tsx
diff --git a/apps/www/__registry__/default/v0/sidebar-07.tsx b/apps/www/registry/default/internal/sidebar-07.tsx
similarity index 100%
rename from apps/www/__registry__/default/v0/sidebar-07.tsx
rename to apps/www/registry/default/internal/sidebar-07.tsx
diff --git a/apps/www/__registry__/default/v0/sidebar-08.tsx b/apps/www/registry/default/internal/sidebar-08.tsx
similarity index 100%
rename from apps/www/__registry__/default/v0/sidebar-08.tsx
rename to apps/www/registry/default/internal/sidebar-08.tsx
diff --git a/apps/www/__registry__/default/v0/sidebar-09.tsx b/apps/www/registry/default/internal/sidebar-09.tsx
similarity index 100%
rename from apps/www/__registry__/default/v0/sidebar-09.tsx
rename to apps/www/registry/default/internal/sidebar-09.tsx
diff --git a/apps/www/__registry__/default/v0/sidebar-10.tsx b/apps/www/registry/default/internal/sidebar-10.tsx
similarity index 100%
rename from apps/www/__registry__/default/v0/sidebar-10.tsx
rename to apps/www/registry/default/internal/sidebar-10.tsx
diff --git a/apps/www/__registry__/default/v0/sidebar-11.tsx b/apps/www/registry/default/internal/sidebar-11.tsx
similarity index 100%
rename from apps/www/__registry__/default/v0/sidebar-11.tsx
rename to apps/www/registry/default/internal/sidebar-11.tsx
diff --git a/apps/www/__registry__/default/v0/sidebar-12.tsx b/apps/www/registry/default/internal/sidebar-12.tsx
similarity index 100%
rename from apps/www/__registry__/default/v0/sidebar-12.tsx
rename to apps/www/registry/default/internal/sidebar-12.tsx
diff --git a/apps/www/__registry__/default/v0/sidebar-13.tsx b/apps/www/registry/default/internal/sidebar-13.tsx
similarity index 100%
rename from apps/www/__registry__/default/v0/sidebar-13.tsx
rename to apps/www/registry/default/internal/sidebar-13.tsx
diff --git a/apps/www/__registry__/default/v0/sidebar-14.tsx b/apps/www/registry/default/internal/sidebar-14.tsx
similarity index 100%
rename from apps/www/__registry__/default/v0/sidebar-14.tsx
rename to apps/www/registry/default/internal/sidebar-14.tsx
diff --git a/apps/www/__registry__/default/v0/sidebar-15.tsx b/apps/www/registry/default/internal/sidebar-15.tsx
similarity index 100%
rename from apps/www/__registry__/default/v0/sidebar-15.tsx
rename to apps/www/registry/default/internal/sidebar-15.tsx
diff --git a/apps/www/__registry__/default/block/demo-sidebar-controlled.tsx b/apps/www/registry/default/internal/sidebar-controlled.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/demo-sidebar-controlled.tsx
rename to apps/www/registry/default/internal/sidebar-controlled.tsx
diff --git a/apps/www/__registry__/default/block/demo-sidebar.tsx b/apps/www/registry/default/internal/sidebar-demo.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/demo-sidebar.tsx
rename to apps/www/registry/default/internal/sidebar-demo.tsx
diff --git a/apps/www/__registry__/default/block/demo-sidebar-footer.tsx b/apps/www/registry/default/internal/sidebar-footer.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/demo-sidebar-footer.tsx
rename to apps/www/registry/default/internal/sidebar-footer.tsx
diff --git a/apps/www/__registry__/default/block/demo-sidebar-group-action.tsx b/apps/www/registry/default/internal/sidebar-group-action.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/demo-sidebar-group-action.tsx
rename to apps/www/registry/default/internal/sidebar-group-action.tsx
diff --git a/apps/www/__registry__/default/block/demo-sidebar-group-collapsible.tsx b/apps/www/registry/default/internal/sidebar-group-collapsible.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/demo-sidebar-group-collapsible.tsx
rename to apps/www/registry/default/internal/sidebar-group-collapsible.tsx
diff --git a/apps/www/__registry__/default/block/demo-sidebar-group.tsx b/apps/www/registry/default/internal/sidebar-group.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/demo-sidebar-group.tsx
rename to apps/www/registry/default/internal/sidebar-group.tsx
diff --git a/apps/www/__registry__/default/block/demo-sidebar-header.tsx b/apps/www/registry/default/internal/sidebar-header.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/demo-sidebar-header.tsx
rename to apps/www/registry/default/internal/sidebar-header.tsx
diff --git a/apps/www/__registry__/default/block/demo-sidebar-menu-action.tsx b/apps/www/registry/default/internal/sidebar-menu-action.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/demo-sidebar-menu-action.tsx
rename to apps/www/registry/default/internal/sidebar-menu-action.tsx
diff --git a/apps/www/__registry__/default/block/demo-sidebar-menu-badge.tsx b/apps/www/registry/default/internal/sidebar-menu-badge.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/demo-sidebar-menu-badge.tsx
rename to apps/www/registry/default/internal/sidebar-menu-badge.tsx
diff --git a/apps/www/__registry__/default/block/demo-sidebar-menu-collapsible.tsx b/apps/www/registry/default/internal/sidebar-menu-collapsible.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/demo-sidebar-menu-collapsible.tsx
rename to apps/www/registry/default/internal/sidebar-menu-collapsible.tsx
diff --git a/apps/www/__registry__/default/block/demo-sidebar-menu-sub.tsx b/apps/www/registry/default/internal/sidebar-menu-sub.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/demo-sidebar-menu-sub.tsx
rename to apps/www/registry/default/internal/sidebar-menu-sub.tsx
diff --git a/apps/www/__registry__/default/block/demo-sidebar-menu.tsx b/apps/www/registry/default/internal/sidebar-menu.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/demo-sidebar-menu.tsx
rename to apps/www/registry/default/internal/sidebar-menu.tsx
diff --git a/apps/www/__registry__/default/block/demo-sidebar-rsc.tsx b/apps/www/registry/default/internal/sidebar-rsc.tsx
similarity index 100%
rename from apps/www/__registry__/default/block/demo-sidebar-rsc.tsx
rename to apps/www/registry/default/internal/sidebar-rsc.tsx
diff --git a/apps/www/registry/default/internal/sink/components/accordion-demo.tsx b/apps/www/registry/default/internal/sink/components/accordion-demo.tsx
new file mode 100644
index 00000000000..867862b20f2
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/accordion-demo.tsx
@@ -0,0 +1,32 @@
+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/www/registry/default/internal/sink/components/alert-demo.tsx b/apps/www/registry/default/internal/sink/components/alert-demo.tsx
new file mode 100644
index 00000000000..044f1412876
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/alert-demo.tsx
@@ -0,0 +1,19 @@
+import { Terminal } from "lucide-react"
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/registry/default/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/www/registry/default/internal/sink/components/alert-dialog-demo.tsx b/apps/www/registry/default/internal/sink/components/alert-dialog-demo.tsx
new file mode 100644
index 00000000000..2db8a610174
--- /dev/null
+++ b/apps/www/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/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/www/registry/default/internal/sink/components/app-sidebar.tsx b/apps/www/registry/default/internal/sink/components/app-sidebar.tsx
new file mode 100644
index 00000000000..0d18496fb2e
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/app-sidebar.tsx
@@ -0,0 +1,175 @@
+"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/blocks/sidebar-07/components/nav-main"
+import { NavProjects } from "@/registry/default/blocks/sidebar-07/components/nav-projects"
+import { NavUser } from "@/registry/default/blocks/sidebar-07/components/nav-user"
+import { TeamSwitcher } from "@/registry/default/blocks/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/shadcn.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/www/registry/default/internal/sink/components/aspect-ratio-demo.tsx b/apps/www/registry/default/internal/sink/components/aspect-ratio-demo.tsx
new file mode 100644
index 00000000000..0a2df058db4
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/aspect-ratio-demo.tsx
@@ -0,0 +1,16 @@
+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="h-full w-full rounded-md object-cover"
+      />
+    </AspectRatio>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/avatar-demo.tsx b/apps/www/registry/default/internal/sink/components/avatar-demo.tsx
new file mode 100644
index 00000000000..30798f50066
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/avatar-demo.tsx
@@ -0,0 +1,14 @@
+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/www/registry/default/internal/sink/components/badge-demo.tsx b/apps/www/registry/default/internal/sink/components/badge-demo.tsx
new file mode 100644
index 00000000000..9aca06ab9f2
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/badge-demo.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/default/ui/badge"
+
+export function BadgeDemo() {
+  return <Badge>Badge</Badge>
+}
diff --git a/apps/www/registry/default/internal/sink/components/badge-destructive.tsx b/apps/www/registry/default/internal/sink/components/badge-destructive.tsx
new file mode 100644
index 00000000000..db39c372b84
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/badge-destructive.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/default/ui/badge"
+
+export function BadgeDestructive() {
+  return <Badge variant="destructive">Destructive</Badge>
+}
diff --git a/apps/www/registry/default/internal/sink/components/badge-outline.tsx b/apps/www/registry/default/internal/sink/components/badge-outline.tsx
new file mode 100644
index 00000000000..66fb2741b41
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/badge-outline.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/default/ui/badge"
+
+export function BadgeOutline() {
+  return <Badge variant="outline">Outline</Badge>
+}
diff --git a/apps/www/registry/default/internal/sink/components/badge-secondary.tsx b/apps/www/registry/default/internal/sink/components/badge-secondary.tsx
new file mode 100644
index 00000000000..f61b2126869
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/badge-secondary.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/default/ui/badge"
+
+export function BadgeSecondary() {
+  return <Badge variant="secondary">Secondary</Badge>
+}
diff --git a/apps/www/registry/default/internal/sink/components/breadcrumb-demo.tsx b/apps/www/registry/default/internal/sink/components/breadcrumb-demo.tsx
new file mode 100644
index 00000000000..9c685cc9ee9
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/breadcrumb-demo.tsx
@@ -0,0 +1,49 @@
+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="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/www/registry/default/internal/sink/components/button-demo.tsx b/apps/www/registry/default/internal/sink/components/button-demo.tsx
new file mode 100644
index 00000000000..907691acf81
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/button-demo.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/default/ui/button"
+
+export function ButtonDemo() {
+  return <Button>Button</Button>
+}
diff --git a/apps/www/registry/default/internal/sink/components/button-destructive.tsx b/apps/www/registry/default/internal/sink/components/button-destructive.tsx
new file mode 100644
index 00000000000..946a21de4b2
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/button-destructive.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/default/ui/button"
+
+export function ButtonDestructive() {
+  return <Button variant="destructive">Destructive</Button>
+}
diff --git a/apps/www/registry/default/internal/sink/components/button-ghost.tsx b/apps/www/registry/default/internal/sink/components/button-ghost.tsx
new file mode 100644
index 00000000000..8b48327615d
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/button-ghost.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/default/ui/button"
+
+export function ButtonGhost() {
+  return <Button variant="ghost">Ghost</Button>
+}
diff --git a/apps/www/registry/default/internal/sink/components/button-link.tsx b/apps/www/registry/default/internal/sink/components/button-link.tsx
new file mode 100644
index 00000000000..279ace31bce
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/button-link.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/default/ui/button"
+
+export function ButtonLink() {
+  return <Button variant="link">Link</Button>
+}
diff --git a/apps/www/registry/default/internal/sink/components/button-loading.tsx b/apps/www/registry/default/internal/sink/components/button-loading.tsx
new file mode 100644
index 00000000000..64421e6eb90
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/button-loading.tsx
@@ -0,0 +1,12 @@
+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/www/registry/default/internal/sink/components/button-outline.tsx b/apps/www/registry/default/internal/sink/components/button-outline.tsx
new file mode 100644
index 00000000000..2644ca8a78a
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/button-outline.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/default/ui/button"
+
+export function ButtonOutline() {
+  return <Button variant="outline">Outline</Button>
+}
diff --git a/apps/www/registry/default/internal/sink/components/button-secondary.tsx b/apps/www/registry/default/internal/sink/components/button-secondary.tsx
new file mode 100644
index 00000000000..e16b2a50a9d
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/button-secondary.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/default/ui/button"
+
+export function ButtonSecondary() {
+  return <Button variant="secondary">Secondary</Button>
+}
diff --git a/apps/www/registry/default/internal/sink/components/button-with-icon.tsx b/apps/www/registry/default/internal/sink/components/button-with-icon.tsx
new file mode 100644
index 00000000000..9150b66fbc6
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/button-with-icon.tsx
@@ -0,0 +1,11 @@
+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/www/registry/default/internal/sink/components/calendar-demo.tsx b/apps/www/registry/default/internal/sink/components/calendar-demo.tsx
new file mode 100644
index 00000000000..3b50ccb0a32
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/calendar-demo.tsx
@@ -0,0 +1,18 @@
+"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/www/registry/default/internal/sink/components/card-demo.tsx b/apps/www/registry/default/internal/sink/components/card-demo.tsx
new file mode 100644
index 00000000000..0786b28785b
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/card-demo.tsx
@@ -0,0 +1,78 @@
+import { BellRing, Check } from "lucide-react"
+
+import { cn } 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={cn("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/www/registry/default/internal/sink/components/carousel-demo.tsx b/apps/www/registry/default/internal/sink/components/carousel-demo.tsx
new file mode 100644
index 00000000000..ac45e594422
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/carousel-demo.tsx
@@ -0,0 +1,32 @@
+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/www/registry/default/internal/sink/components/checkbox-demo.tsx b/apps/www/registry/default/internal/sink/components/checkbox-demo.tsx
new file mode 100644
index 00000000000..e56f44d02a3
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/checkbox-demo.tsx
@@ -0,0 +1,17 @@
+"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/www/registry/default/internal/sink/components/collapsible-demo.tsx b/apps/www/registry/default/internal/sink/components/collapsible-demo.tsx
new file mode 100644
index 00000000000..564dc9f9c39
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/collapsible-demo.tsx
@@ -0,0 +1,46 @@
+"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="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/www/registry/default/internal/sink/components/combobox-demo.tsx b/apps/www/registry/default/internal/sink/components/combobox-demo.tsx
new file mode 100644
index 00000000000..1478aa4ae83
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/combobox-demo.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } 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={cn(
+                      "ml-auto",
+                      value === framework.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/command-demo.tsx b/apps/www/registry/default/internal/sink/components/command-demo.tsx
new file mode 100644
index 00000000000..0e1dfd0d7a5
--- /dev/null
+++ b/apps/www/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/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/www/registry/default/internal/sink/components/component-wrapper.tsx b/apps/www/registry/default/internal/sink/components/component-wrapper.tsx
new file mode 100644
index 00000000000..61fe17029ad
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/component-wrapper.tsx
@@ -0,0 +1,22 @@
+import { cn } from "@/registry/default/lib/utils"
+
+export function ComponentWrapper({
+  className,
+  name,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<"div"> & { name: string }) {
+  return (
+    <div
+      className={cn("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/www/registry/default/internal/sink/components/context-menu-demo.tsx b/apps/www/registry/default/internal/sink/components/context-menu-demo.tsx
new file mode 100644
index 00000000000..e6c1677d173
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/context-menu-demo.tsx
@@ -0,0 +1,67 @@
+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/www/registry/default/internal/sink/components/date-picker-demo.tsx b/apps/www/registry/default/internal/sink/components/date-picker-demo.tsx
new file mode 100644
index 00000000000..fa6ec01049d
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/date-picker-demo.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+
+import { cn } 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={cn(
+            "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/www/registry/default/internal/sink/components/dialog-demo.tsx b/apps/www/registry/default/internal/sink/components/dialog-demo.tsx
new file mode 100644
index 00000000000..9ffd95110d7
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/dialog-demo.tsx
@@ -0,0 +1,47 @@
+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/www/registry/default/internal/sink/components/drawer-demo.tsx b/apps/www/registry/default/internal/sink/components/drawer-demo.tsx
new file mode 100644
index 00000000000..878f27088de
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/drawer-demo.tsx
@@ -0,0 +1,136 @@
+"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="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/www/registry/default/internal/sink/components/dropdown-menu-demo.tsx b/apps/www/registry/default/internal/sink/components/dropdown-menu-demo.tsx
new file mode 100644
index 00000000000..fb7a359c7f3
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/dropdown-menu-demo.tsx
@@ -0,0 +1,75 @@
+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/www/registry/default/internal/sink/components/hover-card-demo.tsx b/apps/www/registry/default/internal/sink/components/hover-card-demo.tsx
new file mode 100644
index 00000000000..39fc40a6d5e
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/hover-card-demo.tsx
@@ -0,0 +1,43 @@
+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 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/www/registry/default/internal/sink/components/input-demo.tsx b/apps/www/registry/default/internal/sink/components/input-demo.tsx
new file mode 100644
index 00000000000..ee5a1edcaf6
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/input-demo.tsx
@@ -0,0 +1,5 @@
+import { Input } from "@/registry/default/ui/input"
+
+export function InputDemo() {
+  return <Input type="email" placeholder="Email" />
+}
diff --git a/apps/www/registry/default/internal/sink/components/input-otp-demo.tsx b/apps/www/registry/default/internal/sink/components/input-otp-demo.tsx
new file mode 100644
index 00000000000..4c80e7ca2d3
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/input-otp-demo.tsx
@@ -0,0 +1,24 @@
+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/www/registry/default/internal/sink/components/label-demo.tsx b/apps/www/registry/default/internal/sink/components/label-demo.tsx
new file mode 100644
index 00000000000..c607e5e463d
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/label-demo.tsx
@@ -0,0 +1,13 @@
+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/www/registry/default/internal/sink/components/menubar-demo.tsx b/apps/www/registry/default/internal/sink/components/menubar-demo.tsx
new file mode 100644
index 00000000000..77f71ab6c37
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/menubar-demo.tsx
@@ -0,0 +1,107 @@
+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/www/registry/default/internal/sink/components/nav-main.tsx b/apps/www/registry/default/internal/sink/components/nav-main.tsx
new file mode 100644
index 00000000000..0856dbceb07
--- /dev/null
+++ b/apps/www/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/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/www/registry/default/internal/sink/components/nav-projects.tsx b/apps/www/registry/default/internal/sink/components/nav-projects.tsx
new file mode 100644
index 00000000000..859912e1237
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import {
+  Folder,
+  Forward,
+  MoreHorizontal,
+  Trash2,
+  type LucideIcon,
+} 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/www/registry/default/internal/sink/components/nav-user.tsx b/apps/www/registry/default/internal/sink/components/nav-user.tsx
new file mode 100644
index 00000000000..e22c32af62e
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"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="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/www/registry/default/internal/sink/components/navigation-menu-demo.tsx b/apps/www/registry/default/internal/sink/components/navigation-menu-demo.tsx
new file mode 100644
index 00000000000..8f8b06f7b4f
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/navigation-menu-demo.tsx
@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+
+import { cn } 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="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">
+                      shadcn/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={cn(
+            "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/www/registry/default/internal/sink/components/pagination-demo.tsx b/apps/www/registry/default/internal/sink/components/pagination-demo.tsx
new file mode 100644
index 00000000000..abafb455ea1
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/pagination-demo.tsx
@@ -0,0 +1,38 @@
+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/www/registry/default/internal/sink/components/popover-demo.tsx b/apps/www/registry/default/internal/sink/components/popover-demo.tsx
new file mode 100644
index 00000000000..5cd5bd61884
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/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 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/www/registry/default/internal/sink/components/progress-demo.tsx b/apps/www/registry/default/internal/sink/components/progress-demo.tsx
new file mode 100644
index 00000000000..20b909e6e7e
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/progress-demo.tsx
@@ -0,0 +1,16 @@
+"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-[60%]" />
+}
diff --git a/apps/www/registry/default/internal/sink/components/radio-group-demo.tsx b/apps/www/registry/default/internal/sink/components/radio-group-demo.tsx
new file mode 100644
index 00000000000..627616640e1
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/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 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/www/registry/default/internal/sink/components/resizable-handle.tsx b/apps/www/registry/default/internal/sink/components/resizable-handle.tsx
new file mode 100644
index 00000000000..e754ca4e440
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/resizable-handle.tsx
@@ -0,0 +1,26 @@
+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/www/registry/default/internal/sink/components/scroll-area-demo.tsx b/apps/www/registry/default/internal/sink/components/scroll-area-demo.tsx
new file mode 100644
index 00000000000..714f6e84ff4
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/scroll-area-demo.tsx
@@ -0,0 +1,24 @@
+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/www/registry/default/internal/sink/components/select-demo.tsx b/apps/www/registry/default/internal/sink/components/select-demo.tsx
new file mode 100644
index 00000000000..5481d23e4a3
--- /dev/null
+++ b/apps/www/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/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/www/registry/default/internal/sink/components/separator-demo.tsx b/apps/www/registry/default/internal/sink/components/separator-demo.tsx
new file mode 100644
index 00000000000..1b54c316912
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/separator-demo.tsx
@@ -0,0 +1,22 @@
+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-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/www/registry/default/internal/sink/components/sheet-demo.tsx b/apps/www/registry/default/internal/sink/components/sheet-demo.tsx
new file mode 100644
index 00000000000..fd5623f301e
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/sheet-demo.tsx
@@ -0,0 +1,50 @@
+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/www/registry/default/internal/sink/components/skeleton-demo.tsx b/apps/www/registry/default/internal/sink/components/skeleton-demo.tsx
new file mode 100644
index 00000000000..a641f768b23
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/skeleton-demo.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from "@/registry/default/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/www/registry/default/internal/sink/components/slider-demo.tsx b/apps/www/registry/default/internal/sink/components/slider-demo.tsx
new file mode 100644
index 00000000000..c762916dbb7
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/slider-demo.tsx
@@ -0,0 +1,16 @@
+import { cn } 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={cn("w-[60%]", className)}
+      {...props}
+    />
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/sonner-demo.tsx b/apps/www/registry/default/internal/sink/components/sonner-demo.tsx
new file mode 100644
index 00000000000..39327d5e5b9
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/sonner-demo.tsx
@@ -0,0 +1,24 @@
+"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",
+            onClick: () => console.log("Undo"),
+          },
+        })
+      }
+    >
+      Show Toast
+    </Button>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/switch-demo.tsx b/apps/www/registry/default/internal/sink/components/switch-demo.tsx
new file mode 100644
index 00000000000..aec79cf1a32
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/switch-demo.tsx
@@ -0,0 +1,11 @@
+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/www/registry/default/internal/sink/components/table-demo.tsx b/apps/www/registry/default/internal/sink/components/table-demo.tsx
new file mode 100644
index 00000000000..2a5d9b9a0b6
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/table-demo.tsx
@@ -0,0 +1,87 @@
+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/www/registry/default/internal/sink/components/tabs-demo.tsx b/apps/www/registry/default/internal/sink/components/tabs-demo.tsx
new file mode 100644
index 00000000000..19e60226bde
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/tabs-demo.tsx
@@ -0,0 +1,74 @@
+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/www/registry/default/internal/sink/components/team-switcher.tsx b/apps/www/registry/default/internal/sink/components/team-switcher.tsx
new file mode 100644
index 00000000000..64007a29a95
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/team-switcher.tsx
@@ -0,0 +1,89 @@
+"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="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/www/registry/default/internal/sink/components/textarea-demo.tsx b/apps/www/registry/default/internal/sink/components/textarea-demo.tsx
new file mode 100644
index 00000000000..d154d0cc8c0
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/textarea-demo.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from "@/registry/default/ui/textarea"
+
+export function TextareaDemo() {
+  return <Textarea placeholder="Type your message here." />
+}
diff --git a/apps/www/registry/default/internal/sink/components/toast-demo.tsx b/apps/www/registry/default/internal/sink/components/toast-demo.tsx
new file mode 100644
index 00000000000..158ead0c7be
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/toast-demo.tsx
@@ -0,0 +1,26 @@
+"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/www/registry/default/internal/sink/components/toggle-demo.tsx b/apps/www/registry/default/internal/sink/components/toggle-demo.tsx
new file mode 100644
index 00000000000..9b6cb5021d3
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/toggle-demo.tsx
@@ -0,0 +1,11 @@
+import { Bold } from "lucide-react"
+
+import { Toggle } from "@/registry/default/ui/toggle"
+
+export function ToggleDemo() {
+  return (
+    <Toggle aria-label="Toggle italic">
+      <Bold className="h-4 w-4" />
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/toggle-disabled.tsx b/apps/www/registry/default/internal/sink/components/toggle-disabled.tsx
new file mode 100644
index 00000000000..61a37137e60
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/toggle-disabled.tsx
@@ -0,0 +1,11 @@
+import { Underline } from "lucide-react"
+
+import { Toggle } from "@/registry/default/ui/toggle"
+
+export function ToggleDisabled() {
+  return (
+    <Toggle aria-label="Toggle italic" disabled>
+      <Underline className="h-4 w-4" />
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/default/internal/sink/components/toggle-group-demo.tsx b/apps/www/registry/default/internal/sink/components/toggle-group-demo.tsx
new file mode 100644
index 00000000000..49782c8ac05
--- /dev/null
+++ b/apps/www/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/default/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/www/registry/default/internal/sink/components/toggle-outline.tsx b/apps/www/registry/default/internal/sink/components/toggle-outline.tsx
new file mode 100644
index 00000000000..28aaa0aaef9
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/toggle-outline.tsx
@@ -0,0 +1,11 @@
+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/www/registry/default/internal/sink/components/toggle-with-text.tsx b/apps/www/registry/default/internal/sink/components/toggle-with-text.tsx
new file mode 100644
index 00000000000..0728ed6023e
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/toggle-with-text.tsx
@@ -0,0 +1,12 @@
+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/www/registry/default/internal/sink/components/tooltip-demo.tsx b/apps/www/registry/default/internal/sink/components/tooltip-demo.tsx
new file mode 100644
index 00000000000..5fa681f878a
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/components/tooltip-demo.tsx
@@ -0,0 +1,22 @@
+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/www/registry/default/internal/sink/page.tsx b/apps/www/registry/default/internal/sink/page.tsx
new file mode 100644
index 00000000000..86609b0e8ff
--- /dev/null
+++ b/apps/www/registry/default/internal/sink/page.tsx
@@ -0,0 +1,273 @@
+import { AccordionDemo } from "@/registry/default/internal/sink/components/accordion-demo"
+import { AlertDemo } from "@/registry/default/internal/sink/components/alert-demo"
+import { AlertDialogDemo } from "@/registry/default/internal/sink/components/alert-dialog-demo"
+import { AppSidebar } from "@/registry/default/internal/sink/components/app-sidebar"
+import { AspectRatioDemo } from "@/registry/default/internal/sink/components/aspect-ratio-demo"
+import { AvatarDemo } from "@/registry/default/internal/sink/components/avatar-demo"
+import { BadgeDemo } from "@/registry/default/internal/sink/components/badge-demo"
+import { BadgeDestructive } from "@/registry/default/internal/sink/components/badge-destructive"
+import { BadgeOutline } from "@/registry/default/internal/sink/components/badge-outline"
+import { BadgeSecondary } from "@/registry/default/internal/sink/components/badge-secondary"
+import { BreadcrumbDemo } from "@/registry/default/internal/sink/components/breadcrumb-demo"
+import { ButtonDemo } from "@/registry/default/internal/sink/components/button-demo"
+import { ButtonDestructive } from "@/registry/default/internal/sink/components/button-destructive"
+import { ButtonGhost } from "@/registry/default/internal/sink/components/button-ghost"
+import { ButtonLink } from "@/registry/default/internal/sink/components/button-link"
+import { ButtonLoading } from "@/registry/default/internal/sink/components/button-loading"
+import { ButtonOutline } from "@/registry/default/internal/sink/components/button-outline"
+import { ButtonSecondary } from "@/registry/default/internal/sink/components/button-secondary"
+import { ButtonWithIcon } from "@/registry/default/internal/sink/components/button-with-icon"
+import { CalendarDemo } from "@/registry/default/internal/sink/components/calendar-demo"
+import { CardDemo } from "@/registry/default/internal/sink/components/card-demo"
+import { CarouselDemo } from "@/registry/default/internal/sink/components/carousel-demo"
+import { CheckboxDemo } from "@/registry/default/internal/sink/components/checkbox-demo"
+import { CollapsibleDemo } from "@/registry/default/internal/sink/components/collapsible-demo"
+import { ComboboxDemo } from "@/registry/default/internal/sink/components/combobox-demo"
+import { CommandDemo } from "@/registry/default/internal/sink/components/command-demo"
+import { ComponentWrapper } from "@/registry/default/internal/sink/components/component-wrapper"
+import { ContextMenuDemo } from "@/registry/default/internal/sink/components/context-menu-demo"
+import { DatePickerDemo } from "@/registry/default/internal/sink/components/date-picker-demo"
+import { DialogDemo } from "@/registry/default/internal/sink/components/dialog-demo"
+import { DrawerDemo } from "@/registry/default/internal/sink/components/drawer-demo"
+import { DropdownMenuDemo } from "@/registry/default/internal/sink/components/dropdown-menu-demo"
+import { HoverCardDemo } from "@/registry/default/internal/sink/components/hover-card-demo"
+import { InputDemo } from "@/registry/default/internal/sink/components/input-demo"
+import { InputOTPDemo } from "@/registry/default/internal/sink/components/input-otp-demo"
+import { LabelDemo } from "@/registry/default/internal/sink/components/label-demo"
+import { MenubarDemo } from "@/registry/default/internal/sink/components/menubar-demo"
+import { NavigationMenuDemo } from "@/registry/default/internal/sink/components/navigation-menu-demo"
+import { PaginationDemo } from "@/registry/default/internal/sink/components/pagination-demo"
+import { PopoverDemo } from "@/registry/default/internal/sink/components/popover-demo"
+import { ProgressDemo } from "@/registry/default/internal/sink/components/progress-demo"
+import { RadioGroupDemo } from "@/registry/default/internal/sink/components/radio-group-demo"
+import { ResizableHandleDemo } from "@/registry/default/internal/sink/components/resizable-handle"
+import { ScrollAreaDemo } from "@/registry/default/internal/sink/components/scroll-area-demo"
+import { SelectDemo } from "@/registry/default/internal/sink/components/select-demo"
+import { SeparatorDemo } from "@/registry/default/internal/sink/components/separator-demo"
+import { SheetDemo } from "@/registry/default/internal/sink/components/sheet-demo"
+import { SkeletonDemo } from "@/registry/default/internal/sink/components/skeleton-demo"
+import { SliderDemo } from "@/registry/default/internal/sink/components/slider-demo"
+import { SonnerDemo } from "@/registry/default/internal/sink/components/sonner-demo"
+import { SwitchDemo } from "@/registry/default/internal/sink/components/switch-demo"
+import { TableDemo } from "@/registry/default/internal/sink/components/table-demo"
+import { TabsDemo } from "@/registry/default/internal/sink/components/tabs-demo"
+import { TextareaDemo } from "@/registry/default/internal/sink/components/textarea-demo"
+import { ToastDemo } from "@/registry/default/internal/sink/components/toast-demo"
+import { ToggleDemo } from "@/registry/default/internal/sink/components/toggle-demo"
+import { ToggleDisabled } from "@/registry/default/internal/sink/components/toggle-disabled"
+import { ToggleGroupDemo } from "@/registry/default/internal/sink/components/toggle-group-demo"
+import { ToggleOutline } from "@/registry/default/internal/sink/components/toggle-outline"
+import { ToggleWithText } from "@/registry/default/internal/sink/components/toggle-with-text"
+import { TooltipDemo } from "@/registry/default/internal/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/www/registry/default/ui/calendar.tsx b/apps/www/registry/default/ui/calendar.tsx
index e04fe19511f..b13169bec42 100644
--- a/apps/www/registry/default/ui/calendar.tsx
+++ b/apps/www/registry/default/ui/calendar.tsx
@@ -46,7 +46,7 @@ function Calendar({
           "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-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
         day_disabled: "text-muted-foreground opacity-50",
         day_range_middle:
           "aria-selected:bg-accent aria-selected:text-accent-foreground",
@@ -54,8 +54,12 @@ function Calendar({
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
+        ),
       }}
       {...props}
     />
diff --git a/apps/www/registry/default/ui/card.tsx b/apps/www/registry/default/ui/card.tsx
index afa13ecfa3b..f62edea578d 100644
--- a/apps/www/registry/default/ui/card.tsx
+++ b/apps/www/registry/default/ui/card.tsx
@@ -30,10 +30,10 @@ const CardHeader = React.forwardRef<
 CardHeader.displayName = "CardHeader"
 
 const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <h3
+  <div
     ref={ref}
     className={cn(
       "text-2xl font-semibold leading-none tracking-tight",
@@ -45,10 +45,10 @@ const CardTitle = React.forwardRef<
 CardTitle.displayName = "CardTitle"
 
 const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <p
+  <div
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
diff --git a/apps/www/registry/default/ui/chart.tsx b/apps/www/registry/default/ui/chart.tsx
index 8620baa3b32..32dc873f363 100644
--- a/apps/www/registry/default/ui/chart.tsx
+++ b/apps/www/registry/default/ui/chart.tsx
@@ -69,7 +69,7 @@ ChartContainer.displayName = "Chart"
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   const colorConfig = Object.entries(config).filter(
-    ([_, config]) => config.theme || config.color
+    ([, config]) => config.theme || config.color
   )
 
   if (!colorConfig.length) {
diff --git a/apps/www/registry/default/ui/command.tsx b/apps/www/registry/default/ui/command.tsx
index de609e930bf..4603919587a 100644
--- a/apps/www/registry/default/ui/command.tsx
+++ b/apps/www/registry/default/ui/command.tsx
@@ -23,9 +23,7 @@ const Command = React.forwardRef<
 ))
 Command.displayName = CommandPrimitive.displayName
 
-interface CommandDialogProps extends DialogProps {}
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg">
diff --git a/apps/www/registry/default/ui/input.tsx b/apps/www/registry/default/ui/input.tsx
index a921025cebb..68551b9276b 100644
--- a/apps/www/registry/default/ui/input.tsx
+++ b/apps/www/registry/default/ui/input.tsx
@@ -2,16 +2,13 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm 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",
+          "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}
diff --git a/apps/www/registry/default/ui/textarea.tsx b/apps/www/registry/default/ui/textarea.tsx
index 9f9a6dc5619..4d858bb6b02 100644
--- a/apps/www/registry/default/ui/textarea.tsx
+++ b/apps/www/registry/default/ui/textarea.tsx
@@ -2,23 +2,21 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background 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}
+    />
+  )
+})
 Textarea.displayName = "Textarea"
 
 export { Textarea }
diff --git a/apps/www/registry/default/ui/toggle.tsx b/apps/www/registry/default/ui/toggle.tsx
index b6f2e7d320d..c19bea37315 100644
--- a/apps/www/registry/default/ui/toggle.tsx
+++ b/apps/www/registry/default/ui/toggle.tsx
@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
   {
     variants: {
       variant: {
@@ -16,9 +16,9 @@ const toggleVariants = cva(
           "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 min-w-10",
+        sm: "h-9 px-2.5 min-w-9",
+        lg: "h-11 px-5 min-w-11",
       },
     },
     defaultVariants: {
diff --git a/apps/www/registry/default/v0/login-01.tsx b/apps/www/registry/default/v0/login-01.tsx
deleted file mode 100644
index c63ae1412f8..00000000000
--- a/apps/www/registry/default/v0/login-01.tsx
+++ /dev/null
@@ -1,70 +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 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">
-      <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/www/registry/default/v0/sidebar-01.tsx b/apps/www/registry/default/v0/sidebar-01.tsx
deleted file mode 100644
index 8dc79fb1166..00000000000
--- a/apps/www/registry/default/v0/sidebar-01.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Check, ChevronsUpDown, GalleryVerticalEnd, Search } 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"
-import { Label } from "@/registry/default/ui/label"
-import { Separator } from "@/registry/default/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarTrigger,
-} from "@/registry/default/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/www/registry/default/v0/sidebar-02.tsx b/apps/www/registry/default/v0/sidebar-02.tsx
deleted file mode 100644
index bfc097f3559..00000000000
--- a/apps/www/registry/default/v0/sidebar-02.tsx
+++ /dev/null
@@ -1,323 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  Check,
-  ChevronRight,
-  ChevronsUpDown,
-  GalleryVerticalEnd,
-  Search,
-} from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/default/ui/collapsible"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import { Label } from "@/registry/default/ui/label"
-import { Separator } from "@/registry/default/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarTrigger,
-} from "@/registry/default/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/www/registry/default/v0/sidebar-03.tsx b/apps/www/registry/default/v0/sidebar-03.tsx
deleted file mode 100644
index 24ac41876b9..00000000000
--- a/apps/www/registry/default/v0/sidebar-03.tsx
+++ /dev/null
@@ -1,270 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Check, ChevronsUpDown, GalleryVerticalEnd, Search } 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"
-import { Label } from "@/registry/default/ui/label"
-import { Separator } from "@/registry/default/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarTrigger,
-} from "@/registry/default/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/www/registry/default/v0/sidebar-04.tsx b/apps/www/registry/default/v0/sidebar-04.tsx
deleted file mode 100644
index e9a86dbd786..00000000000
--- a/apps/www/registry/default/v0/sidebar-04.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { GalleryVerticalEnd } from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-import { Separator } from "@/registry/default/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarHeader,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/default/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/www/registry/default/v0/sidebar-05.tsx b/apps/www/registry/default/v0/sidebar-05.tsx
deleted file mode 100644
index 660d989c624..00000000000
--- a/apps/www/registry/default/v0/sidebar-05.tsx
+++ /dev/null
@@ -1,288 +0,0 @@
-import { GalleryVerticalEnd, Minus, Plus, Search } from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/default/ui/collapsible"
-import { Label } from "@/registry/default/ui/label"
-import { Separator } from "@/registry/default/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarTrigger,
-} from "@/registry/default/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/www/registry/default/v0/sidebar-06.tsx b/apps/www/registry/default/v0/sidebar-06.tsx
deleted file mode 100644
index 6f25e819d68..00000000000
--- a/apps/www/registry/default/v0/sidebar-06.tsx
+++ /dev/null
@@ -1,287 +0,0 @@
-"use client"
-
-import { GalleryVerticalEnd, MoreHorizontal } from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import { Separator } from "@/registry/default/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarTrigger,
-  useSidebar,
-} from "@/registry/default/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/www/registry/default/v0/sidebar-07.tsx b/apps/www/registry/default/v0/sidebar-07.tsx
deleted file mode 100644
index bc942dfe747..00000000000
--- a/apps/www/registry/default/v0/sidebar-07.tsx
+++ /dev/null
@@ -1,482 +0,0 @@
-"use client"
-
-import * as React from "react"
-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 {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/default/ui/avatar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/default/ui/collapsible"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import { Separator } from "@/registry/default/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarTrigger,
-} from "@/registry/default/ui/sidebar"
-
-export const iframeHeight = "800px"
-
-export const description = "A sidebar that collapses to icons."
-
-// This is sample data.
-const data = {
-  user: {
-    name: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.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/www/registry/default/v0/sidebar-08.tsx b/apps/www/registry/default/v0/sidebar-08.tsx
deleted file mode 100644
index 165ed862dde..00000000000
--- a/apps/www/registry/default/v0/sidebar-08.tsx
+++ /dev/null
@@ -1,452 +0,0 @@
-"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/default/ui/avatar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/default/ui/collapsible"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-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,
-} from "@/registry/default/ui/sidebar"
-
-export const iframeHeight = "800px"
-
-export const description = "An inset sidebar with secondary navigation."
-
-const data = {
-  user: {
-    name: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.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/www/registry/default/v0/sidebar-09.tsx b/apps/www/registry/default/v0/sidebar-09.tsx
deleted file mode 100644
index a1aaf2b2407..00000000000
--- a/apps/www/registry/default/v0/sidebar-09.tsx
+++ /dev/null
@@ -1,426 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  ArchiveX,
-  BadgeCheck,
-  Bell,
-  ChevronsUpDown,
-  Command,
-  CreditCard,
-  File,
-  Inbox,
-  LogOut,
-  Send,
-  Sparkles,
-  Trash2,
-} from "lucide-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/default/ui/avatar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import { Label } from "@/registry/default/ui/label"
-import { Separator } from "@/registry/default/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-  SidebarTrigger,
-  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/shadcn.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/www/registry/default/v0/sidebar-10.tsx b/apps/www/registry/default/v0/sidebar-10.tsx
deleted file mode 100644
index b83ff2d45da..00000000000
--- a/apps/www/registry/default/v0/sidebar-10.tsx
+++ /dev/null
@@ -1,743 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  ArrowDown,
-  ArrowUp,
-  ArrowUpRight,
-  AudioWaveform,
-  Bell,
-  Blocks,
-  Calendar,
-  ChevronDown,
-  ChevronRight,
-  Command,
-  Copy,
-  CornerUpLeft,
-  CornerUpRight,
-  FileText,
-  GalleryVerticalEnd,
-  Home,
-  Inbox,
-  LineChart,
-  Link,
-  MessageCircleQuestion,
-  MoreHorizontal,
-  Plus,
-  Search,
-  Settings2,
-  Sparkles,
-  Star,
-  StarOff,
-  Trash,
-  Trash2,
-  type LucideIcon,
-} from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-} from "@/registry/default/ui/breadcrumb"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/default/ui/collapsible"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/default/ui/popover"
-import { Separator } from "@/registry/default/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarTrigger,
-  useSidebar,
-} from "@/registry/default/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/www/registry/default/v0/sidebar-11.tsx b/apps/www/registry/default/v0/sidebar-11.tsx
deleted file mode 100644
index 5aced73b9e2..00000000000
--- a/apps/www/registry/default/v0/sidebar-11.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import * as React from "react"
-import { ChevronRight, File, Folder } from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/default/ui/collapsible"
-import { Separator } from "@/registry/default/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarProvider,
-  SidebarRail,
-  SidebarTrigger,
-} 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 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/www/registry/default/v0/sidebar-12.tsx b/apps/www/registry/default/v0/sidebar-12.tsx
deleted file mode 100644
index f5694f9bc23..00000000000
--- a/apps/www/registry/default/v0/sidebar-12.tsx
+++ /dev/null
@@ -1,288 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  BadgeCheck,
-  Bell,
-  Check,
-  ChevronRight,
-  ChevronsUpDown,
-  CreditCard,
-  LogOut,
-  Plus,
-  Sparkles,
-} from "lucide-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/default/ui/avatar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-} from "@/registry/default/ui/breadcrumb"
-import { Calendar } from "@/registry/default/ui/calendar"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/default/ui/collapsible"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import { Separator } from "@/registry/default/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-} from "@/registry/default/ui/sidebar"
-
-// This is sample data.
-const data = {
-  user: {
-    name: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.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/www/registry/default/v0/sidebar-13.tsx b/apps/www/registry/default/v0/sidebar-13.tsx
deleted file mode 100644
index 950cbcad558..00000000000
--- a/apps/www/registry/default/v0/sidebar-13.tsx
+++ /dev/null
@@ -1,141 +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"
-
-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/www/registry/default/v0/sidebar-14.tsx b/apps/www/registry/default/v0/sidebar-14.tsx
deleted file mode 100644
index 41346b6ae84..00000000000
--- a/apps/www/registry/default/v0/sidebar-14.tsx
+++ /dev/null
@@ -1,246 +0,0 @@
-import * as React from "react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarTrigger,
-} from "@/registry/default/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/www/registry/default/v0/sidebar-15.tsx b/apps/www/registry/default/v0/sidebar-15.tsx
deleted file mode 100644
index 64e5b79ccfa..00000000000
--- a/apps/www/registry/default/v0/sidebar-15.tsx
+++ /dev/null
@@ -1,818 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  ArrowUpRight,
-  AudioWaveform,
-  BadgeCheck,
-  Bell,
-  Blocks,
-  CalendarIcon,
-  Check,
-  ChevronDown,
-  ChevronRight,
-  ChevronsUpDown,
-  Command,
-  CreditCard,
-  Home,
-  Inbox,
-  Link,
-  LogOut,
-  MessageCircleQuestion,
-  MoreHorizontal,
-  Plus,
-  Search,
-  Settings2,
-  Sparkles,
-  StarOff,
-  Trash2,
-  type LucideIcon,
-} from "lucide-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/default/ui/avatar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-} from "@/registry/default/ui/breadcrumb"
-import { Calendar } from "@/registry/default/ui/calendar"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/default/ui/collapsible"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import { Separator } from "@/registry/default/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/default/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: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.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/www/registry/index.ts b/apps/www/registry/index.ts
index 977e351de1a..bb829727e65 100644
--- a/apps/www/registry/index.ts
+++ b/apps/www/registry/index.ts
@@ -2,19 +2,21 @@ 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"
-import { v0 } from "@/registry/registry-v0"
 import { Registry } from "@/registry/schema"
 
 export const registry: Registry = [
   ...ui,
-  ...examples,
   ...blocks,
   ...charts,
   ...lib,
   ...hooks,
   ...themes,
-  ...v0,
+
+  // Internal use only.
+  ...internal,
+  ...examples,
 ]
diff --git a/apps/www/registry/new-york/block/authentication-01.tsx b/apps/www/registry/new-york/block/authentication-01.tsx
deleted file mode 100644
index 84e1e4575bf..00000000000
--- a/apps/www/registry/new-york/block/authentication-01.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/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/www/registry/new-york/block/authentication-02.tsx b/apps/www/registry/new-york/block/authentication-02.tsx
deleted file mode 100644
index bb1517bee41..00000000000
--- a/apps/www/registry/new-york/block/authentication-02.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import Link from "next/link"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/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/www/registry/new-york/block/authentication-03.tsx b/apps/www/registry/new-york/block/authentication-03.tsx
deleted file mode 100644
index 727f9ed3c87..00000000000
--- a/apps/www/registry/new-york/block/authentication-03.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import Link from "next/link"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/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/www/registry/new-york/block/authentication-04.tsx b/apps/www/registry/new-york/block/authentication-04.tsx
deleted file mode 100644
index cee34f6c650..00000000000
--- a/apps/www/registry/new-york/block/authentication-04.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import Image from "next/image"
-import Link from "next/link"
-
-import { Button } from "@/registry/new-york/ui/button"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/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-balance text-muted-foreground">
-              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="hidden bg-muted lg:block">
-        <Image
-          src="/placeholder.svg"
-          alt="Image"
-          width="1920"
-          height="1080"
-          className="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
-        />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/registry/new-york/block/chart-area-interactive.tsx b/apps/www/registry/new-york/block/chart-area-interactive.tsx
deleted file mode 100644
index 1cd672af11c..00000000000
--- a/apps/www/registry/new-york/block/chart-area-interactive.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/new-york/ui/chart"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york/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/www/registry/new-york/block/chart-tooltip-default.tsx b/apps/www/registry/new-york/block/chart-tooltip-default.tsx
deleted file mode 100644
index 93fe696fa43..00000000000
--- a/apps/www/registry/new-york/block/chart-tooltip-default.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-"use client"
-
-import { Bar, BarChart, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/new-york/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/www/registry/new-york/block/chart-tooltip-indicator-line.tsx b/apps/www/registry/new-york/block/chart-tooltip-indicator-line.tsx
deleted file mode 100644
index 431dbf6719d..00000000000
--- a/apps/www/registry/new-york/block/chart-tooltip-indicator-line.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-"use client"
-
-import { Bar, BarChart, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/new-york/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/www/registry/new-york/block/charts-01-chunk-0.tsx b/apps/www/registry/new-york/block/charts-01-chunk-0.tsx
deleted file mode 100644
index 38d65597661..00000000000
--- a/apps/www/registry/new-york/block/charts-01-chunk-0.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-"use client"
-
-import { Bar, BarChart, Label, Rectangle, ReferenceLine, XAxis } from "recharts"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york//ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/new-york//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="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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/charts-01-chunk-1.tsx b/apps/www/registry/new-york/block/charts-01-chunk-1.tsx
deleted file mode 100644
index 8a2cd35b735..00000000000
--- a/apps/www/registry/new-york/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/new-york//ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/new-york//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-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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/charts-01-chunk-2.tsx b/apps/www/registry/new-york/block/charts-01-chunk-2.tsx
deleted file mode 100644
index e3043609a5a..00000000000
--- a/apps/www/registry/new-york/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/new-york//ui/card"
-import { ChartContainer } from "@/registry/new-york//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-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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/charts-01-chunk-3.tsx b/apps/www/registry/new-york/block/charts-01-chunk-3.tsx
deleted file mode 100644
index 0e520f38388..00000000000
--- a/apps/www/registry/new-york/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/new-york//ui/card"
-import { ChartContainer } from "@/registry/new-york//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-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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/charts-01-chunk-4.tsx b/apps/www/registry/new-york/block/charts-01-chunk-4.tsx
deleted file mode 100644
index 958ddd39189..00000000000
--- a/apps/www/registry/new-york/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/new-york//ui/card"
-import { ChartContainer } from "@/registry/new-york//ui/chart"
-import { Separator } from "@/registry/new-york//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-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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/charts-01-chunk-5.tsx b/apps/www/registry/new-york/block/charts-01-chunk-5.tsx
deleted file mode 100644
index 54d3bada2f4..00000000000
--- a/apps/www/registry/new-york/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/new-york//ui/card"
-import { ChartContainer } from "@/registry/new-york//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-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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/charts-01-chunk-6.tsx b/apps/www/registry/new-york/block/charts-01-chunk-6.tsx
deleted file mode 100644
index 8d88a3dcc21..00000000000
--- a/apps/www/registry/new-york/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/new-york//ui/card"
-import { ChartContainer } from "@/registry/new-york//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-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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/charts-01-chunk-7.tsx b/apps/www/registry/new-york/block/charts-01-chunk-7.tsx
deleted file mode 100644
index cd6a922eb48..00000000000
--- a/apps/www/registry/new-york/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/new-york//ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/registry/new-york//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="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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-0.tsx
deleted file mode 100644
index cbb1464e379..00000000000
--- a/apps/www/registry/new-york/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/new-york/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="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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-1.tsx
deleted file mode 100644
index 0e090f523ce..00000000000
--- a/apps/www/registry/new-york/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/new-york/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="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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-2.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-2.tsx
deleted file mode 100644
index ac121ea09cb..00000000000
--- a/apps/www/registry/new-york/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/new-york/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="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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-3.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-3.tsx
deleted file mode 100644
index 3dab661eef5..00000000000
--- a/apps/www/registry/new-york/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/new-york/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="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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-4.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-4.tsx
deleted file mode 100644
index f24999e4b12..00000000000
--- a/apps/www/registry/new-york/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/new-york/ui/badge"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/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="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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-01-chunk-5.tsx b/apps/www/registry/new-york/block/dashboard-01-chunk-5.tsx
deleted file mode 100644
index a9d904348fa..00000000000
--- a/apps/www/registry/new-york/block/dashboard-01-chunk-5.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-"use client"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york/ui/avatar"
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/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 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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-02-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-02-chunk-0.tsx
deleted file mode 100644
index 86cb08dda79..00000000000
--- a/apps/www/registry/new-york/block/dashboard-02-chunk-0.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/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/www/registry/new-york/block/dashboard-02-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-02-chunk-1.tsx
deleted file mode 100644
index 0fd5cd0b94d..00000000000
--- a/apps/www/registry/new-york/block/dashboard-02-chunk-1.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-"use client"
-
-import { Button } from "@/registry/new-york/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-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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-03-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-03-chunk-0.tsx
deleted file mode 100644
index 735ffc053be..00000000000
--- a/apps/www/registry/new-york/block/dashboard-03-chunk-0.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-"use client"
-
-import { Bird, Rabbit, Turtle } from "lucide-react"
-
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york/ui/select"
-import { Textarea } from "@/registry/new-york/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="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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-03-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-03-chunk-1.tsx
deleted file mode 100644
index 709b45c689b..00000000000
--- a/apps/www/registry/new-york/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/new-york/ui/button"
-import { Label } from "@/registry/new-york/ui/label"
-import { Textarea } from "@/registry/new-york/ui/textarea"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york/ui/tooltip"
-
-export default function Component() {
-  return (
-    <form
-      className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring"
-      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/www/registry/new-york/block/dashboard-04-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-04-chunk-0.tsx
deleted file mode 100644
index 406f27e0896..00000000000
--- a/apps/www/registry/new-york/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="grid gap-4 text-sm text-muted-foreground"
-      x-chunk="dashboard-04-chunk-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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-04-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-04-chunk-1.tsx
deleted file mode 100644
index 289544ec759..00000000000
--- a/apps/www/registry/new-york/block/dashboard-04-chunk-1.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/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/www/registry/new-york/block/dashboard-04-chunk-2.tsx b/apps/www/registry/new-york/block/dashboard-04-chunk-2.tsx
deleted file mode 100644
index a3f20b79be4..00000000000
--- a/apps/www/registry/new-york/block/dashboard-04-chunk-2.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Checkbox } from "@/registry/new-york/ui/checkbox"
-import { Input } from "@/registry/new-york/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/www/registry/new-york/block/dashboard-05-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-0.tsx
deleted file mode 100644
index 79f02a115cc..00000000000
--- a/apps/www/registry/new-york/block/dashboard-05-chunk-0.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-"use client"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/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="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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-05-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-1.tsx
deleted file mode 100644
index bd780f90c92..00000000000
--- a/apps/www/registry/new-york/block/dashboard-05-chunk-1.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Progress } from "@/registry/new-york/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-xs text-muted-foreground">+25% from last week</div>
-      </CardContent>
-      <CardFooter>
-        <Progress value={25} aria-label="25% increase" />
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-05-chunk-2.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-2.tsx
deleted file mode 100644
index 3ea1caea2f8..00000000000
--- a/apps/www/registry/new-york/block/dashboard-05-chunk-2.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Progress } from "@/registry/new-york/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-xs text-muted-foreground">
-          +10% from last month
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Progress value={12} aria-label="12% increase" />
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-05-chunk-3.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-3.tsx
deleted file mode 100644
index 626b1bf3d33..00000000000
--- a/apps/www/registry/new-york/block/dashboard-05-chunk-3.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-"use client"
-
-import { Badge } from "@/registry/new-york/ui/badge"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/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="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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-05-chunk-4.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-4.tsx
deleted file mode 100644
index 5fa654e8f62..00000000000
--- a/apps/www/registry/new-york/block/dashboard-05-chunk-4.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-"use client"
-
-import {
-  ChevronLeft,
-  ChevronRight,
-  Copy,
-  CreditCard,
-  MoreVertical,
-  Truck,
-} from "lucide-react"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-} from "@/registry/new-york/ui/pagination"
-import { Separator } from "@/registry/new-york/ui/separator"
-
-export default function Component() {
-  return (
-    <Card className="overflow-hidden" x-chunk="dashboard-05-chunk-4">
-      <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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-05-chunk-5.tsx b/apps/www/registry/new-york/block/dashboard-05-chunk-5.tsx
deleted file mode 100644
index e49b61e39f2..00000000000
--- a/apps/www/registry/new-york/block/dashboard-05-chunk-5.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import {
-  ChevronLeft,
-  ChevronRight,
-  Copy,
-  CreditCard,
-  MoreVertical,
-  Truck,
-} from "lucide-react"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-} from "@/registry/new-york/ui/pagination"
-import { Separator } from "@/registry/new-york/ui/separator"
-
-export default function Component() {
-  return (
-    <Card className="overflow-hidden" x-chunk="dashboard-05-chunk-5">
-      <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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-06-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-06-chunk-0.tsx
deleted file mode 100644
index 1604e4bf728..00000000000
--- a/apps/www/registry/new-york/block/dashboard-06-chunk-0.tsx
+++ /dev/null
@@ -1,289 +0,0 @@
-"use client"
-
-import Image from "next/image"
-import { MoreHorizontal } from "lucide-react"
-
-import { Badge } from "@/registry/new-york/ui/badge"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/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="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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-06-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-06-chunk-1.tsx
deleted file mode 100644
index 202910bc94a..00000000000
--- a/apps/www/registry/new-york/block/dashboard-06-chunk-1.tsx
+++ /dev/null
@@ -1,287 +0,0 @@
-import Image from "next/image"
-import { MoreHorizontal } from "lucide-react"
-
-import { Badge } from "@/registry/new-york/ui/badge"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/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="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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-07-chunk-0.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-0.tsx
deleted file mode 100644
index f97e3902c5a..00000000000
--- a/apps/www/registry/new-york/block/dashboard-07-chunk-0.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-"use client"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
-import { Textarea } from "@/registry/new-york/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/www/registry/new-york/block/dashboard-07-chunk-1.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-1.tsx
deleted file mode 100644
index 1e6535fe946..00000000000
--- a/apps/www/registry/new-york/block/dashboard-07-chunk-1.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-"use client"
-
-import { PlusCircle } from "lucide-react"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/ui/table"
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york/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="h-3.5 w-3.5" />
-          Add Variant
-        </Button>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-07-chunk-2.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-2.tsx
deleted file mode 100644
index c391a2c2bee..00000000000
--- a/apps/www/registry/new-york/block/dashboard-07-chunk-2.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-"use client"
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Label } from "@/registry/new-york/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york/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/www/registry/new-york/block/dashboard-07-chunk-3.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-3.tsx
deleted file mode 100644
index 7b4a53495fb..00000000000
--- a/apps/www/registry/new-york/block/dashboard-07-chunk-3.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client"
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Label } from "@/registry/new-york/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york/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/www/registry/new-york/block/dashboard-07-chunk-4.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-4.tsx
deleted file mode 100644
index 06c58d33037..00000000000
--- a/apps/www/registry/new-york/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/new-york/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="h-4 w-4 text-muted-foreground" />
-              <span className="sr-only">Upload</span>
-            </button>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/block/dashboard-07-chunk-5.tsx b/apps/www/registry/new-york/block/dashboard-07-chunk-5.tsx
deleted file mode 100644
index a2279c13bd5..00000000000
--- a/apps/www/registry/new-york/block/dashboard-07-chunk-5.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-"use client"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/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/www/registry/new-york/block/demo-sidebar-controlled.tsx b/apps/www/registry/new-york/block/demo-sidebar-controlled.tsx
deleted file mode 100644
index 741e269582a..00000000000
--- a/apps/www/registry/new-york/block/demo-sidebar-controlled.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  Frame,
-  LifeBuoy,
-  Map,
-  PanelLeftClose,
-  PanelLeftOpen,
-  PieChart,
-  Send,
-} from "lucide-react"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-} from "@/registry/new-york/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/www/registry/new-york/block/demo-sidebar-footer.tsx b/apps/www/registry/new-york/block/demo-sidebar-footer.tsx
deleted file mode 100644
index 831581140d7..00000000000
--- a/apps/www/registry/new-york/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/new-york/ui/dropdown-menu"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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/www/registry/new-york/block/demo-sidebar-group-action.tsx b/apps/www/registry/new-york/block/demo-sidebar-group-action.tsx
deleted file mode 100644
index f1fb434f9a2..00000000000
--- a/apps/www/registry/new-york/block/demo-sidebar-group-action.tsx
+++ /dev/null
@@ -1,79 +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/new-york/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/www/registry/new-york/block/demo-sidebar-group-collapsible.tsx b/apps/www/registry/new-york/block/demo-sidebar-group-collapsible.tsx
deleted file mode 100644
index 5752845afe9..00000000000
--- a/apps/www/registry/new-york/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/new-york/ui/collapsible"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-} from "@/registry/new-york/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/www/registry/new-york/block/demo-sidebar-group.tsx b/apps/www/registry/new-york/block/demo-sidebar-group.tsx
deleted file mode 100644
index de2e87dbdd7..00000000000
--- a/apps/www/registry/new-york/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/new-york/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/www/registry/new-york/block/demo-sidebar-header.tsx b/apps/www/registry/new-york/block/demo-sidebar-header.tsx
deleted file mode 100644
index 5b496d2883b..00000000000
--- a/apps/www/registry/new-york/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/new-york/ui/dropdown-menu"
-import {
-  Sidebar,
-  SidebarHeader,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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/www/registry/new-york/block/demo-sidebar-menu-action.tsx b/apps/www/registry/new-york/block/demo-sidebar-menu-action.tsx
deleted file mode 100644
index 408c6bdb16f..00000000000
--- a/apps/www/registry/new-york/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/new-york/ui/dropdown-menu"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-} from "@/registry/new-york/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/www/registry/new-york/block/demo-sidebar-menu-badge.tsx b/apps/www/registry/new-york/block/demo-sidebar-menu-badge.tsx
deleted file mode 100644
index 9fc60134490..00000000000
--- a/apps/www/registry/new-york/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/new-york/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/www/registry/new-york/block/demo-sidebar-menu-collapsible.tsx b/apps/www/registry/new-york/block/demo-sidebar-menu-collapsible.tsx
deleted file mode 100644
index 6bf5a1db8f7..00000000000
--- a/apps/www/registry/new-york/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/new-york/ui/collapsible"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-} from "@/registry/new-york/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/www/registry/new-york/block/demo-sidebar-menu-sub.tsx b/apps/www/registry/new-york/block/demo-sidebar-menu-sub.tsx
deleted file mode 100644
index 1947f65de8a..00000000000
--- a/apps/www/registry/new-york/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/new-york/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/www/registry/new-york/block/demo-sidebar-menu.tsx b/apps/www/registry/new-york/block/demo-sidebar-menu.tsx
deleted file mode 100644
index 9b5e3eaca8a..00000000000
--- a/apps/www/registry/new-york/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/new-york/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/www/registry/new-york/block/demo-sidebar-rsc.tsx b/apps/www/registry/new-york/block/demo-sidebar-rsc.tsx
deleted file mode 100644
index 61a62375916..00000000000
--- a/apps/www/registry/new-york/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/new-york/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/www/registry/new-york/block/demo-sidebar.tsx b/apps/www/registry/new-york/block/demo-sidebar.tsx
deleted file mode 100644
index c28bb4f68a5..00000000000
--- a/apps/www/registry/new-york/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/new-york/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/www/registry/new-york/block/login-01/components/login-form.tsx b/apps/www/registry/new-york/block/login-01/components/login-form.tsx
deleted file mode 100644
index 4820320f865..00000000000
--- a/apps/www/registry/new-york/block/login-01/components/login-form.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import Link from "next/link"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/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/www/registry/new-york/block/login-01/page.tsx b/apps/www/registry/new-york/block/login-01/page.tsx
deleted file mode 100644
index 0d346a56358..00000000000
--- a/apps/www/registry/new-york/block/login-01/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { LoginForm } from "@/registry/new-york/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/www/registry/new-york/block/sidebar-01/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-01/components/app-sidebar.tsx
deleted file mode 100644
index b8003cdb8b7..00000000000
--- a/apps/www/registry/new-york/block/sidebar-01/components/app-sidebar.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import * as React from "react"
-
-import { SearchForm } from "@/registry/new-york/block/sidebar-01/components/search-form"
-import { VersionSwitcher } from "@/registry/new-york/block/sidebar-01/components/version-switcher"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarRail,
-} from "@/registry/new-york/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/www/registry/new-york/block/sidebar-01/page.tsx b/apps/www/registry/new-york/block/sidebar-01/page.tsx
deleted file mode 100644
index 939cfefe989..00000000000
--- a/apps/www/registry/new-york/block/sidebar-01/page.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-01/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/registry/new-york/block/sidebar-02/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-02/components/app-sidebar.tsx
deleted file mode 100644
index 820bfa61a72..00000000000
--- a/apps/www/registry/new-york/block/sidebar-02/components/app-sidebar.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-import * as React from "react"
-import { ChevronRight } from "lucide-react"
-
-import { SearchForm } from "@/registry/new-york/block/sidebar-02/components/search-form"
-import { VersionSwitcher } from "@/registry/new-york/block/sidebar-02/components/version-switcher"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/new-york/ui/collapsible"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarRail,
-} from "@/registry/new-york/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/www/registry/new-york/block/sidebar-02/page.tsx b/apps/www/registry/new-york/block/sidebar-02/page.tsx
deleted file mode 100644
index e5ae98e9fdb..00000000000
--- a/apps/www/registry/new-york/block/sidebar-02/page.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-02/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/ui/sidebar"
-
-export const iframeHeight = "800px"
-
-export const description = "A sidebar with collapsible sections."
-
-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/www/registry/new-york/block/sidebar-03/page.tsx b/apps/www/registry/new-york/block/sidebar-03/page.tsx
deleted file mode 100644
index b16067763ca..00000000000
--- a/apps/www/registry/new-york/block/sidebar-03/page.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-03/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/registry/new-york/block/sidebar-04/page.tsx b/apps/www/registry/new-york/block/sidebar-04/page.tsx
deleted file mode 100644
index a7f7dee47cb..00000000000
--- a/apps/www/registry/new-york/block/sidebar-04/page.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-04/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/registry/new-york/block/sidebar-05/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-05/components/app-sidebar.tsx
deleted file mode 100644
index 3ff44d7d4f9..00000000000
--- a/apps/www/registry/new-york/block/sidebar-05/components/app-sidebar.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-import * as React from "react"
-import { GalleryVerticalEnd, Minus, Plus } from "lucide-react"
-
-import { SearchForm } from "@/registry/new-york/block/sidebar-05/components/search-form"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/new-york/ui/collapsible"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarRail,
-} from "@/registry/new-york/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/www/registry/new-york/block/sidebar-05/page.tsx b/apps/www/registry/new-york/block/sidebar-05/page.tsx
deleted file mode 100644
index d2cecba4b18..00000000000
--- a/apps/www/registry/new-york/block/sidebar-05/page.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-05/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/registry/new-york/block/sidebar-06/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-06/components/app-sidebar.tsx
deleted file mode 100644
index 868205a18ed..00000000000
--- a/apps/www/registry/new-york/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/new-york/block/sidebar-06/components/nav-main"
-import { SidebarOptInForm } from "@/registry/new-york/block/sidebar-06/components/sidebar-opt-in-form"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarRail,
-} from "@/registry/new-york/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/www/registry/new-york/block/sidebar-06/page.tsx b/apps/www/registry/new-york/block/sidebar-06/page.tsx
deleted file mode 100644
index 8a8fd3e1a62..00000000000
--- a/apps/www/registry/new-york/block/sidebar-06/page.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-06/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/registry/new-york/block/sidebar-07/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-07/components/app-sidebar.tsx
deleted file mode 100644
index d216bb6895b..00000000000
--- a/apps/www/registry/new-york/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/new-york/block/sidebar-07/components/nav-main"
-import { NavProjects } from "@/registry/new-york/block/sidebar-07/components/nav-projects"
-import { NavUser } from "@/registry/new-york/block/sidebar-07/components/nav-user"
-import { TeamSwitcher } from "@/registry/new-york/block/sidebar-07/components/team-switcher"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarRail,
-} from "@/registry/new-york/ui/sidebar"
-
-// This is sample data.
-const data = {
-  user: {
-    name: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.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/www/registry/new-york/block/sidebar-07/page.tsx b/apps/www/registry/new-york/block/sidebar-07/page.tsx
deleted file mode 100644
index 8d3b2e871d1..00000000000
--- a/apps/www/registry/new-york/block/sidebar-07/page.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-07/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/registry/new-york/block/sidebar-08/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-08/components/app-sidebar.tsx
deleted file mode 100644
index e882693a340..00000000000
--- a/apps/www/registry/new-york/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/new-york/block/sidebar-08/components/nav-main"
-import { NavProjects } from "@/registry/new-york/block/sidebar-08/components/nav-projects"
-import { NavSecondary } from "@/registry/new-york/block/sidebar-08/components/nav-secondary"
-import { NavUser } from "@/registry/new-york/block/sidebar-08/components/nav-user"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from "@/registry/new-york/ui/sidebar"
-
-const data = {
-  user: {
-    name: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.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/www/registry/new-york/block/sidebar-08/page.tsx b/apps/www/registry/new-york/block/sidebar-08/page.tsx
deleted file mode 100644
index e9428ca0224..00000000000
--- a/apps/www/registry/new-york/block/sidebar-08/page.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-08/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/registry/new-york/block/sidebar-09/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-09/components/app-sidebar.tsx
deleted file mode 100644
index ad41d0b7b73..00000000000
--- a/apps/www/registry/new-york/block/sidebar-09/components/app-sidebar.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ArchiveX, Command, File, Inbox, Send, Trash2 } from "lucide-react"
-
-import { NavUser } from "@/registry/new-york/block/sidebar-09/components/nav-user"
-import { Label } from "@/registry/new-york/ui/label"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarHeader,
-  SidebarInput,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  useSidebar,
-} from "@/registry/new-york/ui/sidebar"
-import { Switch } from "@/registry/new-york/ui/switch"
-
-// This is sample data
-const data = {
-  user: {
-    name: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.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/www/registry/new-york/block/sidebar-09/page.tsx b/apps/www/registry/new-york/block/sidebar-09/page.tsx
deleted file mode 100644
index 079c08bbb8a..00000000000
--- a/apps/www/registry/new-york/block/sidebar-09/page.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-09/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/registry/new-york/block/sidebar-10/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-10/components/app-sidebar.tsx
deleted file mode 100644
index d7e53083f6d..00000000000
--- a/apps/www/registry/new-york/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/new-york/block/sidebar-10/components/nav-favorites"
-import { NavMain } from "@/registry/new-york/block/sidebar-10/components/nav-main"
-import { NavSecondary } from "@/registry/new-york/block/sidebar-10/components/nav-secondary"
-import { NavWorkspaces } from "@/registry/new-york/block/sidebar-10/components/nav-workspaces"
-import { TeamSwitcher } from "@/registry/new-york/block/sidebar-10/components/team-switcher"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarHeader,
-  SidebarRail,
-} from "@/registry/new-york/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/www/registry/new-york/block/sidebar-10/page.tsx b/apps/www/registry/new-york/block/sidebar-10/page.tsx
deleted file mode 100644
index d9725a0e944..00000000000
--- a/apps/www/registry/new-york/block/sidebar-10/page.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-10/components/app-sidebar"
-import { NavActions } from "@/registry/new-york/block/sidebar-10/components/nav-actions"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/registry/new-york/block/sidebar-11/page.tsx b/apps/www/registry/new-york/block/sidebar-11/page.tsx
deleted file mode 100644
index 21622760017..00000000000
--- a/apps/www/registry/new-york/block/sidebar-11/page.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-11/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/registry/new-york/block/sidebar-12/components/app-sidebar.tsx b/apps/www/registry/new-york/block/sidebar-12/components/app-sidebar.tsx
deleted file mode 100644
index 2276d0930cf..00000000000
--- a/apps/www/registry/new-york/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/new-york/block/sidebar-12/components/calendars"
-import { DatePicker } from "@/registry/new-york/block/sidebar-12/components/date-picker"
-import { NavUser } from "@/registry/new-york/block/sidebar-12/components/nav-user"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarRail,
-  SidebarSeparator,
-} from "@/registry/new-york/ui/sidebar"
-
-// This is sample data.
-const data = {
-  user: {
-    name: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.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/www/registry/new-york/block/sidebar-12/page.tsx b/apps/www/registry/new-york/block/sidebar-12/page.tsx
deleted file mode 100644
index b8d7ecbcaa5..00000000000
--- a/apps/www/registry/new-york/block/sidebar-12/page.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-12/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/ui/sidebar"
-
-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>
-  )
-}
diff --git a/apps/www/registry/new-york/block/sidebar-13/page.tsx b/apps/www/registry/new-york/block/sidebar-13/page.tsx
deleted file mode 100644
index d20a6de00ef..00000000000
--- a/apps/www/registry/new-york/block/sidebar-13/page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { SettingsDialog } from "@/registry/new-york/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/www/registry/new-york/block/sidebar-14/page.tsx b/apps/www/registry/new-york/block/sidebar-14/page.tsx
deleted file mode 100644
index 88703665dfd..00000000000
--- a/apps/www/registry/new-york/block/sidebar-14/page.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { AppSidebar } from "@/registry/new-york/block/sidebar-14/components/app-sidebar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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="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/www/registry/new-york/block/sidebar-15/components/sidebar-left.tsx b/apps/www/registry/new-york/block/sidebar-15/components/sidebar-left.tsx
deleted file mode 100644
index 0e17ca0f28b..00000000000
--- a/apps/www/registry/new-york/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/new-york/block/sidebar-15/components/nav-favorites"
-import { NavMain } from "@/registry/new-york/block/sidebar-15/components/nav-main"
-import { NavSecondary } from "@/registry/new-york/block/sidebar-15/components/nav-secondary"
-import { NavWorkspaces } from "@/registry/new-york/block/sidebar-15/components/nav-workspaces"
-import { TeamSwitcher } from "@/registry/new-york/block/sidebar-15/components/team-switcher"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarHeader,
-  SidebarRail,
-} from "@/registry/new-york/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/www/registry/new-york/block/sidebar-15/components/sidebar-right.tsx b/apps/www/registry/new-york/block/sidebar-15/components/sidebar-right.tsx
deleted file mode 100644
index 79e1f58ea3c..00000000000
--- a/apps/www/registry/new-york/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/new-york/block/sidebar-15/components/calendars"
-import { DatePicker } from "@/registry/new-york/block/sidebar-15/components/date-picker"
-import { NavUser } from "@/registry/new-york/block/sidebar-15/components/nav-user"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarRail,
-  SidebarSeparator,
-} from "@/registry/new-york/ui/sidebar"
-
-// This is sample data.
-const data = {
-  user: {
-    name: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.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/www/registry/new-york/block/sidebar-15/page.tsx b/apps/www/registry/new-york/block/sidebar-15/page.tsx
deleted file mode 100644
index 8e5549c5d19..00000000000
--- a/apps/www/registry/new-york/block/sidebar-15/page.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { SidebarLeft } from "@/registry/new-york/block/sidebar-15/components/sidebar-left"
-import { SidebarRight } from "@/registry/new-york/block/sidebar-15/components/sidebar-right"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/ui/sidebar"
-
-export const iframeHeight = "800px"
-
-export const description = "A left and right 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/www/registry/new-york/blocks/login-01/components/login-form.tsx b/apps/www/registry/new-york/blocks/login-01/components/login-form.tsx
new file mode 100644
index 00000000000..31049d8e312
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/login-01/components/login-form.tsx
@@ -0,0 +1,68 @@
+import { cn } from "@/registry/new-york/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div className={cn("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/www/registry/new-york/blocks/login-01/page.tsx b/apps/www/registry/new-york/blocks/login-01/page.tsx
new file mode 100644
index 00000000000..20fe9846ce2
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/login-01/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/registry/new-york/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/www/registry/new-york/blocks/login-02/components/login-form.tsx b/apps/www/registry/new-york/blocks/login-02/components/login-form.tsx
new file mode 100644
index 00000000000..c59053c6bc5
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/login-02/components/login-form.tsx
@@ -0,0 +1,61 @@
+import { cn } from "@/registry/default/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"form">) {
+  return (
+    <form className={cn("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">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <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/www/registry/new-york/blocks/login-02/page.tsx b/apps/www/registry/new-york/blocks/login-02/page.tsx
new file mode 100644
index 00000000000..7353a4d4fa1
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/login-02/page.tsx
@@ -0,0 +1,32 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/new-york/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/www/registry/new-york/blocks/login-03/components/login-form.tsx b/apps/www/registry/new-york/blocks/login-03/components/login-form.tsx
new file mode 100644
index 00000000000..7e455256676
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/login-03/components/login-form.tsx
@@ -0,0 +1,96 @@
+import { cn } from "@/registry/new-york/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div className={cn("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">
+                  <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>
+                  Login 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>
+                  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/www/registry/new-york/blocks/login-03/page.tsx b/apps/www/registry/new-york/blocks/login-03/page.tsx
new file mode 100644
index 00000000000..a4ced5031b3
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/login-03/page.tsx
@@ -0,0 +1,19 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/registry/new-york/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/www/registry/new-york/blocks/login-04/components/login-form.tsx b/apps/www/registry/new-york/blocks/login-04/components/login-form.tsx
new file mode 100644
index 00000000000..b8dc648b4a3
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/login-04/components/login-form.tsx
@@ -0,0 +1,104 @@
+import { cn } from "@/registry/new-york/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import { Card, CardContent } from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div className={cn("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">
+                  <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>
+                  <span className="sr-only">Login with Apple</span>
+                </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>
+                  <span className="sr-only">Login with Google</span>
+                </Button>
+                <Button variant="outline" className="w-full">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <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/www/registry/new-york/blocks/login-04/page.tsx b/apps/www/registry/new-york/blocks/login-04/page.tsx
new file mode 100644
index 00000000000..e2188012ae6
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/login-04/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/registry/new-york/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/www/registry/new-york/blocks/login-05/components/login-form.tsx b/apps/www/registry/new-york/blocks/login-05/components/login-form.tsx
new file mode 100644
index 00000000000..6abebecb060
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/login-05/components/login-form.tsx
@@ -0,0 +1,81 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { cn } from "@/registry/new-york/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div className={cn("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/www/registry/new-york/blocks/login-05/page.tsx b/apps/www/registry/new-york/blocks/login-05/page.tsx
new file mode 100644
index 00000000000..3d03c04805d
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/login-05/page.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from "@/registry/new-york/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/www/registry/new-york/blocks/sidebar-01/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-01/components/app-sidebar.tsx
new file mode 100644
index 00000000000..da441b28602
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-01/components/app-sidebar.tsx
@@ -0,0 +1,182 @@
+import * as React from "react"
+
+import { SearchForm } from "@/registry/new-york/blocks/sidebar-01/components/search-form"
+import { VersionSwitcher } from "@/registry/new-york/blocks/sidebar-01/components/version-switcher"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "@/registry/new-york/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/www/registry/new-york/block/sidebar-01/components/search-form.tsx b/apps/www/registry/new-york/blocks/sidebar-01/components/search-form.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-01/components/search-form.tsx
rename to apps/www/registry/new-york/blocks/sidebar-01/components/search-form.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-01/components/version-switcher.tsx b/apps/www/registry/new-york/blocks/sidebar-01/components/version-switcher.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-01/components/version-switcher.tsx
rename to apps/www/registry/new-york/blocks/sidebar-01/components/version-switcher.tsx
diff --git a/apps/www/registry/new-york/blocks/sidebar-01/page.tsx b/apps/www/registry/new-york/blocks/sidebar-01/page.tsx
new file mode 100644
index 00000000000..a13e7b06fe3
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-01/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-01/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/blocks/sidebar-02/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-02/components/app-sidebar.tsx
new file mode 100644
index 00000000000..c94c59a7510
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-02/components/app-sidebar.tsx
@@ -0,0 +1,215 @@
+import * as React from "react"
+import { ChevronRight } from "lucide-react"
+
+import { SearchForm } from "@/registry/new-york/blocks/sidebar-02/components/search-form"
+import { VersionSwitcher } from "@/registry/new-york/blocks/sidebar-02/components/version-switcher"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "@/registry/new-york/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/www/registry/new-york/block/sidebar-02/components/search-form.tsx b/apps/www/registry/new-york/blocks/sidebar-02/components/search-form.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-02/components/search-form.tsx
rename to apps/www/registry/new-york/blocks/sidebar-02/components/search-form.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-02/components/version-switcher.tsx b/apps/www/registry/new-york/blocks/sidebar-02/components/version-switcher.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-02/components/version-switcher.tsx
rename to apps/www/registry/new-york/blocks/sidebar-02/components/version-switcher.tsx
diff --git a/apps/www/registry/new-york/blocks/sidebar-02/page.tsx b/apps/www/registry/new-york/blocks/sidebar-02/page.tsx
new file mode 100644
index 00000000000..140cf70f884
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-02/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-02/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/block/sidebar-03/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-03/components/app-sidebar.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-03/components/app-sidebar.tsx
rename to apps/www/registry/new-york/blocks/sidebar-03/components/app-sidebar.tsx
diff --git a/apps/www/registry/new-york/blocks/sidebar-03/page.tsx b/apps/www/registry/new-york/blocks/sidebar-03/page.tsx
new file mode 100644
index 00000000000..768d4775bb1
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-03/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-03/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/block/sidebar-04/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-04/components/app-sidebar.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-04/components/app-sidebar.tsx
rename to apps/www/registry/new-york/blocks/sidebar-04/components/app-sidebar.tsx
diff --git a/apps/www/registry/new-york/blocks/sidebar-04/page.tsx b/apps/www/registry/new-york/blocks/sidebar-04/page.tsx
new file mode 100644
index 00000000000..fd5d6c8f00d
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-04/page.tsx
@@ -0,0 +1,56 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-04/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/blocks/sidebar-05/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-05/components/app-sidebar.tsx
new file mode 100644
index 00000000000..1485b8f93b6
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-05/components/app-sidebar.tsx
@@ -0,0 +1,228 @@
+import * as React from "react"
+import { GalleryVerticalEnd, Minus, Plus } from "lucide-react"
+
+import { SearchForm } from "@/registry/new-york/blocks/sidebar-05/components/search-form"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+} from "@/registry/new-york/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/www/registry/new-york/block/sidebar-05/components/search-form.tsx b/apps/www/registry/new-york/blocks/sidebar-05/components/search-form.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-05/components/search-form.tsx
rename to apps/www/registry/new-york/blocks/sidebar-05/components/search-form.tsx
diff --git a/apps/www/registry/new-york/blocks/sidebar-05/page.tsx b/apps/www/registry/new-york/blocks/sidebar-05/page.tsx
new file mode 100644
index 00000000000..9d630900db1
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-05/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-05/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/blocks/sidebar-06/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-06/components/app-sidebar.tsx
new file mode 100644
index 00000000000..d25459dbd14
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-06/components/app-sidebar.tsx
@@ -0,0 +1,179 @@
+import * as React from "react"
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { NavMain } from "@/registry/new-york/blocks/sidebar-06/components/nav-main"
+import { SidebarOptInForm } from "@/registry/new-york/blocks/sidebar-06/components/sidebar-opt-in-form"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "@/registry/new-york/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/www/registry/new-york/block/sidebar-06/components/nav-main.tsx b/apps/www/registry/new-york/blocks/sidebar-06/components/nav-main.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-06/components/nav-main.tsx
rename to apps/www/registry/new-york/blocks/sidebar-06/components/nav-main.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-06/components/sidebar-opt-in-form.tsx b/apps/www/registry/new-york/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-06/components/sidebar-opt-in-form.tsx
rename to apps/www/registry/new-york/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
diff --git a/apps/www/registry/new-york/blocks/sidebar-06/page.tsx b/apps/www/registry/new-york/blocks/sidebar-06/page.tsx
new file mode 100644
index 00000000000..ac30ac9fe1c
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-06/page.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-06/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/blocks/sidebar-07/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-07/components/app-sidebar.tsx
new file mode 100644
index 00000000000..22a0d991185
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-07/components/app-sidebar.tsx
@@ -0,0 +1,175 @@
+"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/new-york/blocks/sidebar-07/components/nav-main"
+import { NavProjects } from "@/registry/new-york/blocks/sidebar-07/components/nav-projects"
+import { NavUser } from "@/registry/new-york/blocks/sidebar-07/components/nav-user"
+import { TeamSwitcher } from "@/registry/new-york/blocks/sidebar-07/components/team-switcher"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+} from "@/registry/new-york/ui/sidebar"
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.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/www/registry/new-york/block/sidebar-07/components/nav-main.tsx b/apps/www/registry/new-york/blocks/sidebar-07/components/nav-main.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-07/components/nav-main.tsx
rename to apps/www/registry/new-york/blocks/sidebar-07/components/nav-main.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-07/components/nav-projects.tsx b/apps/www/registry/new-york/blocks/sidebar-07/components/nav-projects.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-07/components/nav-projects.tsx
rename to apps/www/registry/new-york/blocks/sidebar-07/components/nav-projects.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-07/components/nav-user.tsx b/apps/www/registry/new-york/blocks/sidebar-07/components/nav-user.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-07/components/nav-user.tsx
rename to apps/www/registry/new-york/blocks/sidebar-07/components/nav-user.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-07/components/team-switcher.tsx b/apps/www/registry/new-york/blocks/sidebar-07/components/team-switcher.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-07/components/team-switcher.tsx
rename to apps/www/registry/new-york/blocks/sidebar-07/components/team-switcher.tsx
diff --git a/apps/www/registry/new-york/blocks/sidebar-07/page.tsx b/apps/www/registry/new-york/blocks/sidebar-07/page.tsx
new file mode 100644
index 00000000000..8f9ab72554b
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-07/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-07/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/blocks/sidebar-08/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-08/components/app-sidebar.tsx
new file mode 100644
index 00000000000..688a0da8c86
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-08/components/app-sidebar.tsx
@@ -0,0 +1,185 @@
+"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/new-york/blocks/sidebar-08/components/nav-main"
+import { NavProjects } from "@/registry/new-york/blocks/sidebar-08/components/nav-projects"
+import { NavSecondary } from "@/registry/new-york/blocks/sidebar-08/components/nav-secondary"
+import { NavUser } from "@/registry/new-york/blocks/sidebar-08/components/nav-user"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/registry/new-york/ui/sidebar"
+
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.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/www/registry/new-york/block/sidebar-08/components/nav-main.tsx b/apps/www/registry/new-york/blocks/sidebar-08/components/nav-main.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-08/components/nav-main.tsx
rename to apps/www/registry/new-york/blocks/sidebar-08/components/nav-main.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-08/components/nav-projects.tsx b/apps/www/registry/new-york/blocks/sidebar-08/components/nav-projects.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-08/components/nav-projects.tsx
rename to apps/www/registry/new-york/blocks/sidebar-08/components/nav-projects.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-08/components/nav-secondary.tsx b/apps/www/registry/new-york/blocks/sidebar-08/components/nav-secondary.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-08/components/nav-secondary.tsx
rename to apps/www/registry/new-york/blocks/sidebar-08/components/nav-secondary.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-08/components/nav-user.tsx b/apps/www/registry/new-york/blocks/sidebar-08/components/nav-user.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-08/components/nav-user.tsx
rename to apps/www/registry/new-york/blocks/sidebar-08/components/nav-user.tsx
diff --git a/apps/www/registry/new-york/blocks/sidebar-08/page.tsx b/apps/www/registry/new-york/blocks/sidebar-08/page.tsx
new file mode 100644
index 00000000000..6df3df5d465
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-08/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-08/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/blocks/sidebar-09/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-09/components/app-sidebar.tsx
new file mode 100644
index 00000000000..57dd4b21fb2
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-09/components/app-sidebar.tsx
@@ -0,0 +1,262 @@
+"use client"
+
+import * as React from "react"
+import { ArchiveX, Command, File, Inbox, Send, Trash2 } from "lucide-react"
+
+import { NavUser } from "@/registry/new-york/blocks/sidebar-09/components/nav-user"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarInput,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/ui/sidebar"
+import { Switch } from "@/registry/new-york/ui/switch"
+
+// This is sample data
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.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/www/registry/new-york/block/sidebar-09/components/nav-user.tsx b/apps/www/registry/new-york/blocks/sidebar-09/components/nav-user.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-09/components/nav-user.tsx
rename to apps/www/registry/new-york/blocks/sidebar-09/components/nav-user.tsx
diff --git a/apps/www/registry/new-york/blocks/sidebar-09/page.tsx b/apps/www/registry/new-york/blocks/sidebar-09/page.tsx
new file mode 100644
index 00000000000..8c5b59468d8
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-09/page.tsx
@@ -0,0 +1,54 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-09/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/blocks/sidebar-10/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-10/components/app-sidebar.tsx
new file mode 100644
index 00000000000..fd86edfa9a1
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-10/components/app-sidebar.tsx
@@ -0,0 +1,276 @@
+"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/new-york/blocks/sidebar-10/components/nav-favorites"
+import { NavMain } from "@/registry/new-york/blocks/sidebar-10/components/nav-main"
+import { NavSecondary } from "@/registry/new-york/blocks/sidebar-10/components/nav-secondary"
+import { NavWorkspaces } from "@/registry/new-york/blocks/sidebar-10/components/nav-workspaces"
+import { TeamSwitcher } from "@/registry/new-york/blocks/sidebar-10/components/team-switcher"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarRail,
+} from "@/registry/new-york/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/www/registry/new-york/block/sidebar-10/components/nav-actions.tsx b/apps/www/registry/new-york/blocks/sidebar-10/components/nav-actions.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-10/components/nav-actions.tsx
rename to apps/www/registry/new-york/blocks/sidebar-10/components/nav-actions.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-10/components/nav-favorites.tsx b/apps/www/registry/new-york/blocks/sidebar-10/components/nav-favorites.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-10/components/nav-favorites.tsx
rename to apps/www/registry/new-york/blocks/sidebar-10/components/nav-favorites.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-10/components/nav-main.tsx b/apps/www/registry/new-york/blocks/sidebar-10/components/nav-main.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-10/components/nav-main.tsx
rename to apps/www/registry/new-york/blocks/sidebar-10/components/nav-main.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-10/components/nav-secondary.tsx b/apps/www/registry/new-york/blocks/sidebar-10/components/nav-secondary.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-10/components/nav-secondary.tsx
rename to apps/www/registry/new-york/blocks/sidebar-10/components/nav-secondary.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-10/components/nav-workspaces.tsx b/apps/www/registry/new-york/blocks/sidebar-10/components/nav-workspaces.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-10/components/nav-workspaces.tsx
rename to apps/www/registry/new-york/blocks/sidebar-10/components/nav-workspaces.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-10/components/team-switcher.tsx b/apps/www/registry/new-york/blocks/sidebar-10/components/team-switcher.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-10/components/team-switcher.tsx
rename to apps/www/registry/new-york/blocks/sidebar-10/components/team-switcher.tsx
diff --git a/apps/www/registry/new-york/blocks/sidebar-10/page.tsx b/apps/www/registry/new-york/blocks/sidebar-10/page.tsx
new file mode 100644
index 00000000000..d12f80239a5
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-10/page.tsx
@@ -0,0 +1,46 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-10/components/app-sidebar"
+import { NavActions } from "@/registry/new-york/blocks/sidebar-10/components/nav-actions"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/block/sidebar-11/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-11/components/app-sidebar.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-11/components/app-sidebar.tsx
rename to apps/www/registry/new-york/blocks/sidebar-11/components/app-sidebar.tsx
diff --git a/apps/www/registry/new-york/blocks/sidebar-11/page.tsx b/apps/www/registry/new-york/blocks/sidebar-11/page.tsx
new file mode 100644
index 00000000000..939d72c6825
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-11/page.tsx
@@ -0,0 +1,52 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-11/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/blocks/sidebar-12/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-12/components/app-sidebar.tsx
new file mode 100644
index 00000000000..a03b139923c
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-12/components/app-sidebar.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { Plus } from "lucide-react"
+
+import { Calendars } from "@/registry/new-york/blocks/sidebar-12/components/calendars"
+import { DatePicker } from "@/registry/new-york/blocks/sidebar-12/components/date-picker"
+import { NavUser } from "@/registry/new-york/blocks/sidebar-12/components/nav-user"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+  SidebarSeparator,
+} from "@/registry/new-york/ui/sidebar"
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.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/www/registry/new-york/block/sidebar-12/components/calendars.tsx b/apps/www/registry/new-york/blocks/sidebar-12/components/calendars.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-12/components/calendars.tsx
rename to apps/www/registry/new-york/blocks/sidebar-12/components/calendars.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-12/components/date-picker.tsx b/apps/www/registry/new-york/blocks/sidebar-12/components/date-picker.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-12/components/date-picker.tsx
rename to apps/www/registry/new-york/blocks/sidebar-12/components/date-picker.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-12/components/nav-user.tsx b/apps/www/registry/new-york/blocks/sidebar-12/components/nav-user.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-12/components/nav-user.tsx
rename to apps/www/registry/new-york/blocks/sidebar-12/components/nav-user.tsx
diff --git a/apps/www/registry/new-york/blocks/sidebar-12/page.tsx b/apps/www/registry/new-york/blocks/sidebar-12/page.tsx
new file mode 100644
index 00000000000..ccf68cbe1fa
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-12/page.tsx
@@ -0,0 +1,41 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-12/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/block/sidebar-13/components/settings-dialog.tsx b/apps/www/registry/new-york/blocks/sidebar-13/components/settings-dialog.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-13/components/settings-dialog.tsx
rename to apps/www/registry/new-york/blocks/sidebar-13/components/settings-dialog.tsx
diff --git a/apps/www/registry/new-york/blocks/sidebar-13/page.tsx b/apps/www/registry/new-york/blocks/sidebar-13/page.tsx
new file mode 100644
index 00000000000..a323b1c5d17
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-13/page.tsx
@@ -0,0 +1,9 @@
+import { SettingsDialog } from "@/registry/new-york/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/www/registry/new-york/block/sidebar-14/components/app-sidebar.tsx b/apps/www/registry/new-york/blocks/sidebar-14/components/app-sidebar.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-14/components/app-sidebar.tsx
rename to apps/www/registry/new-york/blocks/sidebar-14/components/app-sidebar.tsx
diff --git a/apps/www/registry/new-york/blocks/sidebar-14/page.tsx b/apps/www/registry/new-york/blocks/sidebar-14/page.tsx
new file mode 100644
index 00000000000..7d6c0b37c78
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-14/page.tsx
@@ -0,0 +1,48 @@
+import { AppSidebar } from "@/registry/new-york/blocks/sidebar-14/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/block/sidebar-15/components/calendars.tsx b/apps/www/registry/new-york/blocks/sidebar-15/components/calendars.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-15/components/calendars.tsx
rename to apps/www/registry/new-york/blocks/sidebar-15/components/calendars.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-15/components/date-picker.tsx b/apps/www/registry/new-york/blocks/sidebar-15/components/date-picker.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-15/components/date-picker.tsx
rename to apps/www/registry/new-york/blocks/sidebar-15/components/date-picker.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-15/components/nav-favorites.tsx b/apps/www/registry/new-york/blocks/sidebar-15/components/nav-favorites.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-15/components/nav-favorites.tsx
rename to apps/www/registry/new-york/blocks/sidebar-15/components/nav-favorites.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-15/components/nav-main.tsx b/apps/www/registry/new-york/blocks/sidebar-15/components/nav-main.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-15/components/nav-main.tsx
rename to apps/www/registry/new-york/blocks/sidebar-15/components/nav-main.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-15/components/nav-secondary.tsx b/apps/www/registry/new-york/blocks/sidebar-15/components/nav-secondary.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-15/components/nav-secondary.tsx
rename to apps/www/registry/new-york/blocks/sidebar-15/components/nav-secondary.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-15/components/nav-user.tsx b/apps/www/registry/new-york/blocks/sidebar-15/components/nav-user.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-15/components/nav-user.tsx
rename to apps/www/registry/new-york/blocks/sidebar-15/components/nav-user.tsx
diff --git a/apps/www/registry/new-york/block/sidebar-15/components/nav-workspaces.tsx b/apps/www/registry/new-york/blocks/sidebar-15/components/nav-workspaces.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-15/components/nav-workspaces.tsx
rename to apps/www/registry/new-york/blocks/sidebar-15/components/nav-workspaces.tsx
diff --git a/apps/www/registry/new-york/blocks/sidebar-15/components/sidebar-left.tsx b/apps/www/registry/new-york/blocks/sidebar-15/components/sidebar-left.tsx
new file mode 100644
index 00000000000..5bd22348001
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-15/components/sidebar-left.tsx
@@ -0,0 +1,278 @@
+"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/new-york/blocks/sidebar-15/components/nav-favorites"
+import { NavMain } from "@/registry/new-york/blocks/sidebar-15/components/nav-main"
+import { NavSecondary } from "@/registry/new-york/blocks/sidebar-15/components/nav-secondary"
+import { NavWorkspaces } from "@/registry/new-york/blocks/sidebar-15/components/nav-workspaces"
+import { TeamSwitcher } from "@/registry/new-york/blocks/sidebar-15/components/team-switcher"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarRail,
+} from "@/registry/new-york/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/www/registry/new-york/blocks/sidebar-15/components/sidebar-right.tsx b/apps/www/registry/new-york/blocks/sidebar-15/components/sidebar-right.tsx
new file mode 100644
index 00000000000..1e9cfaeea81
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-15/components/sidebar-right.tsx
@@ -0,0 +1,71 @@
+import * as React from "react"
+import { Plus } from "lucide-react"
+
+import { Calendars } from "@/registry/new-york/blocks/sidebar-15/components/calendars"
+import { DatePicker } from "@/registry/new-york/blocks/sidebar-15/components/date-picker"
+import { NavUser } from "@/registry/new-york/blocks/sidebar-15/components/nav-user"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+  SidebarSeparator,
+} from "@/registry/new-york/ui/sidebar"
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.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/www/registry/new-york/block/sidebar-15/components/team-switcher.tsx b/apps/www/registry/new-york/blocks/sidebar-15/components/team-switcher.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/sidebar-15/components/team-switcher.tsx
rename to apps/www/registry/new-york/blocks/sidebar-15/components/team-switcher.tsx
diff --git a/apps/www/registry/new-york/blocks/sidebar-15/page.tsx b/apps/www/registry/new-york/blocks/sidebar-15/page.tsx
new file mode 100644
index 00000000000..acfcc0a4c17
--- /dev/null
+++ b/apps/www/registry/new-york/blocks/sidebar-15/page.tsx
@@ -0,0 +1,44 @@
+import { SidebarLeft } from "@/registry/new-york/blocks/sidebar-15/components/sidebar-left"
+import { SidebarRight } from "@/registry/new-york/blocks/sidebar-15/components/sidebar-right"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-area-axes.tsx b/apps/www/registry/new-york/charts/chart-area-axes.tsx
new file mode 100644
index 00000000000..8efb8a382d6
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-area-axes.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-area-default.tsx b/apps/www/registry/new-york/charts/chart-area-default.tsx
new file mode 100644
index 00000000000..95e9ca5a734
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-area-default.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-area-gradient.tsx b/apps/www/registry/new-york/charts/chart-area-gradient.tsx
new file mode 100644
index 00000000000..de6eada5135
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-area-gradient.tsx
@@ -0,0 +1,130 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-area-icons.tsx b/apps/www/registry/new-york/charts/chart-area-icons.tsx
new file mode 100644
index 00000000000..5d136dfd07b
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-area-icons.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import { TrendingDown, TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-area-interactive.tsx b/apps/www/registry/new-york/charts/chart-area-interactive.tsx
new file mode 100644
index 00000000000..cd8e7e6b288
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-area-interactive.tsx
@@ -0,0 +1,266 @@
+"use client"
+
+import * as React from "react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-area-legend.tsx b/apps/www/registry/new-york/charts/chart-area-legend.tsx
new file mode 100644
index 00000000000..13ba0ba54a3
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-area-legend.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-area-linear.tsx b/apps/www/registry/new-york/charts/chart-area-linear.tsx
new file mode 100644
index 00000000000..2b88f333fdb
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-area-linear.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-area-stacked-expand.tsx b/apps/www/registry/new-york/charts/chart-area-stacked-expand.tsx
new file mode 100644
index 00000000000..f7662c0f711
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-area-stacked-expand.tsx
@@ -0,0 +1,121 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-area-stacked.tsx b/apps/www/registry/new-york/charts/chart-area-stacked.tsx
new file mode 100644
index 00000000000..d0c1b6eee85
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-area-stacked.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-area-step.tsx b/apps/www/registry/new-york/charts/chart-area-step.tsx
new file mode 100644
index 00000000000..be43a89d3c7
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-area-step.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import { Activity, TrendingUp } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-bar-active.tsx b/apps/www/registry/new-york/charts/chart-bar-active.tsx
new file mode 100644
index 00000000000..b913609d92f
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-bar-default.tsx b/apps/www/registry/new-york/charts/chart-bar-default.tsx
new file mode 100644
index 00000000000..5aec111e67e
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-bar-default.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-bar-horizontal.tsx b/apps/www/registry/new-york/charts/chart-bar-horizontal.tsx
new file mode 100644
index 00000000000..b8b10145177
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-bar-horizontal.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-bar-interactive.tsx b/apps/www/registry/new-york/charts/chart-bar-interactive.tsx
new file mode 100644
index 00000000000..f988ef5e11c
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-bar-interactive.tsx
@@ -0,0 +1,221 @@
+"use client"
+
+import * as React from "react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-bar-label-custom.tsx b/apps/www/registry/new-york/charts/chart-bar-label-custom.tsx
new file mode 100644
index 00000000000..bba630a9005
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-bar-label.tsx b/apps/www/registry/new-york/charts/chart-bar-label.tsx
new file mode 100644
index 00000000000..1a06e05e002
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-bar-mixed.tsx b/apps/www/registry/new-york/charts/chart-bar-mixed.tsx
new file mode 100644
index 00000000000..f8398778335
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-bar-multiple.tsx b/apps/www/registry/new-york/charts/chart-bar-multiple.tsx
new file mode 100644
index 00000000000..b570638ce62
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-bar-multiple.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-bar-negative.tsx b/apps/www/registry/new-york/charts/chart-bar-negative.tsx
new file mode 100644
index 00000000000..c735fc6fffd
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-bar-negative.tsx
@@ -0,0 +1,79 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, Cell, LabelList } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-bar-stacked.tsx b/apps/www/registry/new-york/charts/chart-bar-stacked.tsx
new file mode 100644
index 00000000000..ddfa81e47ed
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-line-default.tsx b/apps/www/registry/new-york/charts/chart-line-default.tsx
new file mode 100644
index 00000000000..ccc36bc5b6c
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-line-dots-colors.tsx b/apps/www/registry/new-york/charts/chart-line-dots-colors.tsx
new file mode 100644
index 00000000000..5176281cc2c
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-line-dots-custom.tsx b/apps/www/registry/new-york/charts/chart-line-dots-custom.tsx
new file mode 100644
index 00000000000..9b7e86ca364
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-line-dots.tsx b/apps/www/registry/new-york/charts/chart-line-dots.tsx
new file mode 100644
index 00000000000..54fb10ed802
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-line-interactive.tsx b/apps/www/registry/new-york/charts/chart-line-interactive.tsx
new file mode 100644
index 00000000000..4432eb89c29
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-line-interactive.tsx
@@ -0,0 +1,227 @@
+"use client"
+
+import * as React from "react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-line-label-custom.tsx b/apps/www/registry/new-york/charts/chart-line-label-custom.tsx
new file mode 100644
index 00000000000..f7972946fce
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-line-label.tsx b/apps/www/registry/new-york/charts/chart-line-label.tsx
new file mode 100644
index 00000000000..c6b832d6a6b
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-line-linear.tsx b/apps/www/registry/new-york/charts/chart-line-linear.tsx
new file mode 100644
index 00000000000..7225a5f79c0
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-line-multiple.tsx b/apps/www/registry/new-york/charts/chart-line-multiple.tsx
new file mode 100644
index 00000000000..f972819f5b5
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-line-multiple.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-line-step.tsx b/apps/www/registry/new-york/charts/chart-line-step.tsx
new file mode 100644
index 00000000000..45310518672
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-pie-donut-active.tsx b/apps/www/registry/new-york/charts/chart-pie-donut-active.tsx
new file mode 100644
index 00000000000..7d7a82eca8e
--- /dev/null
+++ b/apps/www/registry/new-york/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 { PieSectorDataItem } from "recharts/types/polar/Pie"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-pie-donut-text.tsx b/apps/www/registry/new-york/charts/chart-pie-donut-text.tsx
new file mode 100644
index 00000000000..1fb6bc74d10
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-pie-donut-text.tsx
@@ -0,0 +1,129 @@
+"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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-pie-donut.tsx b/apps/www/registry/new-york/charts/chart-pie-donut.tsx
new file mode 100644
index 00000000000..42965dac6a8
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-pie-interactive.tsx b/apps/www/registry/new-york/charts/chart-pie-interactive.tsx
new file mode 100644
index 00000000000..8da797d079b
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-pie-interactive.tsx
@@ -0,0 +1,192 @@
+"use client"
+
+import * as React from "react"
+import { Label, Pie, PieChart, Sector } from "recharts"
+import { PieSectorDataItem } from "recharts/types/polar/Pie"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartStyle,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-pie-label-custom.tsx b/apps/www/registry/new-york/charts/chart-pie-label-custom.tsx
new file mode 100644
index 00000000000..ff956ebf9dc
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-pie-label-custom.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-pie-label-list.tsx b/apps/www/registry/new-york/charts/chart-pie-label-list.tsx
new file mode 100644
index 00000000000..0bc77dfde07
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-pie-label-list.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { LabelList, Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-pie-label.tsx b/apps/www/registry/new-york/charts/chart-pie-label.tsx
new file mode 100644
index 00000000000..e4a13c93975
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-pie-label.tsx
@@ -0,0 +1,85 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-pie-legend.tsx b/apps/www/registry/new-york/charts/chart-pie-legend.tsx
new file mode 100644
index 00000000000..d75f89eacf1
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-pie-legend.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-pie-separator-none.tsx b/apps/www/registry/new-york/charts/chart-pie-separator-none.tsx
new file mode 100644
index 00000000000..cf191f16154
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-pie-simple.tsx b/apps/www/registry/new-york/charts/chart-pie-simple.tsx
new file mode 100644
index 00000000000..c529f52bb17
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-pie-stacked.tsx b/apps/www/registry/new-york/charts/chart-pie-stacked.tsx
new file mode 100644
index 00000000000..b4be18a47d7
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-pie-stacked.tsx
@@ -0,0 +1,119 @@
+"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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-radar-default.tsx b/apps/www/registry/new-york/charts/chart-radar-default.tsx
new file mode 100644
index 00000000000..7d258514cd5
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radar-default.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-radar-dots.tsx b/apps/www/registry/new-york/charts/chart-radar-dots.tsx
new file mode 100644
index 00000000000..385734eae79
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radar-dots.tsx
@@ -0,0 +1,79 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-radar-grid-circle-fill.tsx b/apps/www/registry/new-york/charts/chart-radar-grid-circle-fill.tsx
new file mode 100644
index 00000000000..f3c62bbe861
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radar-grid-circle-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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-radar-grid-circle-no-lines.tsx b/apps/www/registry/new-york/charts/chart-radar-grid-circle-no-lines.tsx
new file mode 100644
index 00000000000..5164314998f
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-radar-grid-circle.tsx b/apps/www/registry/new-york/charts/chart-radar-grid-circle.tsx
new file mode 100644
index 00000000000..0cfb63f0e1e
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-radar-grid-custom.tsx b/apps/www/registry/new-york/charts/chart-radar-grid-custom.tsx
new file mode 100644
index 00000000000..c48dfcd641e
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radar-grid-custom.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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-radar-grid-fill.tsx b/apps/www/registry/new-york/charts/chart-radar-grid-fill.tsx
new file mode 100644
index 00000000000..69e2a9e06fa
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-radar-grid-none.tsx b/apps/www/registry/new-york/charts/chart-radar-grid-none.tsx
new file mode 100644
index 00000000000..bdd774945a5
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-radar-icons.tsx b/apps/www/registry/new-york/charts/chart-radar-icons.tsx
new file mode 100644
index 00000000000..d6e5b9ad9b3
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radar-icons.tsx
@@ -0,0 +1,94 @@
+"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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-radar-label-custom.tsx b/apps/www/registry/new-york/charts/chart-radar-label-custom.tsx
new file mode 100644
index 00000000000..7d693b2edaa
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-radar-legend.tsx b/apps/www/registry/new-york/charts/chart-radar-legend.tsx
new file mode 100644
index 00000000000..4000465449d
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radar-legend.tsx
@@ -0,0 +1,92 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-radar-lines-only.tsx b/apps/www/registry/new-york/charts/chart-radar-lines-only.tsx
new file mode 100644
index 00000000000..abaf967363d
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-radar-multiple.tsx b/apps/www/registry/new-york/charts/chart-radar-multiple.tsx
new file mode 100644
index 00000000000..d8786f8b4ac
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-radar-radius.tsx b/apps/www/registry/new-york/charts/chart-radar-radius.tsx
new file mode 100644
index 00000000000..aa82f8f0243
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radar-radius.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart,
+} from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-radial-grid.tsx b/apps/www/registry/new-york/charts/chart-radial-grid.tsx
new file mode 100644
index 00000000000..69a1a3a603a
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radial-grid.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarGrid, RadialBar, RadialBarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-radial-label.tsx b/apps/www/registry/new-york/charts/chart-radial-label.tsx
new file mode 100644
index 00000000000..25c1bc41bf6
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radial-label.tsx
@@ -0,0 +1,101 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { LabelList, RadialBar, RadialBarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-radial-shape.tsx b/apps/www/registry/new-york/charts/chart-radial-shape.tsx
new file mode 100644
index 00000000000..592e225c4a7
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radial-shape.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+  Label,
+  PolarGrid,
+  PolarRadiusAxis,
+  RadialBar,
+  RadialBarChart,
+} from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { ChartConfig, ChartContainer } from "@/registry/new-york/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/www/registry/new-york/charts/chart-radial-simple.tsx b/apps/www/registry/new-york/charts/chart-radial-simple.tsx
new file mode 100644
index 00000000000..4033acb3234
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radial-simple.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { RadialBar, RadialBarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-radial-stacked.tsx b/apps/www/registry/new-york/charts/chart-radial-stacked.tsx
new file mode 100644
index 00000000000..38d35670e5f
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radial-stacked.tsx
@@ -0,0 +1,113 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-radial-text.tsx b/apps/www/registry/new-york/charts/chart-radial-text.tsx
new file mode 100644
index 00000000000..b88623e6e27
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-radial-text.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import {
+  Label,
+  PolarGrid,
+  PolarRadiusAxis,
+  RadialBar,
+  RadialBarChart,
+} from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { ChartConfig, ChartContainer } from "@/registry/new-york/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/www/registry/new-york/charts/chart-tooltip-advanced.tsx b/apps/www/registry/new-york/charts/chart-tooltip-advanced.tsx
new file mode 100644
index 00000000000..bbc9f115dd6
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-tooltip-advanced.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-tooltip-default.tsx b/apps/www/registry/new-york/charts/chart-tooltip-default.tsx
new file mode 100644
index 00000000000..759b4555bea
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-tooltip-formatter.tsx b/apps/www/registry/new-york/charts/chart-tooltip-formatter.tsx
new file mode 100644
index 00000000000..e67f266f270
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-tooltip-icons.tsx b/apps/www/registry/new-york/charts/chart-tooltip-icons.tsx
new file mode 100644
index 00000000000..f2bf0719230
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-tooltip-indicator-line.tsx b/apps/www/registry/new-york/charts/chart-tooltip-indicator-line.tsx
new file mode 100644
index 00000000000..19c3f858894
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-tooltip-indicator-none.tsx b/apps/www/registry/new-york/charts/chart-tooltip-indicator-none.tsx
new file mode 100644
index 00000000000..29c898a861c
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-tooltip-label-custom.tsx b/apps/www/registry/new-york/charts/chart-tooltip-label-custom.tsx
new file mode 100644
index 00000000000..f632510879e
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-tooltip-label-custom.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-tooltip-label-formatter.tsx b/apps/www/registry/new-york/charts/chart-tooltip-label-formatter.tsx
new file mode 100644
index 00000000000..220a445b0c1
--- /dev/null
+++ b/apps/www/registry/new-york/charts/chart-tooltip-label-formatter.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { Bar, BarChart, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/charts/chart-tooltip-label-none.tsx b/apps/www/registry/new-york/charts/chart-tooltip-label-none.tsx
new file mode 100644
index 00000000000..a655168dff2
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/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/www/registry/new-york/example/alert-demo.tsx b/apps/www/registry/new-york/example/alert-demo.tsx
deleted file mode 100644
index 78ae6282006..00000000000
--- a/apps/www/registry/new-york/example/alert-demo.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { RocketIcon } from "@radix-ui/react-icons"
-
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from "@/registry/new-york/ui/alert"
-
-export default function AlertDemo() {
-  return (
-    <Alert>
-      <RocketIcon 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/www/registry/new-york/example/alert-destructive.tsx b/apps/www/registry/new-york/example/alert-destructive.tsx
deleted file mode 100644
index f09ba842e74..00000000000
--- a/apps/www/registry/new-york/example/alert-destructive.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ExclamationTriangleIcon } from "@radix-ui/react-icons"
-
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from "@/registry/new-york/ui/alert"
-
-export default function AlertDestructive() {
-  return (
-    <Alert variant="destructive">
-      <ExclamationTriangleIcon className="h-4 w-4" />
-      <AlertTitle>Error</AlertTitle>
-      <AlertDescription>
-        Your session has expired. Please log in again.
-      </AlertDescription>
-    </Alert>
-  )
-}
diff --git a/apps/www/registry/new-york/example/button-icon.tsx b/apps/www/registry/new-york/example/button-icon.tsx
deleted file mode 100644
index 1478a4830f3..00000000000
--- a/apps/www/registry/new-york/example/button-icon.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ChevronRightIcon } from "@radix-ui/react-icons"
-
-import { Button } from "@/registry/new-york/ui/button"
-
-export default function ButtonIcon() {
-  return (
-    <Button variant="outline" size="icon">
-      <ChevronRightIcon className="h-4 w-4" />
-    </Button>
-  )
-}
diff --git a/apps/www/registry/new-york/example/button-loading.tsx b/apps/www/registry/new-york/example/button-loading.tsx
deleted file mode 100644
index df0ca032d49..00000000000
--- a/apps/www/registry/new-york/example/button-loading.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ReloadIcon } from "@radix-ui/react-icons"
-
-import { Button } from "@/registry/new-york/ui/button"
-
-export default function ButtonLoading() {
-  return (
-    <Button disabled>
-      <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
-      Please wait
-    </Button>
-  )
-}
diff --git a/apps/www/registry/new-york/example/button-with-icon.tsx b/apps/www/registry/new-york/example/button-with-icon.tsx
deleted file mode 100644
index 2da1bcf3394..00000000000
--- a/apps/www/registry/new-york/example/button-with-icon.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { EnvelopeOpenIcon } from "@radix-ui/react-icons"
-
-import { Button } from "@/registry/new-york/ui/button"
-
-export default function ButtonWithIcon() {
-  return (
-    <Button>
-      <EnvelopeOpenIcon /> Login with Email
-    </Button>
-  )
-}
diff --git a/apps/www/registry/new-york/example/card-demo.tsx b/apps/www/registry/new-york/example/card-demo.tsx
deleted file mode 100644
index 82d2363738f..00000000000
--- a/apps/www/registry/new-york/example/card-demo.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { BellIcon, CheckIcon } from "@radix-ui/react-icons"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Switch } from "@/registry/new-york/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={cn("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-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">
-          <CheckIcon /> Mark all as read
-        </Button>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/www/registry/new-york/example/cards/activity-goal.tsx b/apps/www/registry/new-york/example/cards/activity-goal.tsx
deleted file mode 100644
index 80edf156417..00000000000
--- a/apps/www/registry/new-york/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/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/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="h-8 w-8 shrink-0 rounded-full"
-            onClick={() => onClick(-10)}
-            disabled={goal <= 200}
-          >
-            <MinusIcon className="h-4 w-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-[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}
-          >
-            <PlusIcon className="h-4 w-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/www/registry/new-york/example/cards/chat.tsx b/apps/www/registry/new-york/example/cards/chat.tsx
deleted file mode 100644
index 5d839d3a189..00000000000
--- a/apps/www/registry/new-york/example/cards/chat.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { CheckIcon, PaperPlaneIcon, PlusIcon } from "@radix-ui/react-icons"
-
-import { cn } from "@/lib/utils"
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york/ui/avatar"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/registry/new-york/ui/card"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/registry/new-york/ui/command"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/registry/new-york/ui/dialog"
-import { Input } from "@/registry/new-york/ui/input"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/registry/new-york/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)}
-                >
-                  <PlusIcon className="h-4 w-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={cn(
-                  "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}>
-              <PaperPlaneIcon className="h-4 w-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-sm text-muted-foreground">
-                        {user.email}
-                      </p>
-                    </div>
-                    {selectedUsers.includes(user) ? (
-                      <CheckIcon 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/www/registry/new-york/example/cards/data-table.tsx b/apps/www/registry/new-york/example/cards/data-table.tsx
deleted file mode 100644
index 46606ce769f..00000000000
--- a/apps/www/registry/new-york/example/cards/data-table.tsx
+++ /dev/null
@@ -1,335 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  CaretSortIcon,
-  ChevronDownIcon,
-  DotsHorizontalIcon,
-} from "@radix-ui/react-icons"
-import {
-  ColumnDef,
-  ColumnFiltersState,
-  SortingState,
-  VisibilityState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Checkbox } from "@/registry/new-york/ui/checkbox"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Input } from "@/registry/new-york/ui/input"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/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 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
-          <CaretSortIcon className="ml-2 h-4 w-4" />
-        </Button>
-      )
-    },
-    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
-  },
-  {
-    accessorKey: "amount",
-    header: () => <div className="text-right">Amount</div>,
-    cell: ({ row }) => {
-      const amount = 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>
-              <DotsHorizontalIcon className="h-4 w-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 h-4 w-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="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/www/registry/new-york/example/cards/index.tsx b/apps/www/registry/new-york/example/cards/index.tsx
deleted file mode 100644
index 856358529cd..00000000000
--- a/apps/www/registry/new-york/example/cards/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { CardsActivityGoal } from "@/registry/new-york/example/cards/activity-goal"
-import { CardsCalendar } from "@/registry/new-york/example/cards/calendar"
-import { CardsChat } from "@/registry/new-york/example/cards/chat"
-import { CardsCookieSettings } from "@/registry/new-york/example/cards/cookie-settings"
-import { CardsCreateAccount } from "@/registry/new-york/example/cards/create-account"
-import { CardsDataTable } from "@/registry/new-york/example/cards/data-table"
-import { CardsMetric } from "@/registry/new-york/example/cards/metric"
-import { CardsPaymentMethod } from "@/registry/new-york/example/cards/payment-method"
-import { CardsReportIssue } from "@/registry/new-york/example/cards/report-issue"
-import { CardsShare } from "@/registry/new-york/example/cards/share"
-import { CardsStats } from "@/registry/new-york/example/cards/stats"
-import { CardsTeamMembers } from "@/registry/new-york/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/www/registry/new-york/example/cards/metric.tsx b/apps/www/registry/new-york/example/cards/metric.tsx
deleted file mode 100644
index e9d6e7f5453..00000000000
--- a/apps/www/registry/new-york/example/cards/metric.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-"use client"
-
-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/new-york/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="rounded-lg border bg-background p-2 shadow-sm">
-                        <div className="grid grid-cols-2 gap-2">
-                          <div className="flex flex-col">
-                            <span className="text-[0.70rem] uppercase text-muted-foreground">
-                              Average
-                            </span>
-                            <span className="font-bold text-muted-foreground">
-                              {payload[0].value}
-                            </span>
-                          </div>
-                          <div className="flex flex-col">
-                            <span className="text-[0.70rem] uppercase text-muted-foreground">
-                              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/www/registry/new-york/example/cards/report-issue.tsx b/apps/www/registry/new-york/example/cards/report-issue.tsx
deleted file mode 100644
index f33d5ef7951..00000000000
--- a/apps/www/registry/new-york/example/cards/report-issue.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york/ui/select"
-import { Textarea } from "@/registry/new-york/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/www/registry/new-york/example/cards/share.tsx b/apps/www/registry/new-york/example/cards/share.tsx
deleted file mode 100644
index 98870d8c3a2..00000000000
--- a/apps/www/registry/new-york/example/cards/share.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-"use client"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york/ui/avatar"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york/ui/select"
-import { Separator } from "@/registry/new-york/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-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/www/registry/new-york/example/cards/stats.tsx b/apps/www/registry/new-york/example/cards/stats.tsx
deleted file mode 100644
index a676ccff013..00000000000
--- a/apps/www/registry/new-york/example/cards/stats.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-"use client"
-
-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/new-york/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-xs text-muted-foreground">
-            +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-xs text-muted-foreground">
-            +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/www/registry/new-york/example/cards/team-members.tsx b/apps/www/registry/new-york/example/cards/team-members.tsx
deleted file mode 100644
index d754034fe8e..00000000000
--- a/apps/www/registry/new-york/example/cards/team-members.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-"use client"
-
-import { ChevronDownIcon } from "@radix-ui/react-icons"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york/ui/avatar"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/registry/new-york/ui/command"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york/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{" "}
-                <ChevronDownIcon className="ml-2 h-4 w-4 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{" "}
-                <ChevronDownIcon className="ml-2 h-4 w-4 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{" "}
-                <ChevronDownIcon className="ml-2 h-4 w-4 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/www/registry/new-york/example/collapsible-demo.tsx b/apps/www/registry/new-york/example/collapsible-demo.tsx
deleted file mode 100644
index b1210ea41c8..00000000000
--- a/apps/www/registry/new-york/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/new-york/ui/button"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/new-york/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="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/www/registry/new-york/example/combobox-demo.tsx b/apps/www/registry/new-york/example/combobox-demo.tsx
deleted file mode 100644
index 86ca85984c8..00000000000
--- a/apps/www/registry/new-york/example/combobox-demo.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/registry/new-york/ui/command"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york/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..."}
-          <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 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}
-                  <CheckIcon
-                    className={cn(
-                      "ml-auto h-4 w-4",
-                      value === framework.value ? "opacity-100" : "opacity-0"
-                    )}
-                  />
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/apps/www/registry/new-york/example/combobox-form.tsx b/apps/www/registry/new-york/example/combobox-form.tsx
deleted file mode 100644
index 2508c0c9b61..00000000000
--- a/apps/www/registry/new-york/example/combobox-form.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-"use client"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-import { cn } from "@/lib/utils"
-import { toast } from "@/registry/new-york/hooks/use-toast"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/registry/new-york/ui/command"
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/registry/new-york/ui/form"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york/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={cn(
-                        "w-[200px] justify-between",
-                        !field.value && "text-muted-foreground"
-                      )}
-                    >
-                      {field.value
-                        ? languages.find(
-                            (language) => language.value === field.value
-                          )?.label
-                        : "Select language"}
-                      <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 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}
-                            <CheckIcon
-                              className={cn(
-                                "ml-auto h-4 w-4",
-                                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/www/registry/new-york/example/command-demo.tsx b/apps/www/registry/new-york/example/command-demo.tsx
deleted file mode 100644
index 8b5036540f4..00000000000
--- a/apps/www/registry/new-york/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/new-york/ui/command"
-
-export default 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>
-            <CalendarIcon />
-            <span>Calendar</span>
-          </CommandItem>
-          <CommandItem>
-            <FaceIcon />
-            <span>Search Emoji</span>
-          </CommandItem>
-          <CommandItem disabled>
-            <RocketIcon />
-            <span>Launch</span>
-          </CommandItem>
-        </CommandGroup>
-        <CommandSeparator />
-        <CommandGroup heading="Settings">
-          <CommandItem>
-            <PersonIcon />
-            <span>Profile</span>
-            <CommandShortcut>⌘P</CommandShortcut>
-          </CommandItem>
-          <CommandItem>
-            <EnvelopeClosedIcon />
-            <span>Mail</span>
-            <CommandShortcut>⌘B</CommandShortcut>
-          </CommandItem>
-          <CommandItem>
-            <GearIcon />
-            <span>Settings</span>
-            <CommandShortcut>⌘S</CommandShortcut>
-          </CommandItem>
-        </CommandGroup>
-      </CommandList>
-    </Command>
-  )
-}
diff --git a/apps/www/registry/new-york/example/data-table-demo.tsx b/apps/www/registry/new-york/example/data-table-demo.tsx
deleted file mode 100644
index ddb26e881c5..00000000000
--- a/apps/www/registry/new-york/example/data-table-demo.tsx
+++ /dev/null
@@ -1,316 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  CaretSortIcon,
-  ChevronDownIcon,
-  DotsHorizontalIcon,
-} from "@radix-ui/react-icons"
-import {
-  ColumnDef,
-  ColumnFiltersState,
-  SortingState,
-  VisibilityState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table"
-
-import { Button } from "@/registry/new-york/ui/button"
-import { Checkbox } from "@/registry/new-york/ui/checkbox"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Input } from "@/registry/new-york/ui/input"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york/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 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
-          <CaretSortIcon className="ml-2 h-4 w-4" />
-        </Button>
-      )
-    },
-    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
-  },
-  {
-    accessorKey: "amount",
-    header: () => <div className="text-right">Amount</div>,
-    cell: ({ row }) => {
-      const amount = 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>
-              <DotsHorizontalIcon className="h-4 w-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 h-4 w-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="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>
-    </div>
-  )
-}
diff --git a/apps/www/registry/new-york/example/date-picker-demo.tsx b/apps/www/registry/new-york/example/date-picker-demo.tsx
deleted file mode 100644
index aa68df8f481..00000000000
--- a/apps/www/registry/new-york/example/date-picker-demo.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { CalendarIcon } from "@radix-ui/react-icons"
-import { format } from "date-fns"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
-import { Calendar } from "@/registry/new-york/ui/calendar"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york/ui/popover"
-
-export default function DatePickerDemo() {
-  const [date, setDate] = React.useState<Date>()
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant={"outline"}
-          className={cn(
-            "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/www/registry/new-york/example/dialog-close-button.tsx b/apps/www/registry/new-york/example/dialog-close-button.tsx
deleted file mode 100644
index 5724000f994..00000000000
--- a/apps/www/registry/new-york/example/dialog-close-button.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { CopyIcon } from "@radix-ui/react-icons"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/registry/new-york/ui/dialog"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/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://ui.shadcn.com/docs/installation"
-              readOnly
-            />
-          </div>
-          <Button type="submit" size="sm" className="px-3">
-            <span className="sr-only">Copy</span>
-            <CopyIcon className="h-4 w-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/www/registry/new-york/example/drawer-demo.tsx b/apps/www/registry/new-york/example/drawer-demo.tsx
deleted file mode 100644
index 14a0c003847..00000000000
--- a/apps/www/registry/new-york/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/new-york/ui/button"
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/registry/new-york/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="h-8 w-8 shrink-0 rounded-full"
-                onClick={() => onClick(-10)}
-                disabled={goal <= 200}
-              >
-                <MinusIcon className="h-4 w-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-[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}
-              >
-                <PlusIcon className="h-4 w-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/www/registry/new-york/example/hover-card-demo.tsx b/apps/www/registry/new-york/example/hover-card-demo.tsx
deleted file mode 100644
index 16e0750ee7f..00000000000
--- a/apps/www/registry/new-york/example/hover-card-demo.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { CalendarIcon } from "@radix-ui/react-icons"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york/ui/avatar"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@/registry/new-york/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 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/www/registry/new-york/example/resizable-handle.tsx b/apps/www/registry/new-york/example/resizable-handle.tsx
deleted file mode 100644
index 823909de32e..00000000000
--- a/apps/www/registry/new-york/example/resizable-handle.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/registry/new-york/ui/resizable"
-
-export default function ResizableDemo() {
-  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/www/registry/new-york/example/sonner-demo.tsx b/apps/www/registry/new-york/example/sonner-demo.tsx
deleted file mode 100644
index f1ff10d7053..00000000000
--- a/apps/www/registry/new-york/example/sonner-demo.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { toast } from "sonner"
-
-import { Button } from "@/registry/new-york/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",
-            onClick: () => console.log("Undo"),
-          },
-        })
-      }
-    >
-      Show Toast
-    </Button>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-demo.tsx b/apps/www/registry/new-york/example/toggle-demo.tsx
deleted file mode 100644
index 99a329cf5bc..00000000000
--- a/apps/www/registry/new-york/example/toggle-demo.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FontBoldIcon } from "@radix-ui/react-icons"
-
-import { Toggle } from "@/registry/new-york/ui/toggle"
-
-export default function ToggleDemo() {
-  return (
-    <Toggle aria-label="Toggle italic">
-      <FontBoldIcon className="h-4 w-4" />
-    </Toggle>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-disabled.tsx b/apps/www/registry/new-york/example/toggle-disabled.tsx
deleted file mode 100644
index 71db7757d3d..00000000000
--- a/apps/www/registry/new-york/example/toggle-disabled.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { UnderlineIcon } from "@radix-ui/react-icons"
-
-import { Toggle } from "@/registry/new-york/ui/toggle"
-
-export default function ToggleDisabled() {
-  return (
-    <Toggle aria-label="Toggle italic" disabled>
-      <UnderlineIcon className="h-4 w-4" />
-    </Toggle>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-group-demo.tsx b/apps/www/registry/new-york/example/toggle-group-demo.tsx
deleted file mode 100644
index addc94e1e43..00000000000
--- a/apps/www/registry/new-york/example/toggle-group-demo.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-  FontBoldIcon,
-  FontItalicIcon,
-  UnderlineIcon,
-} from "@radix-ui/react-icons"
-
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york/ui/toggle-group"
-
-export default function ToggleGroupDemo() {
-  return (
-    <ToggleGroup type="multiple">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <FontBoldIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <FontItalicIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-        <UnderlineIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-group-disabled.tsx b/apps/www/registry/new-york/example/toggle-group-disabled.tsx
deleted file mode 100644
index c640c184ac0..00000000000
--- a/apps/www/registry/new-york/example/toggle-group-disabled.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-  FontBoldIcon,
-  FontItalicIcon,
-  UnderlineIcon,
-} from "@radix-ui/react-icons"
-
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york/ui/toggle-group"
-
-export default function ToggleGroupDemo() {
-  return (
-    <ToggleGroup type="multiple" disabled>
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <FontBoldIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <FontItalicIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-        <UnderlineIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-group-lg.tsx b/apps/www/registry/new-york/example/toggle-group-lg.tsx
deleted file mode 100644
index 5dbd23ee36a..00000000000
--- a/apps/www/registry/new-york/example/toggle-group-lg.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-  FontBoldIcon,
-  FontItalicIcon,
-  UnderlineIcon,
-} from "@radix-ui/react-icons"
-
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york/ui/toggle-group"
-
-export default function ToggleGroupDemo() {
-  return (
-    <ToggleGroup type="multiple" size="lg">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <FontBoldIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <FontItalicIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-        <UnderlineIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-group-outline.tsx b/apps/www/registry/new-york/example/toggle-group-outline.tsx
deleted file mode 100644
index 58400d490ae..00000000000
--- a/apps/www/registry/new-york/example/toggle-group-outline.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-  FontBoldIcon,
-  FontItalicIcon,
-  UnderlineIcon,
-} from "@radix-ui/react-icons"
-
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york/ui/toggle-group"
-
-export default function ToggleGroupDemo() {
-  return (
-    <ToggleGroup type="multiple" variant="outline">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <FontBoldIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <FontItalicIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-        <UnderlineIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-group-single.tsx b/apps/www/registry/new-york/example/toggle-group-single.tsx
deleted file mode 100644
index cf2c3faf6eb..00000000000
--- a/apps/www/registry/new-york/example/toggle-group-single.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-  FontBoldIcon,
-  FontItalicIcon,
-  UnderlineIcon,
-} from "@radix-ui/react-icons"
-
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york/ui/toggle-group"
-
-export default function ToggleGroupDemo() {
-  return (
-    <ToggleGroup type="single">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <FontBoldIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <FontItalicIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-        <UnderlineIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-group-sm.tsx b/apps/www/registry/new-york/example/toggle-group-sm.tsx
deleted file mode 100644
index 76b451d94d8..00000000000
--- a/apps/www/registry/new-york/example/toggle-group-sm.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-  FontBoldIcon,
-  FontItalicIcon,
-  UnderlineIcon,
-} from "@radix-ui/react-icons"
-
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york/ui/toggle-group"
-
-export default function ToggleGroupDemo() {
-  return (
-    <ToggleGroup type="single" size="sm">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <FontBoldIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <FontItalicIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-        <UnderlineIcon className="h-4 w-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-lg.tsx b/apps/www/registry/new-york/example/toggle-lg.tsx
deleted file mode 100644
index b1c82354ed0..00000000000
--- a/apps/www/registry/new-york/example/toggle-lg.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FontItalicIcon } from "@radix-ui/react-icons"
-
-import { Toggle } from "@/registry/new-york/ui/toggle"
-
-export default function ToggleLg() {
-  return (
-    <Toggle size="lg" aria-label="Toggle italic">
-      <FontItalicIcon className="h-4 w-4" />
-    </Toggle>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-outline.tsx b/apps/www/registry/new-york/example/toggle-outline.tsx
deleted file mode 100644
index 21a57eec119..00000000000
--- a/apps/www/registry/new-york/example/toggle-outline.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FontItalicIcon } from "@radix-ui/react-icons"
-
-import { Toggle } from "@/registry/new-york/ui/toggle"
-
-export default function ToggleOutline() {
-  return (
-    <Toggle variant="outline" aria-label="Toggle italic">
-      <FontItalicIcon className="h-4 w-4" />
-    </Toggle>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-sm.tsx b/apps/www/registry/new-york/example/toggle-sm.tsx
deleted file mode 100644
index 78861438557..00000000000
--- a/apps/www/registry/new-york/example/toggle-sm.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FontItalicIcon } from "@radix-ui/react-icons"
-
-import { Toggle } from "@/registry/new-york/ui/toggle"
-
-export default function ToggleSm() {
-  return (
-    <Toggle size="sm" aria-label="Toggle italic">
-      <FontItalicIcon className="h-4 w-4" />
-    </Toggle>
-  )
-}
diff --git a/apps/www/registry/new-york/example/toggle-with-text.tsx b/apps/www/registry/new-york/example/toggle-with-text.tsx
deleted file mode 100644
index e911e9a516f..00000000000
--- a/apps/www/registry/new-york/example/toggle-with-text.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { FontItalicIcon } from "@radix-ui/react-icons"
-
-import { Toggle } from "@/registry/new-york/ui/toggle"
-
-export default function ToggleWithText() {
-  return (
-    <Toggle aria-label="Toggle italic">
-      <FontItalicIcon />
-      Italic
-    </Toggle>
-  )
-}
diff --git a/apps/www/registry/new-york/example/accordion-demo.tsx b/apps/www/registry/new-york/examples/accordion-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/accordion-demo.tsx
rename to apps/www/registry/new-york/examples/accordion-demo.tsx
diff --git a/apps/www/registry/new-york/examples/alert-demo.tsx b/apps/www/registry/new-york/examples/alert-demo.tsx
new file mode 100644
index 00000000000..e345ee6609c
--- /dev/null
+++ b/apps/www/registry/new-york/examples/alert-demo.tsx
@@ -0,0 +1,19 @@
+import { Terminal } from "lucide-react"
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/registry/new-york/ui/alert"
+
+export default 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/www/registry/new-york/examples/alert-destructive.tsx b/apps/www/registry/new-york/examples/alert-destructive.tsx
new file mode 100644
index 00000000000..cb92ddaf6cd
--- /dev/null
+++ b/apps/www/registry/new-york/examples/alert-destructive.tsx
@@ -0,0 +1,19 @@
+import { AlertCircle } from "lucide-react"
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/registry/new-york/ui/alert"
+
+export default function AlertDestructive() {
+  return (
+    <Alert variant="destructive">
+      <AlertCircle className="h-4 w-4" />
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>
+        Your session has expired. Please log in again.
+      </AlertDescription>
+    </Alert>
+  )
+}
diff --git a/apps/www/registry/new-york/example/alert-dialog-demo.tsx b/apps/www/registry/new-york/examples/alert-dialog-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/alert-dialog-demo.tsx
rename to apps/www/registry/new-york/examples/alert-dialog-demo.tsx
diff --git a/apps/www/registry/new-york/example/aspect-ratio-demo.tsx b/apps/www/registry/new-york/examples/aspect-ratio-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/aspect-ratio-demo.tsx
rename to apps/www/registry/new-york/examples/aspect-ratio-demo.tsx
diff --git a/apps/www/registry/new-york/example/avatar-demo.tsx b/apps/www/registry/new-york/examples/avatar-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/avatar-demo.tsx
rename to apps/www/registry/new-york/examples/avatar-demo.tsx
diff --git a/apps/www/registry/new-york/example/badge-demo.tsx b/apps/www/registry/new-york/examples/badge-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/badge-demo.tsx
rename to apps/www/registry/new-york/examples/badge-demo.tsx
diff --git a/apps/www/registry/new-york/example/badge-destructive.tsx b/apps/www/registry/new-york/examples/badge-destructive.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/badge-destructive.tsx
rename to apps/www/registry/new-york/examples/badge-destructive.tsx
diff --git a/apps/www/registry/new-york/example/badge-outline.tsx b/apps/www/registry/new-york/examples/badge-outline.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/badge-outline.tsx
rename to apps/www/registry/new-york/examples/badge-outline.tsx
diff --git a/apps/www/registry/new-york/example/badge-secondary.tsx b/apps/www/registry/new-york/examples/badge-secondary.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/badge-secondary.tsx
rename to apps/www/registry/new-york/examples/badge-secondary.tsx
diff --git a/apps/www/registry/new-york/example/breadcrumb-demo.tsx b/apps/www/registry/new-york/examples/breadcrumb-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/breadcrumb-demo.tsx
rename to apps/www/registry/new-york/examples/breadcrumb-demo.tsx
diff --git a/apps/www/registry/new-york/example/breadcrumb-dropdown.tsx b/apps/www/registry/new-york/examples/breadcrumb-dropdown.tsx
similarity index 89%
rename from apps/www/registry/new-york/example/breadcrumb-dropdown.tsx
rename to apps/www/registry/new-york/examples/breadcrumb-dropdown.tsx
index e1114e8370c..4bb35a16652 100644
--- a/apps/www/registry/new-york/example/breadcrumb-dropdown.tsx
+++ b/apps/www/registry/new-york/examples/breadcrumb-dropdown.tsx
@@ -1,4 +1,4 @@
-import { ChevronDownIcon, SlashIcon } from "@radix-ui/react-icons"
+import { ChevronDown, Slash } from "lucide-react"
 
 import {
   Breadcrumb,
@@ -23,13 +23,13 @@ export default function BreadcrumbWithDropdown() {
           <BreadcrumbLink href="/">Home</BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator>
-          <SlashIcon />
+          <Slash />
         </BreadcrumbSeparator>
         <BreadcrumbItem>
           <DropdownMenu>
             <DropdownMenuTrigger className="flex items-center gap-1">
               Components
-              <ChevronDownIcon />
+              <ChevronDown />
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start">
               <DropdownMenuItem>Documentation</DropdownMenuItem>
@@ -39,7 +39,7 @@ export default function BreadcrumbWithDropdown() {
           </DropdownMenu>
         </BreadcrumbItem>
         <BreadcrumbSeparator>
-          <SlashIcon />
+          <Slash />
         </BreadcrumbSeparator>
         <BreadcrumbItem>
           <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
diff --git a/apps/www/registry/new-york/example/breadcrumb-ellipsis.tsx b/apps/www/registry/new-york/examples/breadcrumb-ellipsis.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/breadcrumb-ellipsis.tsx
rename to apps/www/registry/new-york/examples/breadcrumb-ellipsis.tsx
diff --git a/apps/www/registry/new-york/example/breadcrumb-link.tsx b/apps/www/registry/new-york/examples/breadcrumb-link.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/breadcrumb-link.tsx
rename to apps/www/registry/new-york/examples/breadcrumb-link.tsx
diff --git a/apps/www/registry/new-york/example/breadcrumb-responsive.tsx b/apps/www/registry/new-york/examples/breadcrumb-responsive.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/breadcrumb-responsive.tsx
rename to apps/www/registry/new-york/examples/breadcrumb-responsive.tsx
diff --git a/apps/www/registry/new-york/example/breadcrumb-separator.tsx b/apps/www/registry/new-york/examples/breadcrumb-separator.tsx
similarity index 88%
rename from apps/www/registry/new-york/example/breadcrumb-separator.tsx
rename to apps/www/registry/new-york/examples/breadcrumb-separator.tsx
index 0e5fcb3dcc6..9833dd7c4d7 100644
--- a/apps/www/registry/new-york/example/breadcrumb-separator.tsx
+++ b/apps/www/registry/new-york/examples/breadcrumb-separator.tsx
@@ -1,4 +1,4 @@
-import { SlashIcon } from "@radix-ui/react-icons"
+import { Slash } from "lucide-react"
 
 import {
   Breadcrumb,
@@ -17,13 +17,13 @@ export default function BreadcrumbWithCustomSeparator() {
           <BreadcrumbLink href="/">Home</BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator>
-          <SlashIcon />
+          <Slash />
         </BreadcrumbSeparator>
         <BreadcrumbItem>
           <BreadcrumbLink href="/components">Components</BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator>
-          <SlashIcon />
+          <Slash />
         </BreadcrumbSeparator>
         <BreadcrumbItem>
           <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
diff --git a/apps/www/registry/new-york/example/button-as-child.tsx b/apps/www/registry/new-york/examples/button-as-child.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/button-as-child.tsx
rename to apps/www/registry/new-york/examples/button-as-child.tsx
diff --git a/apps/www/registry/new-york/example/button-demo.tsx b/apps/www/registry/new-york/examples/button-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/button-demo.tsx
rename to apps/www/registry/new-york/examples/button-demo.tsx
diff --git a/apps/www/registry/new-york/example/button-destructive.tsx b/apps/www/registry/new-york/examples/button-destructive.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/button-destructive.tsx
rename to apps/www/registry/new-york/examples/button-destructive.tsx
diff --git a/apps/www/registry/new-york/example/button-ghost.tsx b/apps/www/registry/new-york/examples/button-ghost.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/button-ghost.tsx
rename to apps/www/registry/new-york/examples/button-ghost.tsx
diff --git a/apps/www/registry/new-york/examples/button-icon.tsx b/apps/www/registry/new-york/examples/button-icon.tsx
new file mode 100644
index 00000000000..8cc643cfafc
--- /dev/null
+++ b/apps/www/registry/new-york/examples/button-icon.tsx
@@ -0,0 +1,11 @@
+import { ChevronRight } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+
+export default function ButtonIcon() {
+  return (
+    <Button variant="outline" size="icon">
+      <ChevronRight />
+    </Button>
+  )
+}
diff --git a/apps/www/registry/new-york/example/button-link.tsx b/apps/www/registry/new-york/examples/button-link.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/button-link.tsx
rename to apps/www/registry/new-york/examples/button-link.tsx
diff --git a/apps/www/registry/new-york/examples/button-loading.tsx b/apps/www/registry/new-york/examples/button-loading.tsx
new file mode 100644
index 00000000000..fcb51a3b6a5
--- /dev/null
+++ b/apps/www/registry/new-york/examples/button-loading.tsx
@@ -0,0 +1,12 @@
+import { Loader2 } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+
+export default function ButtonLoading() {
+  return (
+    <Button disabled>
+      <Loader2 className="animate-spin" />
+      Please wait
+    </Button>
+  )
+}
diff --git a/apps/www/registry/new-york/example/button-outline.tsx b/apps/www/registry/new-york/examples/button-outline.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/button-outline.tsx
rename to apps/www/registry/new-york/examples/button-outline.tsx
diff --git a/apps/www/registry/new-york/example/button-secondary.tsx b/apps/www/registry/new-york/examples/button-secondary.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/button-secondary.tsx
rename to apps/www/registry/new-york/examples/button-secondary.tsx
diff --git a/apps/www/registry/new-york/examples/button-with-icon.tsx b/apps/www/registry/new-york/examples/button-with-icon.tsx
new file mode 100644
index 00000000000..a2964f7057e
--- /dev/null
+++ b/apps/www/registry/new-york/examples/button-with-icon.tsx
@@ -0,0 +1,11 @@
+import { MailOpen } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+
+export default function ButtonWithIcon() {
+  return (
+    <Button>
+      <MailOpen /> Login with Email
+    </Button>
+  )
+}
diff --git a/apps/www/registry/new-york/example/calendar-demo.tsx b/apps/www/registry/new-york/examples/calendar-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/calendar-demo.tsx
rename to apps/www/registry/new-york/examples/calendar-demo.tsx
diff --git a/apps/www/registry/new-york/example/calendar-form.tsx b/apps/www/registry/new-york/examples/calendar-form.tsx
similarity index 98%
rename from apps/www/registry/new-york/example/calendar-form.tsx
rename to apps/www/registry/new-york/examples/calendar-form.tsx
index 0e71d498ad2..03a86465d0f 100644
--- a/apps/www/registry/new-york/example/calendar-form.tsx
+++ b/apps/www/registry/new-york/examples/calendar-form.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { CalendarIcon } from "@radix-ui/react-icons"
 import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 
diff --git a/apps/www/registry/new-york/examples/card-demo.tsx b/apps/www/registry/new-york/examples/card-demo.tsx
new file mode 100644
index 00000000000..3878ab475f5
--- /dev/null
+++ b/apps/www/registry/new-york/examples/card-demo.tsx
@@ -0,0 +1,78 @@
+import { BellRing, Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Switch } from "@/registry/new-york/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={cn("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/www/registry/new-york/example/card-with-form.tsx b/apps/www/registry/new-york/examples/card-with-form.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/card-with-form.tsx
rename to apps/www/registry/new-york/examples/card-with-form.tsx
diff --git a/apps/www/registry/new-york/example/carousel-api.tsx b/apps/www/registry/new-york/examples/carousel-api.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/carousel-api.tsx
rename to apps/www/registry/new-york/examples/carousel-api.tsx
diff --git a/apps/www/registry/new-york/example/carousel-demo.tsx b/apps/www/registry/new-york/examples/carousel-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/carousel-demo.tsx
rename to apps/www/registry/new-york/examples/carousel-demo.tsx
diff --git a/apps/www/registry/new-york/example/carousel-orientation.tsx b/apps/www/registry/new-york/examples/carousel-orientation.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/carousel-orientation.tsx
rename to apps/www/registry/new-york/examples/carousel-orientation.tsx
diff --git a/apps/www/registry/new-york/example/carousel-plugin.tsx b/apps/www/registry/new-york/examples/carousel-plugin.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/carousel-plugin.tsx
rename to apps/www/registry/new-york/examples/carousel-plugin.tsx
diff --git a/apps/www/registry/new-york/example/carousel-size.tsx b/apps/www/registry/new-york/examples/carousel-size.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/carousel-size.tsx
rename to apps/www/registry/new-york/examples/carousel-size.tsx
diff --git a/apps/www/registry/new-york/example/carousel-spacing.tsx b/apps/www/registry/new-york/examples/carousel-spacing.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/carousel-spacing.tsx
rename to apps/www/registry/new-york/examples/carousel-spacing.tsx
diff --git a/apps/www/registry/new-york/example/chart-bar-demo-axis.tsx b/apps/www/registry/new-york/examples/chart-bar-demo-axis.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/chart-bar-demo-axis.tsx
rename to apps/www/registry/new-york/examples/chart-bar-demo-axis.tsx
diff --git a/apps/www/registry/new-york/example/chart-bar-demo-grid.tsx b/apps/www/registry/new-york/examples/chart-bar-demo-grid.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/chart-bar-demo-grid.tsx
rename to apps/www/registry/new-york/examples/chart-bar-demo-grid.tsx
diff --git a/apps/www/registry/new-york/example/chart-bar-demo-legend.tsx b/apps/www/registry/new-york/examples/chart-bar-demo-legend.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/chart-bar-demo-legend.tsx
rename to apps/www/registry/new-york/examples/chart-bar-demo-legend.tsx
diff --git a/apps/www/registry/new-york/example/chart-bar-demo-tooltip.tsx b/apps/www/registry/new-york/examples/chart-bar-demo-tooltip.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/chart-bar-demo-tooltip.tsx
rename to apps/www/registry/new-york/examples/chart-bar-demo-tooltip.tsx
diff --git a/apps/www/registry/new-york/example/chart-bar-demo.tsx b/apps/www/registry/new-york/examples/chart-bar-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/chart-bar-demo.tsx
rename to apps/www/registry/new-york/examples/chart-bar-demo.tsx
diff --git a/apps/www/registry/new-york/example/chart-tooltip-demo.tsx b/apps/www/registry/new-york/examples/chart-tooltip-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/chart-tooltip-demo.tsx
rename to apps/www/registry/new-york/examples/chart-tooltip-demo.tsx
diff --git a/apps/www/registry/new-york/example/checkbox-demo.tsx b/apps/www/registry/new-york/examples/checkbox-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/checkbox-demo.tsx
rename to apps/www/registry/new-york/examples/checkbox-demo.tsx
diff --git a/apps/www/registry/new-york/example/checkbox-disabled.tsx b/apps/www/registry/new-york/examples/checkbox-disabled.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/checkbox-disabled.tsx
rename to apps/www/registry/new-york/examples/checkbox-disabled.tsx
diff --git a/apps/www/registry/new-york/example/checkbox-form-multiple.tsx b/apps/www/registry/new-york/examples/checkbox-form-multiple.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/checkbox-form-multiple.tsx
rename to apps/www/registry/new-york/examples/checkbox-form-multiple.tsx
diff --git a/apps/www/registry/new-york/example/checkbox-form-single.tsx b/apps/www/registry/new-york/examples/checkbox-form-single.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/checkbox-form-single.tsx
rename to apps/www/registry/new-york/examples/checkbox-form-single.tsx
diff --git a/apps/www/registry/new-york/example/checkbox-with-text.tsx b/apps/www/registry/new-york/examples/checkbox-with-text.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/checkbox-with-text.tsx
rename to apps/www/registry/new-york/examples/checkbox-with-text.tsx
diff --git a/apps/www/registry/new-york/examples/collapsible-demo.tsx b/apps/www/registry/new-york/examples/collapsible-demo.tsx
new file mode 100644
index 00000000000..98e8bcc5bab
--- /dev/null
+++ b/apps/www/registry/new-york/examples/collapsible-demo.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import { ChevronsUpDown } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/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">
+            <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/www/registry/new-york/examples/combobox-demo.tsx b/apps/www/registry/new-york/examples/combobox-demo.tsx
new file mode 100644
index 00000000000..08a3048752e
--- /dev/null
+++ b/apps/www/registry/new-york/examples/combobox-demo.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/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={cn(
+                      "ml-auto",
+                      value === framework.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/www/registry/new-york/example/combobox-dropdown-menu.tsx b/apps/www/registry/new-york/examples/combobox-dropdown-menu.tsx
similarity index 97%
rename from apps/www/registry/new-york/example/combobox-dropdown-menu.tsx
rename to apps/www/registry/new-york/examples/combobox-dropdown-menu.tsx
index c27d219e92b..653d3736ece 100644
--- a/apps/www/registry/new-york/example/combobox-dropdown-menu.tsx
+++ b/apps/www/registry/new-york/examples/combobox-dropdown-menu.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { DotsHorizontalIcon } from "@radix-ui/react-icons"
+import { MoreHorizontal } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import {
@@ -51,7 +51,7 @@ export default function ComboboxDropdownMenu() {
       <DropdownMenu open={open} onOpenChange={setOpen}>
         <DropdownMenuTrigger asChild>
           <Button variant="ghost" size="sm">
-            <DotsHorizontalIcon />
+            <MoreHorizontal />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="w-[200px]">
diff --git a/apps/www/registry/new-york/examples/combobox-form.tsx b/apps/www/registry/new-york/examples/combobox-form.tsx
new file mode 100644
index 00000000000..c8fae2cd99d
--- /dev/null
+++ b/apps/www/registry/new-york/examples/combobox-form.tsx
@@ -0,0 +1,141 @@
+"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 { cn } from "@/lib/utils"
+import { toast } from "@/registry/new-york/hooks/use-toast"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york/ui/command"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york/ui/form"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/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={cn(
+                        "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={cn(
+                                "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/www/registry/new-york/example/combobox-popover.tsx b/apps/www/registry/new-york/examples/combobox-popover.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/combobox-popover.tsx
rename to apps/www/registry/new-york/examples/combobox-popover.tsx
diff --git a/apps/www/registry/new-york/example/combobox-responsive.tsx b/apps/www/registry/new-york/examples/combobox-responsive.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/combobox-responsive.tsx
rename to apps/www/registry/new-york/examples/combobox-responsive.tsx
diff --git a/apps/www/registry/new-york/examples/command-demo.tsx b/apps/www/registry/new-york/examples/command-demo.tsx
new file mode 100644
index 00000000000..07076a42bfb
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/command"
+
+export default 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/www/registry/new-york/example/command-dialog.tsx b/apps/www/registry/new-york/examples/command-dialog.tsx
similarity index 84%
rename from apps/www/registry/new-york/example/command-dialog.tsx
rename to apps/www/registry/new-york/examples/command-dialog.tsx
index 6589e9b0741..65058d45023 100644
--- a/apps/www/registry/new-york/example/command-dialog.tsx
+++ b/apps/www/registry/new-york/examples/command-dialog.tsx
@@ -2,13 +2,13 @@
 
 import * as React from "react"
 import {
-  CalendarIcon,
-  EnvelopeClosedIcon,
-  FaceIcon,
-  GearIcon,
-  PersonIcon,
-  RocketIcon,
-} from "@radix-ui/react-icons"
+  Calculator,
+  Calendar,
+  CreditCard,
+  Settings,
+  Smile,
+  User,
+} from "lucide-react"
 
 import {
   CommandDialog,
@@ -50,32 +50,32 @@ export default function CommandDialogDemo() {
           <CommandEmpty>No results found.</CommandEmpty>
           <CommandGroup heading="Suggestions">
             <CommandItem>
-              <CalendarIcon />
+              <Calendar />
               <span>Calendar</span>
             </CommandItem>
             <CommandItem>
-              <FaceIcon />
+              <Smile />
               <span>Search Emoji</span>
             </CommandItem>
             <CommandItem>
-              <RocketIcon />
-              <span>Launch</span>
+              <Calculator />
+              <span>Calculator</span>
             </CommandItem>
           </CommandGroup>
           <CommandSeparator />
           <CommandGroup heading="Settings">
             <CommandItem>
-              <PersonIcon />
+              <User />
               <span>Profile</span>
               <CommandShortcut>⌘P</CommandShortcut>
             </CommandItem>
             <CommandItem>
-              <EnvelopeClosedIcon />
-              <span>Mail</span>
+              <CreditCard />
+              <span>Billing</span>
               <CommandShortcut>⌘B</CommandShortcut>
             </CommandItem>
             <CommandItem>
-              <GearIcon />
+              <Settings />
               <span>Settings</span>
               <CommandShortcut>⌘S</CommandShortcut>
             </CommandItem>
diff --git a/apps/www/registry/new-york/example/context-menu-demo.tsx b/apps/www/registry/new-york/examples/context-menu-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/context-menu-demo.tsx
rename to apps/www/registry/new-york/examples/context-menu-demo.tsx
diff --git a/apps/www/registry/new-york/examples/data-table-demo.tsx b/apps/www/registry/new-york/examples/data-table-demo.tsx
new file mode 100644
index 00000000000..fb8f1fe7ee5
--- /dev/null
+++ b/apps/www/registry/new-york/examples/data-table-demo.tsx
@@ -0,0 +1,312 @@
+"use client"
+
+import * as React from "react"
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Checkbox } from "@/registry/new-york/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import { Input } from "@/registry/new-york/ui/input"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york/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 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 = 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 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 />
+            </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="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>
+    </div>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/date-picker-demo.tsx b/apps/www/registry/new-york/examples/date-picker-demo.tsx
new file mode 100644
index 00000000000..670e819bb15
--- /dev/null
+++ b/apps/www/registry/new-york/examples/date-picker-demo.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function DatePickerDemo() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "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/www/registry/new-york/example/date-picker-form.tsx b/apps/www/registry/new-york/examples/date-picker-form.tsx
similarity index 98%
rename from apps/www/registry/new-york/example/date-picker-form.tsx
rename to apps/www/registry/new-york/examples/date-picker-form.tsx
index 31e45a7eea8..bbd91f28586 100644
--- a/apps/www/registry/new-york/example/date-picker-form.tsx
+++ b/apps/www/registry/new-york/examples/date-picker-form.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { CalendarIcon } from "@radix-ui/react-icons"
 import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 
diff --git a/apps/www/registry/new-york/example/date-picker-with-presets.tsx b/apps/www/registry/new-york/examples/date-picker-with-presets.tsx
similarity index 97%
rename from apps/www/registry/new-york/example/date-picker-with-presets.tsx
rename to apps/www/registry/new-york/examples/date-picker-with-presets.tsx
index 07ed6b88e54..2c01b0a3650 100644
--- a/apps/www/registry/new-york/example/date-picker-with-presets.tsx
+++ b/apps/www/registry/new-york/examples/date-picker-with-presets.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { CalendarIcon } from "@radix-ui/react-icons"
 import { addDays, format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/registry/new-york/ui/button"
diff --git a/apps/www/registry/new-york/example/date-picker-with-range.tsx b/apps/www/registry/new-york/examples/date-picker-with-range.tsx
similarity index 97%
rename from apps/www/registry/new-york/example/date-picker-with-range.tsx
rename to apps/www/registry/new-york/examples/date-picker-with-range.tsx
index f7f51c62567..bf25e4970bb 100644
--- a/apps/www/registry/new-york/example/date-picker-with-range.tsx
+++ b/apps/www/registry/new-york/examples/date-picker-with-range.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { CalendarIcon } from "@radix-ui/react-icons"
 import { addDays, format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
 import { DateRange } from "react-day-picker"
 
 import { cn } from "@/lib/utils"
diff --git a/apps/www/registry/new-york/examples/dialog-close-button.tsx b/apps/www/registry/new-york/examples/dialog-close-button.tsx
new file mode 100644
index 00000000000..c28c418ae68
--- /dev/null
+++ b/apps/www/registry/new-york/examples/dialog-close-button.tsx
@@ -0,0 +1,56 @@
+import { Copy } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/new-york/ui/dialog"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/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://ui.shadcn.com/docs/installation"
+              readOnly
+            />
+          </div>
+          <Button type="submit" size="sm" className="px-3">
+            <span className="sr-only">Copy</span>
+            <Copy />
+          </Button>
+        </div>
+        <DialogFooter className="sm:justify-start">
+          <DialogClose asChild>
+            <Button type="button" variant="secondary">
+              Close
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/www/registry/new-york/example/dialog-demo.tsx b/apps/www/registry/new-york/examples/dialog-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/dialog-demo.tsx
rename to apps/www/registry/new-york/examples/dialog-demo.tsx
diff --git a/apps/www/registry/new-york/examples/drawer-demo.tsx b/apps/www/registry/new-york/examples/drawer-demo.tsx
new file mode 100644
index 00000000000..809b636ca01
--- /dev/null
+++ b/apps/www/registry/new-york/examples/drawer-demo.tsx
@@ -0,0 +1,136 @@
+"use client"
+
+import * as React from "react"
+import { Minus, Plus } from "lucide-react"
+import { Bar, BarChart, ResponsiveContainer } from "recharts"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york/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="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/www/registry/new-york/example/drawer-dialog.tsx b/apps/www/registry/new-york/examples/drawer-dialog.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/drawer-dialog.tsx
rename to apps/www/registry/new-york/examples/drawer-dialog.tsx
diff --git a/apps/www/registry/new-york/example/dropdown-menu-checkboxes.tsx b/apps/www/registry/new-york/examples/dropdown-menu-checkboxes.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/dropdown-menu-checkboxes.tsx
rename to apps/www/registry/new-york/examples/dropdown-menu-checkboxes.tsx
diff --git a/apps/www/registry/new-york/example/dropdown-menu-demo.tsx b/apps/www/registry/new-york/examples/dropdown-menu-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/dropdown-menu-demo.tsx
rename to apps/www/registry/new-york/examples/dropdown-menu-demo.tsx
diff --git a/apps/www/registry/new-york/example/dropdown-menu-radio-group.tsx b/apps/www/registry/new-york/examples/dropdown-menu-radio-group.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/dropdown-menu-radio-group.tsx
rename to apps/www/registry/new-york/examples/dropdown-menu-radio-group.tsx
diff --git a/apps/www/registry/new-york/examples/hover-card-demo.tsx b/apps/www/registry/new-york/examples/hover-card-demo.tsx
new file mode 100644
index 00000000000..1a370a8e090
--- /dev/null
+++ b/apps/www/registry/new-york/examples/hover-card-demo.tsx
@@ -0,0 +1,43 @@
+import { CalendarIcon } from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/registry/new-york/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 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/www/registry/new-york/example/input-demo.tsx b/apps/www/registry/new-york/examples/input-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-demo.tsx
rename to apps/www/registry/new-york/examples/input-demo.tsx
diff --git a/apps/www/registry/new-york/example/input-disabled.tsx b/apps/www/registry/new-york/examples/input-disabled.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-disabled.tsx
rename to apps/www/registry/new-york/examples/input-disabled.tsx
diff --git a/apps/www/registry/new-york/example/input-file.tsx b/apps/www/registry/new-york/examples/input-file.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-file.tsx
rename to apps/www/registry/new-york/examples/input-file.tsx
diff --git a/apps/www/registry/new-york/example/input-form.tsx b/apps/www/registry/new-york/examples/input-form.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-form.tsx
rename to apps/www/registry/new-york/examples/input-form.tsx
diff --git a/apps/www/registry/new-york/example/input-otp-controlled.tsx b/apps/www/registry/new-york/examples/input-otp-controlled.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-otp-controlled.tsx
rename to apps/www/registry/new-york/examples/input-otp-controlled.tsx
diff --git a/apps/www/registry/new-york/example/input-otp-demo.tsx b/apps/www/registry/new-york/examples/input-otp-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-otp-demo.tsx
rename to apps/www/registry/new-york/examples/input-otp-demo.tsx
diff --git a/apps/www/registry/new-york/example/input-otp-form.tsx b/apps/www/registry/new-york/examples/input-otp-form.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-otp-form.tsx
rename to apps/www/registry/new-york/examples/input-otp-form.tsx
diff --git a/apps/www/registry/new-york/example/input-otp-pattern.tsx b/apps/www/registry/new-york/examples/input-otp-pattern.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-otp-pattern.tsx
rename to apps/www/registry/new-york/examples/input-otp-pattern.tsx
diff --git a/apps/www/registry/new-york/example/input-otp-separator.tsx b/apps/www/registry/new-york/examples/input-otp-separator.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-otp-separator.tsx
rename to apps/www/registry/new-york/examples/input-otp-separator.tsx
diff --git a/apps/www/registry/new-york/example/input-with-button.tsx b/apps/www/registry/new-york/examples/input-with-button.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-with-button.tsx
rename to apps/www/registry/new-york/examples/input-with-button.tsx
diff --git a/apps/www/registry/new-york/example/input-with-label.tsx b/apps/www/registry/new-york/examples/input-with-label.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-with-label.tsx
rename to apps/www/registry/new-york/examples/input-with-label.tsx
diff --git a/apps/www/registry/new-york/example/input-with-text.tsx b/apps/www/registry/new-york/examples/input-with-text.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/input-with-text.tsx
rename to apps/www/registry/new-york/examples/input-with-text.tsx
diff --git a/apps/www/registry/new-york/example/label-demo.tsx b/apps/www/registry/new-york/examples/label-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/label-demo.tsx
rename to apps/www/registry/new-york/examples/label-demo.tsx
diff --git a/apps/www/registry/new-york/example/menubar-demo.tsx b/apps/www/registry/new-york/examples/menubar-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/menubar-demo.tsx
rename to apps/www/registry/new-york/examples/menubar-demo.tsx
diff --git a/apps/www/registry/new-york/example/mode-toggle.tsx b/apps/www/registry/new-york/examples/mode-toggle.tsx
similarity index 76%
rename from apps/www/registry/new-york/example/mode-toggle.tsx
rename to apps/www/registry/new-york/examples/mode-toggle.tsx
index 506a906a91b..398ed97ac3f 100644
--- a/apps/www/registry/new-york/example/mode-toggle.tsx
+++ b/apps/www/registry/new-york/examples/mode-toggle.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
+import { Moon, MoonIcon, Sun } from "lucide-react"
 import { useTheme } from "next-themes"
 
 import { Button } from "@/registry/new-york/ui/button"
@@ -19,8 +19,8 @@ export default function ModeToggle() {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="outline" size="icon">
-          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
diff --git a/apps/www/registry/new-york/example/navigation-menu-demo.tsx b/apps/www/registry/new-york/examples/navigation-menu-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/navigation-menu-demo.tsx
rename to apps/www/registry/new-york/examples/navigation-menu-demo.tsx
diff --git a/apps/www/registry/new-york/example/pagination-demo.tsx b/apps/www/registry/new-york/examples/pagination-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/pagination-demo.tsx
rename to apps/www/registry/new-york/examples/pagination-demo.tsx
diff --git a/apps/www/registry/new-york/example/popover-demo.tsx b/apps/www/registry/new-york/examples/popover-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/popover-demo.tsx
rename to apps/www/registry/new-york/examples/popover-demo.tsx
diff --git a/apps/www/registry/new-york/example/progress-demo.tsx b/apps/www/registry/new-york/examples/progress-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/progress-demo.tsx
rename to apps/www/registry/new-york/examples/progress-demo.tsx
diff --git a/apps/www/registry/new-york/example/radio-group-demo.tsx b/apps/www/registry/new-york/examples/radio-group-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/radio-group-demo.tsx
rename to apps/www/registry/new-york/examples/radio-group-demo.tsx
diff --git a/apps/www/registry/new-york/example/radio-group-form.tsx b/apps/www/registry/new-york/examples/radio-group-form.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/radio-group-form.tsx
rename to apps/www/registry/new-york/examples/radio-group-form.tsx
diff --git a/apps/www/registry/new-york/example/resizable-demo-with-handle.tsx b/apps/www/registry/new-york/examples/resizable-demo-with-handle.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/resizable-demo-with-handle.tsx
rename to apps/www/registry/new-york/examples/resizable-demo-with-handle.tsx
diff --git a/apps/www/registry/new-york/example/resizable-demo.tsx b/apps/www/registry/new-york/examples/resizable-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/resizable-demo.tsx
rename to apps/www/registry/new-york/examples/resizable-demo.tsx
diff --git a/apps/www/registry/new-york/examples/resizable-handle.tsx b/apps/www/registry/new-york/examples/resizable-handle.tsx
new file mode 100644
index 00000000000..9ffc95365ba
--- /dev/null
+++ b/apps/www/registry/new-york/examples/resizable-handle.tsx
@@ -0,0 +1,26 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/registry/new-york/ui/resizable"
+
+export default 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/www/registry/new-york/example/resizable-vertical.tsx b/apps/www/registry/new-york/examples/resizable-vertical.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/resizable-vertical.tsx
rename to apps/www/registry/new-york/examples/resizable-vertical.tsx
diff --git a/apps/www/registry/new-york/example/scroll-area-demo.tsx b/apps/www/registry/new-york/examples/scroll-area-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/scroll-area-demo.tsx
rename to apps/www/registry/new-york/examples/scroll-area-demo.tsx
diff --git a/apps/www/registry/new-york/example/scroll-area-horizontal-demo.tsx b/apps/www/registry/new-york/examples/scroll-area-horizontal-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/scroll-area-horizontal-demo.tsx
rename to apps/www/registry/new-york/examples/scroll-area-horizontal-demo.tsx
diff --git a/apps/www/registry/new-york/example/select-demo.tsx b/apps/www/registry/new-york/examples/select-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/select-demo.tsx
rename to apps/www/registry/new-york/examples/select-demo.tsx
diff --git a/apps/www/registry/new-york/example/select-form.tsx b/apps/www/registry/new-york/examples/select-form.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/select-form.tsx
rename to apps/www/registry/new-york/examples/select-form.tsx
diff --git a/apps/www/registry/new-york/example/select-scrollable.tsx b/apps/www/registry/new-york/examples/select-scrollable.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/select-scrollable.tsx
rename to apps/www/registry/new-york/examples/select-scrollable.tsx
diff --git a/apps/www/registry/new-york/example/separator-demo.tsx b/apps/www/registry/new-york/examples/separator-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/separator-demo.tsx
rename to apps/www/registry/new-york/examples/separator-demo.tsx
diff --git a/apps/www/registry/new-york/example/sheet-demo.tsx b/apps/www/registry/new-york/examples/sheet-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/sheet-demo.tsx
rename to apps/www/registry/new-york/examples/sheet-demo.tsx
diff --git a/apps/www/registry/new-york/example/sheet-side.tsx b/apps/www/registry/new-york/examples/sheet-side.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/sheet-side.tsx
rename to apps/www/registry/new-york/examples/sheet-side.tsx
diff --git a/apps/www/registry/new-york/example/skeleton-card.tsx b/apps/www/registry/new-york/examples/skeleton-card.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/skeleton-card.tsx
rename to apps/www/registry/new-york/examples/skeleton-card.tsx
diff --git a/apps/www/registry/new-york/example/skeleton-demo.tsx b/apps/www/registry/new-york/examples/skeleton-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/skeleton-demo.tsx
rename to apps/www/registry/new-york/examples/skeleton-demo.tsx
diff --git a/apps/www/registry/new-york/example/slider-demo.tsx b/apps/www/registry/new-york/examples/slider-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/slider-demo.tsx
rename to apps/www/registry/new-york/examples/slider-demo.tsx
diff --git a/apps/www/registry/new-york/examples/sonner-demo.tsx b/apps/www/registry/new-york/examples/sonner-demo.tsx
new file mode 100644
index 00000000000..c657fda7c1a
--- /dev/null
+++ b/apps/www/registry/new-york/examples/sonner-demo.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { toast } from "sonner"
+
+import { Button } from "@/registry/new-york/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",
+            onClick: () => console.log("Undo"),
+          },
+        })
+      }
+    >
+      Show Toast
+    </Button>
+  )
+}
diff --git a/apps/www/registry/new-york/example/switch-demo.tsx b/apps/www/registry/new-york/examples/switch-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/switch-demo.tsx
rename to apps/www/registry/new-york/examples/switch-demo.tsx
diff --git a/apps/www/registry/new-york/example/switch-form.tsx b/apps/www/registry/new-york/examples/switch-form.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/switch-form.tsx
rename to apps/www/registry/new-york/examples/switch-form.tsx
diff --git a/apps/www/registry/new-york/example/table-demo.tsx b/apps/www/registry/new-york/examples/table-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/table-demo.tsx
rename to apps/www/registry/new-york/examples/table-demo.tsx
diff --git a/apps/www/registry/new-york/example/tabs-demo.tsx b/apps/www/registry/new-york/examples/tabs-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/tabs-demo.tsx
rename to apps/www/registry/new-york/examples/tabs-demo.tsx
diff --git a/apps/www/registry/new-york/example/textarea-demo.tsx b/apps/www/registry/new-york/examples/textarea-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/textarea-demo.tsx
rename to apps/www/registry/new-york/examples/textarea-demo.tsx
diff --git a/apps/www/registry/new-york/example/textarea-disabled.tsx b/apps/www/registry/new-york/examples/textarea-disabled.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/textarea-disabled.tsx
rename to apps/www/registry/new-york/examples/textarea-disabled.tsx
diff --git a/apps/www/registry/new-york/example/textarea-form.tsx b/apps/www/registry/new-york/examples/textarea-form.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/textarea-form.tsx
rename to apps/www/registry/new-york/examples/textarea-form.tsx
diff --git a/apps/www/registry/new-york/example/textarea-with-button.tsx b/apps/www/registry/new-york/examples/textarea-with-button.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/textarea-with-button.tsx
rename to apps/www/registry/new-york/examples/textarea-with-button.tsx
diff --git a/apps/www/registry/new-york/example/textarea-with-label.tsx b/apps/www/registry/new-york/examples/textarea-with-label.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/textarea-with-label.tsx
rename to apps/www/registry/new-york/examples/textarea-with-label.tsx
diff --git a/apps/www/registry/new-york/example/textarea-with-text.tsx b/apps/www/registry/new-york/examples/textarea-with-text.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/textarea-with-text.tsx
rename to apps/www/registry/new-york/examples/textarea-with-text.tsx
diff --git a/apps/www/registry/new-york/example/toast-demo.tsx b/apps/www/registry/new-york/examples/toast-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/toast-demo.tsx
rename to apps/www/registry/new-york/examples/toast-demo.tsx
diff --git a/apps/www/registry/new-york/example/toast-destructive.tsx b/apps/www/registry/new-york/examples/toast-destructive.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/toast-destructive.tsx
rename to apps/www/registry/new-york/examples/toast-destructive.tsx
diff --git a/apps/www/registry/new-york/example/toast-simple.tsx b/apps/www/registry/new-york/examples/toast-simple.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/toast-simple.tsx
rename to apps/www/registry/new-york/examples/toast-simple.tsx
diff --git a/apps/www/registry/new-york/example/toast-with-action.tsx b/apps/www/registry/new-york/examples/toast-with-action.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/toast-with-action.tsx
rename to apps/www/registry/new-york/examples/toast-with-action.tsx
diff --git a/apps/www/registry/new-york/example/toast-with-title.tsx b/apps/www/registry/new-york/examples/toast-with-title.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/toast-with-title.tsx
rename to apps/www/registry/new-york/examples/toast-with-title.tsx
diff --git a/apps/www/registry/new-york/examples/toggle-demo.tsx b/apps/www/registry/new-york/examples/toggle-demo.tsx
new file mode 100644
index 00000000000..d157f88553e
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-demo.tsx
@@ -0,0 +1,11 @@
+import { Bold } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export default function ToggleDemo() {
+  return (
+    <Toggle aria-label="Toggle italic">
+      <Bold className="h-4 w-4" />
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/toggle-disabled.tsx b/apps/www/registry/new-york/examples/toggle-disabled.tsx
new file mode 100644
index 00000000000..f174b1b2ca3
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-disabled.tsx
@@ -0,0 +1,11 @@
+import { Underline } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export default function ToggleDisabled() {
+  return (
+    <Toggle aria-label="Toggle italic" disabled>
+      <Underline className="h-4 w-4" />
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/toggle-group-demo.tsx b/apps/www/registry/new-york/examples/toggle-group-demo.tsx
new file mode 100644
index 00000000000..b3ecd262188
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-group-demo.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+
+export default 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/www/registry/new-york/examples/toggle-group-disabled.tsx b/apps/www/registry/new-york/examples/toggle-group-disabled.tsx
new file mode 100644
index 00000000000..7116d792003
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-group-disabled.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="multiple" disabled>
+      <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/www/registry/new-york/examples/toggle-group-lg.tsx b/apps/www/registry/new-york/examples/toggle-group-lg.tsx
new file mode 100644
index 00000000000..5fc6b585873
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-group-lg.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="multiple" size="lg">
+      <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/www/registry/new-york/examples/toggle-group-outline.tsx b/apps/www/registry/new-york/examples/toggle-group-outline.tsx
new file mode 100644
index 00000000000..c4b42acb888
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-group-outline.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="multiple" variant="outline">
+      <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/www/registry/new-york/examples/toggle-group-single.tsx b/apps/www/registry/new-york/examples/toggle-group-single.tsx
new file mode 100644
index 00000000000..ca317159eab
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-group-single.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="single">
+      <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/www/registry/new-york/examples/toggle-group-sm.tsx b/apps/www/registry/new-york/examples/toggle-group-sm.tsx
new file mode 100644
index 00000000000..6efe37d759a
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-group-sm.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="single" size="sm">
+      <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/www/registry/new-york/examples/toggle-lg.tsx b/apps/www/registry/new-york/examples/toggle-lg.tsx
new file mode 100644
index 00000000000..ded4b53b6e7
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-lg.tsx
@@ -0,0 +1,11 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export default function ToggleLg() {
+  return (
+    <Toggle size="lg" aria-label="Toggle italic">
+      <Italic />
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/toggle-outline.tsx b/apps/www/registry/new-york/examples/toggle-outline.tsx
new file mode 100644
index 00000000000..642d7388de0
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-outline.tsx
@@ -0,0 +1,11 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export default function ToggleOutline() {
+  return (
+    <Toggle variant="outline" aria-label="Toggle italic">
+      <Italic />
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/toggle-sm.tsx b/apps/www/registry/new-york/examples/toggle-sm.tsx
new file mode 100644
index 00000000000..ddcec64aa88
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-sm.tsx
@@ -0,0 +1,11 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export default function ToggleSm() {
+  return (
+    <Toggle size="sm" aria-label="Toggle italic">
+      <Italic />
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/new-york/examples/toggle-with-text.tsx b/apps/www/registry/new-york/examples/toggle-with-text.tsx
new file mode 100644
index 00000000000..09de28f5989
--- /dev/null
+++ b/apps/www/registry/new-york/examples/toggle-with-text.tsx
@@ -0,0 +1,12 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export default function ToggleWithText() {
+  return (
+    <Toggle aria-label="Toggle italic">
+      <Italic />
+      Italic
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/new-york/example/tooltip-demo.tsx b/apps/www/registry/new-york/examples/tooltip-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/tooltip-demo.tsx
rename to apps/www/registry/new-york/examples/tooltip-demo.tsx
diff --git a/apps/www/registry/new-york/example/typography-blockquote.tsx b/apps/www/registry/new-york/examples/typography-blockquote.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-blockquote.tsx
rename to apps/www/registry/new-york/examples/typography-blockquote.tsx
diff --git a/apps/www/registry/new-york/example/typography-demo.tsx b/apps/www/registry/new-york/examples/typography-demo.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-demo.tsx
rename to apps/www/registry/new-york/examples/typography-demo.tsx
diff --git a/apps/www/registry/new-york/example/typography-h1.tsx b/apps/www/registry/new-york/examples/typography-h1.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-h1.tsx
rename to apps/www/registry/new-york/examples/typography-h1.tsx
diff --git a/apps/www/registry/new-york/example/typography-h2.tsx b/apps/www/registry/new-york/examples/typography-h2.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-h2.tsx
rename to apps/www/registry/new-york/examples/typography-h2.tsx
diff --git a/apps/www/registry/new-york/example/typography-h3.tsx b/apps/www/registry/new-york/examples/typography-h3.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-h3.tsx
rename to apps/www/registry/new-york/examples/typography-h3.tsx
diff --git a/apps/www/registry/new-york/example/typography-h4.tsx b/apps/www/registry/new-york/examples/typography-h4.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-h4.tsx
rename to apps/www/registry/new-york/examples/typography-h4.tsx
diff --git a/apps/www/registry/new-york/example/typography-inline-code.tsx b/apps/www/registry/new-york/examples/typography-inline-code.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-inline-code.tsx
rename to apps/www/registry/new-york/examples/typography-inline-code.tsx
diff --git a/apps/www/registry/new-york/example/typography-large.tsx b/apps/www/registry/new-york/examples/typography-large.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-large.tsx
rename to apps/www/registry/new-york/examples/typography-large.tsx
diff --git a/apps/www/registry/new-york/example/typography-lead.tsx b/apps/www/registry/new-york/examples/typography-lead.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-lead.tsx
rename to apps/www/registry/new-york/examples/typography-lead.tsx
diff --git a/apps/www/registry/new-york/example/typography-list.tsx b/apps/www/registry/new-york/examples/typography-list.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-list.tsx
rename to apps/www/registry/new-york/examples/typography-list.tsx
diff --git a/apps/www/registry/new-york/example/typography-muted.tsx b/apps/www/registry/new-york/examples/typography-muted.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-muted.tsx
rename to apps/www/registry/new-york/examples/typography-muted.tsx
diff --git a/apps/www/registry/new-york/example/typography-p.tsx b/apps/www/registry/new-york/examples/typography-p.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-p.tsx
rename to apps/www/registry/new-york/examples/typography-p.tsx
diff --git a/apps/www/registry/new-york/example/typography-small.tsx b/apps/www/registry/new-york/examples/typography-small.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-small.tsx
rename to apps/www/registry/new-york/examples/typography-small.tsx
diff --git a/apps/www/registry/new-york/example/typography-table.tsx b/apps/www/registry/new-york/examples/typography-table.tsx
similarity index 100%
rename from apps/www/registry/new-york/example/typography-table.tsx
rename to apps/www/registry/new-york/examples/typography-table.tsx
diff --git a/apps/www/registry/new-york/block/charts-01.tsx b/apps/www/registry/new-york/internal/charts-01.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/charts-01.tsx
rename to apps/www/registry/new-york/internal/charts-01.tsx
diff --git a/apps/www/registry/new-york/block/dashboard-01.tsx b/apps/www/registry/new-york/internal/dashboard-01.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/dashboard-01.tsx
rename to apps/www/registry/new-york/internal/dashboard-01.tsx
diff --git a/apps/www/registry/new-york/block/dashboard-02.tsx b/apps/www/registry/new-york/internal/dashboard-02.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/dashboard-02.tsx
rename to apps/www/registry/new-york/internal/dashboard-02.tsx
diff --git a/apps/www/registry/new-york/block/dashboard-03.tsx b/apps/www/registry/new-york/internal/dashboard-03.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/dashboard-03.tsx
rename to apps/www/registry/new-york/internal/dashboard-03.tsx
diff --git a/apps/www/registry/new-york/block/dashboard-04.tsx b/apps/www/registry/new-york/internal/dashboard-04.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/dashboard-04.tsx
rename to apps/www/registry/new-york/internal/dashboard-04.tsx
diff --git a/apps/www/registry/new-york/block/dashboard-05.tsx b/apps/www/registry/new-york/internal/dashboard-05.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/dashboard-05.tsx
rename to apps/www/registry/new-york/internal/dashboard-05.tsx
diff --git a/apps/www/registry/new-york/block/dashboard-06.tsx b/apps/www/registry/new-york/internal/dashboard-06.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/dashboard-06.tsx
rename to apps/www/registry/new-york/internal/dashboard-06.tsx
diff --git a/apps/www/registry/new-york/block/dashboard-07.tsx b/apps/www/registry/new-york/internal/dashboard-07.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/dashboard-07.tsx
rename to apps/www/registry/new-york/internal/dashboard-07.tsx
diff --git a/apps/www/registry/new-york/internal/login-01.tsx b/apps/www/registry/new-york/internal/login-01.tsx
new file mode 100644
index 00000000000..6e1e92cbca9
--- /dev/null
+++ b/apps/www/registry/new-york/internal/login-01.tsx
@@ -0,0 +1,68 @@
+import Link from "next/link"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/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/www/__registry__/new-york/v0/sidebar-01.tsx b/apps/www/registry/new-york/internal/sidebar-01.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/v0/sidebar-01.tsx
rename to apps/www/registry/new-york/internal/sidebar-01.tsx
diff --git a/apps/www/__registry__/new-york/v0/sidebar-02.tsx b/apps/www/registry/new-york/internal/sidebar-02.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/v0/sidebar-02.tsx
rename to apps/www/registry/new-york/internal/sidebar-02.tsx
diff --git a/apps/www/__registry__/new-york/v0/sidebar-03.tsx b/apps/www/registry/new-york/internal/sidebar-03.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/v0/sidebar-03.tsx
rename to apps/www/registry/new-york/internal/sidebar-03.tsx
diff --git a/apps/www/__registry__/new-york/v0/sidebar-04.tsx b/apps/www/registry/new-york/internal/sidebar-04.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/v0/sidebar-04.tsx
rename to apps/www/registry/new-york/internal/sidebar-04.tsx
diff --git a/apps/www/__registry__/new-york/v0/sidebar-05.tsx b/apps/www/registry/new-york/internal/sidebar-05.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/v0/sidebar-05.tsx
rename to apps/www/registry/new-york/internal/sidebar-05.tsx
diff --git a/apps/www/__registry__/new-york/v0/sidebar-06.tsx b/apps/www/registry/new-york/internal/sidebar-06.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/v0/sidebar-06.tsx
rename to apps/www/registry/new-york/internal/sidebar-06.tsx
diff --git a/apps/www/__registry__/new-york/v0/sidebar-07.tsx b/apps/www/registry/new-york/internal/sidebar-07.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/v0/sidebar-07.tsx
rename to apps/www/registry/new-york/internal/sidebar-07.tsx
diff --git a/apps/www/__registry__/new-york/v0/sidebar-08.tsx b/apps/www/registry/new-york/internal/sidebar-08.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/v0/sidebar-08.tsx
rename to apps/www/registry/new-york/internal/sidebar-08.tsx
diff --git a/apps/www/__registry__/new-york/v0/sidebar-09.tsx b/apps/www/registry/new-york/internal/sidebar-09.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/v0/sidebar-09.tsx
rename to apps/www/registry/new-york/internal/sidebar-09.tsx
diff --git a/apps/www/__registry__/new-york/v0/sidebar-10.tsx b/apps/www/registry/new-york/internal/sidebar-10.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/v0/sidebar-10.tsx
rename to apps/www/registry/new-york/internal/sidebar-10.tsx
diff --git a/apps/www/__registry__/new-york/v0/sidebar-11.tsx b/apps/www/registry/new-york/internal/sidebar-11.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/v0/sidebar-11.tsx
rename to apps/www/registry/new-york/internal/sidebar-11.tsx
diff --git a/apps/www/__registry__/new-york/v0/sidebar-12.tsx b/apps/www/registry/new-york/internal/sidebar-12.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/v0/sidebar-12.tsx
rename to apps/www/registry/new-york/internal/sidebar-12.tsx
diff --git a/apps/www/__registry__/new-york/v0/sidebar-13.tsx b/apps/www/registry/new-york/internal/sidebar-13.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/v0/sidebar-13.tsx
rename to apps/www/registry/new-york/internal/sidebar-13.tsx
diff --git a/apps/www/__registry__/new-york/v0/sidebar-14.tsx b/apps/www/registry/new-york/internal/sidebar-14.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/v0/sidebar-14.tsx
rename to apps/www/registry/new-york/internal/sidebar-14.tsx
diff --git a/apps/www/__registry__/new-york/v0/sidebar-15.tsx b/apps/www/registry/new-york/internal/sidebar-15.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/v0/sidebar-15.tsx
rename to apps/www/registry/new-york/internal/sidebar-15.tsx
diff --git a/apps/www/__registry__/new-york/block/demo-sidebar-controlled.tsx b/apps/www/registry/new-york/internal/sidebar-controlled.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/demo-sidebar-controlled.tsx
rename to apps/www/registry/new-york/internal/sidebar-controlled.tsx
diff --git a/apps/www/__registry__/new-york/block/demo-sidebar.tsx b/apps/www/registry/new-york/internal/sidebar-demo.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/demo-sidebar.tsx
rename to apps/www/registry/new-york/internal/sidebar-demo.tsx
diff --git a/apps/www/__registry__/new-york/block/demo-sidebar-footer.tsx b/apps/www/registry/new-york/internal/sidebar-footer.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/demo-sidebar-footer.tsx
rename to apps/www/registry/new-york/internal/sidebar-footer.tsx
diff --git a/apps/www/__registry__/new-york/block/demo-sidebar-group-action.tsx b/apps/www/registry/new-york/internal/sidebar-group-action.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/demo-sidebar-group-action.tsx
rename to apps/www/registry/new-york/internal/sidebar-group-action.tsx
diff --git a/apps/www/__registry__/new-york/block/demo-sidebar-group-collapsible.tsx b/apps/www/registry/new-york/internal/sidebar-group-collapsible.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/demo-sidebar-group-collapsible.tsx
rename to apps/www/registry/new-york/internal/sidebar-group-collapsible.tsx
diff --git a/apps/www/__registry__/new-york/block/demo-sidebar-group.tsx b/apps/www/registry/new-york/internal/sidebar-group.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/demo-sidebar-group.tsx
rename to apps/www/registry/new-york/internal/sidebar-group.tsx
diff --git a/apps/www/__registry__/new-york/block/demo-sidebar-header.tsx b/apps/www/registry/new-york/internal/sidebar-header.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/demo-sidebar-header.tsx
rename to apps/www/registry/new-york/internal/sidebar-header.tsx
diff --git a/apps/www/__registry__/new-york/block/demo-sidebar-menu-action.tsx b/apps/www/registry/new-york/internal/sidebar-menu-action.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/demo-sidebar-menu-action.tsx
rename to apps/www/registry/new-york/internal/sidebar-menu-action.tsx
diff --git a/apps/www/__registry__/new-york/block/demo-sidebar-menu-badge.tsx b/apps/www/registry/new-york/internal/sidebar-menu-badge.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/demo-sidebar-menu-badge.tsx
rename to apps/www/registry/new-york/internal/sidebar-menu-badge.tsx
diff --git a/apps/www/__registry__/new-york/block/demo-sidebar-menu-collapsible.tsx b/apps/www/registry/new-york/internal/sidebar-menu-collapsible.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/demo-sidebar-menu-collapsible.tsx
rename to apps/www/registry/new-york/internal/sidebar-menu-collapsible.tsx
diff --git a/apps/www/__registry__/new-york/block/demo-sidebar-menu-sub.tsx b/apps/www/registry/new-york/internal/sidebar-menu-sub.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/demo-sidebar-menu-sub.tsx
rename to apps/www/registry/new-york/internal/sidebar-menu-sub.tsx
diff --git a/apps/www/__registry__/new-york/block/demo-sidebar-menu.tsx b/apps/www/registry/new-york/internal/sidebar-menu.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/demo-sidebar-menu.tsx
rename to apps/www/registry/new-york/internal/sidebar-menu.tsx
diff --git a/apps/www/__registry__/new-york/block/demo-sidebar-rsc.tsx b/apps/www/registry/new-york/internal/sidebar-rsc.tsx
similarity index 100%
rename from apps/www/__registry__/new-york/block/demo-sidebar-rsc.tsx
rename to apps/www/registry/new-york/internal/sidebar-rsc.tsx
diff --git a/apps/www/registry/new-york/internal/sink/components/accordion-demo.tsx b/apps/www/registry/new-york/internal/sink/components/accordion-demo.tsx
new file mode 100644
index 00000000000..ee4d39240ad
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/accordion-demo.tsx
@@ -0,0 +1,32 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/alert-demo.tsx b/apps/www/registry/new-york/internal/sink/components/alert-demo.tsx
new file mode 100644
index 00000000000..5da416b8d4d
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/alert-demo.tsx
@@ -0,0 +1,19 @@
+import { Terminal } from "lucide-react"
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/alert-dialog-demo.tsx b/apps/www/registry/new-york/internal/sink/components/alert-dialog-demo.tsx
new file mode 100644
index 00000000000..2c10477dfac
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/alert-dialog-demo.tsx
@@ -0,0 +1,35 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/registry/new-york/ui/alert-dialog"
+import { Button } from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/app-sidebar.tsx b/apps/www/registry/new-york/internal/sink/components/app-sidebar.tsx
new file mode 100644
index 00000000000..22a0d991185
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/app-sidebar.tsx
@@ -0,0 +1,175 @@
+"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/new-york/blocks/sidebar-07/components/nav-main"
+import { NavProjects } from "@/registry/new-york/blocks/sidebar-07/components/nav-projects"
+import { NavUser } from "@/registry/new-york/blocks/sidebar-07/components/nav-user"
+import { TeamSwitcher } from "@/registry/new-york/blocks/sidebar-07/components/team-switcher"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+} from "@/registry/new-york/ui/sidebar"
+
+// This is sample data.
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.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/www/registry/new-york/internal/sink/components/aspect-ratio-demo.tsx b/apps/www/registry/new-york/internal/sink/components/aspect-ratio-demo.tsx
new file mode 100644
index 00000000000..1000a46b58e
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/aspect-ratio-demo.tsx
@@ -0,0 +1,16 @@
+import Image from "next/image"
+
+import { AspectRatio } from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/avatar-demo.tsx b/apps/www/registry/new-york/internal/sink/components/avatar-demo.tsx
new file mode 100644
index 00000000000..da64aa028c6
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/avatar-demo.tsx
@@ -0,0 +1,14 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+
+export function AvatarDemo() {
+  return (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/badge-demo.tsx b/apps/www/registry/new-york/internal/sink/components/badge-demo.tsx
new file mode 100644
index 00000000000..f5c027a4b73
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/badge-demo.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/new-york/ui/badge"
+
+export function BadgeDemo() {
+  return <Badge>Badge</Badge>
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/badge-destructive.tsx b/apps/www/registry/new-york/internal/sink/components/badge-destructive.tsx
new file mode 100644
index 00000000000..e2a5b18058e
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/badge-destructive.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/new-york/ui/badge"
+
+export function BadgeDestructive() {
+  return <Badge variant="destructive">Destructive</Badge>
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/badge-outline.tsx b/apps/www/registry/new-york/internal/sink/components/badge-outline.tsx
new file mode 100644
index 00000000000..19e3e90cfbe
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/badge-outline.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/new-york/ui/badge"
+
+export function BadgeOutline() {
+  return <Badge variant="outline">Outline</Badge>
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/badge-secondary.tsx b/apps/www/registry/new-york/internal/sink/components/badge-secondary.tsx
new file mode 100644
index 00000000000..0fb04a8070c
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/badge-secondary.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/new-york/ui/badge"
+
+export function BadgeSecondary() {
+  return <Badge variant="secondary">Secondary</Badge>
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/breadcrumb-demo.tsx b/apps/www/registry/new-york/internal/sink/components/breadcrumb-demo.tsx
new file mode 100644
index 00000000000..bca7d548668
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/breadcrumb-demo.tsx
@@ -0,0 +1,49 @@
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/button-demo.tsx b/apps/www/registry/new-york/internal/sink/components/button-demo.tsx
new file mode 100644
index 00000000000..67ed990acb8
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/button-demo.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york/ui/button"
+
+export function ButtonDemo() {
+  return <Button>Button</Button>
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/button-destructive.tsx b/apps/www/registry/new-york/internal/sink/components/button-destructive.tsx
new file mode 100644
index 00000000000..81227165f98
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/button-destructive.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york/ui/button"
+
+export function ButtonDestructive() {
+  return <Button variant="destructive">Destructive</Button>
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/button-ghost.tsx b/apps/www/registry/new-york/internal/sink/components/button-ghost.tsx
new file mode 100644
index 00000000000..3c8302cf5a9
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/button-ghost.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york/ui/button"
+
+export function ButtonGhost() {
+  return <Button variant="ghost">Ghost</Button>
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/button-icon.tsx b/apps/www/registry/new-york/internal/sink/components/button-icon.tsx
new file mode 100644
index 00000000000..b422c44dab3
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/button-icon.tsx
@@ -0,0 +1,11 @@
+import { ChevronRight } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+
+export function ButtonIcon() {
+  return (
+    <Button variant="outline" size="icon">
+      <ChevronRight />
+    </Button>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/button-link.tsx b/apps/www/registry/new-york/internal/sink/components/button-link.tsx
new file mode 100644
index 00000000000..952c84b76ca
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/button-link.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york/ui/button"
+
+export function ButtonLink() {
+  return <Button variant="link">Link</Button>
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/button-loading.tsx b/apps/www/registry/new-york/internal/sink/components/button-loading.tsx
new file mode 100644
index 00000000000..7f19ced2e6b
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/button-loading.tsx
@@ -0,0 +1,12 @@
+import { Loader2 } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+
+export function ButtonLoading() {
+  return (
+    <Button disabled>
+      <Loader2 className="animate-spin" />
+      Please wait
+    </Button>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/button-outline.tsx b/apps/www/registry/new-york/internal/sink/components/button-outline.tsx
new file mode 100644
index 00000000000..a1aebff0bdb
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/button-outline.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york/ui/button"
+
+export function ButtonOutline() {
+  return <Button variant="outline">Outline</Button>
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/button-secondary.tsx b/apps/www/registry/new-york/internal/sink/components/button-secondary.tsx
new file mode 100644
index 00000000000..1a514803210
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/button-secondary.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york/ui/button"
+
+export function ButtonSecondary() {
+  return <Button variant="secondary">Secondary</Button>
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/button-with-icon.tsx b/apps/www/registry/new-york/internal/sink/components/button-with-icon.tsx
new file mode 100644
index 00000000000..cdf017a79dd
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/button-with-icon.tsx
@@ -0,0 +1,11 @@
+import { MailOpen } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+
+export function ButtonWithIcon() {
+  return (
+    <Button>
+      <MailOpen /> Login with Email
+    </Button>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/calendar-demo.tsx b/apps/www/registry/new-york/internal/sink/components/calendar-demo.tsx
new file mode 100644
index 00000000000..a356229a2d1
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/calendar-demo.tsx
@@ -0,0 +1,18 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/card-demo.tsx b/apps/www/registry/new-york/internal/sink/components/card-demo.tsx
new file mode 100644
index 00000000000..07710358862
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/card-demo.tsx
@@ -0,0 +1,78 @@
+import { BellRing, Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Switch } from "@/registry/new-york/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={cn("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/www/registry/new-york/internal/sink/components/carousel-demo.tsx b/apps/www/registry/new-york/internal/sink/components/carousel-demo.tsx
new file mode 100644
index 00000000000..8ae483e8806
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/carousel-demo.tsx
@@ -0,0 +1,32 @@
+import * as React from "react"
+
+import { Card, CardContent } from "@/registry/new-york/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/checkbox-demo.tsx b/apps/www/registry/new-york/internal/sink/components/checkbox-demo.tsx
new file mode 100644
index 00000000000..dec12f85b1f
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/checkbox-demo.tsx
@@ -0,0 +1,17 @@
+"use client"
+
+import { Checkbox } from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/collapsible-demo.tsx b/apps/www/registry/new-york/internal/sink/components/collapsible-demo.tsx
new file mode 100644
index 00000000000..120573e4b87
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/collapsible-demo.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import { ChevronsUpDown } from "lucide-react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/combobox-demo.tsx b/apps/www/registry/new-york/internal/sink/components/combobox-demo.tsx
new file mode 100644
index 00000000000..75f3c5b0e19
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/combobox-demo.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/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={cn(
+                      "ml-auto",
+                      value === framework.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/command-demo.tsx b/apps/www/registry/new-york/internal/sink/components/command-demo.tsx
new file mode 100644
index 00000000000..bc3e54f1d9d
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/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/www/registry/new-york/internal/sink/components/component-wrapper.tsx b/apps/www/registry/new-york/internal/sink/components/component-wrapper.tsx
new file mode 100644
index 00000000000..961a729cac1
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/component-wrapper.tsx
@@ -0,0 +1,22 @@
+import { cn } from "@/registry/new-york/lib/utils"
+
+export function ComponentWrapper({
+  className,
+  name,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<"div"> & { name: string }) {
+  return (
+    <div
+      className={cn("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/www/registry/new-york/internal/sink/components/context-menu-demo.tsx b/apps/www/registry/new-york/internal/sink/components/context-menu-demo.tsx
new file mode 100644
index 00000000000..284afef7656
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/context-menu-demo.tsx
@@ -0,0 +1,67 @@
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/date-picker-demo.tsx b/apps/www/registry/new-york/internal/sink/components/date-picker-demo.tsx
new file mode 100644
index 00000000000..d78cd0b1b7e
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/date-picker-demo.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export function DatePickerDemo() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "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/www/registry/new-york/internal/sink/components/dialog-demo.tsx b/apps/www/registry/new-york/internal/sink/components/dialog-demo.tsx
new file mode 100644
index 00000000000..53b17a8c2a4
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/dialog-demo.tsx
@@ -0,0 +1,47 @@
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/new-york/ui/dialog"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/drawer-demo.tsx b/apps/www/registry/new-york/internal/sink/components/drawer-demo.tsx
new file mode 100644
index 00000000000..5145f119e08
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/drawer-demo.tsx
@@ -0,0 +1,136 @@
+"use client"
+
+import * as React from "react"
+import { Minus, Plus } from "lucide-react"
+import { Bar, BarChart, ResponsiveContainer } from "recharts"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/dropdown-menu-demo.tsx b/apps/www/registry/new-york/internal/sink/components/dropdown-menu-demo.tsx
new file mode 100644
index 00000000000..24ec1dc8a73
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/dropdown-menu-demo.tsx
@@ -0,0 +1,75 @@
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/hover-card-demo.tsx b/apps/www/registry/new-york/internal/sink/components/hover-card-demo.tsx
new file mode 100644
index 00000000000..dc17bad7fa0
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/hover-card-demo.tsx
@@ -0,0 +1,43 @@
+import { CalendarIcon } from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/input-demo.tsx b/apps/www/registry/new-york/internal/sink/components/input-demo.tsx
new file mode 100644
index 00000000000..98c05adf85b
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/input-demo.tsx
@@ -0,0 +1,5 @@
+import { Input } from "@/registry/new-york/ui/input"
+
+export function InputDemo() {
+  return <Input type="email" placeholder="Email" />
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/input-otp-demo.tsx b/apps/www/registry/new-york/internal/sink/components/input-otp-demo.tsx
new file mode 100644
index 00000000000..ba052e5b1e3
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/input-otp-demo.tsx
@@ -0,0 +1,24 @@
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/label-demo.tsx b/apps/www/registry/new-york/internal/sink/components/label-demo.tsx
new file mode 100644
index 00000000000..109078eceaa
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/label-demo.tsx
@@ -0,0 +1,13 @@
+import { Checkbox } from "@/registry/new-york/ui/checkbox"
+import { Label } from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/menubar-demo.tsx b/apps/www/registry/new-york/internal/sink/components/menubar-demo.tsx
new file mode 100644
index 00000000000..71f6a874b9b
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/menubar-demo.tsx
@@ -0,0 +1,107 @@
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/nav-main.tsx b/apps/www/registry/new-york/internal/sink/components/nav-main.tsx
new file mode 100644
index 00000000000..cb11e74d085
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/nav-projects.tsx b/apps/www/registry/new-york/internal/sink/components/nav-projects.tsx
new file mode 100644
index 00000000000..052042ea959
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import {
+  Folder,
+  Forward,
+  MoreHorizontal,
+  Trash2,
+  type LucideIcon,
+} from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/nav-user.tsx b/apps/www/registry/new-york/internal/sink/components/nav-user.tsx
new file mode 100644
index 00000000000..a12cf07ff8f
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/nav-user.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/navigation-menu-demo.tsx b/apps/www/registry/new-york/internal/sink/components/navigation-menu-demo.tsx
new file mode 100644
index 00000000000..df81a338793
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/navigation-menu-demo.tsx
@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+
+import { cn } from "@/lib/utils"
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/registry/new-york/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">
+                      shadcn/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={cn(
+            "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/www/registry/new-york/internal/sink/components/pagination-demo.tsx b/apps/www/registry/new-york/internal/sink/components/pagination-demo.tsx
new file mode 100644
index 00000000000..d4cdae4c548
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/pagination-demo.tsx
@@ -0,0 +1,38 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/popover-demo.tsx b/apps/www/registry/new-york/internal/sink/components/popover-demo.tsx
new file mode 100644
index 00000000000..f82374288ee
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/popover-demo.tsx
@@ -0,0 +1,62 @@
+import { Button } from "@/registry/new-york/ui/button"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/progress-demo.tsx b/apps/www/registry/new-york/internal/sink/components/progress-demo.tsx
new file mode 100644
index 00000000000..c4473cc526e
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/progress-demo.tsx
@@ -0,0 +1,16 @@
+"use client"
+
+import * as React from "react"
+
+import { Progress } from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/radio-group-demo.tsx b/apps/www/registry/new-york/internal/sink/components/radio-group-demo.tsx
new file mode 100644
index 00000000000..ce8452254ee
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/radio-group-demo.tsx
@@ -0,0 +1,21 @@
+import { Label } from "@/registry/new-york/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/resizable-handle.tsx b/apps/www/registry/new-york/internal/sink/components/resizable-handle.tsx
new file mode 100644
index 00000000000..c4f33cad435
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/resizable-handle.tsx
@@ -0,0 +1,26 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/scroll-area-demo.tsx b/apps/www/registry/new-york/internal/sink/components/scroll-area-demo.tsx
new file mode 100644
index 00000000000..13a7fc9d33c
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/scroll-area-demo.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { ScrollArea } from "@/registry/new-york/ui/scroll-area"
+import { Separator } from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/select-demo.tsx b/apps/www/registry/new-york/internal/sink/components/select-demo.tsx
new file mode 100644
index 00000000000..1ac20525aaa
--- /dev/null
+++ b/apps/www/registry/new-york/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/new-york/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/www/registry/new-york/internal/sink/components/separator-demo.tsx b/apps/www/registry/new-york/internal/sink/components/separator-demo.tsx
new file mode 100644
index 00000000000..b8aa9c4e997
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/separator-demo.tsx
@@ -0,0 +1,22 @@
+import { Separator } from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/sheet-demo.tsx b/apps/www/registry/new-york/internal/sink/components/sheet-demo.tsx
new file mode 100644
index 00000000000..a162e20c985
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/sheet-demo.tsx
@@ -0,0 +1,50 @@
+import { Button } from "@/registry/new-york/ui/button"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/skeleton-demo.tsx b/apps/www/registry/new-york/internal/sink/components/skeleton-demo.tsx
new file mode 100644
index 00000000000..1ce2da3e332
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/skeleton-demo.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/slider-demo.tsx b/apps/www/registry/new-york/internal/sink/components/slider-demo.tsx
new file mode 100644
index 00000000000..b25b00deb02
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/slider-demo.tsx
@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils"
+import { Slider } from "@/registry/new-york/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export function SliderDemo({ className, ...props }: SliderProps) {
+  return (
+    <Slider
+      defaultValue={[50]}
+      max={100}
+      step={1}
+      className={cn("w-[60%]", className)}
+      {...props}
+    />
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/sonner-demo.tsx b/apps/www/registry/new-york/internal/sink/components/sonner-demo.tsx
new file mode 100644
index 00000000000..b9e6d9f343c
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/sonner-demo.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { toast } from "sonner"
+
+import { Button } from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/switch-demo.tsx b/apps/www/registry/new-york/internal/sink/components/switch-demo.tsx
new file mode 100644
index 00000000000..d2692d83838
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/switch-demo.tsx
@@ -0,0 +1,11 @@
+import { Label } from "@/registry/new-york/ui/label"
+import { Switch } from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/table-demo.tsx b/apps/www/registry/new-york/internal/sink/components/table-demo.tsx
new file mode 100644
index 00000000000..9cd648ef40c
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/table-demo.tsx
@@ -0,0 +1,87 @@
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/tabs-demo.tsx b/apps/www/registry/new-york/internal/sink/components/tabs-demo.tsx
new file mode 100644
index 00000000000..b3d4a2b22f2
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/tabs-demo.tsx
@@ -0,0 +1,74 @@
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/team-switcher.tsx b/apps/www/registry/new-york/internal/sink/components/team-switcher.tsx
new file mode 100644
index 00000000000..4a7a61c6fbf
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/team-switcher.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { ChevronsUpDown, Plus } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/textarea-demo.tsx b/apps/www/registry/new-york/internal/sink/components/textarea-demo.tsx
new file mode 100644
index 00000000000..f641e597287
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/textarea-demo.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from "@/registry/new-york/ui/textarea"
+
+export function TextareaDemo() {
+  return <Textarea placeholder="Type your message here." />
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/toast-demo.tsx b/apps/www/registry/new-york/internal/sink/components/toast-demo.tsx
new file mode 100644
index 00000000000..f58dc375819
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/toast-demo.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import { useToast } from "@/registry/new-york/hooks/use-toast"
+import { Button } from "@/registry/new-york/ui/button"
+import { ToastAction } from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/toggle-demo.tsx b/apps/www/registry/new-york/internal/sink/components/toggle-demo.tsx
new file mode 100644
index 00000000000..3d2ae617707
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/toggle-demo.tsx
@@ -0,0 +1,11 @@
+import { Bold } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export function ToggleDemo() {
+  return (
+    <Toggle aria-label="Toggle italic">
+      <Bold className="h-4 w-4" />
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/toggle-disabled.tsx b/apps/www/registry/new-york/internal/sink/components/toggle-disabled.tsx
new file mode 100644
index 00000000000..871b7d1b98b
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/toggle-disabled.tsx
@@ -0,0 +1,11 @@
+import { Underline } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export function ToggleDisabled() {
+  return (
+    <Toggle aria-label="Toggle italic" disabled>
+      <Underline className="h-4 w-4" />
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/toggle-group-demo.tsx b/apps/www/registry/new-york/internal/sink/components/toggle-group-demo.tsx
new file mode 100644
index 00000000000..40b6008c1e8
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/toggle-group-demo.tsx
@@ -0,0 +1,22 @@
+import { Bold, Italic, Underline } from "lucide-react"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/components/toggle-outline.tsx b/apps/www/registry/new-york/internal/sink/components/toggle-outline.tsx
new file mode 100644
index 00000000000..4ec135febe6
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/toggle-outline.tsx
@@ -0,0 +1,11 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export function ToggleOutline() {
+  return (
+    <Toggle variant="outline" aria-label="Toggle italic">
+      <Italic />
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/toggle-with-text.tsx b/apps/www/registry/new-york/internal/sink/components/toggle-with-text.tsx
new file mode 100644
index 00000000000..41672023dea
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/toggle-with-text.tsx
@@ -0,0 +1,12 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export function ToggleWithText() {
+  return (
+    <Toggle aria-label="Toggle italic">
+      <Italic />
+      Italic
+    </Toggle>
+  )
+}
diff --git a/apps/www/registry/new-york/internal/sink/components/tooltip-demo.tsx b/apps/www/registry/new-york/internal/sink/components/tooltip-demo.tsx
new file mode 100644
index 00000000000..502a459a1de
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/components/tooltip-demo.tsx
@@ -0,0 +1,22 @@
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/internal/sink/page.tsx b/apps/www/registry/new-york/internal/sink/page.tsx
new file mode 100644
index 00000000000..9513f6ce57a
--- /dev/null
+++ b/apps/www/registry/new-york/internal/sink/page.tsx
@@ -0,0 +1,273 @@
+import { AccordionDemo } from "@/registry/new-york/internal/sink/components/accordion-demo"
+import { AlertDemo } from "@/registry/new-york/internal/sink/components/alert-demo"
+import { AlertDialogDemo } from "@/registry/new-york/internal/sink/components/alert-dialog-demo"
+import { AppSidebar } from "@/registry/new-york/internal/sink/components/app-sidebar"
+import { AspectRatioDemo } from "@/registry/new-york/internal/sink/components/aspect-ratio-demo"
+import { AvatarDemo } from "@/registry/new-york/internal/sink/components/avatar-demo"
+import { BadgeDemo } from "@/registry/new-york/internal/sink/components/badge-demo"
+import { BadgeDestructive } from "@/registry/new-york/internal/sink/components/badge-destructive"
+import { BadgeOutline } from "@/registry/new-york/internal/sink/components/badge-outline"
+import { BadgeSecondary } from "@/registry/new-york/internal/sink/components/badge-secondary"
+import { BreadcrumbDemo } from "@/registry/new-york/internal/sink/components/breadcrumb-demo"
+import { ButtonDemo } from "@/registry/new-york/internal/sink/components/button-demo"
+import { ButtonDestructive } from "@/registry/new-york/internal/sink/components/button-destructive"
+import { ButtonGhost } from "@/registry/new-york/internal/sink/components/button-ghost"
+import { ButtonLink } from "@/registry/new-york/internal/sink/components/button-link"
+import { ButtonLoading } from "@/registry/new-york/internal/sink/components/button-loading"
+import { ButtonOutline } from "@/registry/new-york/internal/sink/components/button-outline"
+import { ButtonSecondary } from "@/registry/new-york/internal/sink/components/button-secondary"
+import { ButtonWithIcon } from "@/registry/new-york/internal/sink/components/button-with-icon"
+import { CalendarDemo } from "@/registry/new-york/internal/sink/components/calendar-demo"
+import { CardDemo } from "@/registry/new-york/internal/sink/components/card-demo"
+import { CarouselDemo } from "@/registry/new-york/internal/sink/components/carousel-demo"
+import { CheckboxDemo } from "@/registry/new-york/internal/sink/components/checkbox-demo"
+import { CollapsibleDemo } from "@/registry/new-york/internal/sink/components/collapsible-demo"
+import { ComboboxDemo } from "@/registry/new-york/internal/sink/components/combobox-demo"
+import { CommandDemo } from "@/registry/new-york/internal/sink/components/command-demo"
+import { ComponentWrapper } from "@/registry/new-york/internal/sink/components/component-wrapper"
+import { ContextMenuDemo } from "@/registry/new-york/internal/sink/components/context-menu-demo"
+import { DatePickerDemo } from "@/registry/new-york/internal/sink/components/date-picker-demo"
+import { DialogDemo } from "@/registry/new-york/internal/sink/components/dialog-demo"
+import { DrawerDemo } from "@/registry/new-york/internal/sink/components/drawer-demo"
+import { DropdownMenuDemo } from "@/registry/new-york/internal/sink/components/dropdown-menu-demo"
+import { HoverCardDemo } from "@/registry/new-york/internal/sink/components/hover-card-demo"
+import { InputDemo } from "@/registry/new-york/internal/sink/components/input-demo"
+import { InputOTPDemo } from "@/registry/new-york/internal/sink/components/input-otp-demo"
+import { LabelDemo } from "@/registry/new-york/internal/sink/components/label-demo"
+import { MenubarDemo } from "@/registry/new-york/internal/sink/components/menubar-demo"
+import { NavigationMenuDemo } from "@/registry/new-york/internal/sink/components/navigation-menu-demo"
+import { PaginationDemo } from "@/registry/new-york/internal/sink/components/pagination-demo"
+import { PopoverDemo } from "@/registry/new-york/internal/sink/components/popover-demo"
+import { ProgressDemo } from "@/registry/new-york/internal/sink/components/progress-demo"
+import { RadioGroupDemo } from "@/registry/new-york/internal/sink/components/radio-group-demo"
+import { ResizableHandleDemo } from "@/registry/new-york/internal/sink/components/resizable-handle"
+import { ScrollAreaDemo } from "@/registry/new-york/internal/sink/components/scroll-area-demo"
+import { SelectDemo } from "@/registry/new-york/internal/sink/components/select-demo"
+import { SeparatorDemo } from "@/registry/new-york/internal/sink/components/separator-demo"
+import { SheetDemo } from "@/registry/new-york/internal/sink/components/sheet-demo"
+import { SkeletonDemo } from "@/registry/new-york/internal/sink/components/skeleton-demo"
+import { SliderDemo } from "@/registry/new-york/internal/sink/components/slider-demo"
+import { SonnerDemo } from "@/registry/new-york/internal/sink/components/sonner-demo"
+import { SwitchDemo } from "@/registry/new-york/internal/sink/components/switch-demo"
+import { TableDemo } from "@/registry/new-york/internal/sink/components/table-demo"
+import { TabsDemo } from "@/registry/new-york/internal/sink/components/tabs-demo"
+import { TextareaDemo } from "@/registry/new-york/internal/sink/components/textarea-demo"
+import { ToastDemo } from "@/registry/new-york/internal/sink/components/toast-demo"
+import { ToggleDemo } from "@/registry/new-york/internal/sink/components/toggle-demo"
+import { ToggleDisabled } from "@/registry/new-york/internal/sink/components/toggle-disabled"
+import { ToggleGroupDemo } from "@/registry/new-york/internal/sink/components/toggle-group-demo"
+import { ToggleOutline } from "@/registry/new-york/internal/sink/components/toggle-outline"
+import { ToggleWithText } from "@/registry/new-york/internal/sink/components/toggle-with-text"
+import { TooltipDemo } from "@/registry/new-york/internal/sink/components/tooltip-demo"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/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/www/registry/new-york/ui/accordion.tsx b/apps/www/registry/new-york/ui/accordion.tsx
index 8dcf9b6fa52..2f55a32f4d3 100644
--- a/apps/www/registry/new-york/ui/accordion.tsx
+++ b/apps/www/registry/new-york/ui/accordion.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "@radix-ui/react-icons"
+import { ChevronDown } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -28,13 +28,13 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "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 text-left [&[data-state=open]>svg]:rotate-180",
         className
       )}
       {...props}
     >
       {children}
-      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ))
diff --git a/apps/www/registry/new-york/ui/breadcrumb.tsx b/apps/www/registry/new-york/ui/breadcrumb.tsx
index cfdc9ac2e75..60e6c96f72f 100644
--- a/apps/www/registry/new-york/ui/breadcrumb.tsx
+++ b/apps/www/registry/new-york/ui/breadcrumb.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
-import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"
 import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -83,7 +83,7 @@ const BreadcrumbSeparator = ({
     className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
     {...props}
   >
-    {children ?? <ChevronRightIcon />}
+    {children ?? <ChevronRight />}
   </li>
 )
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
@@ -98,7 +98,7 @@ const BreadcrumbEllipsis = ({
     className={cn("flex h-9 w-9 items-center justify-center", className)}
     {...props}
   >
-    <DotsHorizontalIcon className="h-4 w-4" />
+    <MoreHorizontal className="h-4 w-4" />
     <span className="sr-only">More</span>
   </span>
 )
diff --git a/apps/www/registry/new-york/ui/calendar.tsx b/apps/www/registry/new-york/ui/calendar.tsx
index 85571a1ca01..bf3185fc8f5 100644
--- a/apps/www/registry/new-york/ui/calendar.tsx
+++ b/apps/www/registry/new-york/ui/calendar.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"
+import { ChevronLeft, ChevronRight } from "lucide-react"
 import { DayPicker } from "react-day-picker"
 
 import { cn } from "@/lib/utils"
@@ -52,7 +52,7 @@ function Calendar({
           "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-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
         day_disabled: "text-muted-foreground opacity-50",
         day_range_middle:
           "aria-selected:bg-accent aria-selected:text-accent-foreground",
@@ -60,8 +60,12 @@ function Calendar({
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4" />,
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
+        ),
       }}
       {...props}
     />
diff --git a/apps/www/registry/new-york/ui/card.tsx b/apps/www/registry/new-york/ui/card.tsx
index 77e9fb789bf..cabfbfc59d9 100644
--- a/apps/www/registry/new-york/ui/card.tsx
+++ b/apps/www/registry/new-york/ui/card.tsx
@@ -30,10 +30,10 @@ const CardHeader = React.forwardRef<
 CardHeader.displayName = "CardHeader"
 
 const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <h3
+  <div
     ref={ref}
     className={cn("font-semibold leading-none tracking-tight", className)}
     {...props}
@@ -42,10 +42,10 @@ const CardTitle = React.forwardRef<
 CardTitle.displayName = "CardTitle"
 
 const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <p
+  <div
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
diff --git a/apps/www/registry/new-york/ui/carousel.tsx b/apps/www/registry/new-york/ui/carousel.tsx
index 494acd23b7d..7b006fd659d 100644
--- a/apps/www/registry/new-york/ui/carousel.tsx
+++ b/apps/www/registry/new-york/ui/carousel.tsx
@@ -1,10 +1,10 @@
 "use client"
 
 import * as React from "react"
-import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons"
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/registry/new-york/ui/button"
@@ -216,7 +216,7 @@ const CarouselPrevious = React.forwardRef<
       onClick={scrollPrev}
       {...props}
     >
-      <ArrowLeftIcon className="h-4 w-4" />
+      <ArrowLeft className="h-4 w-4" />
       <span className="sr-only">Previous slide</span>
     </Button>
   )
@@ -245,7 +245,7 @@ const CarouselNext = React.forwardRef<
       onClick={scrollNext}
       {...props}
     >
-      <ArrowRightIcon className="h-4 w-4" />
+      <ArrowRight className="h-4 w-4" />
       <span className="sr-only">Next slide</span>
     </Button>
   )
diff --git a/apps/www/registry/new-york/ui/chart.tsx b/apps/www/registry/new-york/ui/chart.tsx
index 0510f5bea54..32dc873f363 100644
--- a/apps/www/registry/new-york/ui/chart.tsx
+++ b/apps/www/registry/new-york/ui/chart.tsx
@@ -2,11 +2,6 @@
 
 import * as React from "react"
 import * as RechartsPrimitive from "recharts"
-import {
-  NameType,
-  Payload,
-  ValueType,
-} from "recharts/types/component/DefaultTooltipContent"
 
 import { cn } from "@/lib/utils"
 
@@ -74,7 +69,7 @@ ChartContainer.displayName = "Chart"
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   const colorConfig = Object.entries(config).filter(
-    ([_, config]) => config.theme || config.color
+    ([, config]) => config.theme || config.color
   )
 
   if (!colorConfig.length) {
diff --git a/apps/www/registry/new-york/ui/checkbox.tsx b/apps/www/registry/new-york/ui/checkbox.tsx
index 7d2b3c3bdfc..c6fdd071b5d 100644
--- a/apps/www/registry/new-york/ui/checkbox.tsx
+++ b/apps/www/registry/new-york/ui/checkbox.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { CheckIcon } from "@radix-ui/react-icons"
+import { Check } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -21,7 +21,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <CheckIcon className="h-4 w-4" />
+      <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))
diff --git a/apps/www/registry/new-york/ui/command.tsx b/apps/www/registry/new-york/ui/command.tsx
index 0a78f08e638..b08184b8359 100644
--- a/apps/www/registry/new-york/ui/command.tsx
+++ b/apps/www/registry/new-york/ui/command.tsx
@@ -2,8 +2,8 @@
 
 import * as React from "react"
 import { type DialogProps } from "@radix-ui/react-dialog"
-import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
 import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { Dialog, DialogContent } from "@/registry/new-york/ui/dialog"
@@ -23,9 +23,7 @@ const Command = React.forwardRef<
 ))
 Command.displayName = CommandPrimitive.displayName
 
-interface CommandDialogProps extends DialogProps {}
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0">
@@ -42,7 +40,7 @@ const CommandInput = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
diff --git a/apps/www/registry/new-york/ui/context-menu.tsx b/apps/www/registry/new-york/ui/context-menu.tsx
index 654810acec0..f7257a6debc 100644
--- a/apps/www/registry/new-york/ui/context-menu.tsx
+++ b/apps/www/registry/new-york/ui/context-menu.tsx
@@ -2,11 +2,7 @@
 
 import * as React from "react"
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import {
-  CheckIcon,
-  ChevronRightIcon,
-  DotFilledIcon,
-} from "@radix-ui/react-icons"
+import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -38,7 +34,7 @@ const ContextMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
+    <ChevronRight className="ml-auto h-4 w-4" />
   </ContextMenuPrimitive.SubTrigger>
 ))
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
@@ -108,7 +104,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <Check className="h-4 w-4" />
       </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -131,7 +127,7 @@ const ContextMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="h-4 w-4 fill-current" />
+        <Circle className="h-4 w-4 fill-current" />
       </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/apps/www/registry/new-york/ui/dialog.tsx b/apps/www/registry/new-york/ui/dialog.tsx
index 95b0d38ac04..1647513eced 100644
--- a/apps/www/registry/new-york/ui/dialog.tsx
+++ b/apps/www/registry/new-york/ui/dialog.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { Cross2Icon } from "@radix-ui/react-icons"
+import { X } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -45,7 +45,7 @@ const DialogContent = React.forwardRef<
     >
       {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">
-        <Cross2Icon className="h-4 w-4" />
+        <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
diff --git a/apps/www/registry/new-york/ui/dropdown-menu.tsx b/apps/www/registry/new-york/ui/dropdown-menu.tsx
index 46cbfd8e04c..082639fb595 100644
--- a/apps/www/registry/new-york/ui/dropdown-menu.tsx
+++ b/apps/www/registry/new-york/ui/dropdown-menu.tsx
@@ -2,11 +2,7 @@
 
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import {
-  CheckIcon,
-  ChevronRightIcon,
-  DotFilledIcon,
-} from "@radix-ui/react-icons"
+import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -38,7 +34,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRightIcon className="ml-auto" />
+    <ChevronRight className="ml-auto" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName =
@@ -112,7 +108,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <Check className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -135,7 +131,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="h-4 w-4 fill-current" />
+        <Circle className="h-2 w-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/apps/www/registry/new-york/ui/input-otp.tsx b/apps/www/registry/new-york/ui/input-otp.tsx
index 84d07209056..eb2a1baea86 100644
--- a/apps/www/registry/new-york/ui/input-otp.tsx
+++ b/apps/www/registry/new-york/ui/input-otp.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { DashIcon } from "@radix-ui/react-icons"
 import { OTPInput, OTPInputContext } from "input-otp"
+import { Minus } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -63,7 +63,7 @@ const InputOTPSeparator = React.forwardRef<
   React.ComponentPropsWithoutRef<"div">
 >(({ ...props }, ref) => (
   <div ref={ref} role="separator" {...props}>
-    <DashIcon />
+    <Minus />
   </div>
 ))
 InputOTPSeparator.displayName = "InputOTPSeparator"
diff --git a/apps/www/registry/new-york/ui/input.tsx b/apps/www/registry/new-york/ui/input.tsx
index 5af26b2c1a9..69b64fb2455 100644
--- a/apps/www/registry/new-york/ui/input.tsx
+++ b/apps/www/registry/new-york/ui/input.tsx
@@ -2,16 +2,13 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors 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-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors 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-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
         ref={ref}
diff --git a/apps/www/registry/new-york/ui/menubar.tsx b/apps/www/registry/new-york/ui/menubar.tsx
index 010145cd02e..126091b30a5 100644
--- a/apps/www/registry/new-york/ui/menubar.tsx
+++ b/apps/www/registry/new-york/ui/menubar.tsx
@@ -1,12 +1,8 @@
 "use client"
 
 import * as React from "react"
-import {
-  CheckIcon,
-  ChevronRightIcon,
-  DotFilledIcon,
-} from "@radix-ui/react-icons"
 import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -66,7 +62,7 @@ const MenubarSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
+    <ChevronRight className="ml-auto h-4 w-4" />
   </MenubarPrimitive.SubTrigger>
 ))
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
@@ -144,7 +140,7 @@ const MenubarCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <Check className="h-4 w-4" />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}
@@ -166,7 +162,7 @@ const MenubarRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
-        <DotFilledIcon className="h-4 w-4 fill-current" />
+        <Circle className="h-4 w-4 fill-current" />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/apps/www/registry/new-york/ui/navigation-menu.tsx b/apps/www/registry/new-york/ui/navigation-menu.tsx
index 5841fb39856..a5d4d27d346 100644
--- a/apps/www/registry/new-york/ui/navigation-menu.tsx
+++ b/apps/www/registry/new-york/ui/navigation-menu.tsx
@@ -1,7 +1,7 @@
 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 { ChevronDown } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -54,7 +54,7 @@ const NavigationMenuTrigger = React.forwardRef<
     {...props}
   >
     {children}{" "}
-    <ChevronDownIcon
+    <ChevronDown
       className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
diff --git a/apps/www/registry/new-york/ui/pagination.tsx b/apps/www/registry/new-york/ui/pagination.tsx
index d64bde8fb07..4a547173c96 100644
--- a/apps/www/registry/new-york/ui/pagination.tsx
+++ b/apps/www/registry/new-york/ui/pagination.tsx
@@ -1,9 +1,5 @@
 import * as React from "react"
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  DotsHorizontalIcon,
-} from "@radix-ui/react-icons"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { ButtonProps, buttonVariants } from "@/registry/new-york/ui/button"
@@ -73,7 +69,7 @@ const PaginationPrevious = ({
     className={cn("gap-1 pl-2.5", className)}
     {...props}
   >
-    <ChevronLeftIcon className="h-4 w-4" />
+    <ChevronLeft className="h-4 w-4" />
     <span>Previous</span>
   </PaginationLink>
 )
@@ -90,7 +86,7 @@ const PaginationNext = ({
     {...props}
   >
     <span>Next</span>
-    <ChevronRightIcon className="h-4 w-4" />
+    <ChevronRight className="h-4 w-4" />
   </PaginationLink>
 )
 PaginationNext.displayName = "PaginationNext"
@@ -104,7 +100,7 @@ const PaginationEllipsis = ({
     className={cn("flex h-9 w-9 items-center justify-center", className)}
     {...props}
   >
-    <DotsHorizontalIcon className="h-4 w-4" />
+    <MoreHorizontal className="h-4 w-4" />
     <span className="sr-only">More pages</span>
   </span>
 )
diff --git a/apps/www/registry/new-york/ui/radio-group.tsx b/apps/www/registry/new-york/ui/radio-group.tsx
index cf016735c0a..0bdf6853fcc 100644
--- a/apps/www/registry/new-york/ui/radio-group.tsx
+++ b/apps/www/registry/new-york/ui/radio-group.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { CheckIcon } from "@radix-ui/react-icons"
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -34,7 +34,7 @@ const RadioGroupItem = React.forwardRef<
       {...props}
     >
       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <CheckIcon className="h-3.5 w-3.5 fill-primary" />
+        <Circle className="h-3.5 w-3.5 fill-primary" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )
diff --git a/apps/www/registry/new-york/ui/resizable.tsx b/apps/www/registry/new-york/ui/resizable.tsx
index 5942eb05e60..f4bc5586b67 100644
--- a/apps/www/registry/new-york/ui/resizable.tsx
+++ b/apps/www/registry/new-york/ui/resizable.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { DragHandleDots2Icon } from "@radix-ui/react-icons"
+import { GripVertical } from "lucide-react"
 import * as ResizablePrimitive from "react-resizable-panels"
 
 import { cn } from "@/lib/utils"
@@ -36,7 +36,7 @@ const ResizableHandle = ({
   >
     {withHandle && (
       <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-        <DragHandleDots2Icon className="h-2.5 w-2.5" />
+        <GripVertical className="h-2.5 w-2.5" />
       </div>
     )}
   </ResizablePrimitive.PanelResizeHandle>
diff --git a/apps/www/registry/new-york/ui/select.tsx b/apps/www/registry/new-york/ui/select.tsx
index ac2a8f2b9c7..0cbf77d15a5 100644
--- a/apps/www/registry/new-york/ui/select.tsx
+++ b/apps/www/registry/new-york/ui/select.tsx
@@ -1,13 +1,8 @@
 "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"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -31,7 +26,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <CaretSortIcon className="h-4 w-4 opacity-50" />
+      <ChevronDown className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ))
@@ -49,7 +44,7 @@ const SelectScrollUpButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronUpIcon />
+    <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
 ))
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
@@ -66,7 +61,7 @@ const SelectScrollDownButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronDownIcon />
+    <ChevronDown className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
 ))
 SelectScrollDownButton.displayName =
@@ -130,7 +125,7 @@ const SelectItem = React.forwardRef<
   >
     <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <Check className="h-4 w-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
diff --git a/apps/www/registry/new-york/ui/sheet.tsx b/apps/www/registry/new-york/ui/sheet.tsx
index 417e7e10a73..272cb721eb4 100644
--- a/apps/www/registry/new-york/ui/sheet.tsx
+++ b/apps/www/registry/new-york/ui/sheet.tsx
@@ -2,8 +2,8 @@
 
 import * as React from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { Cross2Icon } from "@radix-ui/react-icons"
 import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -65,7 +65,7 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       <SheetPrimitive.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-secondary">
-        <Cross2Icon className="h-4 w-4" />
+        <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
       {children}
diff --git a/apps/www/registry/new-york/ui/textarea.tsx b/apps/www/registry/new-york/ui/textarea.tsx
index d1258e47a43..e56b0affd7e 100644
--- a/apps/www/registry/new-york/ui/textarea.tsx
+++ b/apps/www/registry/new-york/ui/textarea.tsx
@@ -2,23 +2,21 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
 Textarea.displayName = "Textarea"
 
 export { Textarea }
diff --git a/apps/www/registry/new-york/ui/toast.tsx b/apps/www/registry/new-york/ui/toast.tsx
index cc4e0ab2f00..40ac9ddb7d5 100644
--- a/apps/www/registry/new-york/ui/toast.tsx
+++ b/apps/www/registry/new-york/ui/toast.tsx
@@ -1,9 +1,9 @@
 "use client"
 
 import * as React from "react"
-import { Cross2Icon } from "@radix-ui/react-icons"
 import * as ToastPrimitives from "@radix-ui/react-toast"
 import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -83,7 +83,7 @@ const ToastClose = React.forwardRef<
     toast-close=""
     {...props}
   >
-    <Cross2Icon className="h-4 w-4" />
+    <X className="h-4 w-4" />
   </ToastPrimitives.Close>
 ))
 ToastClose.displayName = ToastPrimitives.Close.displayName
diff --git a/apps/www/registry/new-york/ui/toggle.tsx b/apps/www/registry/new-york/ui/toggle.tsx
index c50c2733f48..db35d78be41 100644
--- a/apps/www/registry/new-york/ui/toggle.tsx
+++ b/apps/www/registry/new-york/ui/toggle.tsx
@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } 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 gap-2 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -16,9 +16,9 @@ const toggleVariants = cva(
           "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-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
       },
     },
     defaultVariants: {
diff --git a/apps/www/registry/new-york/v0/login-01.tsx b/apps/www/registry/new-york/v0/login-01.tsx
deleted file mode 100644
index 17232fa1454..00000000000
--- a/apps/www/registry/new-york/v0/login-01.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import Link from "next/link"
-
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
-
-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">
-      <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/www/registry/new-york/v0/sidebar-01.tsx b/apps/www/registry/new-york/v0/sidebar-01.tsx
deleted file mode 100644
index b897d949617..00000000000
--- a/apps/www/registry/new-york/v0/sidebar-01.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Label } from "@/registry/new-york/ui/label"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarTrigger,
-} from "@/registry/new-york/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/www/registry/new-york/v0/sidebar-02.tsx b/apps/www/registry/new-york/v0/sidebar-02.tsx
deleted file mode 100644
index f35ed2871a7..00000000000
--- a/apps/www/registry/new-york/v0/sidebar-02.tsx
+++ /dev/null
@@ -1,323 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  Check,
-  ChevronRight,
-  ChevronsUpDown,
-  GalleryVerticalEnd,
-  Search,
-} from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/new-york/ui/collapsible"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Label } from "@/registry/new-york/ui/label"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarTrigger,
-} from "@/registry/new-york/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/www/registry/new-york/v0/sidebar-03.tsx b/apps/www/registry/new-york/v0/sidebar-03.tsx
deleted file mode 100644
index a1d267cb663..00000000000
--- a/apps/www/registry/new-york/v0/sidebar-03.tsx
+++ /dev/null
@@ -1,270 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Label } from "@/registry/new-york/ui/label"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarTrigger,
-} from "@/registry/new-york/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/www/registry/new-york/v0/sidebar-04.tsx b/apps/www/registry/new-york/v0/sidebar-04.tsx
deleted file mode 100644
index 703149bb7fb..00000000000
--- a/apps/www/registry/new-york/v0/sidebar-04.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { GalleryVerticalEnd } from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarHeader,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/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/www/registry/new-york/v0/sidebar-05.tsx b/apps/www/registry/new-york/v0/sidebar-05.tsx
deleted file mode 100644
index cc8b153e3d6..00000000000
--- a/apps/www/registry/new-york/v0/sidebar-05.tsx
+++ /dev/null
@@ -1,288 +0,0 @@
-import { GalleryVerticalEnd, Minus, Plus, Search } from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/new-york/ui/collapsible"
-import { Label } from "@/registry/new-york/ui/label"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarTrigger,
-} from "@/registry/new-york/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/www/registry/new-york/v0/sidebar-06.tsx b/apps/www/registry/new-york/v0/sidebar-06.tsx
deleted file mode 100644
index 2231314d4bf..00000000000
--- a/apps/www/registry/new-york/v0/sidebar-06.tsx
+++ /dev/null
@@ -1,287 +0,0 @@
-"use client"
-
-import { GalleryVerticalEnd, MoreHorizontal } from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarTrigger,
-  useSidebar,
-} from "@/registry/new-york/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/www/registry/new-york/v0/sidebar-07.tsx b/apps/www/registry/new-york/v0/sidebar-07.tsx
deleted file mode 100644
index c24297113f9..00000000000
--- a/apps/www/registry/new-york/v0/sidebar-07.tsx
+++ /dev/null
@@ -1,482 +0,0 @@
-"use client"
-
-import * as React from "react"
-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 {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york/ui/avatar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/new-york/ui/collapsible"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarTrigger,
-} from "@/registry/new-york/ui/sidebar"
-
-export const iframeHeight = "800px"
-
-export const description = "A sidebar that collapses to icons."
-
-// This is sample data.
-const data = {
-  user: {
-    name: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.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/www/registry/new-york/v0/sidebar-08.tsx b/apps/www/registry/new-york/v0/sidebar-08.tsx
deleted file mode 100644
index bf4262e66ad..00000000000
--- a/apps/www/registry/new-york/v0/sidebar-08.tsx
+++ /dev/null
@@ -1,452 +0,0 @@
-"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/new-york/ui/avatar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/new-york/ui/collapsible"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/registry/new-york/ui/sidebar"
-
-export const iframeHeight = "800px"
-
-export const description = "An inset sidebar with secondary navigation."
-
-const data = {
-  user: {
-    name: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.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/www/registry/new-york/v0/sidebar-09.tsx b/apps/www/registry/new-york/v0/sidebar-09.tsx
deleted file mode 100644
index abdbb7456af..00000000000
--- a/apps/www/registry/new-york/v0/sidebar-09.tsx
+++ /dev/null
@@ -1,426 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  ArchiveX,
-  BadgeCheck,
-  Bell,
-  ChevronsUpDown,
-  Command,
-  CreditCard,
-  File,
-  Inbox,
-  LogOut,
-  Send,
-  Sparkles,
-  Trash2,
-} from "lucide-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york/ui/avatar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Label } from "@/registry/new-york/ui/label"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-  SidebarTrigger,
-  useSidebar,
-} from "@/registry/new-york/ui/sidebar"
-import { Switch } from "@/registry/new-york/ui/switch"
-
-// This is sample data
-const data = {
-  user: {
-    name: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.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/www/registry/new-york/v0/sidebar-10.tsx b/apps/www/registry/new-york/v0/sidebar-10.tsx
deleted file mode 100644
index 2ad20e8dc28..00000000000
--- a/apps/www/registry/new-york/v0/sidebar-10.tsx
+++ /dev/null
@@ -1,743 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  ArrowDown,
-  ArrowUp,
-  ArrowUpRight,
-  AudioWaveform,
-  Bell,
-  Blocks,
-  Calendar,
-  ChevronDown,
-  ChevronRight,
-  Command,
-  Copy,
-  CornerUpLeft,
-  CornerUpRight,
-  FileText,
-  GalleryVerticalEnd,
-  Home,
-  Inbox,
-  LineChart,
-  Link,
-  MessageCircleQuestion,
-  MoreHorizontal,
-  Plus,
-  Search,
-  Settings2,
-  Sparkles,
-  Star,
-  StarOff,
-  Trash,
-  Trash2,
-  type LucideIcon,
-} from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/new-york/ui/collapsible"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york/ui/popover"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarTrigger,
-  useSidebar,
-} from "@/registry/new-york/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/www/registry/new-york/v0/sidebar-11.tsx b/apps/www/registry/new-york/v0/sidebar-11.tsx
deleted file mode 100644
index 957a21d4f4e..00000000000
--- a/apps/www/registry/new-york/v0/sidebar-11.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import * as React from "react"
-import { ChevronRight, File, Folder } from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/new-york/ui/collapsible"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarProvider,
-  SidebarRail,
-  SidebarTrigger,
-} from "@/registry/new-york/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/www/registry/new-york/v0/sidebar-12.tsx b/apps/www/registry/new-york/v0/sidebar-12.tsx
deleted file mode 100644
index 870893fe079..00000000000
--- a/apps/www/registry/new-york/v0/sidebar-12.tsx
+++ /dev/null
@@ -1,288 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  BadgeCheck,
-  Bell,
-  Check,
-  ChevronRight,
-  ChevronsUpDown,
-  CreditCard,
-  LogOut,
-  Plus,
-  Sparkles,
-} from "lucide-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york/ui/avatar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Calendar } from "@/registry/new-york/ui/calendar"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/new-york/ui/collapsible"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Separator } from "@/registry/new-york/ui/separator"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-} from "@/registry/new-york/ui/sidebar"
-
-// This is sample data.
-const data = {
-  user: {
-    name: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.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/www/registry/new-york/v0/sidebar-13.tsx b/apps/www/registry/new-york/v0/sidebar-13.tsx
deleted file mode 100644
index 7ca98ede758..00000000000
--- a/apps/www/registry/new-york/v0/sidebar-13.tsx
+++ /dev/null
@@ -1,141 +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/new-york/ui/breadcrumb"
-import { Button } from "@/registry/new-york/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogTitle,
-  DialogTrigger,
-} from "@/registry/new-york/ui/dialog"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-} from "@/registry/new-york/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/www/registry/new-york/v0/sidebar-14.tsx b/apps/www/registry/new-york/v0/sidebar-14.tsx
deleted file mode 100644
index 2d41a5575b7..00000000000
--- a/apps/www/registry/new-york/v0/sidebar-14.tsx
+++ /dev/null
@@ -1,246 +0,0 @@
-import * as React from "react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/new-york/ui/breadcrumb"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarTrigger,
-} from "@/registry/new-york/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/www/registry/new-york/v0/sidebar-15.tsx b/apps/www/registry/new-york/v0/sidebar-15.tsx
deleted file mode 100644
index 1f105944c78..00000000000
--- a/apps/www/registry/new-york/v0/sidebar-15.tsx
+++ /dev/null
@@ -1,818 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  ArrowUpRight,
-  AudioWaveform,
-  BadgeCheck,
-  Bell,
-  Blocks,
-  CalendarIcon,
-  Check,
-  ChevronDown,
-  ChevronRight,
-  ChevronsUpDown,
-  Command,
-  CreditCard,
-  Home,
-  Inbox,
-  Link,
-  LogOut,
-  MessageCircleQuestion,
-  MoreHorizontal,
-  Plus,
-  Search,
-  Settings2,
-  Sparkles,
-  StarOff,
-  Trash2,
-  type LucideIcon,
-} from "lucide-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york/ui/avatar"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-} from "@/registry/new-york/ui/breadcrumb"
-import { Calendar } from "@/registry/new-york/ui/calendar"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/new-york/ui/collapsible"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuTrigger,
-} from "@/registry/new-york/ui/dropdown-menu"
-import { Separator } from "@/registry/new-york/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/new-york/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: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.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/www/registry/registry-blocks.ts b/apps/www/registry/registry-blocks.ts
index 97f98e2a4a8..a8fe6fb9258 100644
--- a/apps/www/registry/registry-blocks.ts
+++ b/apps/www/registry/registry-blocks.ts
@@ -4,6 +4,7 @@ export const blocks: Registry = [
   {
     name: "sidebar-01",
     type: "registry:block",
+    description: "A simple sidebar with navigation grouped by section.",
     registryDependencies: [
       "sidebar",
       "breadcrumb",
@@ -13,28 +14,28 @@ export const blocks: Registry = [
     ],
     files: [
       {
-        path: "block/sidebar-01/page.tsx",
+        path: "blocks/sidebar-01/page.tsx",
         type: "registry:page",
         target: "app/dashboard/page.tsx",
       },
       {
-        path: "block/sidebar-01/components/app-sidebar.tsx",
+        path: "blocks/sidebar-01/components/app-sidebar.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-01/components/search-form.tsx",
+        path: "blocks/sidebar-01/components/search-form.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-01/components/version-switcher.tsx",
+        path: "blocks/sidebar-01/components/version-switcher.tsx",
         type: "registry:component",
       },
     ],
-    category: "Application",
-    subcategory: "Sidebars",
+    categories: ["sidebar", "dashboard"],
   },
   {
     name: "sidebar-02",
+    description: "A sidebar with collapsible sections.",
     type: "registry:block",
     registryDependencies: [
       "sidebar",
@@ -45,64 +46,64 @@ export const blocks: Registry = [
     ],
     files: [
       {
-        path: "block/sidebar-02/page.tsx",
+        path: "blocks/sidebar-02/page.tsx",
         type: "registry:page",
         target: "app/dashboard/page.tsx",
       },
       {
-        path: "block/sidebar-02/components/app-sidebar.tsx",
+        path: "blocks/sidebar-02/components/app-sidebar.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-02/components/search-form.tsx",
+        path: "blocks/sidebar-02/components/search-form.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-02/components/version-switcher.tsx",
+        path: "blocks/sidebar-02/components/version-switcher.tsx",
         type: "registry:component",
       },
     ],
-    category: "Application",
-    subcategory: "Sidebars",
+    categories: ["sidebar", "dashboard"],
   },
   {
     name: "sidebar-03",
+    description: "A sidebar with submenus.",
     type: "registry:block",
     registryDependencies: ["sidebar", "breadcrumb"],
     files: [
       {
-        path: "block/sidebar-03/page.tsx",
+        path: "blocks/sidebar-03/page.tsx",
         type: "registry:page",
         target: "app/dashboard/page.tsx",
       },
       {
-        path: "block/sidebar-03/components/app-sidebar.tsx",
+        path: "blocks/sidebar-03/components/app-sidebar.tsx",
         type: "registry:component",
       },
     ],
-    category: "Application",
-    subcategory: "Sidebars",
+    categories: ["sidebar", "dashboard"],
   },
   {
     name: "sidebar-04",
+    description: "A floating sidebar with submenus.",
     type: "registry:block",
     registryDependencies: ["sidebar", "breadcrumb", "separator"],
     files: [
       {
-        path: "block/sidebar-04/page.tsx",
+        path: "blocks/sidebar-04/page.tsx",
         type: "registry:page",
         target: "app/dashboard/page.tsx",
       },
       {
-        path: "block/sidebar-04/components/app-sidebar.tsx",
+        path: "blocks/sidebar-04/components/app-sidebar.tsx",
         type: "registry:component",
       },
     ],
-    category: "Application",
-    subcategory: "Sidebars",
+    categories: ["sidebar", "dashboard"],
   },
   {
     name: "sidebar-05",
+    description: "A sidebar with collapsible submenus.",
     type: "registry:block",
     registryDependencies: [
       "sidebar",
@@ -113,24 +114,24 @@ export const blocks: Registry = [
     ],
     files: [
       {
-        path: "block/sidebar-05/page.tsx",
+        path: "blocks/sidebar-05/page.tsx",
         type: "registry:page",
         target: "app/dashboard/page.tsx",
       },
       {
-        path: "block/sidebar-05/components/app-sidebar.tsx",
+        path: "blocks/sidebar-05/components/app-sidebar.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-05/components/search-form.tsx",
+        path: "blocks/sidebar-05/components/search-form.tsx",
         type: "registry:component",
       },
     ],
-    category: "Application",
-    subcategory: "Sidebars",
+    categories: ["sidebar", "dashboard"],
   },
   {
     name: "sidebar-06",
+    description: "A sidebar with submenus as dropdowns.",
     type: "registry:block",
     registryDependencies: [
       "sidebar",
@@ -141,29 +142,29 @@ export const blocks: Registry = [
     ],
     files: [
       {
-        path: "block/sidebar-06/page.tsx",
+        path: "blocks/sidebar-06/page.tsx",
         type: "registry:page",
         target: "app/dashboard/page.tsx",
       },
       {
-        path: "block/sidebar-06/components/app-sidebar.tsx",
+        path: "blocks/sidebar-06/components/app-sidebar.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-06/components/nav-main.tsx",
+        path: "blocks/sidebar-06/components/nav-main.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-06/components/sidebar-opt-in-form.tsx",
+        path: "blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
         type: "registry:component",
       },
     ],
-    category: "Application",
-    subcategory: "Sidebars",
+    categories: ["sidebar", "dashboard"],
   },
   {
     name: "sidebar-07",
     type: "registry:block",
+    description: "A sidebar that collapses to icons.",
     registryDependencies: [
       "sidebar",
       "breadcrumb",
@@ -174,36 +175,36 @@ export const blocks: Registry = [
     ],
     files: [
       {
-        path: "block/sidebar-07/page.tsx",
+        path: "blocks/sidebar-07/page.tsx",
         type: "registry:page",
         target: "app/dashboard/page.tsx",
       },
       {
-        path: "block/sidebar-07/components/app-sidebar.tsx",
+        path: "blocks/sidebar-07/components/app-sidebar.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-07/components/nav-main.tsx",
+        path: "blocks/sidebar-07/components/nav-main.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-07/components/nav-projects.tsx",
+        path: "blocks/sidebar-07/components/nav-projects.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-07/components/nav-user.tsx",
+        path: "blocks/sidebar-07/components/nav-user.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-07/components/team-switcher.tsx",
+        path: "blocks/sidebar-07/components/team-switcher.tsx",
         type: "registry:component",
       },
     ],
-    category: "Application",
-    subcategory: "Sidebars",
+    categories: ["sidebar", "dashboard"],
   },
   {
     name: "sidebar-08",
+    description: "An inset sidebar with secondary navigation.",
     type: "registry:block",
     registryDependencies: [
       "sidebar",
@@ -215,36 +216,36 @@ export const blocks: Registry = [
     ],
     files: [
       {
-        path: "block/sidebar-08/page.tsx",
+        path: "blocks/sidebar-08/page.tsx",
         type: "registry:page",
         target: "app/dashboard/page.tsx",
       },
       {
-        path: "block/sidebar-08/components/app-sidebar.tsx",
+        path: "blocks/sidebar-08/components/app-sidebar.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-08/components/nav-main.tsx",
+        path: "blocks/sidebar-08/components/nav-main.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-08/components/nav-projects.tsx",
+        path: "blocks/sidebar-08/components/nav-projects.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-08/components/nav-secondary.tsx",
+        path: "blocks/sidebar-08/components/nav-secondary.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-08/components/nav-user.tsx",
+        path: "blocks/sidebar-08/components/nav-user.tsx",
         type: "registry:component",
       },
     ],
-    category: "Application",
-    subcategory: "Sidebars",
+    categories: ["sidebar", "dashboard"],
   },
   {
     name: "sidebar-09",
+    description: "Collapsible nested sidebars.",
     type: "registry:block",
     registryDependencies: [
       "sidebar",
@@ -257,20 +258,24 @@ export const blocks: Registry = [
     ],
     files: [
       {
-        path: "block/sidebar-09/page.tsx",
+        path: "blocks/sidebar-09/page.tsx",
         type: "registry:page",
         target: "app/dashboard/page.tsx",
       },
       {
-        path: "block/sidebar-09/components/nav-user.tsx",
+        path: "blocks/sidebar-09/components/app-sidebar.tsx",
+        type: "registry:component",
+      },
+      {
+        path: "blocks/sidebar-09/components/nav-user.tsx",
         type: "registry:component",
       },
     ],
-    category: "Application",
-    subcategory: "Sidebars",
+    categories: ["sidebar", "dashboard"],
   },
   {
     name: "sidebar-10",
+    description: "A sidebar in a popover.",
     type: "registry:block",
     registryDependencies: [
       "sidebar",
@@ -282,62 +287,62 @@ export const blocks: Registry = [
     ],
     files: [
       {
-        path: "block/sidebar-10/page.tsx",
+        path: "blocks/sidebar-10/page.tsx",
         type: "registry:page",
         target: "app/dashboard/page.tsx",
       },
       {
-        path: "block/sidebar-10/components/app-sidebar.tsx",
+        path: "blocks/sidebar-10/components/app-sidebar.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-10/components/nav-actions.tsx",
+        path: "blocks/sidebar-10/components/nav-actions.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-10/components/nav-favorites.tsx",
+        path: "blocks/sidebar-10/components/nav-favorites.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-10/components/nav-main.tsx",
+        path: "blocks/sidebar-10/components/nav-main.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-10/components/nav-secondary.tsx",
+        path: "blocks/sidebar-10/components/nav-secondary.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-10/components/nav-workspaces.tsx",
+        path: "blocks/sidebar-10/components/nav-workspaces.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-10/components/team-switcher.tsx",
+        path: "blocks/sidebar-10/components/team-switcher.tsx",
         type: "registry:component",
       },
     ],
-    category: "Application",
-    subcategory: "Sidebars",
+    categories: ["sidebar", "dashboard"],
   },
   {
     name: "sidebar-11",
+    description: "A sidebar with a collapsible file tree.",
     type: "registry:block",
     registryDependencies: ["sidebar", "breadcrumb", "separator", "collapsible"],
     files: [
       {
-        path: "block/sidebar-11/page.tsx",
+        path: "blocks/sidebar-11/page.tsx",
         type: "registry:page",
         target: "app/dashboard/page.tsx",
       },
       {
-        path: "block/sidebar-11/components/app-sidebar.tsx",
+        path: "blocks/sidebar-11/components/app-sidebar.tsx",
         type: "registry:component",
       },
     ],
-    category: "Application",
-    subcategory: "Sidebars",
+    categories: ["sidebar", "dashboard"],
   },
   {
     name: "sidebar-12",
+    description: "A sidebar with a calendar.",
     type: "registry:block",
     registryDependencies: [
       "sidebar",
@@ -350,68 +355,68 @@ export const blocks: Registry = [
     ],
     files: [
       {
-        path: "block/sidebar-12/page.tsx",
+        path: "blocks/sidebar-12/page.tsx",
         type: "registry:page",
         target: "app/dashboard/page.tsx",
       },
       {
-        path: "block/sidebar-12/components/app-sidebar.tsx",
+        path: "blocks/sidebar-12/components/app-sidebar.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-12/components/calendars.tsx",
+        path: "blocks/sidebar-12/components/calendars.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-12/components/date-picker.tsx",
+        path: "blocks/sidebar-12/components/date-picker.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-12/components/nav-user.tsx",
+        path: "blocks/sidebar-12/components/nav-user.tsx",
         type: "registry:component",
       },
     ],
-    category: "Application",
-    subcategory: "Sidebars",
+    categories: ["sidebar", "dashboard"],
   },
   {
     name: "sidebar-13",
+    description: "A sidebar in a dialog.",
     type: "registry:block",
     registryDependencies: ["sidebar", "breadcrumb", "button", "dialog"],
     files: [
       {
-        path: "block/sidebar-13/page.tsx",
+        path: "blocks/sidebar-13/page.tsx",
         type: "registry:page",
         target: "app/dashboard/page.tsx",
       },
       {
-        path: "block/sidebar-13/components/settings-dialog.tsx",
+        path: "blocks/sidebar-13/components/settings-dialog.tsx",
         type: "registry:component",
       },
     ],
-    category: "Application",
-    subcategory: "Sidebars",
+    categories: ["sidebar", "dashboard"],
   },
   {
     name: "sidebar-14",
+    description: "A sidebar on the right.",
     type: "registry:block",
     registryDependencies: ["sidebar", "breadcrumb"],
     files: [
       {
-        path: "block/sidebar-14/page.tsx",
+        path: "blocks/sidebar-14/page.tsx",
         type: "registry:page",
         target: "app/dashboard/page.tsx",
       },
       {
-        path: "block/sidebar-14/components/app-sidebar.tsx",
+        path: "blocks/sidebar-14/components/app-sidebar.tsx",
         type: "registry:component",
       },
     ],
-    category: "Application",
-    subcategory: "Sidebars",
+    categories: ["sidebar", "dashboard"],
   },
   {
     name: "sidebar-15",
+    description: "A left and right sidebar.",
     type: "registry:block",
     registryDependencies: [
       "sidebar",
@@ -425,70 +430,141 @@ export const blocks: Registry = [
     ],
     files: [
       {
-        path: "block/sidebar-15/page.tsx",
+        path: "blocks/sidebar-15/page.tsx",
         type: "registry:page",
         target: "app/dashboard/page.tsx",
       },
       {
-        path: "block/sidebar-15/components/calendars.tsx",
+        path: "blocks/sidebar-15/components/calendars.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-15/components/date-picker.tsx",
+        path: "blocks/sidebar-15/components/date-picker.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-15/components/nav-favorites.tsx",
+        path: "blocks/sidebar-15/components/nav-favorites.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-15/components/nav-main.tsx",
+        path: "blocks/sidebar-15/components/nav-main.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-15/components/nav-secondary.tsx",
+        path: "blocks/sidebar-15/components/nav-secondary.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-15/components/nav-user.tsx",
+        path: "blocks/sidebar-15/components/nav-user.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-15/components/nav-workspaces.tsx",
+        path: "blocks/sidebar-15/components/nav-workspaces.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-15/components/sidebar-left.tsx",
+        path: "blocks/sidebar-15/components/sidebar-left.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-15/components/sidebar-right.tsx",
+        path: "blocks/sidebar-15/components/sidebar-right.tsx",
         type: "registry:component",
       },
       {
-        path: "block/sidebar-15/components/team-switcher.tsx",
+        path: "blocks/sidebar-15/components/team-switcher.tsx",
         type: "registry:component",
       },
     ],
-    category: "Application",
-    subcategory: "Sidebars",
+    categories: ["sidebar", "dashboard"],
   },
   {
     name: "login-01",
+    description: "A simple login form.",
+    type: "registry:block",
+    registryDependencies: ["button", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/login-01/page.tsx",
+        target: "app/login/page.tsx",
+        type: "registry:page",
+      },
+      {
+        path: "blocks/login-01/components/login-form.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["authentication", "login"],
+  },
+  {
+    name: "login-02",
+    description: "A two column login page with a cover image.",
+    type: "registry:block",
+    registryDependencies: ["button", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/login-02/page.tsx",
+        target: "app/login/page.tsx",
+        type: "registry:page",
+      },
+      {
+        path: "blocks/login-02/components/login-form.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["authentication", "login"],
+  },
+  {
+    name: "login-03",
+    description: "A login page with a muted background color.",
+    type: "registry:block",
+    registryDependencies: ["button", "card", "input", "label"],
+    files: [
+      {
+        path: "blocks/login-03/page.tsx",
+        target: "app/login/page.tsx",
+        type: "registry:page",
+      },
+      {
+        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: "blocks/login-04/page.tsx",
+        target: "app/login/page.tsx",
+        type: "registry:page",
+      },
+      {
+        path: "blocks/login-04/components/login-form.tsx",
+        type: "registry:component",
+      },
+    ],
+    categories: ["authentication", "login"],
+  },
+  {
+    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",
+        path: "blocks/login-05/page.tsx",
         target: "app/login/page.tsx",
         type: "registry:page",
       },
       {
-        path: "block/login-01/components/login-form.tsx",
+        path: "blocks/login-05/components/login-form.tsx",
         type: "registry:component",
       },
     ],
-    category: "Authentication",
-    subcategory: "Login",
+    categories: ["authentication", "login"],
   },
 ]
diff --git a/apps/www/registry/registry-categories.ts b/apps/www/registry/registry-categories.ts
new file mode 100644
index 00000000000..8687469fd0e
--- /dev/null
+++ b/apps/www/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/www/registry/registry-charts.ts b/apps/www/registry/registry-charts.ts
index 4efc08dcc5a..b211c60a443 100644
--- a/apps/www/registry/registry-charts.ts
+++ b/apps/www/registry/registry-charts.ts
@@ -6,33 +6,49 @@ export const charts: Registry = [
     name: "chart-area-axes",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-area-axes.tsx"],
-    category: "Charts",
-    subcategory: "Area",
+    files: [
+      {
+        path: "charts/chart-area-axes.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
   },
   {
     name: "chart-area-default",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-area-default.tsx"],
-    category: "Charts",
-    subcategory: "Area",
+    files: [
+      {
+        path: "charts/chart-area-default.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
   },
   {
     name: "chart-area-gradient",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-area-gradient.tsx"],
-    category: "Charts",
-    subcategory: "Area",
+    files: [
+      {
+        path: "charts/chart-area-gradient.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
   },
   {
     name: "chart-area-icons",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-area-icons.tsx"],
-    category: "Charts",
-    subcategory: "Area",
+    files: [
+      {
+        path: "charts/chart-area-icons.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
   },
   {
     name: "chart-area-interactive",
@@ -40,52 +56,71 @@ export const charts: Registry = [
     registryDependencies: ["card", "chart", "select"],
     files: [
       {
-        path: "block/chart-area-interactive.tsx",
+        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"],
-    files: ["block/chart-area-legend.tsx"],
-    category: "Charts",
-    subcategory: "Area",
+    files: [
+      {
+        path: "charts/chart-area-legend.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
   },
   {
     name: "chart-area-linear",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-area-linear.tsx"],
-    category: "Charts",
-    subcategory: "Area",
+    files: [
+      {
+        path: "charts/chart-area-linear.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
   },
   {
     name: "chart-area-stacked-expand",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-area-stacked-expand.tsx"],
-    category: "Charts",
-    subcategory: "Area",
+    files: [
+      {
+        path: "charts/chart-area-stacked-expand.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
   },
   {
     name: "chart-area-stacked",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-area-stacked.tsx"],
-    category: "Charts",
-    subcategory: "Area",
+    files: [
+      {
+        path: "charts/chart-area-stacked.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
   },
   {
     name: "chart-area-step",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-area-step.tsx"],
-    category: "Charts",
-    subcategory: "Area",
+    files: [
+      {
+        path: "charts/chart-area-step.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-area"],
   },
 
   // Bar Charts
@@ -93,81 +128,121 @@ export const charts: Registry = [
     name: "chart-bar-active",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-bar-active.tsx"],
-    category: "Charts",
-    subcategory: "Bar",
+    files: [
+      {
+        path: "charts/chart-bar-active.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
   },
   {
     name: "chart-bar-default",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-bar-default.tsx"],
-    category: "Charts",
-    subcategory: "Bar",
+    files: [
+      {
+        path: "charts/chart-bar-default.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
   },
   {
     name: "chart-bar-horizontal",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-bar-horizontal.tsx"],
-    category: "Charts",
-    subcategory: "Bar",
+    files: [
+      {
+        path: "charts/chart-bar-horizontal.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
   },
   {
     name: "chart-bar-interactive",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-bar-interactive.tsx"],
-    category: "Charts",
-    subcategory: "Bar",
+    files: [
+      {
+        path: "charts/chart-bar-interactive.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
   },
   {
     name: "chart-bar-label-custom",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-bar-label-custom.tsx"],
-    category: "Charts",
-    subcategory: "Bar",
+    files: [
+      {
+        path: "charts/chart-bar-label-custom.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
   },
   {
     name: "chart-bar-label",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-bar-label.tsx"],
-    category: "Charts",
-    subcategory: "Bar",
+    files: [
+      {
+        path: "charts/chart-bar-label.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
   },
   {
     name: "chart-bar-mixed",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-bar-mixed.tsx"],
-    category: "Charts",
-    subcategory: "Bar",
+    files: [
+      {
+        path: "charts/chart-bar-mixed.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
   },
   {
     name: "chart-bar-multiple",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-bar-multiple.tsx"],
-    category: "Charts",
-    subcategory: "Bar",
+    files: [
+      {
+        path: "charts/chart-bar-multiple.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
   },
   {
     name: "chart-bar-negative",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-bar-negative.tsx"],
-    category: "Charts",
-    subcategory: "Bar",
+    files: [
+      {
+        path: "charts/chart-bar-negative.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
   },
   {
     name: "chart-bar-stacked",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-bar-stacked.tsx"],
-    category: "Charts",
-    subcategory: "Bar",
+    files: [
+      {
+        path: "charts/chart-bar-stacked.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-bar"],
   },
 
   // Line Charts
@@ -175,81 +250,121 @@ export const charts: Registry = [
     name: "chart-line-default",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-line-default.tsx"],
-    category: "Charts",
-    subcategory: "Line",
+    files: [
+      {
+        path: "charts/chart-line-default.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
   },
   {
     name: "chart-line-dots-colors",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-line-dots-colors.tsx"],
-    category: "Charts",
-    subcategory: "Line",
+    files: [
+      {
+        path: "charts/chart-line-dots-colors.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
   },
   {
     name: "chart-line-dots-custom",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-line-dots-custom.tsx"],
-    category: "Charts",
-    subcategory: "Line",
+    files: [
+      {
+        path: "charts/chart-line-dots-custom.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
   },
   {
     name: "chart-line-dots",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-line-dots.tsx"],
-    category: "Charts",
-    subcategory: "Line",
+    files: [
+      {
+        path: "charts/chart-line-dots.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
   },
   {
     name: "chart-line-interactive",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-line-interactive.tsx"],
-    category: "Charts",
-    subcategory: "Line",
+    files: [
+      {
+        path: "charts/chart-line-interactive.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
   },
   {
     name: "chart-line-label-custom",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-line-label-custom.tsx"],
-    category: "Charts",
-    subcategory: "Line",
+    files: [
+      {
+        path: "charts/chart-line-label-custom.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
   },
   {
     name: "chart-line-label",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-line-label.tsx"],
-    category: "Charts",
-    subcategory: "Line",
+    files: [
+      {
+        path: "charts/chart-line-label.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
   },
   {
     name: "chart-line-linear",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-line-linear.tsx"],
-    category: "Charts",
-    subcategory: "Line",
+    files: [
+      {
+        path: "charts/chart-line-linear.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
   },
   {
     name: "chart-line-multiple",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-line-multiple.tsx"],
-    category: "Charts",
-    subcategory: "Line",
+    files: [
+      {
+        path: "charts/chart-line-multiple.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
   },
   {
     name: "chart-line-step",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-line-step.tsx"],
-    category: "Charts",
-    subcategory: "Line",
+    files: [
+      {
+        path: "charts/chart-line-step.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-line"],
   },
 
   // Pie Charts
@@ -257,89 +372,133 @@ export const charts: Registry = [
     name: "chart-pie-donut-active",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-donut-active.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-donut-active.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
   {
     name: "chart-pie-donut-text",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-donut-text.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-donut-text.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
   {
     name: "chart-pie-donut",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-donut.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-donut.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
   {
     name: "chart-pie-interactive",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-interactive.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-interactive.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
   {
     name: "chart-pie-label-custom",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-label-custom.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-label-custom.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
   {
     name: "chart-pie-label-list",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-label-list.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-label-list.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
   {
     name: "chart-pie-label",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-label.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-label.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
   {
     name: "chart-pie-legend",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-legend.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-legend.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
   {
     name: "chart-pie-separator-none",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-separator-none.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-separator-none.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
   {
     name: "chart-pie-simple",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-simple.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-simple.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
   {
     name: "chart-pie-stacked",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-pie-stacked.tsx"],
-    category: "Charts",
-    subcategory: "Pie",
+    files: [
+      {
+        path: "charts/chart-pie-stacked.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-pie"],
   },
 
   // Radar Charts
@@ -347,113 +506,169 @@ export const charts: Registry = [
     name: "chart-radar-default",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-default.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-default.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-dots",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-dots.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-dots.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-grid-circle-fill",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-grid-circle-fill.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-grid-circle-fill.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-grid-circle-no-lines",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-grid-circle-no-lines.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-grid-circle-no-lines.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-grid-circle",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-grid-circle.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-grid-circle.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-grid-custom",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-grid-custom.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-grid-custom.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-grid-fill",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-grid-fill.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-grid-fill.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-grid-none",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-grid-none.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-grid-none.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-icons",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-icons.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-icons.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-label-custom",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-label-custom.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-label-custom.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-legend",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-legend.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-legend.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-lines-only",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-lines-only.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-lines-only.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-multiple",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-multiple.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-multiple.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
   {
     name: "chart-radar-radius",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radar-radius.tsx"],
-    category: "Charts",
-    subcategory: "Radar",
+    files: [
+      {
+        path: "charts/chart-radar-radius.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radar"],
   },
 
   // Radial Charts
@@ -461,120 +676,180 @@ export const charts: Registry = [
     name: "chart-radial-grid",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radial-grid.tsx"],
-    category: "Charts",
-    subcategory: "Radial",
+    files: [
+      {
+        path: "charts/chart-radial-grid.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radial"],
   },
   {
     name: "chart-radial-label",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radial-label.tsx"],
-    category: "Charts",
-    subcategory: "Radial",
+    files: [
+      {
+        path: "charts/chart-radial-label.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radial"],
   },
   {
     name: "chart-radial-shape",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radial-shape.tsx"],
-    category: "Charts",
-    subcategory: "Radial",
+    files: [
+      {
+        path: "charts/chart-radial-shape.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radial"],
   },
   {
     name: "chart-radial-simple",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radial-simple.tsx"],
-    category: "Charts",
-    subcategory: "Radial",
+    files: [
+      {
+        path: "charts/chart-radial-simple.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radial"],
   },
   {
     name: "chart-radial-stacked",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radial-stacked.tsx"],
-    category: "Charts",
-    subcategory: "Radial",
+    files: [
+      {
+        path: "charts/chart-radial-stacked.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radial"],
   },
   {
     name: "chart-radial-text",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-radial-text.tsx"],
-    category: "Charts",
-    subcategory: "Radial",
+    files: [
+      {
+        path: "charts/chart-radial-text.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-radial"],
   },
   {
     name: "chart-tooltip-default",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-tooltip-default.tsx"],
-    category: "Charts",
-    subcategory: "Tooltip",
+    files: [
+      {
+        path: "charts/chart-tooltip-default.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
   },
   {
     name: "chart-tooltip-indicator-line",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-tooltip-indicator-line.tsx"],
-    category: "Charts",
-    subcategory: "Tooltip",
+    files: [
+      {
+        path: "charts/chart-tooltip-indicator-line.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
   },
   {
     name: "chart-tooltip-indicator-none",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-tooltip-indicator-none.tsx"],
-    category: "Charts",
-    subcategory: "Tooltip",
+    files: [
+      {
+        path: "charts/chart-tooltip-indicator-none.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
   },
   {
     name: "chart-tooltip-label-none",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-tooltip-label-none.tsx"],
-    category: "Charts",
-    subcategory: "Tooltip",
+    files: [
+      {
+        path: "charts/chart-tooltip-label-none.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
   },
   {
     name: "chart-tooltip-label-custom",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-tooltip-label-custom.tsx"],
-    category: "Charts",
-    subcategory: "Tooltip",
+    files: [
+      {
+        path: "charts/chart-tooltip-label-custom.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
   },
   {
     name: "chart-tooltip-label-formatter",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-tooltip-label-formatter.tsx"],
-    category: "Charts",
-    subcategory: "Tooltip",
+    files: [
+      {
+        path: "charts/chart-tooltip-label-formatter.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
   },
   {
     name: "chart-tooltip-formatter",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-tooltip-formatter.tsx"],
-    category: "Charts",
-    subcategory: "Tooltip",
+    files: [
+      {
+        path: "charts/chart-tooltip-formatter.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
   },
   {
     name: "chart-tooltip-icons",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-tooltip-icons.tsx"],
-    category: "Charts",
-    subcategory: "Tooltip",
+    files: [
+      {
+        path: "charts/chart-tooltip-icons.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
   },
   {
     name: "chart-tooltip-advanced",
     type: "registry:block",
     registryDependencies: ["card", "chart"],
-    files: ["block/chart-tooltip-advanced.tsx"],
-    category: "Charts",
-    subcategory: "Tooltip",
+    files: [
+      {
+        path: "charts/chart-tooltip-advanced.tsx",
+        type: "registry:block",
+      },
+    ],
+    categories: ["charts", "charts-tooltip"],
   },
 ]
diff --git a/apps/www/registry/registry-examples.ts b/apps/www/registry/registry-examples.ts
index b9d49b95f67..fde9da6d44e 100644
--- a/apps/www/registry/registry-examples.ts
+++ b/apps/www/registry/registry-examples.ts
@@ -5,1000 +5,1610 @@ export const examples: Registry = [
     name: "accordion-demo",
     type: "registry:example",
     registryDependencies: ["accordion"],
-    files: ["example/accordion-demo.tsx"],
+    files: [
+      {
+        path: "examples/accordion-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "alert-demo",
     type: "registry:example",
     registryDependencies: ["alert"],
-    files: ["example/alert-demo.tsx"],
+    files: [
+      {
+        path: "examples/alert-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "alert-destructive",
     type: "registry:example",
     registryDependencies: ["alert"],
-    files: ["example/alert-destructive.tsx"],
+    files: [
+      {
+        path: "examples/alert-destructive.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "alert-dialog-demo",
     type: "registry:example",
     registryDependencies: ["alert-dialog", "button"],
-    files: ["example/alert-dialog-demo.tsx"],
+    files: [
+      {
+        path: "examples/alert-dialog-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "aspect-ratio-demo",
     type: "registry:example",
     registryDependencies: ["aspect-ratio"],
-    files: ["example/aspect-ratio-demo.tsx"],
+    files: [
+      {
+        path: "examples/aspect-ratio-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "avatar-demo",
     type: "registry:example",
     registryDependencies: ["avatar"],
-    files: ["example/avatar-demo.tsx"],
+    files: [
+      {
+        path: "examples/avatar-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "badge-demo",
     type: "registry:example",
     registryDependencies: ["badge"],
-    files: ["example/badge-demo.tsx"],
+    files: [
+      {
+        path: "examples/badge-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "badge-destructive",
     type: "registry:example",
     registryDependencies: ["badge"],
-    files: ["example/badge-destructive.tsx"],
+    files: [
+      {
+        path: "examples/badge-destructive.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "badge-outline",
     type: "registry:example",
     registryDependencies: ["badge"],
-    files: ["example/badge-outline.tsx"],
+    files: [
+      {
+        path: "examples/badge-outline.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "badge-secondary",
     type: "registry:example",
     registryDependencies: ["badge"],
-    files: ["example/badge-secondary.tsx"],
+    files: [
+      {
+        path: "examples/badge-secondary.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "breadcrumb-demo",
     type: "registry:example",
     registryDependencies: ["breadcrumb"],
-    files: ["example/breadcrumb-demo.tsx"],
+    files: [
+      {
+        path: "examples/breadcrumb-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "breadcrumb-separator",
     type: "registry:example",
     registryDependencies: ["breadcrumb"],
-    files: ["example/breadcrumb-separator.tsx"],
+    files: [
+      {
+        path: "examples/breadcrumb-separator.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "breadcrumb-dropdown",
     type: "registry:example",
     registryDependencies: ["breadcrumb"],
-    files: ["example/breadcrumb-dropdown.tsx"],
+    files: [
+      {
+        path: "examples/breadcrumb-dropdown.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "breadcrumb-ellipsis",
     type: "registry:example",
     registryDependencies: ["breadcrumb"],
-    files: ["example/breadcrumb-ellipsis.tsx"],
+    files: [
+      {
+        path: "examples/breadcrumb-ellipsis.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "breadcrumb-link",
     type: "registry:example",
     registryDependencies: ["breadcrumb"],
-    files: ["example/breadcrumb-link.tsx"],
+    files: [
+      {
+        path: "examples/breadcrumb-link.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "breadcrumb-responsive",
     type: "registry:example",
     registryDependencies: ["breadcrumb"],
-    files: ["example/breadcrumb-responsive.tsx"],
+    files: [
+      {
+        path: "examples/breadcrumb-responsive.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "button-demo",
     type: "registry:example",
     registryDependencies: ["button"],
-    files: ["example/button-demo.tsx"],
+    files: [
+      {
+        path: "examples/button-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "button-secondary",
     type: "registry:example",
     registryDependencies: ["button"],
-    files: ["example/button-secondary.tsx"],
+    files: [
+      {
+        path: "examples/button-secondary.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "button-destructive",
     type: "registry:example",
     registryDependencies: ["button"],
-    files: ["example/button-destructive.tsx"],
+    files: [
+      {
+        path: "examples/button-destructive.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "button-outline",
     type: "registry:example",
     registryDependencies: ["button"],
-    files: ["example/button-outline.tsx"],
+    files: [
+      {
+        path: "examples/button-outline.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "button-ghost",
     type: "registry:example",
     registryDependencies: ["button"],
-    files: ["example/button-ghost.tsx"],
+    files: [
+      {
+        path: "examples/button-ghost.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "button-link",
     type: "registry:example",
     registryDependencies: ["button"],
-    files: ["example/button-link.tsx"],
+    files: [
+      {
+        path: "examples/button-link.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "button-with-icon",
     type: "registry:example",
     registryDependencies: ["button"],
-    files: ["example/button-with-icon.tsx"],
+    files: [
+      {
+        path: "examples/button-with-icon.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "button-loading",
     type: "registry:example",
     registryDependencies: ["button"],
-    files: ["example/button-loading.tsx"],
+    files: [
+      {
+        path: "examples/button-loading.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "button-icon",
     type: "registry:example",
     registryDependencies: ["button"],
-    files: ["example/button-icon.tsx"],
+    files: [
+      {
+        path: "examples/button-icon.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "button-as-child",
     type: "registry:example",
     registryDependencies: ["button"],
-    files: ["example/button-as-child.tsx"],
+    files: [
+      {
+        path: "examples/button-as-child.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "calendar-demo",
     type: "registry:example",
     registryDependencies: ["calendar"],
-    files: ["example/calendar-demo.tsx"],
+    files: [
+      {
+        path: "examples/calendar-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "calendar-form",
     type: "registry:example",
     registryDependencies: ["calendar", "form", "popover"],
-    files: ["example/calendar-form.tsx"],
+    files: [
+      {
+        path: "examples/calendar-form.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "card-demo",
     type: "registry:example",
     registryDependencies: ["card", "button", "switch"],
-    files: ["example/card-demo.tsx"],
+    files: [
+      {
+        path: "examples/card-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "card-with-form",
     type: "registry:example",
     registryDependencies: ["button", "card", "input", "label", "select"],
-    files: ["example/card-with-form.tsx"],
+    files: [
+      {
+        path: "examples/card-with-form.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "carousel-demo",
     type: "registry:example",
     registryDependencies: ["carousel"],
-    files: ["example/carousel-demo.tsx"],
+    files: [
+      {
+        path: "examples/carousel-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "carousel-size",
     type: "registry:example",
     registryDependencies: ["carousel"],
-    files: ["example/carousel-size.tsx"],
+    files: [
+      {
+        path: "examples/carousel-size.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "carousel-spacing",
     type: "registry:example",
     registryDependencies: ["carousel"],
-    files: ["example/carousel-spacing.tsx"],
+    files: [
+      {
+        path: "examples/carousel-spacing.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "carousel-orientation",
     type: "registry:example",
     registryDependencies: ["carousel"],
-    files: ["example/carousel-orientation.tsx"],
+    files: [
+      {
+        path: "examples/carousel-orientation.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "carousel-api",
     type: "registry:example",
     registryDependencies: ["carousel"],
-    files: ["example/carousel-api.tsx"],
+    files: [
+      {
+        path: "examples/carousel-api.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "carousel-plugin",
     type: "registry:example",
     registryDependencies: ["carousel"],
-    files: ["example/carousel-plugin.tsx"],
+    files: [
+      {
+        path: "examples/carousel-plugin.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "checkbox-demo",
     type: "registry:example",
     registryDependencies: ["checkbox"],
-    files: ["example/checkbox-demo.tsx"],
+    files: [
+      {
+        path: "examples/checkbox-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "checkbox-disabled",
     type: "registry:example",
     registryDependencies: ["checkbox"],
-    files: ["example/checkbox-disabled.tsx"],
+    files: [
+      {
+        path: "examples/checkbox-disabled.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "checkbox-form-multiple",
     type: "registry:example",
     registryDependencies: ["checkbox", "form"],
-    files: ["example/checkbox-form-multiple.tsx"],
+    files: [
+      {
+        path: "examples/checkbox-form-multiple.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "checkbox-form-single",
     type: "registry:example",
     registryDependencies: ["checkbox", "form"],
-    files: ["example/checkbox-form-single.tsx"],
+    files: [
+      {
+        path: "examples/checkbox-form-single.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "checkbox-with-text",
     type: "registry:example",
     registryDependencies: ["checkbox"],
-    files: ["example/checkbox-with-text.tsx"],
+    files: [
+      {
+        path: "examples/checkbox-with-text.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "collapsible-demo",
     type: "registry:example",
     registryDependencies: ["collapsible"],
-    files: ["example/collapsible-demo.tsx"],
+    files: [
+      {
+        path: "examples/collapsible-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "combobox-demo",
     type: "registry:example",
     registryDependencies: ["command"],
-    files: ["example/combobox-demo.tsx"],
+    files: [
+      {
+        path: "examples/combobox-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "combobox-dropdown-menu",
     type: "registry:example",
     registryDependencies: ["command", "dropdown-menu", "button"],
-    files: ["example/combobox-dropdown-menu.tsx"],
+    files: [
+      {
+        path: "examples/combobox-dropdown-menu.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "combobox-form",
     type: "registry:example",
     registryDependencies: ["command", "form"],
-    files: ["example/combobox-form.tsx"],
+    files: [
+      {
+        path: "examples/combobox-form.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "combobox-popover",
     type: "registry:example",
     registryDependencies: ["combobox", "popover"],
-    files: ["example/combobox-popover.tsx"],
+    files: [
+      {
+        path: "examples/combobox-popover.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "combobox-responsive",
     type: "registry:example",
     registryDependencies: ["combobox", "popover", "drawer"],
-    files: ["example/combobox-responsive.tsx"],
+    files: [
+      {
+        path: "examples/combobox-responsive.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "command-demo",
     type: "registry:example",
     registryDependencies: ["command"],
-    files: ["example/command-demo.tsx"],
+    files: [
+      {
+        path: "examples/command-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "command-dialog",
     type: "registry:example",
     registryDependencies: ["command", "dialog"],
-    files: ["example/command-dialog.tsx"],
+    files: [
+      {
+        path: "examples/command-dialog.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "context-menu-demo",
     type: "registry:example",
     registryDependencies: ["context-menu"],
-    files: ["example/context-menu-demo.tsx"],
+    files: [
+      {
+        path: "examples/context-menu-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "data-table-demo",
     type: "registry:example",
     registryDependencies: ["data-table"],
-    files: ["example/data-table-demo.tsx"],
+    files: [
+      {
+        path: "examples/data-table-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "date-picker-demo",
     type: "registry:example",
     registryDependencies: ["button", "calendar", "popover"],
-    files: ["example/date-picker-demo.tsx"],
+    files: [
+      {
+        path: "examples/date-picker-demo.tsx",
+        type: "registry:example",
+      },
+    ],
     dependencies: ["date-fns"],
   },
   {
     name: "date-picker-form",
     type: "registry:example",
     registryDependencies: ["button", "calendar", "form", "popover"],
-    files: ["example/date-picker-form.tsx"],
+    files: [
+      {
+        path: "examples/date-picker-form.tsx",
+        type: "registry:example",
+      },
+    ],
     dependencies: ["date-fns"],
   },
   {
     name: "date-picker-with-presets",
     type: "registry:example",
     registryDependencies: ["button", "calendar", "popover", "select"],
-    files: ["example/date-picker-with-presets.tsx"],
+    files: [
+      {
+        path: "examples/date-picker-with-presets.tsx",
+        type: "registry:example",
+      },
+    ],
     dependencies: ["date-fns"],
   },
   {
     name: "date-picker-with-range",
     type: "registry:example",
     registryDependencies: ["button", "calendar", "popover"],
-    files: ["example/date-picker-with-range.tsx"],
+    files: [
+      {
+        path: "examples/date-picker-with-range.tsx",
+        type: "registry:example",
+      },
+    ],
     dependencies: ["date-fns"],
   },
   {
     name: "dialog-demo",
     type: "registry:example",
     registryDependencies: ["dialog"],
-    files: ["example/dialog-demo.tsx"],
+    files: [
+      {
+        path: "examples/dialog-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "dialog-close-button",
     type: "registry:example",
     registryDependencies: ["dialog", "button"],
-    files: ["example/dialog-close-button.tsx"],
+    files: [
+      {
+        path: "examples/dialog-close-button.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "drawer-demo",
     type: "registry:example",
     registryDependencies: ["drawer"],
-    files: ["example/drawer-demo.tsx"],
+    files: [
+      {
+        path: "examples/drawer-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "drawer-dialog",
     type: "registry:example",
     registryDependencies: ["drawer", "dialog"],
-    files: ["example/drawer-dialog.tsx"],
+    files: [
+      {
+        path: "examples/drawer-dialog.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "dropdown-menu-demo",
     type: "registry:example",
     registryDependencies: ["dropdown-menu"],
-    files: ["example/dropdown-menu-demo.tsx"],
+    files: [
+      {
+        path: "examples/dropdown-menu-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "dropdown-menu-checkboxes",
     type: "registry:example",
     registryDependencies: ["dropdown-menu", "checkbox"],
-    files: ["example/dropdown-menu-checkboxes.tsx"],
+    files: [
+      {
+        path: "examples/dropdown-menu-checkboxes.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "dropdown-menu-radio-group",
     type: "registry:example",
     registryDependencies: ["dropdown-menu", "radio-group"],
-    files: ["example/dropdown-menu-radio-group.tsx"],
+    files: [
+      {
+        path: "examples/dropdown-menu-radio-group.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "hover-card-demo",
     type: "registry:example",
     registryDependencies: ["hover-card"],
-    files: ["example/hover-card-demo.tsx"],
+    files: [
+      {
+        path: "examples/hover-card-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-demo",
     type: "registry:example",
     registryDependencies: ["input"],
-    files: ["example/input-demo.tsx"],
+    files: [
+      {
+        path: "examples/input-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-disabled",
     type: "registry:example",
     registryDependencies: ["input"],
-    files: ["example/input-disabled.tsx"],
+    files: [
+      {
+        path: "examples/input-disabled.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-file",
     type: "registry:example",
     registryDependencies: ["input"],
-    files: ["example/input-file.tsx"],
+    files: [
+      {
+        path: "examples/input-file.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-form",
     type: "registry:example",
     registryDependencies: ["input", "button", "form"],
-    files: ["example/input-form.tsx"],
+    files: [
+      {
+        path: "examples/input-form.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-with-button",
     type: "registry:example",
     registryDependencies: ["input", "button"],
-    files: ["example/input-with-button.tsx"],
+    files: [
+      {
+        path: "examples/input-with-button.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-with-label",
     type: "registry:example",
     registryDependencies: ["input", "button", "label"],
-    files: ["example/input-with-label.tsx"],
+    files: [
+      {
+        path: "examples/input-with-label.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-with-text",
     type: "registry:example",
     registryDependencies: ["input", "button", "label"],
-    files: ["example/input-with-text.tsx"],
+    files: [
+      {
+        path: "examples/input-with-text.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-otp-demo",
     type: "registry:example",
     registryDependencies: ["input-otp"],
-    files: ["example/input-otp-demo.tsx"],
+    files: [
+      {
+        path: "examples/input-otp-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-otp-pattern",
     type: "registry:example",
     registryDependencies: ["input-otp"],
-    files: ["example/input-otp-pattern.tsx"],
+    files: [
+      {
+        path: "examples/input-otp-pattern.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-otp-separator",
     type: "registry:example",
     registryDependencies: ["input-otp"],
-    files: ["example/input-otp-separator.tsx"],
+    files: [
+      {
+        path: "examples/input-otp-separator.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-otp-controlled",
     type: "registry:example",
     registryDependencies: ["input-otp"],
-    files: ["example/input-otp-controlled.tsx"],
+    files: [
+      {
+        path: "examples/input-otp-controlled.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "input-otp-form",
     type: "registry:example",
     registryDependencies: ["input-otp", "form"],
-    files: ["example/input-otp-form.tsx"],
+    files: [
+      {
+        path: "examples/input-otp-form.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "label-demo",
     type: "registry:example",
     registryDependencies: ["label"],
-    files: ["example/label-demo.tsx"],
+    files: [
+      {
+        path: "examples/label-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "menubar-demo",
     type: "registry:example",
     registryDependencies: ["menubar"],
-    files: ["example/menubar-demo.tsx"],
+    files: [
+      {
+        path: "examples/menubar-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "navigation-menu-demo",
     type: "registry:example",
     registryDependencies: ["navigation-menu"],
-    files: ["example/navigation-menu-demo.tsx"],
+    files: [
+      {
+        path: "examples/navigation-menu-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "pagination-demo",
     type: "registry:example",
     registryDependencies: ["pagination"],
-    files: ["example/pagination-demo.tsx"],
+    files: [
+      {
+        path: "examples/pagination-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "popover-demo",
     type: "registry:example",
     registryDependencies: ["popover"],
-    files: ["example/popover-demo.tsx"],
+    files: [
+      {
+        path: "examples/popover-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "progress-demo",
     type: "registry:example",
     registryDependencies: ["progress"],
-    files: ["example/progress-demo.tsx"],
+    files: [
+      {
+        path: "examples/progress-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "radio-group-demo",
     type: "registry:example",
     registryDependencies: ["radio-group"],
-    files: ["example/radio-group-demo.tsx"],
+    files: [
+      {
+        path: "examples/radio-group-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "radio-group-form",
     type: "registry:example",
     registryDependencies: ["radio-group", "form"],
-    files: ["example/radio-group-form.tsx"],
+    files: [
+      {
+        path: "examples/radio-group-form.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "resizable-demo",
     type: "registry:example",
     registryDependencies: ["resizable"],
-    files: ["example/resizable-demo.tsx"],
+    files: [
+      {
+        path: "examples/resizable-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "resizable-demo-with-handle",
     type: "registry:example",
     registryDependencies: ["resizable"],
-    files: ["example/resizable-demo-with-handle.tsx"],
+    files: [
+      {
+        path: "examples/resizable-demo-with-handle.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "resizable-vertical",
     type: "registry:example",
     registryDependencies: ["resizable"],
-    files: ["example/resizable-vertical.tsx"],
+    files: [
+      {
+        path: "examples/resizable-vertical.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "resizable-handle",
     type: "registry:example",
     registryDependencies: ["resizable"],
-    files: ["example/resizable-handle.tsx"],
+    files: [
+      {
+        path: "examples/resizable-handle.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "scroll-area-demo",
     type: "registry:example",
     registryDependencies: ["scroll-area"],
-    files: ["example/scroll-area-demo.tsx"],
+    files: [
+      {
+        path: "examples/scroll-area-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "scroll-area-horizontal-demo",
     type: "registry:example",
     registryDependencies: ["scroll-area"],
-    files: ["example/scroll-area-horizontal-demo.tsx"],
+    files: [
+      {
+        path: "examples/scroll-area-horizontal-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "select-demo",
     type: "registry:example",
     registryDependencies: ["select"],
-    files: ["example/select-demo.tsx"],
+    files: [
+      {
+        path: "examples/select-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "select-scrollable",
     type: "registry:example",
     registryDependencies: ["select"],
-    files: ["example/select-scrollable.tsx"],
+    files: [
+      {
+        path: "examples/select-scrollable.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "select-form",
     type: "registry:example",
     registryDependencies: ["select"],
-    files: ["example/select-form.tsx"],
+    files: [
+      {
+        path: "examples/select-form.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "separator-demo",
     type: "registry:example",
     registryDependencies: ["separator"],
-    files: ["example/separator-demo.tsx"],
+    files: [
+      {
+        path: "examples/separator-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "sheet-demo",
     type: "registry:example",
     registryDependencies: ["sheet"],
-    files: ["example/sheet-demo.tsx"],
+    files: [
+      {
+        path: "examples/sheet-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "sheet-side",
     type: "registry:example",
     registryDependencies: ["sheet"],
-    files: ["example/sheet-side.tsx"],
+    files: [
+      {
+        path: "examples/sheet-side.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "skeleton-demo",
     type: "registry:example",
     registryDependencies: ["skeleton"],
-    files: ["example/skeleton-demo.tsx"],
+    files: [
+      {
+        path: "examples/skeleton-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "skeleton-card",
     type: "registry:example",
     registryDependencies: ["skeleton"],
-    files: ["example/skeleton-card.tsx"],
+    files: [
+      {
+        path: "examples/skeleton-card.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "slider-demo",
     type: "registry:example",
     registryDependencies: ["slider"],
-    files: ["example/slider-demo.tsx"],
+    files: [
+      {
+        path: "examples/slider-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "sonner-demo",
     type: "registry:example",
     registryDependencies: ["sonner"],
-    files: ["example/sonner-demo.tsx"],
+    files: [
+      {
+        path: "examples/sonner-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "switch-demo",
     type: "registry:example",
     registryDependencies: ["switch"],
-    files: ["example/switch-demo.tsx"],
+    files: [
+      {
+        path: "examples/switch-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "switch-form",
     type: "registry:example",
     registryDependencies: ["switch", "form"],
-    files: ["example/switch-form.tsx"],
+    files: [
+      {
+        path: "examples/switch-form.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "table-demo",
     type: "registry:example",
     registryDependencies: ["table"],
-    files: ["example/table-demo.tsx"],
+    files: [
+      {
+        path: "examples/table-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "tabs-demo",
     type: "registry:example",
     registryDependencies: ["tabs"],
-    files: ["example/tabs-demo.tsx"],
+    files: [
+      {
+        path: "examples/tabs-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "textarea-demo",
     type: "registry:example",
     registryDependencies: ["textarea"],
-    files: ["example/textarea-demo.tsx"],
+    files: [
+      {
+        path: "examples/textarea-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "textarea-disabled",
     type: "registry:example",
     registryDependencies: ["textarea"],
-    files: ["example/textarea-disabled.tsx"],
+    files: [
+      {
+        path: "examples/textarea-disabled.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "textarea-form",
     type: "registry:example",
     registryDependencies: ["textarea", "form"],
-    files: ["example/textarea-form.tsx"],
+    files: [
+      {
+        path: "examples/textarea-form.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "textarea-with-button",
     type: "registry:example",
     registryDependencies: ["textarea", "button"],
-    files: ["example/textarea-with-button.tsx"],
+    files: [
+      {
+        path: "examples/textarea-with-button.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "textarea-with-label",
     type: "registry:example",
     registryDependencies: ["textarea", "label"],
-    files: ["example/textarea-with-label.tsx"],
+    files: [
+      {
+        path: "examples/textarea-with-label.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "textarea-with-text",
     type: "registry:example",
     registryDependencies: ["textarea", "label"],
-    files: ["example/textarea-with-text.tsx"],
+    files: [
+      {
+        path: "examples/textarea-with-text.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toast-demo",
     type: "registry:example",
     registryDependencies: ["toast"],
-    files: ["example/toast-demo.tsx"],
+    files: [
+      {
+        path: "examples/toast-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toast-destructive",
     type: "registry:example",
     registryDependencies: ["toast"],
-    files: ["example/toast-destructive.tsx"],
+    files: [
+      {
+        path: "examples/toast-destructive.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toast-simple",
     type: "registry:example",
     registryDependencies: ["toast"],
-    files: ["example/toast-simple.tsx"],
+    files: [
+      {
+        path: "examples/toast-simple.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toast-with-action",
     type: "registry:example",
     registryDependencies: ["toast"],
-    files: ["example/toast-with-action.tsx"],
+    files: [
+      {
+        path: "examples/toast-with-action.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toast-with-title",
     type: "registry:example",
     registryDependencies: ["toast"],
-    files: ["example/toast-with-title.tsx"],
+    files: [
+      {
+        path: "examples/toast-with-title.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-group-demo",
     type: "registry:example",
     registryDependencies: ["toggle-group"],
-    files: ["example/toggle-group-demo.tsx"],
+    files: [
+      {
+        path: "examples/toggle-group-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-group-disabled",
     type: "registry:example",
     registryDependencies: ["toggle-group"],
-    files: ["example/toggle-group-disabled.tsx"],
+    files: [
+      {
+        path: "examples/toggle-group-disabled.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-group-lg",
     type: "registry:example",
     registryDependencies: ["toggle-group"],
-    files: ["example/toggle-group-lg.tsx"],
+    files: [
+      {
+        path: "examples/toggle-group-lg.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-group-outline",
     type: "registry:example",
     registryDependencies: ["toggle-group"],
-    files: ["example/toggle-group-outline.tsx"],
+    files: [
+      {
+        path: "examples/toggle-group-outline.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-group-sm",
     type: "registry:example",
     registryDependencies: ["toggle-group"],
-    files: ["example/toggle-group-sm.tsx"],
+    files: [
+      {
+        path: "examples/toggle-group-sm.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-group-single",
     type: "registry:example",
     registryDependencies: ["toggle-group"],
-    files: ["example/toggle-group-single.tsx"],
+    files: [
+      {
+        path: "examples/toggle-group-single.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-demo",
     type: "registry:example",
     registryDependencies: ["toggle"],
-    files: ["example/toggle-demo.tsx"],
+    files: [
+      {
+        path: "examples/toggle-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-disabled",
     type: "registry:example",
     registryDependencies: ["toggle"],
-    files: ["example/toggle-disabled.tsx"],
+    files: [
+      {
+        path: "examples/toggle-disabled.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-lg",
     type: "registry:example",
     registryDependencies: ["toggle"],
-    files: ["example/toggle-lg.tsx"],
+    files: [
+      {
+        path: "examples/toggle-lg.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-outline",
     type: "registry:example",
     registryDependencies: ["toggle"],
-    files: ["example/toggle-outline.tsx"],
+    files: [
+      {
+        path: "examples/toggle-outline.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-sm",
     type: "registry:example",
     registryDependencies: ["toggle"],
-    files: ["example/toggle-sm.tsx"],
+    files: [
+      {
+        path: "examples/toggle-sm.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "toggle-with-text",
     type: "registry:example",
     registryDependencies: ["toggle"],
-    files: ["example/toggle-with-text.tsx"],
+    files: [
+      {
+        path: "examples/toggle-with-text.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "tooltip-demo",
     type: "registry:example",
     registryDependencies: ["tooltip"],
-    files: ["example/tooltip-demo.tsx"],
+    files: [
+      {
+        path: "examples/tooltip-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-blockquote",
     type: "registry:example",
-    files: ["example/typography-blockquote.tsx"],
+    files: [
+      {
+        path: "examples/typography-blockquote.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-demo",
     type: "registry:example",
-    files: ["example/typography-demo.tsx"],
+    files: [
+      {
+        path: "examples/typography-demo.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-h1",
     type: "registry:example",
-    files: ["example/typography-h1.tsx"],
+    files: [
+      {
+        path: "examples/typography-h1.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-h2",
     type: "registry:example",
-    files: ["example/typography-h2.tsx"],
+    files: [
+      {
+        path: "examples/typography-h2.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-h3",
     type: "registry:example",
-    files: ["example/typography-h3.tsx"],
+    files: [
+      {
+        path: "examples/typography-h3.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-h4",
     type: "registry:example",
-    files: ["example/typography-h4.tsx"],
+    files: [
+      {
+        path: "examples/typography-h4.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-inline-code",
     type: "registry:example",
-    files: ["example/typography-inline-code.tsx"],
+    files: [
+      {
+        path: "examples/typography-inline-code.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-large",
     type: "registry:example",
-    files: ["example/typography-large.tsx"],
+    files: [
+      {
+        path: "examples/typography-large.tsx",
+        type: "registry:example",
+      },
+    ],
   },
   {
     name: "typography-lead",
     type: "registry:example",
-    files: ["example/typography-lead.tsx"],
-  },
-  {
-    name: "typography-list",
-    type: "registry:example",
-    files: ["example/typography-list.tsx"],
-  },
-  {
-    name: "typography-muted",
-    type: "registry:example",
-    files: ["example/typography-muted.tsx"],
-  },
-  {
-    name: "typography-p",
-    type: "registry:example",
-    files: ["example/typography-p.tsx"],
-  },
-  {
-    name: "typography-small",
-    type: "registry:example",
-    files: ["example/typography-small.tsx"],
-  },
-  {
-    name: "typography-table",
-    type: "registry:example",
-    files: ["example/typography-table.tsx"],
-  },
-  {
-    name: "mode-toggle",
-    type: "registry:example",
-    files: ["example/mode-toggle.tsx"],
-  },
-  {
-    name: "chart-bar-demo",
-    type: "registry:example",
-    files: ["example/chart-bar-demo.tsx"],
-  },
-  {
-    name: "chart-bar-demo-grid",
-    type: "registry:example",
-    files: ["example/chart-bar-demo-grid.tsx"],
-  },
-  {
-    name: "chart-bar-demo-axis",
-    type: "registry:example",
-    files: ["example/chart-bar-demo-axis.tsx"],
-  },
-  {
-    name: "chart-bar-demo-tooltip",
-    type: "registry:example",
-    files: ["example/chart-bar-demo-tooltip.tsx"],
-  },
-  {
-    name: "chart-bar-demo-legend",
-    type: "registry:example",
-    files: ["example/chart-bar-demo-legend.tsx"],
-  },
-  {
-    name: "chart-tooltip-demo",
-    type: "registry:example",
-    files: ["example/chart-tooltip-demo.tsx"],
-  },
-  {
-    name: "demo-sidebar",
-    type: "registry:block",
     files: [
       {
-        path: "block/demo-sidebar.tsx",
-        type: "registry:component",
+        path: "examples/typography-lead.tsx",
+        type: "registry:example",
       },
     ],
   },
   {
-    name: "demo-sidebar-header",
-    type: "registry:block",
+    name: "typography-list",
+    type: "registry:example",
     files: [
       {
-        path: "block/demo-sidebar-header.tsx",
-        type: "registry:component",
+        path: "examples/typography-list.tsx",
+        type: "registry:example",
       },
     ],
   },
   {
-    name: "demo-sidebar-footer",
-    type: "registry:block",
+    name: "typography-muted",
+    type: "registry:example",
     files: [
       {
-        path: "block/demo-sidebar-footer.tsx",
-        type: "registry:component",
+        path: "examples/typography-muted.tsx",
+        type: "registry:example",
       },
     ],
   },
   {
-    name: "demo-sidebar-group",
-    type: "registry:block",
+    name: "typography-p",
+    type: "registry:example",
     files: [
       {
-        path: "block/demo-sidebar-group.tsx",
-        type: "registry:component",
+        path: "examples/typography-p.tsx",
+        type: "registry:example",
       },
     ],
   },
   {
-    name: "demo-sidebar-group-collapsible",
-    type: "registry:block",
+    name: "typography-small",
+    type: "registry:example",
     files: [
       {
-        path: "block/demo-sidebar-group-collapsible.tsx",
-        type: "registry:component",
+        path: "examples/typography-small.tsx",
+        type: "registry:example",
       },
     ],
   },
   {
-    name: "demo-sidebar-group-action",
-    type: "registry:block",
+    name: "typography-table",
+    type: "registry:example",
     files: [
       {
-        path: "block/demo-sidebar-group-action.tsx",
-        type: "registry:component",
+        path: "examples/typography-table.tsx",
+        type: "registry:example",
       },
     ],
   },
   {
-    name: "demo-sidebar-menu",
-    type: "registry:block",
+    name: "mode-toggle",
+    type: "registry:example",
     files: [
       {
-        path: "block/demo-sidebar-menu.tsx",
-        type: "registry:component",
+        path: "examples/mode-toggle.tsx",
+        type: "registry:example",
       },
     ],
   },
   {
-    name: "demo-sidebar-menu-action",
-    type: "registry:block",
+    name: "chart-bar-demo",
+    type: "registry:example",
     files: [
       {
-        path: "block/demo-sidebar-menu-action.tsx",
-        type: "registry:component",
+        path: "examples/chart-bar-demo.tsx",
+        type: "registry:example",
       },
     ],
   },
   {
-    name: "demo-sidebar-menu-sub",
-    type: "registry:block",
+    name: "chart-bar-demo-grid",
+    type: "registry:example",
     files: [
       {
-        path: "block/demo-sidebar-menu-sub.tsx",
-        type: "registry:component",
+        path: "examples/chart-bar-demo-grid.tsx",
+        type: "registry:example",
       },
     ],
   },
   {
-    name: "demo-sidebar-menu-collapsible",
-    type: "registry:block",
+    name: "chart-bar-demo-axis",
+    type: "registry:example",
     files: [
       {
-        path: "block/demo-sidebar-menu-collapsible.tsx",
-        type: "registry:component",
+        path: "examples/chart-bar-demo-axis.tsx",
+        type: "registry:example",
       },
     ],
   },
   {
-    name: "demo-sidebar-menu-badge",
-    type: "registry:block",
+    name: "chart-bar-demo-tooltip",
+    type: "registry:example",
     files: [
       {
-        path: "block/demo-sidebar-menu-badge.tsx",
-        type: "registry:component",
+        path: "examples/chart-bar-demo-tooltip.tsx",
+        type: "registry:example",
       },
     ],
   },
   {
-    name: "demo-sidebar-rsc",
-    type: "registry:block",
+    name: "chart-bar-demo-legend",
+    type: "registry:example",
     files: [
       {
-        path: "block/demo-sidebar-rsc.tsx",
-        type: "registry:component",
+        path: "examples/chart-bar-demo-legend.tsx",
+        type: "registry:example",
       },
     ],
   },
   {
-    name: "demo-sidebar-controlled",
-    type: "registry:block",
+    name: "chart-tooltip-demo",
+    type: "registry:example",
     files: [
       {
-        path: "block/demo-sidebar-controlled.tsx",
-        type: "registry:component",
+        path: "examples/chart-tooltip-demo.tsx",
+        type: "registry:example",
       },
     ],
   },
diff --git a/apps/www/registry/registry-icons.ts b/apps/www/registry/registry-icons.ts
new file mode 100644
index 00000000000..d70d235d09d
--- /dev/null
+++ b/apps/www/registry/registry-icons.ts
@@ -0,0 +1,166 @@
+export const iconLibraries = {
+  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",
+  },
+} as const
+
+export const icons: Record<
+  string,
+  Record<keyof typeof iconLibraries, string>
+> = {
+  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",
+  },
+} as const
diff --git a/apps/www/registry/registry-internal.ts b/apps/www/registry/registry-internal.ts
new file mode 100644
index 00000000000..ef164ae83e3
--- /dev/null
+++ b/apps/www/registry/registry-internal.ts
@@ -0,0 +1,701 @@
+import { Registry } from "@/registry/schema"
+
+export const internal: Registry = [
+  {
+    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/www/registry/registry-ui.ts b/apps/www/registry/registry-ui.ts
index 2c33171976d..4870f3abb1c 100644
--- a/apps/www/registry/registry-ui.ts
+++ b/apps/www/registry/registry-ui.ts
@@ -5,7 +5,12 @@ export const ui: Registry = [
     name: "accordion",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-accordion"],
-    files: ["ui/accordion.tsx"],
+    files: [
+      {
+        path: "ui/accordion.tsx",
+        type: "registry:ui",
+      },
+    ],
     tailwind: {
       config: {
         theme: {
@@ -32,67 +37,122 @@ export const ui: Registry = [
   {
     name: "alert",
     type: "registry:ui",
-    files: ["ui/alert.tsx"],
+    files: [
+      {
+        path: "ui/alert.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "alert-dialog",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-alert-dialog"],
     registryDependencies: ["button"],
-    files: ["ui/alert-dialog.tsx"],
+    files: [
+      {
+        path: "ui/alert-dialog.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "aspect-ratio",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-aspect-ratio"],
-    files: ["ui/aspect-ratio.tsx"],
+    files: [
+      {
+        path: "ui/aspect-ratio.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "avatar",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-avatar"],
-    files: ["ui/avatar.tsx"],
+    files: [
+      {
+        path: "ui/avatar.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "badge",
     type: "registry:ui",
-    files: ["ui/badge.tsx"],
+    files: [
+      {
+        path: "ui/badge.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "breadcrumb",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-slot"],
-    files: ["ui/breadcrumb.tsx"],
+    files: [
+      {
+        path: "ui/breadcrumb.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "button",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-slot"],
-    files: ["ui/button.tsx"],
+    files: [
+      {
+        path: "ui/button.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "calendar",
     type: "registry:ui",
     dependencies: ["react-day-picker@8.10.1", "date-fns"],
     registryDependencies: ["button"],
-    files: ["ui/calendar.tsx"],
+    files: [
+      {
+        path: "ui/calendar.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "card",
     type: "registry:ui",
-    files: ["ui/card.tsx"],
+    files: [
+      {
+        path: "ui/card.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "carousel",
     type: "registry:ui",
-    files: ["ui/carousel.tsx"],
+    files: [
+      {
+        path: "ui/carousel.tsx",
+        type: "registry:ui",
+      },
+    ],
     registryDependencies: ["button"],
     dependencies: ["embla-carousel-react"],
   },
   {
     name: "chart",
     type: "registry:ui",
-    files: ["ui/chart.tsx"],
+    files: [
+      {
+        path: "ui/chart.tsx",
+        type: "registry:ui",
+      },
+    ],
     registryDependencies: ["card"],
     dependencies: ["recharts", "lucide-react"],
   },
@@ -100,44 +160,79 @@ export const ui: Registry = [
     name: "checkbox",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-checkbox"],
-    files: ["ui/checkbox.tsx"],
+    files: [
+      {
+        path: "ui/checkbox.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "collapsible",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-collapsible"],
-    files: ["ui/collapsible.tsx"],
+    files: [
+      {
+        path: "ui/collapsible.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "command",
     type: "registry:ui",
     dependencies: ["cmdk@1.0.0"],
     registryDependencies: ["dialog"],
-    files: ["ui/command.tsx"],
+    files: [
+      {
+        path: "ui/command.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "context-menu",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-context-menu"],
-    files: ["ui/context-menu.tsx"],
+    files: [
+      {
+        path: "ui/context-menu.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "dialog",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-dialog"],
-    files: ["ui/dialog.tsx"],
+    files: [
+      {
+        path: "ui/dialog.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "drawer",
     type: "registry:ui",
     dependencies: ["vaul", "@radix-ui/react-dialog"],
-    files: ["ui/drawer.tsx"],
+    files: [
+      {
+        path: "ui/drawer.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "dropdown-menu",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-dropdown-menu"],
-    files: ["ui/dropdown-menu.tsx"],
+    files: [
+      {
+        path: "ui/dropdown-menu.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "form",
@@ -150,96 +245,176 @@ export const ui: Registry = [
       "react-hook-form",
     ],
     registryDependencies: ["button", "label"],
-    files: ["ui/form.tsx"],
+    files: [
+      {
+        path: "ui/form.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "hover-card",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-hover-card"],
-    files: ["ui/hover-card.tsx"],
+    files: [
+      {
+        path: "ui/hover-card.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "input",
     type: "registry:ui",
-    files: ["ui/input.tsx"],
+    files: [
+      {
+        path: "ui/input.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "input-otp",
     type: "registry:ui",
     dependencies: ["input-otp"],
-    files: ["ui/input-otp.tsx"],
+    files: [
+      {
+        path: "ui/input-otp.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "label",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-label"],
-    files: ["ui/label.tsx"],
+    files: [
+      {
+        path: "ui/label.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "menubar",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-menubar"],
-    files: ["ui/menubar.tsx"],
+    files: [
+      {
+        path: "ui/menubar.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "navigation-menu",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-navigation-menu"],
-    files: ["ui/navigation-menu.tsx"],
+    files: [
+      {
+        path: "ui/navigation-menu.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "pagination",
     type: "registry:ui",
     registryDependencies: ["button"],
-    files: ["ui/pagination.tsx"],
+    files: [
+      {
+        path: "ui/pagination.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "popover",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-popover"],
-    files: ["ui/popover.tsx"],
+    files: [
+      {
+        path: "ui/popover.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "progress",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-progress"],
-    files: ["ui/progress.tsx"],
+    files: [
+      {
+        path: "ui/progress.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "radio-group",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-radio-group"],
-    files: ["ui/radio-group.tsx"],
+    files: [
+      {
+        path: "ui/radio-group.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "resizable",
     type: "registry:ui",
     dependencies: ["react-resizable-panels"],
-    files: ["ui/resizable.tsx"],
+    files: [
+      {
+        path: "ui/resizable.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "scroll-area",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-scroll-area"],
-    files: ["ui/scroll-area.tsx"],
+    files: [
+      {
+        path: "ui/scroll-area.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "select",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-select"],
-    files: ["ui/select.tsx"],
+    files: [
+      {
+        path: "ui/select.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "separator",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-separator"],
-    files: ["ui/separator.tsx"],
+    files: [
+      {
+        path: "ui/separator.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "sheet",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-dialog"],
-    files: ["ui/sheet.tsx"],
+    files: [
+      {
+        path: "ui/sheet.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "sidebar",
@@ -258,7 +433,12 @@ export const ui: Registry = [
       "use-mobile",
       "skeleton",
     ],
-    files: ["ui/sidebar.tsx"],
+    files: [
+      {
+        path: "ui/sidebar.tsx",
+        type: "registry:ui",
+      },
+    ],
     tailwind: {
       config: {
         theme: {
@@ -305,41 +485,76 @@ export const ui: Registry = [
   {
     name: "skeleton",
     type: "registry:ui",
-    files: ["ui/skeleton.tsx"],
+    files: [
+      {
+        path: "ui/skeleton.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "slider",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-slider"],
-    files: ["ui/slider.tsx"],
+    files: [
+      {
+        path: "ui/slider.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "sonner",
     type: "registry:ui",
     dependencies: ["sonner", "next-themes"],
-    files: ["ui/sonner.tsx"],
+    files: [
+      {
+        path: "ui/sonner.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "switch",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-switch"],
-    files: ["ui/switch.tsx"],
+    files: [
+      {
+        path: "ui/switch.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "table",
     type: "registry:ui",
-    files: ["ui/table.tsx"],
+    files: [
+      {
+        path: "ui/table.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "tabs",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-tabs"],
-    files: ["ui/tabs.tsx"],
+    files: [
+      {
+        path: "ui/tabs.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "textarea",
     type: "registry:ui",
-    files: ["ui/textarea.tsx"],
+    files: [
+      {
+        path: "ui/textarea.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "toast",
@@ -364,19 +579,34 @@ export const ui: Registry = [
     name: "toggle",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-toggle"],
-    files: ["ui/toggle.tsx"],
+    files: [
+      {
+        path: "ui/toggle.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "toggle-group",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-toggle-group"],
     registryDependencies: ["toggle"],
-    files: ["ui/toggle-group.tsx"],
+    files: [
+      {
+        path: "ui/toggle-group.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
   {
     name: "tooltip",
     type: "registry:ui",
     dependencies: ["@radix-ui/react-tooltip"],
-    files: ["ui/tooltip.tsx"],
+    files: [
+      {
+        path: "ui/tooltip.tsx",
+        type: "registry:ui",
+      },
+    ],
   },
 ]
diff --git a/apps/www/registry/registry-v0.ts b/apps/www/registry/registry-v0.ts
deleted file mode 100644
index fb2f2ed3c9c..00000000000
--- a/apps/www/registry/registry-v0.ts
+++ /dev/null
@@ -1,283 +0,0 @@
-import { Registry } from "@/registry/schema"
-
-// v0-compatible blocks
-export const v0: Registry = [
-  {
-    name: "v0-sidebar-01",
-    type: "registry:block",
-    registryDependencies: [
-      "sidebar",
-      "breadcrumb",
-      "separator",
-      "label",
-      "dropdown-menu",
-    ],
-    files: [
-      {
-        path: "v0/sidebar-01.tsx",
-        type: "registry:component",
-      },
-    ],
-    category: "Application",
-    subcategory: "Sidebars",
-  },
-  {
-    name: "v0-sidebar-02",
-    type: "registry:block",
-    registryDependencies: [
-      "sidebar",
-      "breadcrumb",
-      "separator",
-      "label",
-      "dropdown-menu",
-    ],
-    files: [
-      {
-        path: "v0/sidebar-02.tsx",
-        type: "registry:block",
-      },
-    ],
-    category: "Application",
-    subcategory: "Sidebars",
-  },
-  {
-    name: "v0-sidebar-03",
-    type: "registry:block",
-    registryDependencies: ["sidebar", "breadcrumb"],
-    files: [
-      {
-        path: "v0/sidebar-03.tsx",
-        type: "registry:block",
-      },
-    ],
-    category: "Application",
-    subcategory: "Sidebars",
-  },
-  {
-    name: "v0-sidebar-04",
-    type: "registry:block",
-    registryDependencies: ["sidebar", "breadcrumb", "separator"],
-    files: [
-      {
-        path: "v0/sidebar-04.tsx",
-        type: "registry:block",
-      },
-    ],
-    category: "Application",
-    subcategory: "Sidebars",
-  },
-  {
-    name: "v0-sidebar-05",
-    type: "registry:block",
-    registryDependencies: [
-      "sidebar",
-      "breadcrumb",
-      "separator",
-      "label",
-      "collapsible",
-    ],
-    files: [
-      {
-        path: "v0/sidebar-05.tsx",
-        type: "registry:block",
-      },
-    ],
-    category: "Application",
-    subcategory: "Sidebars",
-  },
-  {
-    name: "v0-sidebar-06",
-    type: "registry:block",
-    registryDependencies: [
-      "sidebar",
-      "breadcrumb",
-      "separator",
-      "card",
-      "dropdown-menu",
-    ],
-    files: [
-      {
-        path: "v0/sidebar-06.tsx",
-        type: "registry:block",
-      },
-    ],
-    category: "Application",
-    subcategory: "Sidebars",
-  },
-  {
-    name: "v0-sidebar-07",
-    type: "registry:block",
-    registryDependencies: [
-      "sidebar",
-      "breadcrumb",
-      "separator",
-      "collapsible",
-      "dropdown-menu",
-      "avatar",
-    ],
-    files: [
-      {
-        path: "v0/sidebar-07.tsx",
-        type: "registry:block",
-      },
-    ],
-    category: "Application",
-    subcategory: "Sidebars",
-  },
-  {
-    name: "v0-sidebar-08",
-    type: "registry:block",
-    registryDependencies: [
-      "sidebar",
-      "breadcrumb",
-      "separator",
-      "collapsible",
-      "dropdown-menu",
-      "avatar",
-    ],
-    files: [
-      {
-        path: "v0/sidebar-08.tsx",
-        type: "registry:block",
-      },
-    ],
-    category: "Application",
-    subcategory: "Sidebars",
-  },
-  {
-    name: "v0-sidebar-09",
-    type: "registry:block",
-    registryDependencies: [
-      "sidebar",
-      "breadcrumb",
-      "separator",
-      "collapsible",
-      "dropdown-menu",
-      "avatar",
-      "switch",
-    ],
-    files: [
-      {
-        path: "v0/sidebar-09.tsx",
-        type: "registry:block",
-      },
-    ],
-    category: "Application",
-    subcategory: "Sidebars",
-  },
-  {
-    name: "v0-sidebar-10",
-    type: "registry:block",
-    registryDependencies: [
-      "sidebar",
-      "breadcrumb",
-      "separator",
-      "popover",
-      "collapsible",
-      "dropdown-menu",
-    ],
-    files: [
-      {
-        path: "v0/sidebar-10.tsx",
-        type: "registry:block",
-      },
-    ],
-    category: "Application",
-    subcategory: "Sidebars",
-  },
-  {
-    name: "v0-sidebar-11",
-    type: "registry:block",
-    registryDependencies: ["sidebar", "breadcrumb", "separator", "collapsible"],
-    files: [
-      {
-        path: "v0/sidebar-11.tsx",
-        type: "registry:block",
-      },
-    ],
-    category: "Application",
-    subcategory: "Sidebars",
-  },
-  {
-    name: "v0-sidebar-12",
-    type: "registry:block",
-    registryDependencies: [
-      "sidebar",
-      "breadcrumb",
-      "separator",
-      "collapsible",
-      "calendar",
-      "dropdown-menu",
-      "avatar",
-    ],
-    files: [
-      {
-        path: "v0/sidebar-12.tsx",
-        type: "registry:block",
-      },
-    ],
-    category: "Application",
-    subcategory: "Sidebars",
-  },
-  {
-    name: "v0-sidebar-13",
-    type: "registry:block",
-    registryDependencies: ["sidebar", "breadcrumb", "button", "dialog"],
-    files: [
-      {
-        path: "v0/sidebar-13.tsx",
-        type: "registry:block",
-      },
-    ],
-    category: "Application",
-    subcategory: "Sidebars",
-  },
-  {
-    name: "v0-sidebar-14",
-    type: "registry:block",
-    registryDependencies: ["sidebar", "breadcrumb"],
-    files: [
-      {
-        path: "v0/sidebar-14.tsx",
-        type: "registry:block",
-      },
-    ],
-    category: "Application",
-    subcategory: "Sidebars",
-  },
-  {
-    name: "v0-sidebar-15",
-    type: "registry:block",
-    registryDependencies: [
-      "sidebar",
-      "breadcrumb",
-      "separator",
-      "popover",
-      "collapsible",
-      "dropdown-menu",
-      "calendar",
-      "avatar",
-    ],
-    files: [
-      {
-        path: "v0/sidebar-15.tsx",
-        type: "registry:block",
-      },
-    ],
-    category: "Application",
-    subcategory: "Sidebars",
-  },
-  {
-    name: "v0-login-01",
-    type: "registry:block",
-    registryDependencies: ["button", "card", "input", "label"],
-    files: [
-      {
-        path: "v0/login-01.tsx",
-        type: "registry:block",
-      },
-    ],
-    category: "Authentication",
-    subcategory: "Login",
-  },
-]
diff --git a/apps/www/registry/schema.ts b/apps/www/registry/schema.ts
index ebd45304351..3bcda767eb3 100644
--- a/apps/www/registry/schema.ts
+++ b/apps/www/registry/schema.ts
@@ -1,40 +1,27 @@
 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.union([
-  z.string(),
-  z.object({
-    path: z.string(),
-    content: z.string().optional(),
-    type: registryItemTypeSchema,
-    target: z.string().optional(),
-  }),
+  // Internal use only
+  "registry:example",
+  "registry:style",
+  "registry:internal",
 ])
 
+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(),
@@ -48,7 +35,7 @@ export const registryItemCssVarsSchema = z.object({
   dark: z.record(z.string(), z.string()).optional(),
 })
 
-export const registryEntrySchema = z.object({
+export const registryItemSchema = z.object({
   name: z.string(),
   type: registryItemTypeSchema,
   description: z.string().optional(),
@@ -58,20 +45,16 @@ export const registryEntrySchema = z.object({
   files: z.array(registryItemFileSchema).optional(),
   tailwind: registryItemTailwindSchema.optional(),
   cssVars: registryItemCssVarsSchema.optional(),
-  source: z.string().optional(),
-  category: z.string().optional(),
-  subcategory: z.string().optional(),
-  chunks: z.array(blockChunkSchema).optional(),
+  meta: z.record(z.string(), z.any()).optional(),
   docs: z.string().optional(),
+  categories: z.array(z.string()).optional(),
 })
 
-export const registrySchema = z.array(registryEntrySchema)
-
-export type RegistryEntry = z.infer<typeof registryEntrySchema>
+export const registrySchema = z.array(registryItemSchema)
 
 export type Registry = z.infer<typeof registrySchema>
 
-export const blockSchema = registryEntrySchema.extend({
+export const blockSchema = registryItemSchema.extend({
   type: z.literal("registry:block"),
   style: z.enum(["default", "new-york"]),
   component: z.any(),
@@ -84,7 +67,3 @@ export const blockSchema = registryEntrySchema.extend({
   code: z.string(),
   highlightedCode: z.string(),
 })
-
-export type Block = z.infer<typeof blockSchema>
-
-export type BlockChunk = z.infer<typeof blockChunkSchema>
diff --git a/apps/www/scripts/build-registry.mts b/apps/www/scripts/build-registry.mts
index 9d7bbefdfd7..bf379190de2 100644
--- a/apps/www/scripts/build-registry.mts
+++ b/apps/www/scripts/build-registry.mts
@@ -1,21 +1,21 @@
-// @sts-nocheck
-import { existsSync, promises as fs, readFileSync } from "fs"
+import { existsSync, promises as fs } from "fs"
 import { tmpdir } from "os"
 import path from "path"
 import { cwd } from "process"
-import template from "lodash.template"
+import template from "lodash/template"
 import { rimraf } from "rimraf"
-import { Project, ScriptKind, SyntaxKind } from "ts-morph"
+import { Project, ScriptKind } from "ts-morph"
 import { 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 {
   Registry,
-  RegistryEntry,
-  registryEntrySchema,
+  registryItemSchema,
   registryItemTypeSchema,
   registrySchema,
 } from "../registry/schema"
@@ -30,6 +30,7 @@ const REGISTRY_INDEX_WHITELIST: z.infer<typeof registryItemTypeSchema>[] = [
   "registry:theme",
   "registry:block",
   "registry:example",
+  "registry:internal",
 ]
 
 const project = new Project({
@@ -41,6 +42,61 @@ async function createTempSourceFile(filename: string) {
   return path.join(dir, filename)
 }
 
+// ----------------------------------------------------------------------------
+// Sync styles
+// ----------------------------------------------------------------------------
+async function syncStyles() {
+  const sourceStyle = "new-york"
+  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) {
+    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/new-york/ 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.
 // ----------------------------------------------------------------------------
@@ -68,10 +124,23 @@ export const Index: Record<string, any> = {
         continue
       }
 
+      // 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") {
         const file = resolveFiles[0]
         const filename = path.basename(file)
@@ -86,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,
@@ -122,129 +183,7 @@ 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) {
@@ -286,22 +225,23 @@ export const Index: Record<string, any> = {
       description: "${item.description ?? ""}",
       type: "${item.type}",
       registryDependencies: ${JSON.stringify(item.registryDependencies)},
-      files: [${resolveFiles.map((file) => `"${file}"`)}],
+      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}"`
+          : `{
+        path: "${filePath}",
+        type: "${file.type}",
+        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)},
     },`
     }
 
@@ -402,7 +342,7 @@ async function buildStyles(registry: Registry) {
             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()
@@ -437,17 +377,10 @@ async function buildStyles(registry: Registry) {
         )
       }
 
-      const payload = registryEntrySchema
-        .omit({
-          source: true,
-          category: true,
-          subcategory: true,
-          chunks: true,
-        })
-        .safeParse({
-          ...item,
-          files,
-        })
+      const payload = registryItemSchema.safeParse({
+        ...item,
+        files,
+      })
 
       if (payload.success) {
         await fs.writeFile(
@@ -477,21 +410,14 @@ 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 === "new-york") {
-      dependencies.push("@radix-ui/react-icons")
-    }
-
-    const payload: RegistryEntry = {
+    const payload: z.infer<typeof registryItemSchema> = {
       name: style.name,
       type: "registry:style",
-      dependencies,
+      dependencies: [
+        "tailwindcss-animate",
+        "class-variance-authority",
+        "lucide-react",
+      ],
       registryDependencies: ["utils"],
       tailwind: {
         config: {
@@ -811,7 +737,67 @@ async function buildThemes() {
   }
 }
 
+// ----------------------------------------------------------------------------
+// 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"
+  )
+}
+
+// ----------------------------------------------------------------------------
+// Build __registry__/icons.tsx.
+// ----------------------------------------------------------------------------
+async function buildRegistryIcons() {
+  let index = `// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+// Do not edit this file directly.
+import * as React from "react"
+
+export const Icons = {
+`
+
+  for (const [icon, libraries] of Object.entries(icons)) {
+    index += `  "${icon}": {`
+    for (const [library, componentName] of Object.entries(libraries)) {
+      const packageName = iconLibraries[library].package
+      if (packageName) {
+        index += `
+  ${library}: React.lazy(() => import("${packageName}").then(mod => ({
+    default: mod.${componentName}
+  }))),`
+      }
+    }
+    index += `
+},`
+  }
+
+  index += `
+}
+`
+
+  // Write style index.
+  rimraf.sync(path.join(process.cwd(), "__registry__/icons.tsx"))
+  await fs.writeFile(
+    path.join(process.cwd(), "__registry__/icons.tsx"),
+    index,
+    "utf8"
+  )
+}
+
 try {
+  console.log("💽 Building registry...")
   const result = registrySchema.safeParse(registry)
 
   if (!result.success) {
@@ -819,11 +805,15 @@ try {
     process.exit(1)
   }
 
+  await syncStyles()
   await buildRegistry(result.data)
   await buildStyles(result.data)
   await buildStylesIndex()
   await buildThemes()
 
+  await buildRegistryIcons()
+  await buildIcons()
+
   console.log("✅ Done!")
 } catch (error) {
   console.error(error)
diff --git a/apps/www/scripts/capture-registry.mts b/apps/www/scripts/capture-registry.mts
new file mode 100644
index 00000000000..c40342ffc82
--- /dev/null
+++ b/apps/www/scripts/capture-registry.mts
@@ -0,0 +1,100 @@
+import { existsSync, promises as fs } from "fs"
+import path from "path"
+import puppeteer from "puppeteer"
+
+import { getAllBlockIds } from "../lib/blocks"
+
+const REGISTRY_PATH = path.join(process.cwd(), "public/r")
+
+// ----------------------------------------------------------------------------
+// Capture screenshots.
+// ----------------------------------------------------------------------------
+async function captureScreenshots() {
+  const blockIds = await getAllBlockIds()
+  const blocks = blockIds.filter((block) => {
+    // Check if screenshots already exist
+    const lightPath = path.join(
+      REGISTRY_PATH,
+      `styles/new-york/${block}-light.png`
+    )
+    const darkPath = path.join(
+      REGISTRY_PATH,
+      `styles/new-york/${block}-dark.png`
+    )
+    return !existsSync(lightPath) || !existsSync(darkPath)
+  })
+
+  if (blocks.length === 0) {
+    console.log("✨ All screenshots exist, nothing to capture")
+    return
+  }
+
+  const browser = await puppeteer.launch({
+    defaultViewport: {
+      width: 1440,
+      height: 900,
+      deviceScaleFactor: 2,
+    },
+  })
+
+  for (const block of blocks) {
+    const pageUrl = `http://localhost:3333/view/styles/new-york/${block}`
+
+    const page = await browser.newPage()
+    await page.goto(pageUrl, {
+      waitUntil: "networkidle2",
+    })
+
+    console.log(`- Capturing ${block}...`)
+
+    for (const theme of ["light", "dark"]) {
+      const screenshotPath = path.join(
+        REGISTRY_PATH,
+        `styles/new-york/${block}${theme === "dark" ? "-dark" : "-light"}.png`
+      )
+
+      if (existsSync(screenshotPath)) {
+        continue
+      }
+
+      // Set theme and reload page
+      await page.evaluate((currentTheme) => {
+        localStorage.setItem("theme", currentTheme)
+      }, theme)
+
+      await page.reload({ waitUntil: "networkidle2" })
+
+      // Wait for animations to complete
+      if (block.startsWith("chart")) {
+        await new Promise((resolve) => setTimeout(resolve, 500))
+      }
+
+      // Hide Tailwind indicator
+      await page.evaluate(() => {
+        const indicator = document.querySelector("[data-tailwind-indicator]")
+        if (indicator) {
+          indicator.remove()
+        }
+      })
+
+      await page.screenshot({
+        path: screenshotPath,
+      })
+    }
+
+    await page.close()
+  }
+
+  await browser.close()
+}
+
+try {
+  console.log("🔍 Capturing screenshots...")
+
+  await captureScreenshots()
+
+  console.log("✅ Done!")
+} catch (error) {
+  console.error(error)
+  process.exit(1)
+}
diff --git a/apps/www/scripts/capture-screenshots.mts b/apps/www/scripts/capture-screenshots.mts
deleted file mode 100644
index 380da081a08..00000000000
--- a/apps/www/scripts/capture-screenshots.mts
+++ /dev/null
@@ -1,100 +0,0 @@
-import puppeteer from "puppeteer"
-
-const BLOCKS = [
-  "login-01",
-  "sidebar-01",
-  "sidebar-02",
-  "sidebar-03",
-  "sidebar-04",
-  "sidebar-05",
-  "sidebar-06",
-  "sidebar-07",
-  "sidebar-08",
-  "sidebar-09",
-  "sidebar-10",
-  "sidebar-11",
-  "sidebar-12",
-  "sidebar-13",
-  "sidebar-14",
-  "sidebar-15",
-  "demo-sidebar",
-  "demo-sidebar-header",
-  "demo-sidebar-footer",
-  "demo-sidebar-group",
-  "demo-sidebar-group-collapsible",
-  "demo-sidebar-group-action",
-  "demo-sidebar-menu",
-  "demo-sidebar-menu-action",
-  "demo-sidebar-menu-sub",
-  "demo-sidebar-menu-collapsible",
-  "demo-sidebar-menu-badge",
-  "demo-sidebar-rsc",
-  "demo-sidebar-controlled",
-]
-
-try {
-  const browser = await puppeteer.launch({
-    defaultViewport: {
-      width: 1440,
-      height: 900,
-      deviceScaleFactor: 2,
-    },
-  })
-
-  console.log("☀️ Capturing screenshots for light theme")
-  for (const block of BLOCKS) {
-    const pageUrl = `http://localhost:3333/blocks/new-york/${block}`
-    console.log(`- ${block}`)
-
-    const page = await browser.newPage()
-    await page.goto(pageUrl, {
-      waitUntil: "networkidle2",
-    })
-
-    // Hide Tailwind indicator
-    await page.evaluate(() => {
-      const indicator = document.querySelector("[data-tailwind-indicator]")
-      if (indicator) {
-        indicator.remove()
-      }
-    })
-
-    await page.screenshot({
-      path: `./public/images/blocks/${block}.png`,
-    })
-  }
-
-  console.log("🌙 Capturing screenshots for dark theme")
-  for (const block of BLOCKS) {
-    const pageUrl = `http://localhost:3333/blocks/new-york/${block}`
-    console.log(`- ${block}`)
-
-    const page = await browser.newPage()
-    await page.goto(pageUrl, {
-      waitUntil: "networkidle2",
-    })
-
-    // Hide Tailwind indicator
-    await page.evaluate(() => {
-      const indicator = document.querySelector("[data-tailwind-indicator]")
-      if (indicator) {
-        indicator.remove()
-      }
-    })
-
-    // Set theme to dark
-    await page.evaluate(() => {
-      localStorage.setItem("theme", "dark")
-    })
-
-    await page.screenshot({
-      path: `./public/images/blocks/${block}-dark.png`,
-    })
-  }
-
-  await browser.close()
-  console.log("✅ Done!")
-} catch (error) {
-  console.error(error)
-  process.exit(1)
-}
diff --git a/apps/www/styles/globals.css b/apps/www/styles/globals.css
index 390170e634c..a41c64082cc 100644
--- a/apps/www/styles/globals.css
+++ b/apps/www/styles/globals.css
@@ -24,13 +24,11 @@
     --input: 240 5.9% 90%;
     --ring: 240 5% 64.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%;
-
     --sidebar-background: 0 0% 98%;
     --sidebar-foreground: 240 5.3% 26.1%;
     --sidebar-primary: 240 5.9% 10%;
@@ -61,13 +59,11 @@
     --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%;
-
     --sidebar-background: 240 5.9% 10%;
     --sidebar-foreground: 240 4.8% 95.9%;
     --sidebar-primary: 224.3 76.3% 48%;
@@ -87,11 +83,33 @@
     @apply scroll-smooth;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground overscroll-none;
     /* font-feature-settings: "rlig" 1, "calt" 1; */
     font-synthesis-weight: none;
     text-rendering: optimizeLegibility;
   }
+
+  @supports (font: -apple-system-body) and (-webkit-appearance: none) {
+    [data-wrapper] {
+      @apply min-[1800px]:border-t;
+    }
+  }
+
+  /* Custom scrollbar styling. Thanks @pranathiperii. */
+  ::-webkit-scrollbar {
+    width: 5px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: hsl(var(--border));
+    border-radius: 5px;
+  }
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--border)) transparent;
+  }
 }
 
 @layer utilities {
@@ -113,10 +131,26 @@
     content: "";
     @apply absolute -inset-4 shadow-xl rounded-xl border;
   }
-}
 
-@media (max-width: 640px) {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .border-grid {
+    @apply border-border/30 dark:border-border;
+  }
+
+  .container-wrapper {
+    @apply min-[1800px]:max-w-[1536px] min-[1800px]:border-x border-border/30 dark:border-border mx-auto w-full;
+  }
+
   .container {
-    @apply px-4;
+    @apply px-4 xl:px-6 2xl:px-4 mx-auto max-w-[1536px];
   }
 }
diff --git a/package.json b/package.json
index fd65f929e4a..ae9f892a570 100644
--- a/package.json
+++ b/package.json
@@ -10,14 +10,13 @@
   },
   "workspaces": [
     "apps/*",
-    "packages/*",
-    "templates/*"
+    "packages/*"
   ],
   "scripts": {
     "build": "turbo run build",
     "build:cli": "turbo --filter=shadcn build",
-    "build:registry": "pnpm --filter=www build:registry && pnpm format:write -- --loglevel silent",
-    "registry:build": "pnpm --filter=www build:registry && pnpm format:write -- --loglevel silent",
+    "build:registry": "pnpm --filter=www build:registry && pnpm --filter=www lint:fix && pnpm format:write -- --loglevel silent",
+    "registry:build": "pnpm --filter=www build:registry && pnpm --filter=www lint:fix && pnpm format:write -- --loglevel silent",
     "registry:capture": "pnpm --filter=www registry:capture",
     "dev": "turbo run dev --parallel",
     "cli:dev": "turbo --filter=shadcn-ui dev",
@@ -25,6 +24,7 @@
     "cli:build": "pnpm --filter=shadcn-ui build",
     "shadcn:dev": "turbo --filter=shadcn dev",
     "shadcn": "pnpm --filter=shadcn start:dev",
+    "shadcn:prod": "pnpm --filter=shadcn start:prod",
     "shadcn:build": "pnpm --filter=shadcn build",
     "shadcn:test": "pnpm --filter=shadcn test",
     "docs:build": "pnpm --filter=www build:docs",
diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
index 3041805541f..38743749712 100644
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @shadcn/ui
 
+## 0.9.4
+
+### Patch Changes
+
+- [#4397](https://github.com/shadcn-ui/ui/pull/4397) [`a1bed46`](https://github.com/shadcn-ui/ui/commit/a1bed464f329e9025a7fa1ae7dee094d4c9c6f44) Thanks [@JensAstrup](https://github.com/JensAstrup)! - replace lodash.template
+
+## 0.9.3
+
+### Patch Changes
+
+- [#5602](https://github.com/shadcn-ui/ui/pull/5602) [`2c2fe97`](https://github.com/shadcn-ui/ui/commit/2c2fe97eb96b2c5c7d03d1ae2756a851c3790030) Thanks [@shadcn](https://github.com/shadcn)! - move new-york icons to lucide-react
+
 ## 0.9.2
 
 ### Patch Changes
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 8bb0123578c..45ed44ee084 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "shadcn-ui",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "description": "Add components to your apps.",
   "publishConfig": {
     "access": "public"
@@ -41,7 +41,8 @@
     "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"
+    "test": "vitest run",
+    "test:dev": "REGISTRY_URL=http://localhost:3333 vitest run"
   },
   "dependencies": {
     "@antfu/ni": "^0.21.4",
@@ -56,7 +57,7 @@
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.1.0",
     "https-proxy-agent": "^6.2.0",
-    "lodash.template": "^4.5.0",
+    "lodash": "^4.17.21",
     "node-fetch": "^3.3.0",
     "ora": "^6.1.2",
     "prompts": "^2.4.2",
@@ -69,7 +70,7 @@
     "@types/babel__core": "^7.20.1",
     "@types/diff": "^5.0.3",
     "@types/fs-extra": "^11.0.1",
-    "@types/lodash.template": "^4.5.1",
+    "@types/lodash": "^4.17.7",
     "@types/prompts": "^2.4.2",
     "rimraf": "^4.1.3",
     "tsup": "^6.6.3",
diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
index 4ba66f47c26..efe05169dc0 100644
--- a/packages/cli/src/commands/init.ts
+++ b/packages/cli/src/commands/init.ts
@@ -24,7 +24,7 @@ import * as templates from "@/src/utils/templates"
 import chalk from "chalk"
 import { Command } from "commander"
 import { execa } from "execa"
-import template from "lodash.template"
+import template from "lodash/template"
 import ora from "ora"
 import prompts from "prompts"
 import { z } from "zod"
diff --git a/packages/shadcn/CHANGELOG.md b/packages/shadcn/CHANGELOG.md
index a54a7a6b853..d60c545348c 100644
--- a/packages/shadcn/CHANGELOG.md
+++ b/packages/shadcn/CHANGELOG.md
@@ -1,5 +1,39 @@
 # @shadcn/ui
 
+## 2.1.8
+
+### Patch Changes
+
+- [#6093](https://github.com/shadcn-ui/ui/pull/6093) [`c8fda09`](https://github.com/shadcn-ui/ui/commit/c8fda09a63f793e9e2e5a86d8f8faad5af9d1ab4) Thanks [@shadcn](https://github.com/shadcn)! - detect and use next version
+
+## 2.1.7
+
+### Patch Changes
+
+- [#5711](https://github.com/shadcn-ui/ui/pull/5711) [`500dbe2`](https://github.com/shadcn-ui/ui/commit/500dbe2664c04936cc3edb739fc97f6cecff57c5) Thanks [@bcorbold](https://github.com/bcorbold)! - Update spread/unspread helpers to handle ArrayLiteralExpression and nested values within arrays
+
+- [#5678](https://github.com/shadcn-ui/ui/pull/5678) [`fb36ca4`](https://github.com/shadcn-ui/ui/commit/fb36ca41591ae952f3a015e2a4470f26458cf1b5) Thanks [@Tobbe](https://github.com/Tobbe)! - support aliases longer than one char
+
+- [#5813](https://github.com/shadcn-ui/ui/pull/5813) [`d5bf001`](https://github.com/shadcn-ui/ui/commit/d5bf0018fda42faeb314dc3edc87b8cd7c0354c6) Thanks [@shadcn](https://github.com/shadcn)! - fix handling of aliases
+
+## 2.1.6
+
+### Patch Changes
+
+- [#5602](https://github.com/shadcn-ui/ui/pull/5602) [`2c2fe97`](https://github.com/shadcn-ui/ui/commit/2c2fe97eb96b2c5c7d03d1ae2756a851c3790030) Thanks [@shadcn](https://github.com/shadcn)! - move new-york icons to lucide-react
+
+## 2.1.5
+
+### Patch Changes
+
+- [#5707](https://github.com/shadcn-ui/ui/pull/5707) [`cdfecd1`](https://github.com/shadcn-ui/ui/commit/cdfecd1d97af2b4d9de330927edd9fd2eef1234e) Thanks [@shadcn](https://github.com/shadcn)! - temporarily bring back npm flag
+
+## 2.1.4
+
+### Patch Changes
+
+- [#5686](https://github.com/shadcn-ui/ui/pull/5686) [`4ff64ba`](https://github.com/shadcn-ui/ui/commit/4ff64ba818d15a094547f845ea294c2e1ab208d4) Thanks [@shadcn](https://github.com/shadcn)! - remove flag for npm
+
 ## 2.1.3
 
 ### Patch Changes
diff --git a/packages/shadcn/package.json b/packages/shadcn/package.json
index 727ab170e16..c790f3a74c4 100644
--- a/packages/shadcn/package.json
+++ b/packages/shadcn/package.json
@@ -1,6 +1,6 @@
 {
   "name": "shadcn",
-  "version": "2.1.3",
+  "version": "2.1.8",
   "description": "Add components to your apps.",
   "publishConfig": {
     "access": "public"
@@ -34,6 +34,7 @@
     "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://ui.shadcn.com/r node dist/index.js",
     "start": "node dist/index.js",
     "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",
     "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache",
diff --git a/packages/shadcn/src/commands/add.ts b/packages/shadcn/src/commands/add.ts
index e59e4e8e296..6a0b1e2b1f5 100644
--- a/packages/shadcn/src/commands/add.ts
+++ b/packages/shadcn/src/commands/add.ts
@@ -4,6 +4,7 @@ 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 { 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"
@@ -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,20 +125,25 @@ 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) {
diff --git a/packages/shadcn/src/commands/info.ts b/packages/shadcn/src/commands/info.ts
new file mode 100644
index 00000000000..ce79cb21cab
--- /dev/null
+++ b/packages/shadcn/src/commands/info.ts
@@ -0,0 +1,20 @@
+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"
+
+export const info = new Command()
+  .name("info")
+  .description("get information about your project")
+  .option(
+    "-c, --cwd <cwd>",
+    "the working directory. defaults to the current directory.",
+    process.cwd()
+  )
+  .action(async (opts) => {
+    logger.info("> project info")
+    console.log(await getProjectInfo(opts.cwd))
+    logger.break()
+    logger.info("> components.json")
+    console.log(await getConfig(opts.cwd))
+  })
diff --git a/packages/shadcn/src/commands/init.ts b/packages/shadcn/src/commands/init.ts
index 74dc410f11f..d4311634bea 100644
--- a/packages/shadcn/src/commands/init.ts
+++ b/packages/shadcn/src/commands/init.ts
@@ -86,21 +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 {
     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)
@@ -333,5 +340,6 @@ async function promptForMinimalConfig(
     rsc: defaultConfig?.rsc,
     tsx: defaultConfig?.tsx,
     aliases: defaultConfig?.aliases,
+    iconLibrary: defaultConfig?.iconLibrary,
   })
 }
diff --git a/packages/shadcn/src/commands/migrate.ts b/packages/shadcn/src/commands/migrate.ts
new file mode 100644
index 00000000000..45ee546051f
--- /dev/null
+++ b/packages/shadcn/src/commands/migrate.ts
@@ -0,0 +1,89 @@
+import path from "path"
+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 { Command } from "commander"
+import { z } from "zod"
+
+export const migrations = [
+  {
+    name: "icons",
+    description: "migrate your ui components to a different icon library.",
+  },
+] as const
+
+export const migrateOptionsSchema = z.object({
+  cwd: z.string(),
+  list: z.boolean(),
+  migration: z
+    .string()
+    .refine(
+      (value) =>
+        value && migrations.some((migration) => migration.name === value),
+      {
+        message:
+          "You must specify a valid migration. Run `shadcn migrate --list` to see available migrations.",
+      }
+    )
+    .optional(),
+})
+
+export const migrate = new Command()
+  .name("migrate")
+  .description("run a migration.")
+  .argument("[migration]", "the migration to run.")
+  .option(
+    "-c, --cwd <cwd>",
+    "the working directory. defaults to the current directory.",
+    process.cwd()
+  )
+  .option("-l, --list", "list all migrations.", false)
+  .action(async (migration, opts) => {
+    try {
+      const options = migrateOptionsSchema.parse({
+        cwd: path.resolve(opts.cwd),
+        migration,
+        list: opts.list,
+      })
+
+      if (options.list || !options.migration) {
+        logger.info("Available migrations:")
+        for (const migration of migrations) {
+          logger.info(`- ${migration.name}: ${migration.description}`)
+        }
+        return
+      }
+
+      if (!options.migration) {
+        throw new Error(
+          "You must specify a migration. Run `shadcn migrate --list` to see available migrations."
+        )
+      }
+
+      let { errors, config } = await preFlightMigrate(options)
+
+      if (
+        errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT] ||
+        errors[ERRORS.MISSING_CONFIG]
+      ) {
+        throw new Error(
+          "No `components.json` file found. Ensure you are at the root of your project."
+        )
+      }
+
+      if (!config) {
+        throw new Error(
+          "Something went wrong reading your `components.json` file. Please ensure you have a valid `components.json` file."
+        )
+      }
+
+      if (options.migration === "icons") {
+        await migrateIcons(config)
+      }
+    } catch (error) {
+      logger.break()
+      handleError(error)
+    }
+  })
diff --git a/packages/shadcn/src/index.ts b/packages/shadcn/src/index.ts
index c324a642768..8db7ad6c71e 100644
--- a/packages/shadcn/src/index.ts
+++ b/packages/shadcn/src/index.ts
@@ -1,7 +1,9 @@
 #!/usr/bin/env node
 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 { migrate } from "@/src/commands/migrate"
 import { Command } from "commander"
 
 import packageJson from "../package.json"
@@ -19,7 +21,12 @@ async function main() {
       "display the version number"
     )
 
-  program.addCommand(init).addCommand(add).addCommand(diff)
+  program
+    .addCommand(init)
+    .addCommand(add)
+    .addCommand(diff)
+    .addCommand(migrate)
+    .addCommand(info)
 
   program.parse()
 }
diff --git a/packages/shadcn/src/migrations/migrate-icons.test.ts b/packages/shadcn/src/migrations/migrate-icons.test.ts
new file mode 100644
index 00000000000..3cd52f35489
--- /dev/null
+++ b/packages/shadcn/src/migrations/migrate-icons.test.ts
@@ -0,0 +1,158 @@
+import { describe, expect, it } from "vitest"
+
+import { migrateIconsFile } from "./migrate-icons"
+
+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"
+
+      export function Component() {
+        return (
+          <div>
+            <CheckIcon className="w-4 h-4" />
+            <CloseIcon />
+          </div>
+        )
+      }`
+
+    expect(
+      await migrateIconsFile(input, "radix", "lucide", {
+        Check: {
+          lucide: "Check",
+          radix: "CheckIcon",
+        },
+        X: {
+          lucide: "X",
+          radix: "CloseIcon",
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      "import { Something } from "other-package"
+      import { Check, X } from "lucide-react";
+
+            export function Component() {
+              return (
+                <div>
+                  <Check className="w-4 h-4" />
+                  <X />
+                </div>
+              )
+            }"
+    `)
+  })
+
+  it("should return null if no radix icons are found", async () => {
+    const input = `
+      import { Something } from "other-package"
+
+      export function Component() {
+        return <div>No icons here</div>
+      }`
+
+    expect(await migrateIconsFile(input, "lucide", "radix", {}))
+      .toMatchInlineSnapshot(`
+      "import { Something } from "other-package"
+
+            export function Component() {
+              return <div>No icons here</div>
+            }"
+    `)
+  })
+
+  it("should handle mixed icon imports from different packages", async () => {
+    const input = `
+      import { CheckIcon } from "@radix-ui/react-icons"
+      import { AlertCircle } from "lucide-react"
+      import { Something } from "other-package"
+      import { Cross2Icon } from "@radix-ui/react-icons"
+
+      export function Component() {
+        return (
+          <div>
+            <CheckIcon className="w-4 h-4" />
+            <AlertCircle />
+            <Cross2Icon />
+          </div>
+        )
+      }`
+
+    expect(
+      await migrateIconsFile(input, "radix", "lucide", {
+        Check: {
+          lucide: "Check",
+          radix: "CheckIcon",
+        },
+        X: {
+          lucide: "X",
+          radix: "Cross2Icon",
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      "import { AlertCircle } from "lucide-react"
+            import { Something } from "other-package"
+      import { Check, X } from "lucide-react";
+
+            export function Component() {
+              return (
+                <div>
+                  <Check className="w-4 h-4" />
+                  <AlertCircle />
+                  <X />
+                </div>
+              )
+            }"
+    `)
+  })
+
+  it("should preserve all props and children on icons", async () => {
+    const input = `
+      import { CheckIcon, Cross2Icon } from "@radix-ui/react-icons"
+
+      export function Component() {
+        return (
+          <div>
+            <CheckIcon
+              className="w-4 h-4"
+              onClick={handleClick}
+              data-testid="check-icon"
+            >
+              <span>Child content</span>
+            </CheckIcon>
+            <Cross2Icon style={{ color: 'red' }} aria-label="Close" />
+          </div>
+        )
+      }`
+
+    expect(
+      await migrateIconsFile(input, "radix", "lucide", {
+        Check: {
+          lucide: "Check",
+          radix: "CheckIcon",
+        },
+        X: {
+          lucide: "X",
+          radix: "Cross2Icon",
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      "import { Check, X } from "lucide-react";
+
+                  export function Component() {
+              return (
+                <div>
+                  <CheckIcon
+                    className="w-4 h-4"
+                    onClick={handleClick}
+                    data-testid="check-icon"
+                  >
+                    <span>Child content</span>
+                  </CheckIcon>
+                  <X style={{ color: 'red' }} aria-label="Close" />
+                </div>
+              )
+            }"
+    `)
+  })
+})
diff --git a/packages/shadcn/src/migrations/migrate-icons.ts b/packages/shadcn/src/migrations/migrate-icons.ts
new file mode 100644
index 00000000000..f5ff0a85680
--- /dev/null
+++ b/packages/shadcn/src/migrations/migrate-icons.ts
@@ -0,0 +1,201 @@
+import { randomBytes } from "crypto"
+import { promises as fs } from "fs"
+import { tmpdir } from "os"
+import path from "path"
+import { 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 { iconsSchema } from "@/src/utils/registry/schema"
+import { spinner } from "@/src/utils/spinner"
+import { updateDependencies } from "@/src/utils/updaters/update-dependencies"
+import fg from "fast-glob"
+import prompts from "prompts"
+import { Project, ScriptKind, SyntaxKind } from "ts-morph"
+import { z } from "zod"
+
+export async function migrateIcons(config: Config) {
+  if (!config.resolvedPaths.ui) {
+    throw new Error(
+      "We could not find a valid `ui` path in your `components.json` file. Please ensure you have a valid `ui` path in your `components.json` file."
+    )
+  }
+
+  const uiPath = config.resolvedPaths.ui
+  const [files, registryIcons] = await Promise.all([
+    fg("**/*.{js,ts,jsx,tsx}", {
+      cwd: uiPath,
+    }),
+    getRegistryIcons(),
+  ])
+
+  if (Object.keys(registryIcons).length === 0) {
+    throw new Error("Something went wrong fetching the registry icons.")
+  }
+
+  const libraryChoices = Object.entries(ICON_LIBRARIES).map(
+    ([name, iconLibrary]) => ({
+      title: iconLibrary.name,
+      value: name,
+    })
+  )
+
+  const migrateOptions = await prompts([
+    {
+      type: "select",
+      name: "sourceLibrary",
+      message: `Which icon library would you like to ${highlighter.info(
+        "migrate from"
+      )}?`,
+      choices: libraryChoices,
+    },
+    {
+      type: "select",
+      name: "targetLibrary",
+      message: `Which icon library would you like to ${highlighter.info(
+        "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."
+    )
+  }
+
+  if (
+    !(
+      migrateOptions.sourceLibrary in ICON_LIBRARIES &&
+      migrateOptions.targetLibrary in ICON_LIBRARIES
+    )
+  ) {
+    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 { confirm } = await prompts({
+    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?`,
+  })
+
+  if (!confirm) {
+    logger.info("Migration cancelled.")
+    process.exit(0)
+  }
+
+  if (targetLibrary.package) {
+    await updateDependencies([targetLibrary.package], config, {
+      silent: false,
+    })
+  }
+
+  const migrationSpinner = spinner(`Migrating icons...`)?.start()
+
+  await Promise.all(
+    files.map(async (file) => {
+      migrationSpinner.text = `Migrating ${file}...`
+
+      const filePath = path.join(uiPath, file)
+      const fileContent = await fs.readFile(filePath, "utf-8")
+
+      const content = await migrateIconsFile(
+        fileContent,
+        migrateOptions.sourceLibrary,
+        migrateOptions.targetLibrary,
+        registryIcons
+      )
+
+      await fs.writeFile(filePath, content)
+    })
+  )
+
+  migrationSpinner.succeed("Migration complete.")
+}
+
+export async function migrateIconsFile(
+  content: string,
+  sourceLibrary: keyof typeof ICON_LIBRARIES,
+  targetLibrary: keyof typeof ICON_LIBRARIES,
+  iconsMapping: z.infer<typeof iconsSchema>
+) {
+  const sourceLibraryImport = ICON_LIBRARIES[sourceLibrary]?.import
+  const targetLibraryImport = ICON_LIBRARIES[targetLibrary]?.import
+
+  const dir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-"))
+  const project = new Project({
+    compilerOptions: {},
+  })
+
+  const tempFile = path.join(
+    dir,
+    `shadcn-icons-${randomBytes(4).toString("hex")}.tsx`
+  )
+  const sourceFile = project.createSourceFile(tempFile, content, {
+    scriptKind: ScriptKind.TSX,
+  })
+
+  // Find all sourceLibrary imports.
+  let targetedIcons: string[] = []
+  for (const importDeclaration of sourceFile.getImportDeclarations() ?? []) {
+    if (
+      importDeclaration.getModuleSpecifier()?.getText() !==
+      `"${sourceLibraryImport}"`
+    ) {
+      continue
+    }
+
+    for (const specifier of importDeclaration.getNamedImports() ?? []) {
+      const iconName = specifier.getName()
+
+      // TODO: this is O(n^2) but okay for now.
+      const targetedIcon = Object.values(iconsMapping).find(
+        (icon) => icon[sourceLibrary] === iconName
+      )?.[targetLibrary]
+
+      if (!targetedIcon || targetedIcons.includes(targetedIcon)) {
+        continue
+      }
+
+      targetedIcons.push(targetedIcon)
+
+      // Remove the named import.
+      specifier.remove()
+
+      // Replace with the targeted icon.
+      sourceFile
+        .getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement)
+        .filter((node) => node.getTagNameNode()?.getText() === iconName)
+        .forEach((node) => node.getTagNameNode()?.replaceWithText(targetedIcon))
+    }
+
+    // If the named import is empty, remove the import declaration.
+    if (importDeclaration.getNamedImports()?.length === 0) {
+      importDeclaration.remove()
+    }
+  }
+
+  if (targetedIcons.length > 0) {
+    sourceFile.addImportDeclaration({
+      moduleSpecifier: targetLibraryImport,
+      namedImports: targetedIcons.map((icon) => ({
+        name: icon,
+      })),
+    })
+  }
+
+  return await sourceFile.getText()
+}
diff --git a/packages/shadcn/src/preflights/preflight-migrate.ts b/packages/shadcn/src/preflights/preflight-migrate.ts
new file mode 100644
index 00000000000..8c5f647155c
--- /dev/null
+++ b/packages/shadcn/src/preflights/preflight-migrate.ts
@@ -0,0 +1,64 @@
+import path from "path"
+import { addOptionsSchema } from "@/src/commands/add"
+import { 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 fs from "fs-extra"
+import { z } from "zod"
+
+export async function preFlightMigrate(
+  options: z.infer<typeof migrateOptionsSchema>
+) {
+  const errors: Record<string, boolean> = {}
+
+  // 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"))
+  ) {
+    errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT] = true
+    return {
+      errors,
+      config: null,
+    }
+  }
+
+  // Check for existing components.json file.
+  if (!fs.existsSync(path.resolve(options.cwd, "components.json"))) {
+    errors[ERRORS.MISSING_CONFIG] = true
+    return {
+      errors,
+      config: null,
+    }
+  }
+
+  try {
+    const config = await getConfig(options.cwd)
+
+    return {
+      errors,
+      config: config!,
+    }
+  } catch (error) {
+    logger.break()
+    logger.error(
+      `An invalid ${highlighter.info(
+        "components.json"
+      )} file was found at ${highlighter.info(
+        options.cwd
+      )}.\nBefore you can run a migration, you must create a valid ${highlighter.info(
+        "components.json"
+      )} file by running the ${highlighter.info("init")} command.`
+    )
+    logger.error(
+      `Learn more at ${highlighter.info(
+        "https://ui.shadcn.com/docs/components-json"
+      )}.`
+    )
+    logger.break()
+    process.exit(1)
+  }
+}
diff --git a/packages/shadcn/src/utils/add-components.ts b/packages/shadcn/src/utils/add-components.ts
index ee5342ee944..b0022fc820d 100644
--- a/packages/shadcn/src/utils/add-components.ts
+++ b/packages/shadcn/src/utils/add-components.ts
@@ -1,12 +1,28 @@
-import { type Config } from "@/src/utils/get-config"
+import path from "path"
+import {
+  configSchema,
+  findCommonRoot,
+  findPackageRoot,
+  getWorkspaceConfig,
+  workspaceConfigSchema,
+  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 {
+  fetchRegistry,
+  getRegistryParentMap,
+  getRegistryTypeAliasMap,
+  registryResolveItemsTree,
+  resolveRegistryItems,
+} from "@/src/utils/registry"
+import { registryItemSchema } from "@/src/utils/registry/schema"
 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 { z } from "zod"
 
 export async function addComponents(
   components: string[],
@@ -24,6 +40,30 @@ 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()
@@ -54,3 +94,166 @@ 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()
+  let registryItems = await resolveRegistryItems(components, config)
+  let 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.
+    let targetConfig =
+      component.type === "registry:ui" || registryParent?.type === "registry:ui"
+        ? workspaceConfig.ui
+        : config
+
+    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,
+      })
+      filesUpdated.push(
+        path.relative(workspaceRoot, targetConfig.resolvedPaths.tailwindConfig)
+      )
+    }
+
+    // 2. Update css vars.
+    if (component.cssVars) {
+      await updateCssVars(component.cssVars, targetConfig, {
+        silent: true,
+      })
+      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/shadcn/src/utils/create-project.ts b/packages/shadcn/src/utils/create-project.ts
index 3577e193845..7d70653f51f 100644
--- a/packages/shadcn/src/utils/create-project.ts
+++ b/packages/shadcn/src/utils/create-project.ts
@@ -1,57 +1,92 @@
+import os from "os"
 import path from "path"
 import { initOptionsSchema } from "@/src/commands/init"
 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 { fetchRegistry } from "@/src/utils/registry"
 import { spinner } from "@/src/utils/spinner"
 import { execa } from "execa"
 import fs from "fs-extra"
 import prompts from "prompts"
 import { z } from "zod"
 
+const MONOREPO_TEMPLATE_URL =
+  "https://codeload.github.com/shadcn-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: string = "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 {
@@ -68,16 +103,47 @@ export async function createProject(
     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.`
   ).start()
@@ -90,13 +156,17 @@ export async function createProject(
     "--app",
     options.srcDir ? "--src-dir" : "--no-src-dir",
     "--no-import-alias",
-    `--use-${packageManager}`,
+    `--use-${options.packageManager}`,
   ]
 
+  if (options.version.startsWith("15")) {
+    args.push("--turbopack")
+  }
+
   try {
     await execa(
       "npx",
-      ["create-next-app@14.2.16", projectPath, "--silent", ...args],
+      [`create-next-app@${options.version}`, projectPath, "--silent", ...args],
       {
         cwd: options.cwd,
       }
@@ -110,9 +180,60 @@ export async function createProject(
   }
 
   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(), `shadcn-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/shadcn/src/utils/get-config.ts b/packages/shadcn/src/utils/get-config.ts
index fafb395015f..d3477ae3272 100644
--- a/packages/shadcn/src/utils/get-config.ts
+++ b/packages/shadcn/src/utils/get-config.ts
@@ -2,6 +2,8 @@ import path from "path"
 import { highlighter } from "@/src/utils/highlighter"
 import { resolveImport } from "@/src/utils/resolve-import"
 import { cosmiconfig } from "cosmiconfig"
+import fg from "fast-glob"
+import fs from "fs-extra"
 import { loadConfig } from "tsconfig-paths"
 import { z } from "zod"
 
@@ -38,6 +40,7 @@ export const rawConfigSchema = z
       lib: z.string().optional(),
       hooks: z.string().optional(),
     }),
+    iconLibrary: z.string().optional(),
   })
   .strict()
 
@@ -58,6 +61,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)
 
@@ -65,6 +72,11 @@ export async function getConfig(cwd: string) {
     return null
   }
 
+  // Set default icon library if not provided.
+  if (!config.iconLibrary) {
+    config.iconLibrary = config.style === "new-york" ? "radix" : "lucide"
+  }
+
   return await resolveConfigPaths(cwd, config)
 }
 
@@ -131,3 +143,77 @@ export async function getRawConfig(cwd: string): Promise<RawConfig | null> {
     )
   }
 }
+
+// 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) {
+  let 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/shadcn/src/utils/get-project-info.ts b/packages/shadcn/src/utils/get-project-info.ts
index cd1f47ce8fa..741c9c6b505 100644
--- a/packages/shadcn/src/utils/get-project-info.ts
+++ b/packages/shadcn/src/utils/get-project-info.ts
@@ -10,6 +10,7 @@ import { getPackageInfo } from "@/src/utils/get-package-info"
 import fg from "fast-glob"
 import fs from "fs-extra"
 import { loadConfig } from "tsconfig-paths"
+import { z } from "zod"
 
 type ProjectInfo = {
   framework: Framework
@@ -29,6 +30,12 @@ const PROJECT_SHARED_IGNORE = [
   "build",
 ]
 
+const TS_CONFIG_SCHEMA = z.object({
+  compilerOptions: z.object({
+    paths: z.record(z.string().or(z.array(z.string()))),
+  }),
+})
+
 export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
   const [
     configFiles,
@@ -153,7 +160,10 @@ export async function getTailwindConfigFile(cwd: string) {
 export async function getTsConfigAliasPrefix(cwd: string) {
   const tsConfig = await loadConfig(cwd)
 
-  if (tsConfig?.resultType === "failed" || !tsConfig?.paths) {
+  if (
+    tsConfig?.resultType === "failed" ||
+    !Object.entries(tsConfig?.paths).length
+  ) {
     return null
   }
 
@@ -165,11 +175,12 @@ export async function getTsConfigAliasPrefix(cwd: string) {
       paths.includes("./app/*") ||
       paths.includes("./resources/js/*") // Laravel.
     ) {
-      return alias.at(0) ?? null
+      return alias.replace(/\/\*$/, "") ?? null
     }
   }
 
-  return null
+  // Use the first alias as the prefix.
+  return Object.keys(tsConfig?.paths)?.[0].replace(/\/\*$/, "") ?? null
 }
 
 export async function isTypeScriptProject(cwd: string) {
@@ -182,19 +193,30 @@ export async function isTypeScriptProject(cwd: string) {
   return files.length > 0
 }
 
-export async function getTsConfig() {
-  try {
-    const tsconfigPath = path.join("tsconfig.json")
-    const tsconfig = await fs.readJSON(tsconfigPath)
+export async function getTsConfig(cwd: string) {
+  for (const fallback of [
+    "tsconfig.json",
+    "tsconfig.web.json",
+    "tsconfig.app.json",
+  ]) {
+    const filePath = path.resolve(cwd, fallback)
+    if (!(await fs.pathExists(filePath))) {
+      continue
+    }
 
-    if (!tsconfig) {
-      throw new Error("tsconfig.json is missing")
+    // 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 result = TS_CONFIG_SCHEMA.safeParse(JSON.parse(cleanedContents))
+
+    if (result.error) {
+      continue
     }
 
-    return tsconfig
-  } catch (error) {
-    return null
+    return result.data
   }
+
+  return null
 }
 
 export async function getProjectConfig(
@@ -233,6 +255,7 @@ export async function getProjectConfig(
       cssVariables: true,
       prefix: "",
     },
+    iconLibrary: "lucide",
     aliases: {
       components: `${projectInfo.aliasPrefix}/components`,
       ui: `${projectInfo.aliasPrefix}/components/ui`,
diff --git a/packages/shadcn/src/utils/icon-libraries.ts b/packages/shadcn/src/utils/icon-libraries.ts
new file mode 100644
index 00000000000..d0c30fcbd00
--- /dev/null
+++ b/packages/shadcn/src/utils/icon-libraries.ts
@@ -0,0 +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",
+  },
+}
diff --git a/packages/shadcn/src/utils/registry/index.ts b/packages/shadcn/src/utils/registry/index.ts
index 429ce4c4add..3c021610c29 100644
--- a/packages/shadcn/src/utils/registry/index.ts
+++ b/packages/shadcn/src/utils/registry/index.ts
@@ -4,6 +4,7 @@ import { handleError } from "@/src/utils/handle-error"
 import { highlighter } from "@/src/utils/highlighter"
 import { logger } from "@/src/utils/logger"
 import {
+  iconsSchema,
   registryBaseColorSchema,
   registryIndexSchema,
   registryItemFileSchema,
@@ -46,6 +47,16 @@ export async function getRegistryStyles() {
   }
 }
 
+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([
@@ -159,7 +170,7 @@ export async function getItemTargetPath(
   )
 }
 
-async function fetchRegistry(paths: string[]) {
+export async function fetchRegistry(paths: string[]) {
   try {
     const results = await Promise.all(
       paths.map(async (path) => {
@@ -270,17 +281,8 @@ export async function registryResolveItemsTree(
       names.unshift("index")
     }
 
-    let registryDependencies: string[] = []
-    for (const name of names) {
-      const itemRegistryDependencies = await resolveRegistryDependencies(
-        name,
-        config
-      )
-      registryDependencies.push(...itemRegistryDependencies)
-    }
-
-    const uniqueRegistryDependencies = Array.from(new Set(registryDependencies))
-    let result = await fetchRegistry(uniqueRegistryDependencies)
+    let registryItems = await resolveRegistryItems(names, config)
+    let result = await fetchRegistry(registryItems)
     const payload = z.array(registryItemSchema).parse(result)
 
     if (!payload) {
@@ -450,3 +452,44 @@ function isUrl(path: string) {
     return false
   }
 }
+
+// TODO: We're double-fetching here. Use a cache.
+export async function resolveRegistryItems(names: string[], config: Config) {
+  let 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/shadcn/src/utils/registry/schema.ts b/packages/shadcn/src/utils/registry/schema.ts
index 8f76d324b24..ebbb7cda827 100644
--- a/packages/shadcn/src/utils/registry/schema.ts
+++ b/packages/shadcn/src/utils/registry/schema.ts
@@ -64,6 +64,11 @@ export const stylesSchema = z.array(
   })
 )
 
+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()),
diff --git a/packages/shadcn/src/utils/transformers/index.ts b/packages/shadcn/src/utils/transformers/index.ts
index d8b447997ae..c9adaf92652 100644
--- a/packages/shadcn/src/utils/transformers/index.ts
+++ b/packages/shadcn/src/utils/transformers/index.ts
@@ -4,6 +4,7 @@ import path from "path"
 import { Config } from "@/src/utils/get-config"
 import { 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"
@@ -18,6 +19,7 @@ export type TransformOpts = {
   config: Config
   baseColor?: z.infer<typeof registryBaseColorSchema>
   transformJsx?: boolean
+  isRemote?: boolean
 }
 
 export type Transformer<Output = SourceFile> = (
@@ -42,6 +44,7 @@ export async function transform(
     transformRsc,
     transformCssVars,
     transformTwPrefixes,
+    transformIcons,
   ]
 ) {
   const tempFile = await createTempSourceFile(opts.filename)
@@ -50,7 +53,7 @@ export async function transform(
   })
 
   for (const transformer of transformers) {
-    transformer({ sourceFile, ...opts })
+    await transformer({ sourceFile, ...opts })
   }
 
   if (opts.transformJsx) {
diff --git a/packages/shadcn/src/utils/transformers/transform-icons.test.ts b/packages/shadcn/src/utils/transformers/transform-icons.test.ts
new file mode 100644
index 00000000000..bb4142fbfe6
--- /dev/null
+++ b/packages/shadcn/src/utils/transformers/transform-icons.test.ts
@@ -0,0 +1,140 @@
+import { type Config } from "@/src/utils/get-config"
+import { transformIcons } from "@/src/utils/transformers/transform-icons"
+import { describe, expect, test, vi } from "vitest"
+
+import { transform } from "../transformers"
+
+const testConfig: Config = {
+  style: "new-york",
+  tsx: true,
+  rsc: true,
+  tailwind: {
+    baseColor: "neutral",
+    cssVariables: true,
+    config: "tailwind.config.ts",
+    css: "tailwind.css",
+  },
+  aliases: {
+    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",
+  },
+}
+
+vi.mock("@/src/utils/registry", () => ({
+  getRegistryIcons: () => ({
+    Check: {
+      lucide: "Check",
+      radix: "CheckIcon",
+    },
+    ChevronDown: {
+      lucide: "ChevronDown",
+      radix: "ChevronDownIcon",
+    },
+    ChevronLeft: {
+      lucide: "ChevronLeft",
+      radix: "ChevronLeftIcon",
+    },
+  }),
+}))
+
+describe("transformIcons", () => {
+  test("transforms radix icons", async () => {
+    expect(
+      await transform(
+        {
+          filename: "test.ts",
+          raw: `import * as React from "react"
+import { Check } from "lucide-react"
+
+export function Component() {
+return <div><Check /></div>
+}
+  `,
+          config: {
+            ...testConfig,
+            iconLibrary: "radix",
+          },
+        },
+        [transformIcons]
+      )
+    ).toMatchInlineSnapshot(`
+      "import * as React from "react"
+      import { CheckIcon } from "@radix-ui/react-icons"
+
+      export function Component() {
+      return <div><CheckIcon /></div>
+      }
+        "
+    `)
+  })
+
+  test("does not transform lucide icons", async () => {
+    expect(
+      await transform(
+        {
+          filename: "test.ts",
+          raw: `import * as React from "react"
+import { Check } from "lucide-react"
+
+export function Component() {
+  return <div><Check /></div>
+}
+    `,
+          config: {
+            ...testConfig,
+            iconLibrary: "lucide",
+          },
+        },
+        [transformIcons]
+      )
+    ).toMatchInlineSnapshot(`
+    "import * as React from "react"
+    import { Check } from "lucide-react"
+
+    export function Component() {
+      return <div><Check /></div>
+    }
+        "
+    `)
+  })
+
+  test("preserves semicolon", async () => {
+    expect(
+      await transform(
+        {
+          filename: "test.ts",
+          raw: `import * as React from "react";
+import { ChevronDown } from "lucide-react";
+
+export function Component() {
+  return <div><ChevronDown /></div>
+}
+    `,
+          config: {
+            ...testConfig,
+            iconLibrary: "radix",
+          },
+        },
+        [transformIcons]
+      )
+    ).toMatchInlineSnapshot(`
+      "import * as React from "react";
+      import { ChevronDownIcon } from "@radix-ui/react-icons";
+
+      export function Component() {
+        return <div><ChevronDownIcon /></div>
+      }
+          "
+    `)
+  })
+})
diff --git a/packages/shadcn/src/utils/transformers/transform-icons.ts b/packages/shadcn/src/utils/transformers/transform-icons.ts
new file mode 100644
index 00000000000..838c8be88b5
--- /dev/null
+++ b/packages/shadcn/src/utils/transformers/transform-icons.ts
@@ -0,0 +1,82 @@
+import { ICON_LIBRARIES } from "@/src/utils/icon-libraries"
+import { getRegistryIcons } from "@/src/utils/registry"
+import { Transformer } from "@/src/utils/transformers"
+import { SourceFile, SyntaxKind } from "ts-morph"
+
+// Lucide is the default icon library in the registry.
+const SOURCE_LIBRARY = "lucide"
+
+export const transformIcons: Transformer = async ({ sourceFile, config }) => {
+  // No transform if we cannot read the icon library.
+  if (!config.iconLibrary || !(config.iconLibrary in ICON_LIBRARIES)) {
+    return sourceFile
+  }
+
+  const registryIcons = await getRegistryIcons()
+  const sourceLibrary = SOURCE_LIBRARY
+  const targetLibrary = config.iconLibrary
+
+  if (sourceLibrary === targetLibrary) {
+    return sourceFile
+  }
+
+  let targetedIcons: string[] = []
+  for (const importDeclaration of sourceFile.getImportDeclarations() ?? []) {
+    if (
+      importDeclaration.getModuleSpecifier()?.getText() !==
+      `"${ICON_LIBRARIES[SOURCE_LIBRARY].import}"`
+    ) {
+      continue
+    }
+
+    for (const specifier of importDeclaration.getNamedImports() ?? []) {
+      const iconName = specifier.getName()
+
+      const targetedIcon = registryIcons[iconName]?.[targetLibrary]
+
+      if (!targetedIcon || targetedIcons.includes(targetedIcon)) {
+        continue
+      }
+
+      targetedIcons.push(targetedIcon)
+
+      // Remove the named import.
+      specifier.remove()
+
+      // Replace with the targeted icon.
+      sourceFile
+        .getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement)
+        .filter((node) => node.getTagNameNode()?.getText() === iconName)
+        .forEach((node) => node.getTagNameNode()?.replaceWithText(targetedIcon))
+    }
+
+    // If the named import is empty, remove the import declaration.
+    if (importDeclaration.getNamedImports()?.length === 0) {
+      importDeclaration.remove()
+    }
+  }
+
+  if (targetedIcons.length > 0) {
+    const iconImportDeclaration = sourceFile.addImportDeclaration({
+      moduleSpecifier:
+        ICON_LIBRARIES[targetLibrary as keyof typeof ICON_LIBRARIES]?.import,
+      namedImports: targetedIcons.map((icon) => ({
+        name: icon,
+      })),
+    })
+
+    if (!_useSemicolon(sourceFile)) {
+      iconImportDeclaration.replaceWithText(
+        iconImportDeclaration.getText().replace(";", "")
+      )
+    }
+  }
+
+  return sourceFile
+}
+
+function _useSemicolon(sourceFile: SourceFile) {
+  return (
+    sourceFile.getImportDeclarations()?.[0]?.getText().endsWith(";") ?? false
+  )
+}
diff --git a/packages/shadcn/src/utils/transformers/transform-import.ts b/packages/shadcn/src/utils/transformers/transform-import.ts
index cb0c700bec7..17551bfbddb 100644
--- a/packages/shadcn/src/utils/transformers/transform-import.ts
+++ b/packages/shadcn/src/utils/transformers/transform-import.ts
@@ -1,24 +1,39 @@
 import { Config } from "@/src/utils/get-config"
 import { 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
+      config,
+      isRemote
     )
 
     importDeclaration.setModuleSpecifier(moduleSpecifier)
 
     // Replace `import { cn } 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() === "cn")
       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 +42,25 @@ export const transformImport: Transformer = async ({ sourceFile, config }) => {
   return sourceFile
 }
 
-function updateImportAliases(moduleSpecifier: string, config: Config) {
+function updateImportAliases(
+  moduleSpecifier: string,
+  config: Config,
+  isRemote: boolean = 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/new-york/`)
+  }
+
   // Not a registry import.
   if (!moduleSpecifier.startsWith("@/registry/")) {
-    // We fix the alias an return.
-    const alias = config.aliases.components.charAt(0)
+    // We fix the alias and return.
+    const alias = config.aliases.components.split("/")[0]
     return moduleSpecifier.replace(/^@\//, `${alias}/`)
   }
 
diff --git a/packages/shadcn/src/utils/updaters/update-dependencies.ts b/packages/shadcn/src/utils/updaters/update-dependencies.ts
index ad3c1af5abd..7207ba0f5a4 100644
--- a/packages/shadcn/src/utils/updaters/update-dependencies.ts
+++ b/packages/shadcn/src/utils/updaters/update-dependencies.ts
@@ -34,7 +34,7 @@ export async function updateDependencies(
   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 (see https://ui.shadcn.com/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://ui.shadcn.com/react-19).\n"
     )
     const confirmation = await prompts([
       {
@@ -66,6 +66,7 @@ export async function updateDependencies(
       cwd: config.resolvedPaths.cwd,
     }
   )
+
   dependenciesSpinner?.succeed()
 }
 
diff --git a/packages/shadcn/src/utils/updaters/update-files.ts b/packages/shadcn/src/utils/updaters/update-files.ts
index 3a06110e562..bf90f5caceb 100644
--- a/packages/shadcn/src/utils/updaters/update-files.ts
+++ b/packages/shadcn/src/utils/updaters/update-files.ts
@@ -12,6 +12,7 @@ import { 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"
@@ -37,15 +38,22 @@ export async function updateFiles(
     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.`, {
@@ -82,8 +90,12 @@ export async function updateFiles(
     }
 
     const existingFile = existsSync(filePath)
+
     if (existingFile && !options.overwrite) {
       filesCreatedSpinner.stop()
+      if (options.rootSpinner) {
+        options.rootSpinner.stop()
+      }
       const { overwrite } = await prompts({
         type: "confirm",
         name: "overwrite",
@@ -95,9 +107,15 @@ export async function updateFiles(
 
       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,8 +131,15 @@ export async function updateFiles(
         config,
         baseColor,
         transformJsx: !config.tsx,
+        isRemote: options.isRemote,
       },
-      [transformImport, transformRsc, transformCssVars, transformTwPrefixes]
+      [
+        transformImport,
+        transformRsc,
+        transformCssVars,
+        transformTwPrefixes,
+        transformIcons,
+      ]
     )
 
     await fs.writeFile(filePath, content, "utf-8")
@@ -163,7 +188,7 @@ export async function updateFiles(
     spinner(
       `Skipped ${filesSkipped.length} ${
         filesUpdated.length === 1 ? "file" : "files"
-      }:`,
+      }: (use --overwrite to overwrite)`,
       {
         silent: options.silent,
       }
@@ -178,4 +203,10 @@ export async function updateFiles(
   if (!options.silent) {
     logger.break()
   }
+
+  return {
+    filesCreated,
+    filesUpdated,
+    filesSkipped,
+  }
 }
diff --git a/packages/shadcn/src/utils/updaters/update-tailwind-config.ts b/packages/shadcn/src/utils/updaters/update-tailwind-config.ts
index f344d03643e..2384f32c5b8 100644
--- a/packages/shadcn/src/utils/updaters/update-tailwind-config.ts
+++ b/packages/shadcn/src/utils/updaters/update-tailwind-config.ts
@@ -9,6 +9,7 @@ import deepmerge from "deepmerge"
 import objectToString from "stringify-object"
 import { type Config as TailwindConfig } from "tailwindcss"
 import {
+  ArrayLiteralExpression,
   ObjectLiteralExpression,
   Project,
   PropertyAssignment,
@@ -194,8 +195,11 @@ async function addTailwindConfigTheme(
   if (themeInitializer?.isKind(SyntaxKind.ObjectLiteralExpression)) {
     const themeObjectString = themeInitializer.getText()
     const themeObject = await parseObjectLiteral(themeObjectString)
-    const result = deepmerge(themeObject, theme)
+    const result = deepmerge(themeObject, theme, {
+      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 [
@@ -287,7 +291,8 @@ export function nestSpreadProperties(obj: ObjectLiteralExpression) {
 
       // Replace spread with a property assignment
       obj.insertPropertyAssignment(i, {
-        name: `___${spreadText.replace(/^\.\.\./, "")}`,
+        // Need to escape the name with " so that deepmerge doesn't mishandle the key
+        name: `"___${spreadText.replace(/^\.\.\./, "")}"`,
         initializer: `"...${spreadText.replace(/^\.\.\./, "")}"`,
       })
 
@@ -305,11 +310,41 @@ export function nestSpreadProperties(obj: ObjectLiteralExpression) {
         nestSpreadProperties(
           initializer.asKindOrThrow(SyntaxKind.ObjectLiteralExpression)
         )
+      } else if (
+        initializer &&
+        initializer.isKind(SyntaxKind.ArrayLiteralExpression)
+      ) {
+        nestSpreadElements(
+          initializer.asKindOrThrow(SyntaxKind.ArrayLiteralExpression)
+        )
       }
     }
   }
 }
 
+export function nestSpreadElements(arr: ArrayLiteralExpression) {
+  const elements = arr.getElements()
+  for (let j = 0; j < elements.length; j++) {
+    const element = elements[j]
+    if (element.isKind(SyntaxKind.ObjectLiteralExpression)) {
+      // Recursive check on objects within arrays
+      nestSpreadProperties(
+        element.asKindOrThrow(SyntaxKind.ObjectLiteralExpression)
+      )
+    } else if (element.isKind(SyntaxKind.ArrayLiteralExpression)) {
+      // Recursive check on nested arrays
+      nestSpreadElements(
+        element.asKindOrThrow(SyntaxKind.ArrayLiteralExpression)
+      )
+    } else if (element.isKind(SyntaxKind.SpreadElement)) {
+      const spreadText = element.getText()
+      // Spread element within an array
+      arr.removeElement(j)
+      arr.insertElement(j, `"${spreadText}"`)
+    }
+  }
+}
+
 export function unnestSpreadProperties(obj: ObjectLiteralExpression) {
   const properties = obj.getProperties()
 
@@ -319,14 +354,49 @@ export function unnestSpreadProperties(obj: ObjectLiteralExpression) {
       const propAssignment = prop as PropertyAssignment
       const initializer = propAssignment.getInitializer()
 
-      if (initializer?.isKind(SyntaxKind.StringLiteral)) {
-        const value = initializer.getLiteralValue()
+      if (initializer && initializer.isKind(SyntaxKind.StringLiteral)) {
+        const value = initializer
+          .asKindOrThrow(SyntaxKind.StringLiteral)
+          .getLiteralValue()
         if (value.startsWith("...")) {
           obj.insertSpreadAssignment(i, { expression: value.slice(3) })
           propAssignment.remove()
         }
       } else if (initializer?.isKind(SyntaxKind.ObjectLiteralExpression)) {
         unnestSpreadProperties(initializer as ObjectLiteralExpression)
+      } else if (
+        initializer &&
+        initializer.isKind(SyntaxKind.ArrayLiteralExpression)
+      ) {
+        unnsetSpreadElements(
+          initializer.asKindOrThrow(SyntaxKind.ArrayLiteralExpression)
+        )
+      }
+    }
+  }
+}
+
+export function unnsetSpreadElements(arr: ArrayLiteralExpression) {
+  const elements = arr.getElements()
+  for (let j = 0; j < elements.length; j++) {
+    const element = elements[j]
+    if (element.isKind(SyntaxKind.ObjectLiteralExpression)) {
+      // Recursive check on objects within arrays
+      unnestSpreadProperties(
+        element.asKindOrThrow(SyntaxKind.ObjectLiteralExpression)
+      )
+    } else if (element.isKind(SyntaxKind.ArrayLiteralExpression)) {
+      // Recursive check on nested arrays
+      unnsetSpreadElements(
+        element.asKindOrThrow(SyntaxKind.ArrayLiteralExpression)
+      )
+    } else if (element.isKind(SyntaxKind.StringLiteral)) {
+      const spreadText = element.getText()
+      // check if spread element
+      const spreadTest = /(?:^['"])(\.\.\..*)(?:['"]$)/g
+      if (spreadTest.test(spreadText)) {
+        arr.removeElement(j)
+        arr.insertElement(j, spreadText.replace(spreadTest, "$1"))
       }
     }
   }
@@ -363,6 +433,12 @@ function parseObjectLiteralExpression(node: ObjectLiteralExpression): any {
         result[name] = parseObjectLiteralExpression(
           property.getInitializer() as ObjectLiteralExpression
         )
+      } else if (
+        property.getInitializer()?.isKind(SyntaxKind.ArrayLiteralExpression)
+      ) {
+        result[name] = parseArrayLiteralExpression(
+          property.getInitializer() as ArrayLiteralExpression
+        )
       } else {
         result[name] = parseValue(property.getInitializer())
       }
@@ -371,12 +447,34 @@ function parseObjectLiteralExpression(node: ObjectLiteralExpression): any {
   return result
 }
 
+function parseArrayLiteralExpression(node: ArrayLiteralExpression): any[] {
+  const result: any[] = []
+  for (const element of node.getElements()) {
+    if (element.isKind(SyntaxKind.ObjectLiteralExpression)) {
+      result.push(
+        parseObjectLiteralExpression(
+          element.asKindOrThrow(SyntaxKind.ObjectLiteralExpression)
+        )
+      )
+    } else if (element.isKind(SyntaxKind.ArrayLiteralExpression)) {
+      result.push(
+        parseArrayLiteralExpression(
+          element.asKindOrThrow(SyntaxKind.ArrayLiteralExpression)
+        )
+      )
+    } else {
+      result.push(parseValue(element))
+    }
+  }
+  return result
+}
+
 function parseValue(node: any): any {
-  switch (node.kind) {
+  switch (node.getKind()) {
     case SyntaxKind.StringLiteral:
-      return node.text
+      return node.getText()
     case SyntaxKind.NumericLiteral:
-      return Number(node.text)
+      return Number(node.getText())
     case SyntaxKind.TrueKeyword:
       return true
     case SyntaxKind.FalseKeyword:
@@ -384,7 +482,9 @@ function parseValue(node: any): any {
     case SyntaxKind.NullKeyword:
       return null
     case SyntaxKind.ArrayLiteralExpression:
-      return node.elements.map(parseValue)
+      return node.getElements().map(parseValue)
+    case SyntaxKind.ObjectLiteralExpression:
+      return parseObjectLiteralExpression(node)
     default:
       return node.getText()
   }
diff --git a/packages/shadcn/test/fixtures/config-full/components.json b/packages/shadcn/test/fixtures/config-full/components.json
index b27c6981578..b7e6404d072 100644
--- a/packages/shadcn/test/fixtures/config-full/components.json
+++ b/packages/shadcn/test/fixtures/config-full/components.json
@@ -14,5 +14,6 @@
     "lib": "~/lib",
     "hooks": "~/lib/hooks",
     "ui": "~/ui"
-  }
+  },
+  "iconLibrary": "lucide"
 }
diff --git a/packages/shadcn/test/fixtures/config-jsx/components.json b/packages/shadcn/test/fixtures/config-jsx/components.json
index 92b1f5e029b..e805bc288dd 100644
--- a/packages/shadcn/test/fixtures/config-jsx/components.json
+++ b/packages/shadcn/test/fixtures/config-jsx/components.json
@@ -10,5 +10,6 @@
   "aliases": {
     "utils": "@/lib/utils",
     "components": "@/components"
-  }
+  },
+  "iconLibrary": "radix"
 }
diff --git a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/favicon.ico b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/favicon.ico
new file mode 100644
index 00000000000..718d6fea483
Binary files /dev/null and b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/favicon.ico differ
diff --git a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/globals.css b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/globals.css
new file mode 100644
index 00000000000..fd81e885836
--- /dev/null
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/globals.css
@@ -0,0 +1,27 @@
+@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/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/layout.tsx b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/layout.tsx
new file mode 100644
index 00000000000..ae845621236
--- /dev/null
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/layout.tsx
@@ -0,0 +1,22 @@
+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/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/other.css b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/other.css
new file mode 100644
index 00000000000..aa1634c2550
--- /dev/null
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/other.css
@@ -0,0 +1,3 @@
+body {
+  background-color: red;
+}
diff --git a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/page.tsx b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/page.tsx
new file mode 100644
index 00000000000..7a8286b5768
--- /dev/null
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/app/page.tsx
@@ -0,0 +1,113 @@
+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/shadcn/test/fixtures/frameworks/next-app-custom-alias/next-env.d.ts b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/next-env.d.ts
new file mode 100644
index 00000000000..4f11a03dc6c
--- /dev/null
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/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/basic-features/typescript for more information.
diff --git a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/next.config.ts b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/next.config.ts
new file mode 100644
index 00000000000..767719fc4fb
--- /dev/null
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/next.config.ts
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig
diff --git a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/package.json b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/package.json
new file mode 100644
index 00000000000..d43fb081b9a
--- /dev/null
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/package.json
@@ -0,0 +1,11 @@
+{
+  "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/shadcn/test/fixtures/frameworks/next-app-custom-alias/postcss.config.js b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/postcss.config.js
new file mode 100644
index 00000000000..33ad091d26d
--- /dev/null
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/tailwind.config.ts b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/tailwind.config.ts
new file mode 100644
index 00000000000..571ebb0f90a
--- /dev/null
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/tailwind.config.ts
@@ -0,0 +1,21 @@
+// @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/shadcn/test/fixtures/frameworks/next-app-custom-alias/tsconfig.json b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/tsconfig.json
new file mode 100644
index 00000000000..0751e3ea82b
--- /dev/null
+++ b/packages/shadcn/test/fixtures/frameworks/next-app-custom-alias/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "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/shadcn/test/utils/__snapshots__/transform-import.test.ts.snap b/packages/shadcn/test/utils/__snapshots__/transform-import.test.ts.snap
index 6e1c2d033c6..75d1bd98d3c 100644
--- a/packages/shadcn/test/utils/__snapshots__/transform-import.test.ts.snap
+++ b/packages/shadcn/test/utils/__snapshots__/transform-import.test.ts.snap
@@ -58,3 +58,14 @@ import { Foo } from "bar"
     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 { cn } from "@custom-alias/lib/utils"
+    "
+`;
diff --git a/packages/shadcn/test/utils/get-config.test.ts b/packages/shadcn/test/utils/get-config.test.ts
index c55473db698..a783ac7e220 100644
--- a/packages/shadcn/test/utils/get-config.test.ts
+++ b/packages/shadcn/test/utils/get-config.test.ts
@@ -86,6 +86,7 @@ test("get config", async () => {
       hooks: path.resolve(__dirname, "../fixtures/config-partial", "./hooks"),
       lib: path.resolve(__dirname, "../fixtures/config-partial", "./lib"),
     },
+    iconLibrary: "lucide",
   })
 
   expect(
@@ -108,6 +109,7 @@ test("get config", async () => {
       hooks: "~/lib/hooks",
       ui: "~/ui",
     },
+    iconLibrary: "lucide",
     resolvedPaths: {
       cwd: path.resolve(__dirname, "../fixtures/config-full"),
       tailwindConfig: path.resolve(
@@ -156,6 +158,7 @@ test("get config", async () => {
       components: "@/components",
       utils: "@/lib/utils",
     },
+    iconLibrary: "radix",
     resolvedPaths: {
       cwd: path.resolve(__dirname, "../fixtures/config-jsx"),
       tailwindConfig: path.resolve(
diff --git a/packages/shadcn/test/utils/get-ts-config-alias-prefix.test.ts b/packages/shadcn/test/utils/get-ts-config-alias-prefix.test.ts
index af0828a5309..17acb7a5c7f 100644
--- a/packages/shadcn/test/utils/get-ts-config-alias-prefix.test.ts
+++ b/packages/shadcn/test/utils/get-ts-config-alias-prefix.test.ts
@@ -25,6 +25,10 @@ describe("get ts config alias prefix", async () => {
       name: "t3-app",
       prefix: "~",
     },
+    {
+      name: "next-app-custom-alias",
+      prefix: "@custom-alias",
+    },
   ])(`getTsConfigAliasPrefix($name) -> $prefix`, async ({ name, prefix }) => {
     expect(
       await getTsConfigAliasPrefix(
diff --git a/packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap b/packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap
index 308c60901f9..4f950ec2b3d 100644
--- a/packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap
+++ b/packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap
@@ -28,6 +28,7 @@ export function cn(...inputs: ClassValue[]) {
 }
 ",
       "path": "lib/utils.ts",
+      "target": "",
       "type": "registry:lib",
     },
     {
@@ -238,16 +239,13 @@ export { Button, buttonVariants }
 
 import { cn } from "@/lib/utils"
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm 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",
+          "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}
@@ -290,9 +288,7 @@ const Command = React.forwardRef<
 ))
 Command.displayName = CommandPrimitive.displayName
 
-interface CommandDialogProps extends DialogProps {}
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg">
diff --git a/packages/shadcn/test/utils/transform-import.test.ts b/packages/shadcn/test/utils/transform-import.test.ts
index a7ad3e8306b..477c5235fbc 100644
--- a/packages/shadcn/test/utils/transform-import.test.ts
+++ b/packages/shadcn/test/utils/transform-import.test.ts
@@ -117,4 +117,29 @@ import { Foo } from "bar"
       },
     })
   ).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/new-york/box"
+
+    import { cn } 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/shadcn/test/utils/updaters/__snapshots__/update-tailwind-config.test.ts.snap b/packages/shadcn/test/utils/updaters/__snapshots__/update-tailwind-config.test.ts.snap
index 9bcb300ea52..ec6f1646826 100644
--- a/packages/shadcn/test/utils/updaters/__snapshots__/update-tailwind-config.test.ts.snap
+++ b/packages/shadcn/test/utils/updaters/__snapshots__/update-tailwind-config.test.ts.snap
@@ -324,8 +324,14 @@ const config: Config = {
   theme: {
   	extend: {
   		fontFamily: {
-  			sans: ["var(--font-geist-sans)", ...fontFamily.sans],
-  			mono: ["var(--font-mono)", ...fontFamily.mono],
+  			sans: [
+  				'var(--font-geist-sans)',
+                    ...fontFamily.sans
+                ],
+  			mono: [
+  				'var(--font-mono)',
+                    ...fontFamily.mono
+                ],
   			heading: [
   				'var(--font-geist-sans)'
   			]
@@ -369,6 +375,75 @@ 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'
 
@@ -382,7 +457,10 @@ const config: Config = {
   theme: {
   	extend: {
   		fontFamily: {
-  			sans: ['Figtree', ...defaultTheme.fontFamily.sans]
+  			sans: [
+  				'Figtree',
+                    ...defaultTheme.fontFamily.sans
+                ]
   		},
   		colors: {
                 ...defaultColors,
@@ -448,6 +526,12 @@ const config: Config = {
   ],
   theme: {
   	extend: {
+  		fontFamily: {
+  			sans: [
+  				'ui-sans-serif',
+  				'sans-serif'
+  			]
+  		},
   		colors: {
   			background: 'hsl(var(--background))',
   			foreground: 'hsl(var(--foreground))',
@@ -466,3 +550,23 @@ const config: Config = {
 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/shadcn/test/utils/updaters/update-tailwind-config.test.ts b/packages/shadcn/test/utils/updaters/update-tailwind-config.test.ts
index c7e4350c79c..c18e138ca3f 100644
--- a/packages/shadcn/test/utils/updaters/update-tailwind-config.test.ts
+++ b/packages/shadcn/test/utils/updaters/update-tailwind-config.test.ts
@@ -2,10 +2,10 @@ import { Project, SyntaxKind } from "ts-morph"
 import { beforeEach, describe, expect, test } from "vitest"
 
 import {
-  buildTailwindThemeColorsFromCssVars,
+  buildTailwindThemeColorsFromCssVars, nestSpreadElements,
   nestSpreadProperties,
   transformTailwindConfig,
-  unnestSpreadProperties,
+  unnestSpreadProperties, unnsetSpreadElements,
 } from "../../../src/utils/updaters/update-tailwind-config"
 
 const SHARED_CONFIG = {
@@ -522,6 +522,12 @@ const config: Config = {
   ],
   theme: {
     extend: {
+      fontFamily: {
+        sans: [
+          "ui-sans-serif",
+          "sans-serif",
+        ],
+      },
       colors: {
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
@@ -809,6 +815,123 @@ export default 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", () => {
@@ -837,36 +960,137 @@ describe("nestSpreadProperties", () => {
   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" } } }`
+      `{ 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" } }`
+      `{ "___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" }`
+      `{ "___foo": "...foo", "___bar": "...bar", "___baz": "...baz" }`
     )
   })
 
   test("should handle property name conflicts", () => {
-    testTransformation(`{ foo: 1, ...foo }`, `{ foo: 1, ___foo: "...foo" }`)
+    testTransformation(`{ foo: 1, ...foo }`, `{ foo: 1, "___foo": "...foo" }`)
   })
 
   test("should handle shorthand property names", () => {
-    testTransformation(`{ a, ...foo, b }`, `{ a, ___foo: "...foo", b }`)
+    testTransformation(`{ a, ...foo, b }`, `{ a, "___foo": "...foo", b }`)
   })
 
   test("should handle computed property names", () => {
     testTransformation(
       `{ ["computed"]: 1, ...foo }`,
-      `{ ["computed"]: 1, ___foo: "...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]"] }]`
     )
   })
 })
@@ -925,10 +1149,119 @@ describe("unnestSpreadProperties", () => {
 
   test("should handle computed property names", () => {
     testTransformation(
-      `{ ["computed"]: 1, ___foo: "...foo" }`,
+      `{ ["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", () => {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0467c27a585..6238340ef9f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -252,9 +252,9 @@ importers:
       jotai:
         specifier: ^2.1.0
         version: 2.1.0(react@18.2.0)
-      lodash.template:
-        specifier: ^4.5.0
-        version: 4.5.0
+      lodash:
+        specifier: ^4.17.21
+        version: 4.17.21
       lucide-react:
         specifier: 0.359.0
         version: 0.359.0(react@18.2.0)
@@ -268,8 +268,8 @@ importers:
         specifier: ^0.4.6
         version: 0.4.6(contentlayer2@0.4.6(esbuild@0.17.19)(markdown-wasm@1.2.0))(esbuild@0.17.19)(markdown-wasm@1.2.0)(next@14.3.0-canary.43(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       next-themes:
-        specifier: ^0.2.1
-        version: 0.2.1(next@14.3.0-canary.43(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^0.4.3
+        version: 0.4.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -307,8 +307,8 @@ importers:
         specifier: ^22.0.0
         version: 22.0.0
       vaul:
-        specifier: 0.9.0
-        version: 0.9.0(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 1.1.1
+        version: 1.1.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       zod:
         specifier: ^3.21.4
         version: 3.21.4
@@ -316,9 +316,9 @@ importers:
       '@shikijs/compat':
         specifier: ^1.1.7
         version: 1.1.7
-      '@types/lodash.template':
-        specifier: ^4.5.1
-        version: 4.5.1
+      '@types/lodash':
+        specifier: ^4.17.7
+        version: 4.17.7
       '@types/node':
         specifier: ^17.0.45
         version: 17.0.45
@@ -421,9 +421,9 @@ importers:
       https-proxy-agent:
         specifier: ^6.2.0
         version: 6.2.0
-      lodash.template:
-        specifier: ^4.5.0
-        version: 4.5.0
+      lodash:
+        specifier: ^4.17.21
+        version: 4.17.21
       node-fetch:
         specifier: ^3.3.0
         version: 3.3.0
@@ -455,9 +455,9 @@ importers:
       '@types/fs-extra':
         specifier: ^11.0.1
         version: 11.0.1
-      '@types/lodash.template':
-        specifier: ^4.5.1
-        version: 4.5.1
+      '@types/lodash':
+        specifier: ^4.17.7
+        version: 4.17.7
       '@types/prompts':
         specifier: ^2.4.2
         version: 2.4.2
@@ -466,7 +466,7 @@ importers:
         version: 4.1.3
       tsup:
         specifier: ^6.6.3
-        version: 6.6.3(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.11.27)(typescript@4.9.5))(typescript@4.9.5)
+        version: 6.6.3(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5))(typescript@4.9.5)
       type-fest:
         specifier: ^3.8.0
         version: 3.8.0
@@ -557,7 +557,7 @@ importers:
         version: 11.0.1
       '@types/lodash.template':
         specifier: ^4.5.1
-        version: 4.5.1
+        version: 4.5.3
       '@types/prompts':
         specifier: ^2.4.2
         version: 2.4.2
@@ -569,7 +569,7 @@ importers:
         version: 6.0.1
       tsup:
         specifier: ^6.6.3
-        version: 6.6.3(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.11.27)(typescript@4.9.5))(typescript@4.9.5)
+        version: 6.6.3(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5))(typescript@4.9.5)
       type-fest:
         specifier: ^3.8.0
         version: 3.8.0
@@ -2885,11 +2885,11 @@ packages:
   '@types/keyv@3.1.4':
     resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
 
-  '@types/lodash.template@4.5.1':
-    resolution: {integrity: sha512-0y71S2dGgmwdkSsyW95JBp8HSZchgKCsjr6F0lsT3eSMtaT3Nn9rcMHU1U4UKu6XjQT3YC6/PNwgFI7k9f+ltw==}
+  '@types/lodash.template@4.5.3':
+    resolution: {integrity: sha512-Mo0UYKLu1oXgkV9TVoXZLlXXjyIXlW7ZQRxi/4gQJmzJr63dmicE8gG0OkPjYTKBrBic852q0JzqrtNUWLBIyA==}
 
-  '@types/lodash@4.17.4':
-    resolution: {integrity: sha512-wYCP26ZLxaT3R39kiN2+HcJ4kTd3U1waI/cY7ivWYqFP6pW3ZNpvi6Wd6PHZx7T/t8z0vlkXMg3QYLa7DZ/IJQ==}
+  '@types/lodash@4.17.7':
+    resolution: {integrity: sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==}
 
   '@types/mdast@3.0.15':
     resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==}
@@ -5497,12 +5497,11 @@ packages:
       react: '*'
       react-dom: '*'
 
-  next-themes@0.2.1:
-    resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==}
+  next-themes@0.4.3:
+    resolution: {integrity: sha512-nG84VPkTdUHR2YeD89YchvV4I9RbiMAql3GiLEQlPvq1ioaqPaIReK+yMRdg/zgiXws620qS1rU30TiWmmG9lA==}
     peerDependencies:
-      next: '*'
-      react: '*'
-      react-dom: '*'
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
 
   next@14.3.0-canary.43:
     resolution: {integrity: sha512-d+Finbm5QXDN43SAkpqkinjRAU6o5tlJYsrKiWJqKmJYQ9/zB9WxjTeRuHVV1YJmLMSueO1zft88k+4cogJ/Ig==}
@@ -7036,11 +7035,11 @@ packages:
   validate-npm-package-name@3.0.0:
     resolution: {integrity: sha512-M6w37eVCMMouJ9V/sdPGnC5H4uDr73/+xdq0FBLO3TFFX1+7wiUY6Es328NN+y43tmY+doUdN9g9J21vqB7iLw==}
 
-  vaul@0.9.0:
-    resolution: {integrity: sha512-bZSySGbAHiTXmZychprnX/dE0EsSige88xtyyL3/MCRbrFotRPQZo7UdydGXZWw+CKbNOw5Ow8gwAo93/nB/Cg==}
+  vaul@1.1.1:
+    resolution: {integrity: sha512-+ejzF6ffQKPcfgS7uOrGn017g39F8SO4yLPXbBhpC7a0H+oPqPna8f1BUfXaz8eU4+pxbQcmjxW+jWBSbxjaFg==}
     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
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0
 
   vfile-location@4.1.0:
     resolution: {integrity: sha512-YF23YMyASIIJXpktBa4vIGLJ5Gs88UB/XePgqPmTa7cDA+JeO3yclbpheQYCHjVHBn/yePzrXuygIL+xbvRYHw==}
@@ -9803,11 +9802,11 @@ snapshots:
     dependencies:
       '@types/node': 20.14.0
 
-  '@types/lodash.template@4.5.1':
+  '@types/lodash.template@4.5.3':
     dependencies:
-      '@types/lodash': 4.17.4
+      '@types/lodash': 4.17.7
 
-  '@types/lodash@4.17.4': {}
+  '@types/lodash@4.17.7': {}
 
   '@types/mdast@3.0.15':
     dependencies:
@@ -11059,7 +11058,7 @@ snapshots:
       debug: 4.3.5
       enhanced-resolve: 5.16.1
       eslint: 8.44.0
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.44.0))(eslint@8.44.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.44.0)
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.44.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.5
@@ -11071,7 +11070,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.44.0))(eslint@8.44.0):
+  eslint-module-utils@2.8.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.44.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
@@ -11092,7 +11091,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.44.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.44.0))(eslint@8.44.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.61.0(eslint@8.44.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.44.0)
       hasown: 2.0.2
       is-core-module: 2.13.1
       is-glob: 4.0.3
@@ -13141,9 +13140,8 @@ snapshots:
       - markdown-wasm
       - supports-color
 
-  next-themes@0.2.1(next@14.3.0-canary.43(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  next-themes@0.4.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      next: 14.3.0-canary.43(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
@@ -13471,13 +13469,13 @@ snapshots:
       camelcase-css: 2.0.1
       postcss: 8.4.41
 
-  postcss-load-config@3.1.4(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.11.27)(typescript@4.9.5)):
+  postcss-load-config@3.1.4(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5)):
     dependencies:
       lilconfig: 2.1.0
       yaml: 1.10.2
     optionalDependencies:
       postcss: 8.4.41
-      ts-node: 10.9.2(@types/node@20.11.27)(typescript@4.9.5)
+      ts-node: 10.9.2(@types/node@20.14.0)(typescript@4.9.5)
 
   postcss-load-config@4.0.2(postcss@8.4.41)(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3)):
     dependencies:
@@ -14663,14 +14661,14 @@ snapshots:
       yn: 3.1.1
     optional: true
 
-  ts-node@10.9.2(@types/node@20.11.27)(typescript@4.9.5):
+  ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5):
     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.11.27
+      '@types/node': 20.14.0
       acorn: 8.11.3
       acorn-walk: 8.3.2
       arg: 4.1.3
@@ -14723,7 +14721,7 @@ snapshots:
 
   tslib@2.6.2: {}
 
-  tsup@6.6.3(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.11.27)(typescript@4.9.5))(typescript@4.9.5):
+  tsup@6.6.3(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5))(typescript@4.9.5):
     dependencies:
       bundle-require: 4.2.1(esbuild@0.17.19)
       cac: 6.7.14
@@ -14733,7 +14731,7 @@ snapshots:
       execa: 5.1.1
       globby: 11.1.0
       joycon: 3.1.1
-      postcss-load-config: 3.1.4(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.11.27)(typescript@4.9.5))
+      postcss-load-config: 3.1.4(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5))
       resolve-from: 5.0.0
       rollup: 3.29.4
       source-map: 0.8.0-beta.0
@@ -15026,7 +15024,7 @@ snapshots:
     dependencies:
       builtins: 1.0.3
 
-  vaul@0.9.0(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  vaul@1.1.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       '@radix-ui/react-dialog': 1.1.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 559a69b655e..156f9ba3762 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,5 +1,4 @@
 packages:
   - "apps/*"
   - "packages/*"
-  - "templates/*"
   - "!**/test/**"
diff --git a/prettier.config.cjs b/prettier.config.cjs
index aca2af710c0..2e8d7ea6605 100644
--- a/prettier.config.cjs
+++ b/prettier.config.cjs
@@ -10,6 +10,8 @@ module.exports = {
     "^(next/(.*)$)|^(next$)",
     "<THIRD_PARTY_MODULES>",
     "",
+    "^@workspace/(.*)$",
+    "",
     "^types$",
     "^@/types/(.*)$",
     "^@/config/(.*)$",
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index c0b524e0e66..04e06cae50a 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -5,14 +5,11 @@ module.exports = {
   darkMode: ["class"],
   content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
   theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
     extend: {
+      fontFamily: {
+        sans: ["var(--font-geist-sans)", ...fontFamily.sans],
+        mono: ["var(--font-geist-mono)", ...fontFamily.mono],
+      },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
@@ -64,10 +61,6 @@ module.exports = {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
-      fontFamily: {
-        sans: ["var(--font-geist-sans)", ...fontFamily.sans],
-        // mono: ["var(--font-mono)", ...fontFamily.mono],
-      },
       keyframes: {
         "accordion-down": {
           from: { height: "0" },
diff --git a/templates/README.md b/templates/README.md
deleted file mode 100644
index f63dd159c9e..00000000000
--- a/templates/README.md
+++ /dev/null
@@ -1,2 +0,0 @@
-> [!NOTE]
-> The `next-template` has been deprecated. Use `npx shadcn@latest init` to create a new project.
diff --git a/templates/monorepo-next/.eslintrc.js b/templates/monorepo-next/.eslintrc.js
new file mode 100644
index 00000000000..781274d0137
--- /dev/null
+++ b/templates/monorepo-next/.eslintrc.js
@@ -0,0 +1,10 @@
+// This configuration only applies to the package manager root.
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  ignorePatterns: ["apps/**", "packages/**"],
+  extends: ["@workspace/eslint-config/library.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+}
diff --git a/templates/monorepo-next/.gitignore b/templates/monorepo-next/.gitignore
new file mode 100644
index 00000000000..4133babc264
--- /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/templates/monorepo-next/.npmrc b/templates/monorepo-next/.npmrc
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/templates/monorepo-next/README.md b/templates/monorepo-next/README.md
new file mode 100644
index 00000000000..b907dd6a39a
--- /dev/null
+++ b/templates/monorepo-next/README.md
@@ -0,0 +1,31 @@
+# shadcn/ui monorepo template
+
+This template is for creating a monorepo with shadcn/ui.
+
+## Usage
+
+```bash
+pnpm dlx shadcn@latest init
+```
+
+## Adding components
+
+To add components to your app, run the following command at the root of your `web` app:
+
+```bash
+pnpm dlx shadcn@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/templates/monorepo-next/apps/web/app/favicon.ico b/templates/monorepo-next/apps/web/app/favicon.ico
new file mode 100644
index 00000000000..718d6fea483
Binary files /dev/null and b/templates/monorepo-next/apps/web/app/favicon.ico differ
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 00000000000..7a807d4e007
--- /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 00000000000..e4f893aaee1
--- /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/templates/monorepo-next/apps/web/components.json b/templates/monorepo-next/apps/web/components.json
new file mode 100644
index 00000000000..ea930cdd0e3
--- /dev/null
+++ b/templates/monorepo-next/apps/web/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "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/components/.gitkeep b/templates/monorepo-next/apps/web/components/.gitkeep
new file mode 100644
index 00000000000..e69de29bb2d
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 00000000000..25e8677d80c
--- /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/eslint.config.js b/templates/monorepo-next/apps/web/eslint.config.js
new file mode 100644
index 00000000000..5062ee3b28c
--- /dev/null
+++ b/templates/monorepo-next/apps/web/eslint.config.js
@@ -0,0 +1,4 @@
+import { nextJsConfig } from "@workspace/eslint-config/next-js"
+
+/** @type {import("eslint").Linter.Config} */
+export default nextJsConfig
diff --git a/templates/monorepo-next/apps/web/hooks/.gitkeep b/templates/monorepo-next/apps/web/hooks/.gitkeep
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/templates/monorepo-next/apps/web/lib/.gitkeep b/templates/monorepo-next/apps/web/lib/.gitkeep
new file mode 100644
index 00000000000..e69de29bb2d
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 00000000000..1b3be0840f3
--- /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 00000000000..bd167d93a3b
--- /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/package.json b/templates/monorepo-next/apps/web/package.json
new file mode 100644
index 00000000000..30b0fafc455
--- /dev/null
+++ b/templates/monorepo-next/apps/web/package.json
@@ -0,0 +1,30 @@
+{
+  "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/eslint-config": "workspace:^",
+    "@workspace/typescript-config": "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 00000000000..535dec4aedd
--- /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 00000000000..f119228a14a
--- /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 00000000000..7e805764861
--- /dev/null
+++ b/templates/monorepo-next/apps/web/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "extends": "@workspace/typescript-config/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/package.json b/templates/monorepo-next/package.json
new file mode 100644
index 00000000000..36e03b19a08
--- /dev/null
+++ b/templates/monorepo-next/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "shadcn-ui-monorepo",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "build": "turbo build",
+    "dev": "turbo dev",
+    "lint": "turbo lint",
+    "format": "prettier --write \"**/*.{ts,tsx,md}\""
+  },
+  "devDependencies": {
+    "@workspace/eslint-config": "workspace:*",
+    "@workspace/typescript-config": "workspace:*",
+    "prettier": "^3.2.5",
+    "turbo": "^2.3.0",
+    "typescript": "5.5.4"
+  },
+  "packageManager": "pnpm@9.12.3",
+  "engines": {
+    "node": ">=20"
+  }
+}
diff --git a/templates/monorepo-next/packages/eslint-config/README.md b/templates/monorepo-next/packages/eslint-config/README.md
new file mode 100644
index 00000000000..4a414ab1c93
--- /dev/null
+++ b/templates/monorepo-next/packages/eslint-config/README.md
@@ -0,0 +1,3 @@
+# `@workspace/eslint-config`
+
+Shared eslint configuration for the workspace.
diff --git a/templates/monorepo-next/packages/eslint-config/base.js b/templates/monorepo-next/packages/eslint-config/base.js
new file mode 100644
index 00000000000..b0f1eaea932
--- /dev/null
+++ b/templates/monorepo-next/packages/eslint-config/base.js
@@ -0,0 +1,32 @@
+import js from "@eslint/js"
+import eslintConfigPrettier from "eslint-config-prettier"
+import onlyWarn from "eslint-plugin-only-warn"
+import turboPlugin from "eslint-plugin-turbo"
+import tseslint from "typescript-eslint"
+
+/**
+ * A shared ESLint configuration for the repository.
+ *
+ * @type {import("eslint").Linter.Config}
+ * */
+export const config = [
+  js.configs.recommended,
+  eslintConfigPrettier,
+  ...tseslint.configs.recommended,
+  {
+    plugins: {
+      turbo: turboPlugin,
+    },
+    rules: {
+      "turbo/no-undeclared-env-vars": "warn",
+    },
+  },
+  {
+    plugins: {
+      onlyWarn,
+    },
+  },
+  {
+    ignores: ["dist/**"],
+  },
+]
diff --git a/templates/monorepo-next/packages/eslint-config/next.js b/templates/monorepo-next/packages/eslint-config/next.js
new file mode 100644
index 00000000000..e40fffcd1f1
--- /dev/null
+++ b/templates/monorepo-next/packages/eslint-config/next.js
@@ -0,0 +1,51 @@
+import js from "@eslint/js"
+import pluginNext from "@next/eslint-plugin-next"
+import eslintConfigPrettier from "eslint-config-prettier"
+import pluginReact from "eslint-plugin-react"
+import pluginReactHooks from "eslint-plugin-react-hooks"
+import globals from "globals"
+import tseslint from "typescript-eslint"
+
+import { config as baseConfig } from "./base.js"
+
+/**
+ * A custom ESLint configuration for libraries that use Next.js.
+ *
+ * @type {import("eslint").Linter.Config}
+ * */
+export const nextJsConfig = [
+  ...baseConfig,
+  js.configs.recommended,
+  eslintConfigPrettier,
+  ...tseslint.configs.recommended,
+  {
+    ...pluginReact.configs.flat.recommended,
+    languageOptions: {
+      ...pluginReact.configs.flat.recommended.languageOptions,
+      globals: {
+        ...globals.serviceworker,
+      },
+    },
+  },
+  {
+    plugins: {
+      "@next/next": pluginNext,
+    },
+    rules: {
+      ...pluginNext.configs.recommended.rules,
+      ...pluginNext.configs["core-web-vitals"].rules,
+    },
+  },
+  {
+    plugins: {
+      "react-hooks": pluginReactHooks,
+    },
+    settings: { react: { version: "detect" } },
+    rules: {
+      ...pluginReactHooks.configs.recommended.rules,
+      // React scope no longer necessary with new JSX transform.
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+    },
+  },
+]
diff --git a/templates/monorepo-next/packages/eslint-config/package.json b/templates/monorepo-next/packages/eslint-config/package.json
new file mode 100644
index 00000000000..1e078414839
--- /dev/null
+++ b/templates/monorepo-next/packages/eslint-config/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@workspace/eslint-config",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "exports": {
+    "./base": "./base.js",
+    "./next-js": "./next.js",
+    "./react-internal": "./react-internal.js"
+  },
+  "devDependencies": {
+    "@next/eslint-plugin-next": "^15.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
+    "eslint": "^9.15.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-only-warn": "^1.1.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-turbo": "^2.3.0",
+    "globals": "^15.12.0",
+    "typescript": "^5.3.3",
+    "typescript-eslint": "^8.15.0"
+  }
+}
diff --git a/templates/monorepo-next/packages/eslint-config/react-internal.js b/templates/monorepo-next/packages/eslint-config/react-internal.js
new file mode 100644
index 00000000000..dda3143ea78
--- /dev/null
+++ b/templates/monorepo-next/packages/eslint-config/react-internal.js
@@ -0,0 +1,41 @@
+import js from "@eslint/js"
+import eslintConfigPrettier from "eslint-config-prettier"
+import pluginReact from "eslint-plugin-react"
+import pluginReactHooks from "eslint-plugin-react-hooks"
+import globals from "globals"
+import tseslint from "typescript-eslint"
+
+import { config as baseConfig } from "./base.js"
+
+/**
+ * A custom ESLint configuration for libraries that use React.
+ *
+ * @type {import("eslint").Linter.Config} */
+export const config = [
+  ...baseConfig,
+  js.configs.recommended,
+  eslintConfigPrettier,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  {
+    languageOptions: {
+      ...pluginReact.configs.flat.recommended.languageOptions,
+      globals: {
+        ...globals.serviceworker,
+        ...globals.browser,
+      },
+    },
+  },
+  {
+    plugins: {
+      "react-hooks": pluginReactHooks,
+    },
+    settings: { react: { version: "detect" } },
+    rules: {
+      ...pluginReactHooks.configs.recommended.rules,
+      // React scope no longer necessary with new JSX transform.
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+    },
+  },
+]
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 00000000000..e5f0c936ca2
--- /dev/null
+++ b/templates/monorepo-next/packages/typescript-config/README.md
@@ -0,0 +1,3 @@
+# `@workspace/typescript-config`
+
+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 00000000000..0f80cfd67c8
--- /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 00000000000..44f4289918f
--- /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 00000000000..94501168888
--- /dev/null
+++ b/templates/monorepo-next/packages/typescript-config/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@workspace/typescript-config",
+  "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 00000000000..a755ffea05e
--- /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/components.json b/templates/monorepo-next/packages/ui/components.json
new file mode 100644
index 00000000000..a1cb6375c41
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "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/eslint.config.js b/templates/monorepo-next/packages/ui/eslint.config.js
new file mode 100644
index 00000000000..69da3ed0abe
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/eslint.config.js
@@ -0,0 +1,4 @@
+import { config } from "@workspace/eslint-config/react-internal"
+
+/** @type {import("eslint").Linter.Config} */
+export default config
diff --git a/templates/monorepo-next/packages/ui/package.json b/templates/monorepo-next/packages/ui/package.json
new file mode 100644
index 00000000000..55c72f43d6d
--- /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": {
+    "lint": "eslint . --max-warnings 0"
+  },
+  "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/eslint-config": "workspace:*",
+    "@workspace/typescript-config": "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 00000000000..0c2a10b8e6b
--- /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 00000000000..e69de29bb2d
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 00000000000..0e0d1d0633f
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/src/components/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } 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={cn(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 00000000000..e69de29bb2d
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 00000000000..bd0c391ddd1
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...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 00000000000..d0c38fe2a98
--- /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 00000000000..080680c382b
--- /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 00000000000..2a9a18974d5
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@workspace/typescript-config/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 00000000000..eda508904dd
--- /dev/null
+++ b/templates/monorepo-next/packages/ui/tsconfig.lint.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@workspace/typescript-config/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 00000000000..a6831c09e79
--- /dev/null
+++ b/templates/monorepo-next/pnpm-lock.yaml
@@ -0,0 +1,5153 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    devDependencies:
+      '@workspace/eslint-config':
+        specifier: workspace:*
+        version: link:packages/eslint-config
+      '@workspace/typescript-config':
+        specifier: workspace:*
+        version: link:packages/typescript-config
+      prettier:
+        specifier: ^3.2.5
+        version: 3.4.2
+      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)
+      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: ^19
+        version: 19.0.1
+      '@types/react-dom':
+        specifier: ^19
+        version: 19.0.2(@types/react@19.0.1)
+      '@workspace/eslint-config':
+        specifier: workspace:^
+        version: link:../../packages/eslint-config
+      '@workspace/typescript-config':
+        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/eslint-config:
+    devDependencies:
+      '@next/eslint-plugin-next':
+        specifier: ^15.1.0
+        version: 15.1.0
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^8.15.0
+        version: 8.18.0(@typescript-eslint/parser@8.18.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2))(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2)
+      '@typescript-eslint/parser':
+        specifier: ^8.15.0
+        version: 8.18.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2)
+      eslint:
+        specifier: ^9.15.0
+        version: 9.17.0(jiti@1.21.6)
+      eslint-config-prettier:
+        specifier: ^9.1.0
+        version: 9.1.0(eslint@9.17.0(jiti@1.21.6))
+      eslint-plugin-only-warn:
+        specifier: ^1.1.0
+        version: 1.1.0
+      eslint-plugin-react:
+        specifier: ^7.37.2
+        version: 7.37.2(eslint@9.17.0(jiti@1.21.6))
+      eslint-plugin-react-hooks:
+        specifier: ^5.0.0
+        version: 5.1.0(eslint@9.17.0(jiti@1.21.6))
+      eslint-plugin-turbo:
+        specifier: ^2.3.0
+        version: 2.3.3(eslint@9.17.0(jiti@1.21.6))
+      globals:
+        specifier: ^15.12.0
+        version: 15.13.0
+      typescript:
+        specifier: ^5.3.3
+        version: 5.7.2
+      typescript-eslint:
+        specifier: ^8.15.0
+        version: 8.18.1(eslint@9.17.0(jiti@1.21.6))(typescript@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.16)(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.12
+        version: 18.3.16
+      '@types/react-dom':
+        specifier: ^18.3.1
+        version: 18.3.5(@types/react@18.3.16)
+      '@workspace/eslint-config':
+        specifier: workspace:*
+        version: link:../eslint-config
+      '@workspace/typescript-config':
+        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==}
+
+  '@eslint-community/eslint-utils@4.4.1':
+    resolution: {integrity: sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==}
+    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.12.1':
+    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  '@eslint/config-array@0.19.1':
+    resolution: {integrity: sha512-fo6Mtm5mWyKjA/Chy1BYTdn5mGJoDNjC7C64ug20ADsRDGrA85bN3uK3MaKbeRkRuuIEAR5N33Jr1pbm411/PA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/core@0.9.1':
+    resolution: {integrity: sha512-GuUdqkyyzQI5RMIWkHhvTWLCyLo1jNK3vzkSyaExH5kHPDHcuL2VOpHjmMY+y3+NC69qAKToBqldTBgYeLSr9Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/eslintrc@3.2.0':
+    resolution: {integrity: sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/js@9.17.0':
+    resolution: {integrity: sha512-Sxc4hqcs1kTu0iID3kcZDW3JHq2a77HO9P8CP6YEA/FpH3Ll8UXE2r/86Rz9YJLKme39S9vU5OWNjC6Xl0Cr3w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/object-schema@2.1.5':
+    resolution: {integrity: sha512-o0bhxnL89h5Bae5T318nFoFzGy+YE5i/gGkoPAgkmTVdRKTiv3p8JHevPiPaMwoloKfEiiaHlawCqaZMqRm+XQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/plugin-kit@0.2.4':
+    resolution: {integrity: sha512-zSkKow6H5Kdm0ZUQUB2kV5JIXqoG0+uH5YADhaEHswm664N9Db8dXSi0nMJpacpMf+MyyglF1vnZohpEg5yUtg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.6':
+    resolution: {integrity: sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanwhocodes/module-importer@1.0.1':
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+
+  '@humanwhocodes/retry@0.3.1':
+    resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
+    engines: {node: '>=18.18'}
+
+  '@humanwhocodes/retry@0.4.1':
+    resolution: {integrity: sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==}
+    engines: {node: '>=18.18'}
+
+  '@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/eslint-plugin-next@15.1.0':
+    resolution: {integrity: sha512-+jPT0h+nelBT6HC9ZCHGc7DgGVy04cv4shYdAe6tKlEbjQUtwU3LzQhzbDHQyY2m6g39m6B0kOFVuLGBrxxbGg==}
+
+  '@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/estree@1.0.6':
+    resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
+
+  '@types/glob@7.2.0':
+    resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
+
+  '@types/inquirer@6.5.0':
+    resolution: {integrity: sha512-rjaYQ9b9y/VFGOpqBEXRavc3jh0a+e6evAbI31tMda8VlPaSy0AZJfXsvmIe3wklc7W6C3zCSfleuMXR7NOyXw==}
+
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@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.5':
+    resolution: {integrity: sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==}
+    peerDependencies:
+      '@types/react': ^18.0.0
+
+  '@types/react-dom@19.0.2':
+    resolution: {integrity: sha512-c1s+7TKFaDRRxr1TxccIX2u7sfCnc3RxkVyBIUA2lCpyqCF+QoAwQ/CBg7bsMdVwP120HEH143VQezKtef5nCg==}
+    peerDependencies:
+      '@types/react': ^19.0.0
+
+  '@types/react@18.3.16':
+    resolution: {integrity: sha512-oh8AMIC4Y2ciKufU8hnKgs+ufgbA/dhPTACaZPM86AbwX9QwnFtSoPWEeRUj8fge+v6kFt78BXcDhAU1SrrAsw==}
+
+  '@types/react@19.0.1':
+    resolution: {integrity: sha512-YW6614BDhqbpR5KtUYzTA+zlA7nayzJRA9ljz9CQoxthR0sDisYZLuvSMsil36t4EH/uAt8T52Xb4sVw17G+SQ==}
+
+  '@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==}
+
+  '@typescript-eslint/eslint-plugin@8.18.0':
+    resolution: {integrity: sha512-NR2yS7qUqCL7AIxdJUQf2MKKNDVNaig/dEB0GBLU7D+ZdHgK1NoH/3wsgO3OnPVipn51tG3MAwaODEGil70WEw==}
+    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: '>=4.8.4 <5.8.0'
+
+  '@typescript-eslint/eslint-plugin@8.18.1':
+    resolution: {integrity: sha512-Ncvsq5CT3Gvh+uJG0Lwlho6suwDfUXH0HztslDf5I+F2wAFAZMRwYLEorumpKLzmO2suAXZ/td1tBg4NZIi9CQ==}
+    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: '>=4.8.4 <5.8.0'
+
+  '@typescript-eslint/parser@8.18.0':
+    resolution: {integrity: sha512-hgUZ3kTEpVzKaK3uNibExUYm6SKKOmTU2BOxBSvOYwtJEPdVQ70kZJpPjstlnhCHcuc2WGfSbpKlb/69ttyN5Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.8.0'
+
+  '@typescript-eslint/parser@8.18.1':
+    resolution: {integrity: sha512-rBnTWHCdbYM2lh7hjyXqxk70wvon3p2FyaniZuey5TrcGBpfhVp0OxOa6gxr9Q9YhZFKyfbEnxc24ZnVbbUkCA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.8.0'
+
+  '@typescript-eslint/scope-manager@8.18.0':
+    resolution: {integrity: sha512-PNGcHop0jkK2WVYGotk/hxj+UFLhXtGPiGtiaWgVBVP1jhMoMCHlTyJA+hEj4rszoSdLTK3fN4oOatrL0Cp+Xw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/scope-manager@8.18.1':
+    resolution: {integrity: sha512-HxfHo2b090M5s2+/9Z3gkBhI6xBH8OJCFjH9MhQ+nnoZqxU3wNxkLT+VWXWSFWc3UF3Z+CfPAyqdCTdoXtDPCQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/type-utils@8.18.0':
+    resolution: {integrity: sha512-er224jRepVAVLnMF2Q7MZJCq5CsdH2oqjP4dT7K6ij09Kyd+R21r7UVJrF0buMVdZS5QRhDzpvzAxHxabQadow==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.8.0'
+
+  '@typescript-eslint/type-utils@8.18.1':
+    resolution: {integrity: sha512-jAhTdK/Qx2NJPNOTxXpMwlOiSymtR2j283TtPqXkKBdH8OAMmhiUfP0kJjc/qSE51Xrq02Gj9NY7MwK+UxVwHQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.8.0'
+
+  '@typescript-eslint/types@8.18.0':
+    resolution: {integrity: sha512-FNYxgyTCAnFwTrzpBGq+zrnoTO4x0c1CKYY5MuUTzpScqmY5fmsh2o3+57lqdI3NZucBDCzDgdEbIaNfAjAHQA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/types@8.18.1':
+    resolution: {integrity: sha512-7uoAUsCj66qdNQNpH2G8MyTFlgerum8ubf21s3TSM3XmKXuIn+H2Sifh/ES2nPOPiYSRJWAk0fDkW0APBWcpfw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.18.0':
+    resolution: {integrity: sha512-rqQgFRu6yPkauz+ms3nQpohwejS8bvgbPyIDq13cgEDbkXt4LH4OkDMT0/fN1RUtzG8e8AKJyDBoocuQh8qNeg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <5.8.0'
+
+  '@typescript-eslint/typescript-estree@8.18.1':
+    resolution: {integrity: sha512-z8U21WI5txzl2XYOW7i9hJhxoKKNG1kcU4RzyNvKrdZDmbjkmLBo8bgeiOJmA06kizLI76/CCBAAGlTlEeUfyg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <5.8.0'
+
+  '@typescript-eslint/utils@8.18.0':
+    resolution: {integrity: sha512-p6GLdY383i7h5b0Qrfbix3Vc3+J2k6QWw6UMUeY5JGfm3C5LbZ4QIZzJNoNOfgyRe0uuYKjvVOsO/jD4SJO+xg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.8.0'
+
+  '@typescript-eslint/utils@8.18.1':
+    resolution: {integrity: sha512-8vikiIj2ebrC4WRdcAdDcmnu9Q/MXXwg+STf40BVfT8exDqBCUPdypvzcUPxEqRGKg9ALagZ0UWcYCtn+4W2iQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.8.0'
+
+  '@typescript-eslint/visitor-keys@8.18.0':
+    resolution: {integrity: sha512-pCh/qEA8Lb1wVIqNvBke8UaRjJ6wrAWkJO5yyIbs8Yx6TNGYyfNjOo61tLv+WwLvoLPp4BQ8B7AHKijl8NGUfw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/visitor-keys@8.18.1':
+    resolution: {integrity: sha512-Vj0WLm5/ZsD013YeUKn+K0y8p1M0jPpxOkKdbD1wB0ns53a5piVY02zjf072TblEweAbcYiFiPoSMF3kp+VhhQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  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'}
+
+  ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+
+  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-buffer-byte-length@1.0.1:
+    resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==}
+    engines: {node: '>= 0.4'}
+
+  array-includes@3.1.8:
+    resolution: {integrity: sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==}
+    engines: {node: '>= 0.4'}
+
+  array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+
+  array.prototype.findlast@1.2.5:
+    resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.flat@1.3.2:
+    resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.flatmap@1.3.2:
+    resolution: {integrity: sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.tosorted@1.1.4:
+    resolution: {integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==}
+    engines: {node: '>= 0.4'}
+
+  arraybuffer.prototype.slice@1.0.3:
+    resolution: {integrity: sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==}
+    engines: {node: '>= 0.4'}
+
+  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
+
+  available-typed-arrays@1.0.7:
+    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
+    engines: {node: '>= 0.4'}
+
+  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'}
+
+  call-bind-apply-helpers@1.0.1:
+    resolution: {integrity: sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==}
+    engines: {node: '>= 0.4'}
+
+  call-bind@1.0.8:
+    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.2:
+    resolution: {integrity: sha512-0lk0PHFe/uz0vl527fG9CgdE9WdafjDbCXvBbs+LUv000TVt2Jjhqbs4Jwm8gz070w8xXyEAxrPOMullsxXeGg==}
+    engines: {node: '>= 0.4'}
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  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'}
+
+  data-view-buffer@1.0.1:
+    resolution: {integrity: sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-length@1.0.1:
+    resolution: {integrity: sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-offset@1.0.0:
+    resolution: {integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==}
+    engines: {node: '>= 0.4'}
+
+  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'}
+
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
+  defaults@1.0.4:
+    resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
+
+  define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
+
+  define-properties@1.2.1:
+    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
+    engines: {node: '>= 0.4'}
+
+  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==}
+
+  doctrine@2.1.0:
+    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
+    engines: {node: '>=0.10.0'}
+
+  dot-case@2.1.1:
+    resolution: {integrity: sha512-HnM6ZlFqcajLsyudHq7LeeLDr2rFAVYtDv/hV5qchQEidSck8j9OPUsXY9KwJv/lHMtYlX4DjRQqwFYa+0r8Ug==}
+
+  dotenv@16.0.3:
+    resolution: {integrity: sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==}
+    engines: {node: '>=12'}
+
+  dunder-proto@1.0.0:
+    resolution: {integrity: sha512-9+Sj30DIu+4KvHqMfLUGLFYL2PkURSYMVXJyXe92nFRvlYq5hBjLEhblKB+vkd/WVlUYMWigiY07T91Fkk0+4A==}
+    engines: {node: '>= 0.4'}
+
+  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==}
+
+  es-abstract@1.23.5:
+    resolution: {integrity: sha512-vlmniQ0WNPwXqA0BnmwV3Ng7HxiGlh6r5U6JcTMNx8OilcAGqVJBHJcPjqOMaczU9fRuRK5Px2BdVyPRnKMMVQ==}
+    engines: {node: '>= 0.4'}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-iterator-helpers@1.2.0:
+    resolution: {integrity: sha512-tpxqxncxnpw3c93u8n3VOzACmRFoVmWJqbWXvX/JfKbkhBw1oslgPrUfeSt2psuqyEJFD6N/9lg5i7bsKpoq+Q==}
+    engines: {node: '>= 0.4'}
+
+  es-object-atoms@1.0.0:
+    resolution: {integrity: sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.0.3:
+    resolution: {integrity: sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==}
+    engines: {node: '>= 0.4'}
+
+  es-shim-unscopables@1.0.2:
+    resolution: {integrity: sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==}
+
+  es-to-primitive@1.3.0:
+    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
+    engines: {node: '>= 0.4'}
+
+  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'}
+
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  escodegen@2.1.0:
+    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
+    engines: {node: '>=6.0'}
+    hasBin: true
+
+  eslint-config-prettier@9.1.0:
+    resolution: {integrity: sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==}
+    hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
+
+  eslint-plugin-only-warn@1.1.0:
+    resolution: {integrity: sha512-2tktqUAT+Q3hCAU0iSf4xAN1k9zOpjK5WO8104mB0rT/dGhOa09582HN5HlbxNbPRZ0THV7nLGvzugcNOSjzfA==}
+    engines: {node: '>=6'}
+
+  eslint-plugin-react-hooks@5.1.0:
+    resolution: {integrity: sha512-mpJRtPgHN2tNAvZ35AMfqeB3Xqeo273QxrHJsbBEPWODRM4r0yB6jfoROqKEYrOn27UtRPpcpHc2UqyBSuUNTw==}
+    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@7.37.2:
+    resolution: {integrity: sha512-EsTAnj9fLVr/GZleBLFbj/sSuXeWmp1eXIN60ceYnZveqEaUCyW4X+Vh4WTdUhCkW4xutXYqTXCUSyqD4rB75w==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
+
+  eslint-plugin-turbo@2.3.3:
+    resolution: {integrity: sha512-j8UEA0Z+NNCsjZep9G5u5soDQHcXq/x4amrwulk6eHF1U91H2qAjp5I4jQcvJewmccCJbVp734PkHHTRnosjpg==}
+    peerDependencies:
+      eslint: '>6.6.0'
+
+  eslint-scope@8.2.0:
+    resolution: {integrity: sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==}
+    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.2.0:
+    resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint@9.17.0:
+    resolution: {integrity: sha512-evtlNcpJg+cZLcnVKwsai8fExnqjGPicK7gnUtlNuzu+Fv9bI0aLpND5T44VLQtoMEnI57LoXO9XAkIXwohKrA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  espree@10.3.0:
+    resolution: {integrity: sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
+    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'}
+
+  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-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-glob@3.3.1:
+    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-glob@3.3.2:
+    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
+    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==}
+
+  fastq@1.17.1:
+    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
+
+  figures@3.2.0:
+    resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
+    engines: {node: '>=8'}
+
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+
+  flatted@3.3.2:
+    resolution: {integrity: sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==}
+
+  for-each@0.3.3:
+    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
+
+  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==}
+
+  function.prototype.name@1.1.6:
+    resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==}
+    engines: {node: '>= 0.4'}
+
+  functions-have-names@1.2.3:
+    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+
+  get-intrinsic@1.2.6:
+    resolution: {integrity: sha512-qxsEs+9A+u85HhllWJJFicJfPDhRmjzoYdl64aMWW9yRIJmSyxdn8IEkuIM530/7T+lv0TIHd8L6Q/ra0tEoeA==}
+    engines: {node: '>= 0.4'}
+
+  get-stream@6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+
+  get-symbol-description@1.0.2:
+    resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==}
+    engines: {node: '>= 0.4'}
+
+  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
+
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+
+  globals@15.13.0:
+    resolution: {integrity: sha512-49TewVEz0UxZjr1WYYsWpPrhyC/B/pA8Bq0fUmet2n+eR7yn0IvNzNaoBwnK6mdkzcN+se7Ez9zUgULTz2QH4g==}
+    engines: {node: '>=18'}
+
+  globalthis@1.0.4:
+    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
+    engines: {node: '>= 0.4'}
+
+  globby@10.0.2:
+    resolution: {integrity: sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==}
+    engines: {node: '>=8'}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  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'}
+
+  graphemer@1.4.0:
+    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+
+  handlebars@4.7.8:
+    resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
+    engines: {node: '>=0.4.7'}
+    hasBin: true
+
+  has-bigints@1.0.2:
+    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
+
+  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'}
+
+  has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+
+  has-proto@1.2.0:
+    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
+    engines: {node: '>= 0.4'}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  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'}
+
+  import-fresh@3.3.0:
+    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
+    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'}
+
+  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'}
+
+  internal-slot@1.1.0:
+    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
+    engines: {node: '>= 0.4'}
+
+  ip-address@9.0.5:
+    resolution: {integrity: sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==}
+    engines: {node: '>= 12'}
+
+  is-array-buffer@3.0.4:
+    resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==}
+    engines: {node: '>= 0.4'}
+
+  is-arrayish@0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+
+  is-async-function@2.0.0:
+    resolution: {integrity: sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==}
+    engines: {node: '>= 0.4'}
+
+  is-bigint@1.1.0:
+    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
+    engines: {node: '>= 0.4'}
+
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
+  is-boolean-object@1.2.1:
+    resolution: {integrity: sha512-l9qO6eFlUETHtuihLcYOaLKByJ1f+N4kthcU9YjHy3N+B3hWv0y/2Nd0mu/7lTFnRQHTrSdXF50HQ3bl5fEnng==}
+    engines: {node: '>= 0.4'}
+
+  is-callable@1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
+
+  is-core-module@2.16.0:
+    resolution: {integrity: sha512-urTSINYfAYgcbLb0yDQ6egFm6h3Mo1DcF9EkyXSRjjzdHbsulg01qhwWuXdOoUBuTkbQ80KDboXa0vFJ+BDH+g==}
+    engines: {node: '>= 0.4'}
+
+  is-data-view@1.0.2:
+    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
+    engines: {node: '>= 0.4'}
+
+  is-date-object@1.1.0:
+    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
+    engines: {node: '>= 0.4'}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-finalizationregistry@1.1.0:
+    resolution: {integrity: sha512-qfMdqbAQEwBw78ZyReKnlA8ezmPdb9BemzIIip/JkjaZUhitfXDkkr+3QTboW0JrSXT1QWyYShpvnNHGZ4c4yA==}
+    engines: {node: '>= 0.4'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-generator-function@1.0.10:
+    resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
+    engines: {node: '>= 0.4'}
+
+  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-map@2.0.3:
+    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
+    engines: {node: '>= 0.4'}
+
+  is-negative-zero@2.0.3:
+    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
+    engines: {node: '>= 0.4'}
+
+  is-number-object@1.1.0:
+    resolution: {integrity: sha512-KVSZV0Dunv9DTPkhXwcZ3Q+tUc9TsaE1ZwX5J2WMvsSGS6Md8TFPun5uwh0yRdrNerI6vf/tbJxqSx4c1ZI1Lw==}
+    engines: {node: '>= 0.4'}
+
+  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-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
+    engines: {node: '>= 0.4'}
+
+  is-set@2.0.3:
+    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
+    engines: {node: '>= 0.4'}
+
+  is-shared-array-buffer@1.0.3:
+    resolution: {integrity: sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==}
+    engines: {node: '>= 0.4'}
+
+  is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+
+  is-string@1.1.0:
+    resolution: {integrity: sha512-PlfzajuF9vSo5wErv3MJAKD/nqf9ngAs1NFQYm16nUYFO2IzxJ2hcm+IOCg+EEopdykNNUhVq5cz35cAUxU8+g==}
+    engines: {node: '>= 0.4'}
+
+  is-symbol@1.1.1:
+    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
+    engines: {node: '>= 0.4'}
+
+  is-typed-array@1.1.13:
+    resolution: {integrity: sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==}
+    engines: {node: '>= 0.4'}
+
+  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==}
+
+  is-weakmap@2.0.2:
+    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
+    engines: {node: '>= 0.4'}
+
+  is-weakref@1.1.0:
+    resolution: {integrity: sha512-SXM8Nwyys6nT5WP6pltOwKytLV7FqQ4UiibxVmW+EIosHcmCqkkjViTb5SNssDlkCiEYRP1/pdWUKVvZBmsR2Q==}
+    engines: {node: '>= 0.4'}
+
+  is-weakset@2.0.3:
+    resolution: {integrity: sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==}
+    engines: {node: '>= 0.4'}
+
+  isarray@2.0.5:
+    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+
+  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==}
+
+  iterator.prototype@1.1.4:
+    resolution: {integrity: sha512-x4WH0BWmrMmg4oHHl+duwubhrvczGlyuGAZu3nvrf0UXOfPu8IhZObFEr7DE/iv01YgVZrsOiRcqw2srkKEDIA==}
+    engines: {node: '>= 0.4'}
+
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+
+  jiti@1.21.6:
+    resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
+    hasBin: true
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+
+  jsbn@1.1.0:
+    resolution: {integrity: sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==}
+
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+
+  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==}
+
+  jsonfile@6.1.0:
+    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
+
+  jsx-ast-utils@3.3.5:
+    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
+    engines: {node: '>=4.0'}
+
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  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==}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
+  lodash.get@4.4.2:
+    resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  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'}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
+  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==}
+
+  math-intrinsics@1.0.0:
+    resolution: {integrity: sha512-4MqMiKP90ybymYvsut0CH2g4XWbfLtmlCkXmtmdcDCxNB+mQcu1w/1+L/VD7vi/PSv7X2JYV7SCcR+jiPXnQtA==}
+    engines: {node: '>= 0.4'}
+
+  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
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
+  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'}
+
+  object-inspect@1.13.3:
+    resolution: {integrity: sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==}
+    engines: {node: '>= 0.4'}
+
+  object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+
+  object.assign@4.1.5:
+    resolution: {integrity: sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==}
+    engines: {node: '>= 0.4'}
+
+  object.entries@1.1.8:
+    resolution: {integrity: sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==}
+    engines: {node: '>= 0.4'}
+
+  object.fromentries@2.0.8:
+    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
+    engines: {node: '>= 0.4'}
+
+  object.values@1.2.0:
+    resolution: {integrity: sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==}
+    engines: {node: '>= 0.4'}
+
+  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'}
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  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-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
+  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==}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  pascal-case@2.0.1:
+    resolution: {integrity: sha512-qjS4s8rBOJa2Xm0jmxXiyh1+OFf6ekCWOvUaRgAQSktzlTbMotS0nmG9gyYAybCWBcuP4fsBeRCKNwGBnMe2OQ==}
+
+  path-case@2.1.1:
+    resolution: {integrity: sha512-Ou0N05MioItesaLr9q8TtHVWmJ6fxWdqKB2RohFmNWVyJ+2zeKIeDNWAN6B/Pe7wpzWChhZX6nONYmOnMeJQ/Q==}
+
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  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'}
+
+  possible-typed-array-names@1.0.0:
+    resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
+    engines: {node: '>= 0.4'}
+
+  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}
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  prettier@3.4.2:
+    resolution: {integrity: sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+
+  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==}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  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-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
+  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'}
+
+  reflect.getprototypeof@1.0.8:
+    resolution: {integrity: sha512-B5dj6usc5dkk8uFliwjwDHM8To5/QwdKz9JcBZ8Ic4G1f0YmeeJTtE/ZTdgRFPAfxZFiUaPhZ1Jcs4qeagItGQ==}
+    engines: {node: '>= 0.4'}
+
+  regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+
+  regexp.prototype.flags@1.5.3:
+    resolution: {integrity: sha512-vqlC04+RQoFalODCbCumG2xIOvapzVMHwsyIGM/SIE8fRhFFsXeH8/QQ+s0T0kDAhKc4k30s73/0ydkHQz6HlQ==}
+    engines: {node: '>= 0.4'}
+
+  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-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve@1.22.9:
+    resolution: {integrity: sha512-QxrmX1DzraFIi9PxdG5VkRfRwIgjwyud+z/iBwfRRrVmHc+P9Q7u2lSSpQ6bjr2gy5lrqIiU9vb6iAeGf2400A==}
+    hasBin: true
+
+  resolve@2.0.0-next.5:
+    resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
+    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-array-concat@1.1.3:
+    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
+    engines: {node: '>=0.4'}
+
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
+    engines: {node: '>= 0.4'}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  scheduler@0.25.0:
+    resolution: {integrity: sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==}
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  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==}
+
+  set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+    engines: {node: '>= 0.4'}
+
+  set-function-name@2.0.2:
+    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
+    engines: {node: '>= 0.4'}
+
+  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'}
+
+  side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
+
+  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.prototype.matchall@4.0.11:
+    resolution: {integrity: sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.repeat@1.0.0:
+    resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
+
+  string.prototype.trim@1.2.10:
+    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimend@1.0.9:
+    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimstart@1.0.8:
+    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
+    engines: {node: '>= 0.4'}
+
+  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'}
+
+  strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+
+  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-api-utils@1.4.3:
+    resolution: {integrity: sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      typescript: '>=4.2.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-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
+  type-fest@0.21.3:
+    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
+    engines: {node: '>=10'}
+
+  typed-array-buffer@1.0.2:
+    resolution: {integrity: sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-length@1.0.1:
+    resolution: {integrity: sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-offset@1.0.3:
+    resolution: {integrity: sha512-GsvTyUHTriq6o/bHcTd0vM7OQ9JEdlvluu9YISaA7+KzDzPaIzEeDFNkTfhdE3MYcNhNi0vq/LlegYgIs5yPAw==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-length@1.0.7:
+    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
+    engines: {node: '>= 0.4'}
+
+  typescript-eslint@8.18.1:
+    resolution: {integrity: sha512-Mlaw6yxuaDEPQvb/2Qwu3/TfgeBHy9iTJ3mTwe7OvpPmF6KPQjVOfGyEJpPv6Ez2C34OODChhXrzYw/9phI0MQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.8.0'
+
+  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
+
+  unbox-primitive@1.0.2:
+    resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
+
+  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==}
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  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-boxed-primitive@1.1.0:
+    resolution: {integrity: sha512-Ei7Miu/AXe2JJ4iNF5j/UphAgRoma4trE6PtisM09bPygb3egMH3YLW/befsWb1A1AxvNSFidOFTB18XtnIIng==}
+    engines: {node: '>= 0.4'}
+
+  which-builtin-type@1.2.1:
+    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
+    engines: {node: '>= 0.4'}
+
+  which-collection@1.0.2:
+    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
+    engines: {node: '>= 0.4'}
+
+  which-typed-array@1.1.16:
+    resolution: {integrity: sha512-g+N+GAWiRj66DngFwHvISJd+ITsyphZvD1vChfVg6cEdnzy53GzB3oy0fUNlvhz7H7+MiqhYr26qxQShCpKTTQ==}
+    engines: {node: '>= 0.4'}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  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'}
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+
+  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
+
+  '@eslint-community/eslint-utils@4.4.1(eslint@9.17.0(jiti@1.21.6))':
+    dependencies:
+      eslint: 9.17.0(jiti@1.21.6)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.1': {}
+
+  '@eslint/config-array@0.19.1':
+    dependencies:
+      '@eslint/object-schema': 2.1.5
+      debug: 4.4.0
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/core@0.9.1':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/eslintrc@3.2.0':
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.4.0
+      espree: 10.3.0
+      globals: 14.0.0
+      ignore: 5.3.2
+      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.17.0': {}
+
+  '@eslint/object-schema@2.1.5': {}
+
+  '@eslint/plugin-kit@0.2.4':
+    dependencies:
+      levn: 0.4.1
+
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.6':
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.3.1
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.3.1': {}
+
+  '@humanwhocodes/retry@0.4.1': {}
+
+  '@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/eslint-plugin-next@15.1.0':
+    dependencies:
+      fast-glob: 3.3.1
+
+  '@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.16)(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+    optionalDependencies:
+      '@types/react': 18.3.16
+
+  '@radix-ui/react-slot@1.1.1(@types/react@18.3.16)(react@19.0.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.16)(react@19.0.0)
+      react: 19.0.0
+    optionalDependencies:
+      '@types/react': 18.3.16
+
+  '@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/estree@1.0.6': {}
+
+  '@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/json-schema@7.0.15': {}
+
+  '@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.5(@types/react@18.3.16)':
+    dependencies:
+      '@types/react': 18.3.16
+
+  '@types/react-dom@19.0.2(@types/react@19.0.1)':
+    dependencies:
+      '@types/react': 19.0.1
+
+  '@types/react@18.3.16':
+    dependencies:
+      '@types/prop-types': 15.7.14
+      csstype: 3.1.3
+
+  '@types/react@19.0.1':
+    dependencies:
+      csstype: 3.1.3
+
+  '@types/through@0.0.33':
+    dependencies:
+      '@types/node': 22.10.2
+
+  '@types/tinycolor2@1.4.6': {}
+
+  '@typescript-eslint/eslint-plugin@8.18.0(@typescript-eslint/parser@8.18.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2))(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 8.18.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2)
+      '@typescript-eslint/scope-manager': 8.18.0
+      '@typescript-eslint/type-utils': 8.18.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2)
+      '@typescript-eslint/utils': 8.18.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2)
+      '@typescript-eslint/visitor-keys': 8.18.0
+      eslint: 9.17.0(jiti@1.21.6)
+      graphemer: 1.4.0
+      ignore: 5.3.2
+      natural-compare: 1.4.0
+      ts-api-utils: 1.4.3(typescript@5.7.2)
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/eslint-plugin@8.18.1(@typescript-eslint/parser@8.18.1(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2))(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 8.18.1(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2)
+      '@typescript-eslint/scope-manager': 8.18.1
+      '@typescript-eslint/type-utils': 8.18.1(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2)
+      '@typescript-eslint/utils': 8.18.1(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2)
+      '@typescript-eslint/visitor-keys': 8.18.1
+      eslint: 9.17.0(jiti@1.21.6)
+      graphemer: 1.4.0
+      ignore: 5.3.2
+      natural-compare: 1.4.0
+      ts-api-utils: 1.4.3(typescript@5.7.2)
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.18.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.18.0
+      '@typescript-eslint/types': 8.18.0
+      '@typescript-eslint/typescript-estree': 8.18.0(typescript@5.7.2)
+      '@typescript-eslint/visitor-keys': 8.18.0
+      debug: 4.4.0
+      eslint: 9.17.0(jiti@1.21.6)
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.18.1(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.18.1
+      '@typescript-eslint/types': 8.18.1
+      '@typescript-eslint/typescript-estree': 8.18.1(typescript@5.7.2)
+      '@typescript-eslint/visitor-keys': 8.18.1
+      debug: 4.4.0
+      eslint: 9.17.0(jiti@1.21.6)
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@8.18.0':
+    dependencies:
+      '@typescript-eslint/types': 8.18.0
+      '@typescript-eslint/visitor-keys': 8.18.0
+
+  '@typescript-eslint/scope-manager@8.18.1':
+    dependencies:
+      '@typescript-eslint/types': 8.18.1
+      '@typescript-eslint/visitor-keys': 8.18.1
+
+  '@typescript-eslint/type-utils@8.18.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2)':
+    dependencies:
+      '@typescript-eslint/typescript-estree': 8.18.0(typescript@5.7.2)
+      '@typescript-eslint/utils': 8.18.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2)
+      debug: 4.4.0
+      eslint: 9.17.0(jiti@1.21.6)
+      ts-api-utils: 1.4.3(typescript@5.7.2)
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/type-utils@8.18.1(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2)':
+    dependencies:
+      '@typescript-eslint/typescript-estree': 8.18.1(typescript@5.7.2)
+      '@typescript-eslint/utils': 8.18.1(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2)
+      debug: 4.4.0
+      eslint: 9.17.0(jiti@1.21.6)
+      ts-api-utils: 1.4.3(typescript@5.7.2)
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/types@8.18.0': {}
+
+  '@typescript-eslint/types@8.18.1': {}
+
+  '@typescript-eslint/typescript-estree@8.18.0(typescript@5.7.2)':
+    dependencies:
+      '@typescript-eslint/types': 8.18.0
+      '@typescript-eslint/visitor-keys': 8.18.0
+      debug: 4.4.0
+      fast-glob: 3.3.2
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.6.3
+      ts-api-utils: 1.4.3(typescript@5.7.2)
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/typescript-estree@8.18.1(typescript@5.7.2)':
+    dependencies:
+      '@typescript-eslint/types': 8.18.1
+      '@typescript-eslint/visitor-keys': 8.18.1
+      debug: 4.4.0
+      fast-glob: 3.3.2
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.6.3
+      ts-api-utils: 1.4.3(typescript@5.7.2)
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.18.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.17.0(jiti@1.21.6))
+      '@typescript-eslint/scope-manager': 8.18.0
+      '@typescript-eslint/types': 8.18.0
+      '@typescript-eslint/typescript-estree': 8.18.0(typescript@5.7.2)
+      eslint: 9.17.0(jiti@1.21.6)
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.18.1(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.17.0(jiti@1.21.6))
+      '@typescript-eslint/scope-manager': 8.18.1
+      '@typescript-eslint/types': 8.18.1
+      '@typescript-eslint/typescript-estree': 8.18.1(typescript@5.7.2)
+      eslint: 9.17.0(jiti@1.21.6)
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/visitor-keys@8.18.0':
+    dependencies:
+      '@typescript-eslint/types': 8.18.0
+      eslint-visitor-keys: 4.2.0
+
+  '@typescript-eslint/visitor-keys@8.18.1':
+    dependencies:
+      '@typescript-eslint/types': 8.18.1
+      eslint-visitor-keys: 4.2.0
+
+  acorn-jsx@5.3.2(acorn@8.14.0):
+    dependencies:
+      acorn: 8.14.0
+
+  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
+
+  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
+
+  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-buffer-byte-length@1.0.1:
+    dependencies:
+      call-bind: 1.0.8
+      is-array-buffer: 3.0.4
+
+  array-includes@3.1.8:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.23.5
+      es-object-atoms: 1.0.0
+      get-intrinsic: 1.2.6
+      is-string: 1.1.0
+
+  array-union@2.1.0: {}
+
+  array.prototype.findlast@1.2.5:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.23.5
+      es-errors: 1.3.0
+      es-object-atoms: 1.0.0
+      es-shim-unscopables: 1.0.2
+
+  array.prototype.flat@1.3.2:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.23.5
+      es-shim-unscopables: 1.0.2
+
+  array.prototype.flatmap@1.3.2:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.23.5
+      es-shim-unscopables: 1.0.2
+
+  array.prototype.tosorted@1.1.4:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.23.5
+      es-errors: 1.3.0
+      es-shim-unscopables: 1.0.2
+
+  arraybuffer.prototype.slice@1.0.3:
+    dependencies:
+      array-buffer-byte-length: 1.0.1
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.23.5
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.6
+      is-array-buffer: 3.0.4
+      is-shared-array-buffer: 1.0.3
+
+  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
+
+  available-typed-arrays@1.0.7:
+    dependencies:
+      possible-typed-array-names: 1.0.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
+
+  call-bind-apply-helpers@1.0.1:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  call-bind@1.0.8:
+    dependencies:
+      call-bind-apply-helpers: 1.0.1
+      es-define-property: 1.0.1
+      get-intrinsic: 1.2.6
+      set-function-length: 1.2.2
+
+  call-bound@1.0.2:
+    dependencies:
+      call-bind: 1.0.8
+      get-intrinsic: 1.2.6
+
+  callsites@3.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: {}
+
+  data-view-buffer@1.0.1:
+    dependencies:
+      call-bind: 1.0.8
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-length@1.0.1:
+    dependencies:
+      call-bind: 1.0.8
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-offset@1.0.0:
+    dependencies:
+      call-bind: 1.0.8
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  debug@4.4.0:
+    dependencies:
+      ms: 2.1.3
+
+  deep-extend@0.6.0: {}
+
+  deep-is@0.1.4: {}
+
+  defaults@1.0.4:
+    dependencies:
+      clone: 1.0.4
+
+  define-data-property@1.1.4:
+    dependencies:
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  define-properties@1.2.1:
+    dependencies:
+      define-data-property: 1.1.4
+      has-property-descriptors: 1.0.2
+      object-keys: 1.1.1
+
+  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: {}
+
+  doctrine@2.1.0:
+    dependencies:
+      esutils: 2.0.3
+
+  dot-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+
+  dotenv@16.0.3: {}
+
+  dunder-proto@1.0.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.1
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  eastasianwidth@0.2.0: {}
+
+  electron-to-chromium@1.5.73: {}
+
+  emoji-regex@8.0.0: {}
+
+  emoji-regex@9.2.2: {}
+
+  es-abstract@1.23.5:
+    dependencies:
+      array-buffer-byte-length: 1.0.1
+      arraybuffer.prototype.slice: 1.0.3
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      data-view-buffer: 1.0.1
+      data-view-byte-length: 1.0.1
+      data-view-byte-offset: 1.0.0
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.0.0
+      es-set-tostringtag: 2.0.3
+      es-to-primitive: 1.3.0
+      function.prototype.name: 1.1.6
+      get-intrinsic: 1.2.6
+      get-symbol-description: 1.0.2
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      internal-slot: 1.1.0
+      is-array-buffer: 3.0.4
+      is-callable: 1.2.7
+      is-data-view: 1.0.2
+      is-negative-zero: 2.0.3
+      is-regex: 1.2.1
+      is-shared-array-buffer: 1.0.3
+      is-string: 1.1.0
+      is-typed-array: 1.1.13
+      is-weakref: 1.1.0
+      object-inspect: 1.13.3
+      object-keys: 1.1.1
+      object.assign: 4.1.5
+      regexp.prototype.flags: 1.5.3
+      safe-array-concat: 1.1.3
+      safe-regex-test: 1.1.0
+      string.prototype.trim: 1.2.10
+      string.prototype.trimend: 1.0.9
+      string.prototype.trimstart: 1.0.8
+      typed-array-buffer: 1.0.2
+      typed-array-byte-length: 1.0.1
+      typed-array-byte-offset: 1.0.3
+      typed-array-length: 1.0.7
+      unbox-primitive: 1.0.2
+      which-typed-array: 1.1.16
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-iterator-helpers@1.2.0:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.23.5
+      es-errors: 1.3.0
+      es-set-tostringtag: 2.0.3
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.6
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      internal-slot: 1.1.0
+      iterator.prototype: 1.1.4
+      safe-array-concat: 1.1.3
+
+  es-object-atoms@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.0.3:
+    dependencies:
+      get-intrinsic: 1.2.6
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  es-shim-unscopables@1.0.2:
+    dependencies:
+      hasown: 2.0.2
+
+  es-to-primitive@1.3.0:
+    dependencies:
+      is-callable: 1.2.7
+      is-date-object: 1.1.0
+      is-symbol: 1.1.1
+
+  escalade@3.2.0: {}
+
+  escape-string-regexp@1.0.5: {}
+
+  escape-string-regexp@4.0.0: {}
+
+  escodegen@2.1.0:
+    dependencies:
+      esprima: 4.0.1
+      estraverse: 5.3.0
+      esutils: 2.0.3
+    optionalDependencies:
+      source-map: 0.6.1
+
+  eslint-config-prettier@9.1.0(eslint@9.17.0(jiti@1.21.6)):
+    dependencies:
+      eslint: 9.17.0(jiti@1.21.6)
+
+  eslint-plugin-only-warn@1.1.0: {}
+
+  eslint-plugin-react-hooks@5.1.0(eslint@9.17.0(jiti@1.21.6)):
+    dependencies:
+      eslint: 9.17.0(jiti@1.21.6)
+
+  eslint-plugin-react@7.37.2(eslint@9.17.0(jiti@1.21.6)):
+    dependencies:
+      array-includes: 3.1.8
+      array.prototype.findlast: 1.2.5
+      array.prototype.flatmap: 1.3.2
+      array.prototype.tosorted: 1.1.4
+      doctrine: 2.1.0
+      es-iterator-helpers: 1.2.0
+      eslint: 9.17.0(jiti@1.21.6)
+      estraverse: 5.3.0
+      hasown: 2.0.2
+      jsx-ast-utils: 3.3.5
+      minimatch: 3.1.2
+      object.entries: 1.1.8
+      object.fromentries: 2.0.8
+      object.values: 1.2.0
+      prop-types: 15.8.1
+      resolve: 2.0.0-next.5
+      semver: 6.3.1
+      string.prototype.matchall: 4.0.11
+      string.prototype.repeat: 1.0.0
+
+  eslint-plugin-turbo@2.3.3(eslint@9.17.0(jiti@1.21.6)):
+    dependencies:
+      dotenv: 16.0.3
+      eslint: 9.17.0(jiti@1.21.6)
+
+  eslint-scope@8.2.0:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-visitor-keys@3.4.3: {}
+
+  eslint-visitor-keys@4.2.0: {}
+
+  eslint@9.17.0(jiti@1.21.6):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.17.0(jiti@1.21.6))
+      '@eslint-community/regexpp': 4.12.1
+      '@eslint/config-array': 0.19.1
+      '@eslint/core': 0.9.1
+      '@eslint/eslintrc': 3.2.0
+      '@eslint/js': 9.17.0
+      '@eslint/plugin-kit': 0.2.4
+      '@humanfs/node': 0.16.6
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.1
+      '@types/estree': 1.0.6
+      '@types/json-schema': 7.0.15
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.0
+      escape-string-regexp: 4.0.0
+      eslint-scope: 8.2.0
+      eslint-visitor-keys: 4.2.0
+      espree: 10.3.0
+      esquery: 1.6.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.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 1.21.6
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@10.3.0:
+    dependencies:
+      acorn: 8.14.0
+      acorn-jsx: 5.3.2(acorn@8.14.0)
+      eslint-visitor-keys: 4.2.0
+
+  esprima@4.0.1: {}
+
+  esquery@1.6.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  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-deep-equal@3.1.3: {}
+
+  fast-glob@3.3.1:
+    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
+
+  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
+
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-levenshtein@2.0.6: {}
+
+  fastq@1.17.1:
+    dependencies:
+      reusify: 1.0.4
+
+  figures@3.2.0:
+    dependencies:
+      escape-string-regexp: 1.0.5
+
+  file-entry-cache@8.0.0:
+    dependencies:
+      flat-cache: 4.0.1
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  find-up@5.0.0:
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+
+  flat-cache@4.0.1:
+    dependencies:
+      flatted: 3.3.2
+      keyv: 4.5.4
+
+  flatted@3.3.2: {}
+
+  for-each@0.3.3:
+    dependencies:
+      is-callable: 1.2.7
+
+  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: {}
+
+  function.prototype.name@1.1.6:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.23.5
+      functions-have-names: 1.2.3
+
+  functions-have-names@1.2.3: {}
+
+  get-intrinsic@1.2.6:
+    dependencies:
+      call-bind-apply-helpers: 1.0.1
+      dunder-proto: 1.0.0
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.0.0
+      function-bind: 1.1.2
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.0.0
+
+  get-stream@6.0.1: {}
+
+  get-symbol-description@1.0.2:
+    dependencies:
+      call-bind: 1.0.8
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.6
+
+  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
+
+  globals@14.0.0: {}
+
+  globals@15.13.0: {}
+
+  globalthis@1.0.4:
+    dependencies:
+      define-properties: 1.2.1
+      gopd: 1.2.0
+
+  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
+
+  gopd@1.2.0: {}
+
+  graceful-fs@4.2.11: {}
+
+  gradient-string@2.0.2:
+    dependencies:
+      chalk: 4.1.2
+      tinygradient: 1.1.5
+
+  graphemer@1.4.0: {}
+
+  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-bigints@1.0.2: {}
+
+  has-flag@3.0.0: {}
+
+  has-flag@4.0.0: {}
+
+  has-property-descriptors@1.0.2:
+    dependencies:
+      es-define-property: 1.0.1
+
+  has-proto@1.2.0:
+    dependencies:
+      dunder-proto: 1.0.0
+
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.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: {}
+
+  import-fresh@3.3.0:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  imurmurhash@0.1.4: {}
+
+  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
+
+  internal-slot@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      hasown: 2.0.2
+      side-channel: 1.1.0
+
+  ip-address@9.0.5:
+    dependencies:
+      jsbn: 1.1.0
+      sprintf-js: 1.1.3
+
+  is-array-buffer@3.0.4:
+    dependencies:
+      call-bind: 1.0.8
+      get-intrinsic: 1.2.6
+
+  is-arrayish@0.3.2:
+    optional: true
+
+  is-async-function@2.0.0:
+    dependencies:
+      has-tostringtag: 1.0.2
+
+  is-bigint@1.1.0:
+    dependencies:
+      has-bigints: 1.0.2
+
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
+  is-boolean-object@1.2.1:
+    dependencies:
+      call-bound: 1.0.2
+      has-tostringtag: 1.0.2
+
+  is-callable@1.2.7: {}
+
+  is-core-module@2.16.0:
+    dependencies:
+      hasown: 2.0.2
+
+  is-data-view@1.0.2:
+    dependencies:
+      call-bound: 1.0.2
+      get-intrinsic: 1.2.6
+      is-typed-array: 1.1.13
+
+  is-date-object@1.1.0:
+    dependencies:
+      call-bound: 1.0.2
+      has-tostringtag: 1.0.2
+
+  is-extglob@2.1.1: {}
+
+  is-finalizationregistry@1.1.0:
+    dependencies:
+      call-bind: 1.0.8
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-generator-function@1.0.10:
+    dependencies:
+      has-tostringtag: 1.0.2
+
+  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-map@2.0.3: {}
+
+  is-negative-zero@2.0.3: {}
+
+  is-number-object@1.1.0:
+    dependencies:
+      call-bind: 1.0.8
+      has-tostringtag: 1.0.2
+
+  is-number@7.0.0: {}
+
+  is-path-cwd@2.2.0: {}
+
+  is-path-inside@3.0.3: {}
+
+  is-regex@1.2.1:
+    dependencies:
+      call-bound: 1.0.2
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  is-set@2.0.3: {}
+
+  is-shared-array-buffer@1.0.3:
+    dependencies:
+      call-bind: 1.0.8
+
+  is-stream@2.0.1: {}
+
+  is-string@1.1.0:
+    dependencies:
+      call-bind: 1.0.8
+      has-tostringtag: 1.0.2
+
+  is-symbol@1.1.1:
+    dependencies:
+      call-bound: 1.0.2
+      has-symbols: 1.1.0
+      safe-regex-test: 1.1.0
+
+  is-typed-array@1.1.13:
+    dependencies:
+      which-typed-array: 1.1.16
+
+  is-unicode-supported@0.1.0: {}
+
+  is-upper-case@1.1.2:
+    dependencies:
+      upper-case: 1.1.3
+
+  is-weakmap@2.0.2: {}
+
+  is-weakref@1.1.0:
+    dependencies:
+      call-bound: 1.0.2
+
+  is-weakset@2.0.3:
+    dependencies:
+      call-bind: 1.0.8
+      get-intrinsic: 1.2.6
+
+  isarray@2.0.5: {}
+
+  isbinaryfile@4.0.10: {}
+
+  isexe@2.0.0: {}
+
+  iterator.prototype@1.1.4:
+    dependencies:
+      define-data-property: 1.1.4
+      es-object-atoms: 1.0.0
+      get-intrinsic: 1.2.6
+      has-symbols: 1.1.0
+      reflect.getprototypeof: 1.0.8
+      set-function-name: 2.0.2
+
+  jackspeak@3.4.3:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
+  jiti@1.21.6: {}
+
+  js-tokens@4.0.0: {}
+
+  js-yaml@4.1.0:
+    dependencies:
+      argparse: 2.0.1
+
+  jsbn@1.1.0: {}
+
+  json-buffer@3.0.1: {}
+
+  json-schema-traverse@0.4.1: {}
+
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
+  jsonfile@6.1.0:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
+  jsx-ast-utils@3.3.5:
+    dependencies:
+      array-includes: 3.1.8
+      array.prototype.flat: 1.3.2
+      object.assign: 4.1.5
+      object.values: 1.2.0
+
+  keyv@4.5.4:
+    dependencies:
+      json-buffer: 3.0.1
+
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
+  lilconfig@3.1.3: {}
+
+  lines-and-columns@1.2.4: {}
+
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
+
+  lodash.get@4.4.2: {}
+
+  lodash.merge@4.6.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
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.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: {}
+
+  math-intrinsics@1.0.0: {}
+
+  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: {}
+
+  natural-compare@1.4.0: {}
+
+  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: {}
+
+  object-inspect@1.13.3: {}
+
+  object-keys@1.1.1: {}
+
+  object.assign@4.1.5:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      has-symbols: 1.1.0
+      object-keys: 1.1.1
+
+  object.entries@1.1.8:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-object-atoms: 1.0.0
+
+  object.fromentries@2.0.8:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.23.5
+      es-object-atoms: 1.0.0
+
+  object.values@1.2.0:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-object-atoms: 1.0.0
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  onetime@5.1.2:
+    dependencies:
+      mimic-fn: 2.1.0
+
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
+  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-limit@3.1.0:
+    dependencies:
+      yocto-queue: 0.1.0
+
+  p-locate@5.0.0:
+    dependencies:
+      p-limit: 3.1.0
+
+  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
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  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-exists@4.0.0: {}
+
+  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: {}
+
+  possible-typed-array-names@1.0.0: {}
+
+  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
+
+  prelude-ls@1.2.1: {}
+
+  prettier@3.4.2: {}
+
+  prop-types@15.8.1:
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.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: {}
+
+  punycode@2.3.1: {}
+
+  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-is@16.13.1: {}
+
+  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
+
+  reflect.getprototypeof@1.0.8:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      dunder-proto: 1.0.0
+      es-abstract: 1.23.5
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.6
+      gopd: 1.2.0
+      which-builtin-type: 1.2.1
+
+  regenerator-runtime@0.14.1: {}
+
+  regexp.prototype.flags@1.5.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-errors: 1.3.0
+      set-function-name: 2.0.2
+
+  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-from@4.0.0: {}
+
+  resolve@1.22.9:
+    dependencies:
+      is-core-module: 2.16.0
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  resolve@2.0.0-next.5:
+    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-array-concat@1.1.3:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.2
+      get-intrinsic: 1.2.6
+      has-symbols: 1.1.0
+      isarray: 2.0.5
+
+  safe-buffer@5.2.1: {}
+
+  safe-regex-test@1.1.0:
+    dependencies:
+      call-bound: 1.0.2
+      es-errors: 1.3.0
+      is-regex: 1.2.1
+
+  safer-buffer@2.1.2: {}
+
+  scheduler@0.25.0: {}
+
+  semver@6.3.1: {}
+
+  semver@7.6.2: {}
+
+  semver@7.6.3: {}
+
+  sentence-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+      upper-case-first: 1.1.2
+
+  set-function-length@1.2.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.6
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+
+  set-function-name@2.0.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      functions-have-names: 1.2.3
+      has-property-descriptors: 1.0.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: {}
+
+  side-channel-list@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.3
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.2
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.6
+      object-inspect: 1.13.3
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.2
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.6
+      object-inspect: 1.13.3
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.3
+      side-channel-list: 1.0.0
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
+
+  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.prototype.matchall@4.0.11:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.23.5
+      es-errors: 1.3.0
+      es-object-atoms: 1.0.0
+      get-intrinsic: 1.2.6
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      internal-slot: 1.1.0
+      regexp.prototype.flags: 1.5.3
+      set-function-name: 2.0.2
+      side-channel: 1.1.0
+
+  string.prototype.repeat@1.0.0:
+    dependencies:
+      define-properties: 1.2.1
+      es-abstract: 1.23.5
+
+  string.prototype.trim@1.2.10:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.2
+      define-data-property: 1.1.4
+      define-properties: 1.2.1
+      es-abstract: 1.23.5
+      es-object-atoms: 1.0.0
+      has-property-descriptors: 1.0.2
+
+  string.prototype.trimend@1.0.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.2
+      define-properties: 1.2.1
+      es-object-atoms: 1.0.0
+
+  string.prototype.trimstart@1.0.8:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-object-atoms: 1.0.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: {}
+
+  strip-json-comments@3.1.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-api-utils@1.4.3(typescript@5.7.2):
+    dependencies:
+      typescript: 5.7.2
+
+  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-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
+  type-fest@0.21.3: {}
+
+  typed-array-buffer@1.0.2:
+    dependencies:
+      call-bind: 1.0.8
+      es-errors: 1.3.0
+      is-typed-array: 1.1.13
+
+  typed-array-byte-length@1.0.1:
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.3
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.13
+
+  typed-array-byte-offset@1.0.3:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      for-each: 0.3.3
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.13
+      reflect.getprototypeof: 1.0.8
+
+  typed-array-length@1.0.7:
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.3
+      gopd: 1.2.0
+      is-typed-array: 1.1.13
+      possible-typed-array-names: 1.0.0
+      reflect.getprototypeof: 1.0.8
+
+  typescript-eslint@8.18.1(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.18.1(@typescript-eslint/parser@8.18.1(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2))(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2)
+      '@typescript-eslint/parser': 8.18.1(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2)
+      '@typescript-eslint/utils': 8.18.1(eslint@9.17.0(jiti@1.21.6))(typescript@5.7.2)
+      eslint: 9.17.0(jiti@1.21.6)
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+
+  typescript@5.5.4: {}
+
+  typescript@5.7.2: {}
+
+  uglify-js@3.19.3:
+    optional: true
+
+  unbox-primitive@1.0.2:
+    dependencies:
+      call-bind: 1.0.8
+      has-bigints: 1.0.2
+      has-symbols: 1.1.0
+      which-boxed-primitive: 1.1.0
+
+  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: {}
+
+  uri-js@4.4.1:
+    dependencies:
+      punycode: 2.3.1
+
+  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-boxed-primitive@1.1.0:
+    dependencies:
+      is-bigint: 1.1.0
+      is-boolean-object: 1.2.1
+      is-number-object: 1.1.0
+      is-string: 1.1.0
+      is-symbol: 1.1.1
+
+  which-builtin-type@1.2.1:
+    dependencies:
+      call-bound: 1.0.2
+      function.prototype.name: 1.1.6
+      has-tostringtag: 1.0.2
+      is-async-function: 2.0.0
+      is-date-object: 1.1.0
+      is-finalizationregistry: 1.1.0
+      is-generator-function: 1.0.10
+      is-regex: 1.2.1
+      is-weakref: 1.1.0
+      isarray: 2.0.5
+      which-boxed-primitive: 1.1.0
+      which-collection: 1.0.2
+      which-typed-array: 1.1.16
+
+  which-collection@1.0.2:
+    dependencies:
+      is-map: 2.0.3
+      is-set: 2.0.3
+      is-weakmap: 2.0.2
+      is-weakset: 2.0.3
+
+  which-typed-array@1.1.16:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      for-each: 0.3.3
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  word-wrap@1.2.5: {}
+
+  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: {}
+
+  yocto-queue@0.1.0: {}
+
+  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 00000000000..3ff5faaaf5f
--- /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 00000000000..c6a4ad55011
--- /dev/null
+++ b/templates/monorepo-next/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "@workspace/typescript-config/base.json"
+}
+
diff --git a/templates/monorepo-next/turbo.json b/templates/monorepo-next/turbo.json
new file mode 100644
index 00000000000..d6a7fe05543
--- /dev/null
+++ b/templates/monorepo-next/turbo.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "ui": "tui",
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "inputs": ["$TURBO_DEFAULT$", ".env*"],
+      "outputs": [".next/**", "!.next/cache/**"]
+    },
+    "lint": {
+      "dependsOn": ["^lint"]
+    },
+    "check-types": {
+      "dependsOn": ["^check-types"]
+    },
+    "dev": {
+      "cache": false,
+      "persistent": true
+    }
+  }
+}
diff --git a/vitest.workspace.ts b/vitest.workspace.ts
new file mode 100644
index 00000000000..83509f47148
--- /dev/null
+++ b/vitest.workspace.ts
@@ -0,0 +1,3 @@
+import { defineWorkspace } from "vitest/config"
+
+export default defineWorkspace(["./vitest.config.ts"])