diff --git a/apps/www/.vitepress/theme/components/BlockPage.vue b/apps/www/.vitepress/theme/components/BlockPage.vue
index 926242b3..83c757f0 100644
--- a/apps/www/.vitepress/theme/components/BlockPage.vue
+++ b/apps/www/.vitepress/theme/components/BlockPage.vue
@@ -6,7 +6,7 @@ const params = useUrlSearchParams('hash-params')
 </script>
 
 <template>
-  <div v-if="params.name" :class="params.containerClass">
-    <ComponentLoader :name="params.name?.toString()" :type-name="'block'" />
+  <div v-if="params.name && params.style" :class="params.containerClass">
+    <ComponentLoader :key="params.style?.toString()" :name="params.name?.toString()" :type-name="'block'" />
   </div>
 </template>
diff --git a/apps/www/.vitepress/theme/components/Blocks.vue b/apps/www/.vitepress/theme/components/Blocks.vue
index 14d9ce5c..934650ed 100644
--- a/apps/www/.vitepress/theme/components/Blocks.vue
+++ b/apps/www/.vitepress/theme/components/Blocks.vue
@@ -38,7 +38,7 @@ import('../../../__registry__/index').then((res) => {
 
     <PageAction>
       <a
-        href="/blocks#blocks"
+        href="/blocks.html#blocks"
         :class="cn(buttonVariants(), 'rounded-[6px]')"
       >
         Browse
@@ -57,7 +57,7 @@ import('../../../__registry__/index').then((res) => {
     </PageAction>
   </PageHeader>
 
-  <section class="grid scroll-mt-24 gap-24 lg:gap-48">
+  <section id="blocks" class="grid scroll-mt-24 gap-24 lg:gap-48">
     <BlockPreview v-for="block in blocks" :key="block" :name="block" />
   </section>
 </template>
diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index e8b12ddc..4f21004b 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -19,6 +19,7 @@ import { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'
 import { Toaster as DefaultToaster } from '@/lib/registry/default/ui/toast'
 import { Toaster as NewYorkSonner } from '@/lib/registry/new-york/ui/sonner'
 import { Toaster as NewYorkToaster } from '@/lib/registry/new-york/ui/toast'
+import { TooltipProvider } from '@/lib/registry/new-york/ui/tooltip'
 
 import File from '~icons/radix-icons/file'
 import Circle from '~icons/radix-icons/circle'
@@ -84,221 +85,223 @@ watch(() => $route.path, (n) => {
 </script>
 
 <template>
-  <div v-if="$route.data.frontmatter.layout === false">
-    <Content :key="$route.path" />
-  </div>
-  <div v-else vaul-drawer-wrapper class="flex min-h-screen flex-col bg-background">
-    <header class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg border-b border-border">
-      <div
-        class="container flex h-14 max-w-screen-2xl items-center"
-      >
-        <div class="mr-4 md:mr-1 hidden md:flex">
-          <Logo />
+  <TooltipProvider>
+    <div v-if="$route.data.frontmatter.layout === false">
+      <Content :key="$route.path" />
+    </div>
+    <div v-else vaul-drawer-wrapper class="flex min-h-screen flex-col bg-background">
+      <header class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg border-b border-border">
+        <div
+          class="container flex h-14 max-w-screen-2xl items-center"
+        >
+          <div class="mr-4 md:mr-1 hidden md:flex">
+            <Logo />
 
-          <nav
-            class="flex items-center max-lg:space-x-4 space-x-6 text-sm font-medium"
-          >
-            <a
-              v-for="route in docsConfig.mainNav"
-              :key="route.title"
-              :href="route.href"
-              :target="route.external ? '_target' : undefined"
-              class="transition-colors hover:text-foreground/80 text-foreground/60"
-              :class="{
-                'font-semibold !text-foreground': $route.path === `${route.href}.html`,
-                'hidden lg:block': route?.href?.includes('github'),
-              }"
+            <nav
+              class="flex items-center max-lg:space-x-4 space-x-6 text-sm font-medium"
             >
-              {{ route.title }}
-            </a>
-          </nav>
-        </div>
-        <MobileNav />
-
-        <div class="flex flex-1 items-center justify-between space-x-2 md:justify-end">
-          <div class="w-full flex-1 md:w-auto md:flex-none">
-            <Button
-              variant="outline"
-              class="relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64"
-              @click="isOpen = true"
-            >
-              <span class="hidden lg:inline-flex">Search documentation...</span>
-              <span class="inline-flex lg:hidden">Search...</span>
-              <Kbd class="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
-                <span class="text-xs">⌘</span>K
-              </Kbd>
-            </Button>
+              <a
+                v-for="route in docsConfig.mainNav"
+                :key="route.title"
+                :href="route.href"
+                :target="route.external ? '_target' : undefined"
+                class="transition-colors hover:text-foreground/80 text-foreground/60"
+                :class="{
+                  'font-semibold !text-foreground': $route.path === `${route.href}.html`,
+                  'hidden lg:block': route?.href?.includes('github'),
+                }"
+              >
+                {{ route.title }}
+              </a>
+            </nav>
           </div>
+          <MobileNav />
 
-          <nav class="flex items-center">
-            <CodeConfigCustomizer />
-
-            <Button
-              v-for="link in links"
-              :key="link.name"
-              as="a"
-              class="w-9 h-9"
-              :href="link.href" target="_blank"
-              :variant="'ghost'"
-              :size="'icon'"
-            >
-              <component :is="link.icon" class="w-5 h-5" />
-            </Button>
-
-            <ClientOnly>
+          <div class="flex flex-1 items-center justify-between space-x-2 md:justify-end">
+            <div class="w-full flex-1 md:w-auto md:flex-none">
               <Button
+                variant="outline"
+                class="relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64"
+                @click="isOpen = true"
+              >
+                <span class="hidden lg:inline-flex">Search documentation...</span>
+                <span class="inline-flex lg:hidden">Search...</span>
+                <Kbd class="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
+                  <span class="text-xs">⌘</span>K
+                </Kbd>
+              </Button>
+            </div>
+
+            <nav class="flex items-center">
+              <CodeConfigCustomizer />
+
+              <Button
+                v-for="link in links"
+                :key="link.name"
+                as="a"
                 class="w-9 h-9"
-                aria-label="Toggle dark mode"
+                :href="link.href" target="_blank"
                 :variant="'ghost'"
                 :size="'icon'"
-                @click="toggleDark()"
               >
-                <component
-                  :is="isDark ? RadixIconsSun : RadixIconsMoon"
-                  class="w-5 h-5 text-foreground"
-                />
+                <component :is="link.icon" class="w-5 h-5" />
               </Button>
-            </ClientOnly>
-          </nav>
-        </div>
-      </div>
-    </header>
 
-    <div class="flex-1  bg-background">
-      <Transition name="fade" mode="out-in">
-        <component :is="'docs'" v-if="$route.path.includes('docs')">
-          <Transition name="fade" mode="out-in">
-            <Content :key="$route.path" />
-          </Transition>
-        </component>
-        <component :is="'examples'" v-else-if="$route.path.includes('examples')">
-          <Transition name="fade" mode="out-in">
-            <Content :key="$route.path" />
-          </Transition>
-        </component>
-        <component :is="frontmatter.layout" v-else-if="frontmatter.layout">
-          <slot />
-        </component>
-        <main v-else class="container">
-          <Transition name="fade" mode="out-in">
-            <Content :key="$route.path" />
-          </Transition>
-        </main>
-      </Transition>
+              <ClientOnly>
+                <Button
+                  class="w-9 h-9"
+                  aria-label="Toggle dark mode"
+                  :variant="'ghost'"
+                  :size="'icon'"
+                  @click="toggleDark()"
+                >
+                  <component
+                    :is="isDark ? RadixIconsSun : RadixIconsMoon"
+                    class="w-5 h-5 text-foreground"
+                  />
+                </Button>
+              </ClientOnly>
+            </nav>
+          </div>
+        </div>
+      </header>
+
+      <div class="flex-1  bg-background">
+        <Transition name="fade" mode="out-in">
+          <component :is="'docs'" v-if="$route.path.includes('docs')">
+            <Transition name="fade" mode="out-in">
+              <Content :key="$route.path" />
+            </Transition>
+          </component>
+          <component :is="'examples'" v-else-if="$route.path.includes('examples')">
+            <Transition name="fade" mode="out-in">
+              <Content :key="$route.path" />
+            </Transition>
+          </component>
+          <component :is="frontmatter.layout" v-else-if="frontmatter.layout">
+            <slot />
+          </component>
+          <main v-else class="container">
+            <Transition name="fade" mode="out-in">
+              <Content :key="$route.path" />
+            </Transition>
+          </main>
+        </Transition>
+      </div>
+
+      <footer class="py-6 md:px-8 md:py-0">
+        <div class="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
+          <div class="text-center text-sm leading-loose text-muted-foreground md:text-left">
+            <span class="inline-block">
+              Built and designed by
+              <a
+                href="https://twitter.com/shadcn"
+                target="_blank"
+                class="underline underline-offset-4 font-bold decoration-foreground"
+              >
+                shadcn
+              </a>
+            </span>
+            <span class="ml-0.5"> . </span>
+            <span class="inline-block ml-2">
+              Ported to Vue by
+              <a
+                href="https://github.com/radix-vue"
+                target="_blank"
+                class="underline underline-offset-4 font-bold decoration-foreground"
+              >
+                Radix Vue
+              </a>
+            </span>
+            <span class="ml-0.5"> . </span>
+            <span class="inline-block ml-2">
+              The code source is available on
+              <a
+                href="https://github.com/radix-vue/shadcn-vue"
+                target="_blank"
+                class="underline underline-offset-4 font-bold decoration-foreground"
+              >
+                GitHub
+              </a>
+            </span>
+          </div>
+        </div>
+      </footer>
+
+      <Dialog v-model:open="isOpen">
+        <DialogContent class="p-0">
+          <Command>
+            <CommandInput placeholder="Type a command or search..." />
+            <CommandEmpty>
+              No results found.
+            </CommandEmpty>
+            <CommandList
+              @escape-key-down=" isOpen = false"
+            >
+              <CommandGroup heading="Links">
+                <CommandItem
+                  v-for="item in docsConfig.mainNav"
+                  :key="item.title"
+                  :heading="item.title"
+                  :value="item.title"
+                  class="py-3"
+                  @select="handleSelectLink(item)"
+                >
+                  <File class="mr-2 h-5 w-5" />
+                  <span>{{ item.title }}</span>
+                </CommandItem>
+              </CommandGroup>
+              <CommandSeparator />
+              <CommandGroup v-for="item in docsConfig.sidebarNav" :key="item.title" :heading="item.title">
+                <CommandItem
+                  v-for="subItem in item.items"
+                  :key="subItem.title"
+                  :heading="subItem.title"
+                  :value="subItem.title"
+                  class="py-3"
+                  @select="
+                    handleSelectLink(subItem)"
+                >
+                  <Circle class="mr-2 h-4 w-4" />
+                  <span>{{ subItem.title }}</span>
+                </CommandItem>
+              </CommandGroup>
+              <CommandSeparator />
+              <CommandGroup heading="Theme">
+                <CommandItem
+                  value="light-theme"
+                  class="py-3"
+                  @select="
+                    () => {
+                      isDark = false;
+                      isOpen = false;
+                    }
+                  "
+                >
+                  <RadixIconsSun class="mr-2 h-5 w-5" />
+                  <span>Light Theme</span>
+                </CommandItem>
+                <CommandItem
+                  value="dark-theme"
+                  class="py-3"
+                  @select="
+                    () => {
+                      isDark = true;
+                      isOpen = false;
+                    }
+                  "
+                >
+                  <RadixIconsMoon class="mr-2 h-5 w-5" />
+                  <span>Dark Theme</span>
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </DialogContent>
+      </Dialog>
+      <DefaultToaster />
+      <NewYorkSonner :theme="'system'" />
+      <NewYorkToaster />
     </div>
-
-    <footer class="py-6 md:px-8 md:py-0">
-      <div class="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
-        <div class="text-center text-sm leading-loose text-muted-foreground md:text-left">
-          <span class="inline-block">
-            Built and designed by
-            <a
-              href="https://twitter.com/shadcn"
-              target="_blank"
-              class="underline underline-offset-4 font-bold decoration-foreground"
-            >
-              shadcn
-            </a>
-          </span>
-          <span class="ml-0.5"> . </span>
-          <span class="inline-block ml-2">
-            Ported to Vue by
-            <a
-              href="https://github.com/radix-vue"
-              target="_blank"
-              class="underline underline-offset-4 font-bold decoration-foreground"
-            >
-              Radix Vue
-            </a>
-          </span>
-          <span class="ml-0.5"> . </span>
-          <span class="inline-block ml-2">
-            The code source is available on
-            <a
-              href="https://github.com/radix-vue/shadcn-vue"
-              target="_blank"
-              class="underline underline-offset-4 font-bold decoration-foreground"
-            >
-              GitHub
-            </a>
-          </span>
-        </div>
-      </div>
-    </footer>
-
-    <Dialog v-model:open="isOpen">
-      <DialogContent class="p-0">
-        <Command>
-          <CommandInput placeholder="Type a command or search..." />
-          <CommandEmpty>
-            No results found.
-          </CommandEmpty>
-          <CommandList
-            @escape-key-down=" isOpen = false"
-          >
-            <CommandGroup heading="Links">
-              <CommandItem
-                v-for="item in docsConfig.mainNav"
-                :key="item.title"
-                :heading="item.title"
-                :value="item.title"
-                class="py-3"
-                @select="handleSelectLink(item)"
-              >
-                <File class="mr-2 h-5 w-5" />
-                <span>{{ item.title }}</span>
-              </CommandItem>
-            </CommandGroup>
-            <CommandSeparator />
-            <CommandGroup v-for="item in docsConfig.sidebarNav" :key="item.title" :heading="item.title">
-              <CommandItem
-                v-for="subItem in item.items"
-                :key="subItem.title"
-                :heading="subItem.title"
-                :value="subItem.title"
-                class="py-3"
-                @select="
-                  handleSelectLink(subItem)"
-              >
-                <Circle class="mr-2 h-4 w-4" />
-                <span>{{ subItem.title }}</span>
-              </CommandItem>
-            </CommandGroup>
-            <CommandSeparator />
-            <CommandGroup heading="Theme">
-              <CommandItem
-                value="light-theme"
-                class="py-3"
-                @select="
-                  () => {
-                    isDark = false;
-                    isOpen = false;
-                  }
-                "
-              >
-                <RadixIconsSun class="mr-2 h-5 w-5" />
-                <span>Light Theme</span>
-              </CommandItem>
-              <CommandItem
-                value="dark-theme"
-                class="py-3"
-                @select="
-                  () => {
-                    isDark = true;
-                    isOpen = false;
-                  }
-                "
-              >
-                <RadixIconsMoon class="mr-2 h-5 w-5" />
-                <span>Dark Theme</span>
-              </CommandItem>
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </DialogContent>
-    </Dialog>
-    <DefaultToaster />
-    <NewYorkSonner :theme="'system'" />
-    <NewYorkToaster />
-  </div>
+  </TooltipProvider>
 </template>
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 522f8bd6..09777068 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -1130,6 +1130,34 @@ export const Index = {
       component: () => import("../src/lib/registry/default/block/Authentication04.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/block/Authentication04.vue"],
     },
+    "Dashboard01": {
+      name: "Dashboard01",
+      type: "components:block",
+      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
+      component: () => import("../src/lib/registry/default/block/Dashboard01.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/block/Dashboard01.vue"],
+    },
+    "Dashboard02": {
+      name: "Dashboard02",
+      type: "components:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
+      component: () => import("../src/lib/registry/default/block/Dashboard02.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/block/Dashboard02.vue"],
+    },
+    "Dashboard03": {
+      name: "Dashboard03",
+      type: "components:block",
+      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
+      component: () => import("../src/lib/registry/default/block/Dashboard03.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/block/Dashboard03.vue"],
+    },
+    "Dashboard04": {
+      name: "Dashboard04",
+      type: "components:block",
+      registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
+      component: () => import("../src/lib/registry/default/block/Dashboard04.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/block/Dashboard04.vue"],
+    },
   },  "new-york": {
     "AccordionDemo": {
       name: "AccordionDemo",
@@ -2258,5 +2286,33 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/block/Authentication04.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/block/Authentication04.vue"],
     },
+    "Dashboard01": {
+      name: "Dashboard01",
+      type: "components:block",
+      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
+      component: () => import("../src/lib/registry/new-york/block/Dashboard01.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/block/Dashboard01.vue"],
+    },
+    "Dashboard02": {
+      name: "Dashboard02",
+      type: "components:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
+      component: () => import("../src/lib/registry/new-york/block/Dashboard02.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/block/Dashboard02.vue"],
+    },
+    "Dashboard03": {
+      name: "Dashboard03",
+      type: "components:block",
+      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
+      component: () => import("../src/lib/registry/new-york/block/Dashboard03.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/block/Dashboard03.vue"],
+    },
+    "Dashboard04": {
+      name: "Dashboard04",
+      type: "components:block",
+      registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
+      component: () => import("../src/lib/registry/new-york/block/Dashboard04.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/block/Dashboard04.vue"],
+    },
   },
 }
diff --git a/apps/www/src/lib/registry/default/block/Dashboard01.vue b/apps/www/src/lib/registry/default/block/Dashboard01.vue
new file mode 100644
index 00000000..9be9aad6
--- /dev/null
+++ b/apps/www/src/lib/registry/default/block/Dashboard01.vue
@@ -0,0 +1,462 @@
+<script lang="ts">
+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 = '825px'
+export const containerClass = 'w-full h-full'
+</script>
+
+<script setup lang="ts">
+import { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'
+import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/default/ui/avatar'
+import { Badge } from '@/lib/registry/default/ui/badge'
+import { Button } from '@/lib/registry/default/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/default/ui/dropdown-menu'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/lib/registry/default/ui/table'
+</script>
+
+<template>
+  <div class="flex min-h-screen w-full flex-col">
+    <header class="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
+      <nav class="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">
+        <a
+          href="#"
+          class="flex items-center gap-2 text-lg font-semibold md:text-base"
+        >
+          <Package2 class="h-6 w-6" />
+          <span class="sr-only">Acme Inc</span>
+        </a>
+        <a
+          href="#"
+          class="text-foreground transition-colors hover:text-foreground"
+        >
+          Dashboard
+        </a>
+        <a
+          href="#"
+          class="text-muted-foreground transition-colors hover:text-foreground"
+        >
+          Orders
+        </a>
+        <a
+          href="#"
+          class="text-muted-foreground transition-colors hover:text-foreground"
+        >
+          Products
+        </a>
+        <a
+          href="#"
+          class="text-muted-foreground transition-colors hover:text-foreground"
+        >
+          Customers
+        </a>
+        <a
+          href="#"
+          class="text-muted-foreground transition-colors hover:text-foreground"
+        >
+          Analytics
+        </a>
+      </nav>
+      <Sheet>
+        <SheetTrigger as-child>
+          <Button
+            variant="outline"
+            size="icon"
+            class="shrink-0 md:hidden"
+          >
+            <Menu class="h-5 w-5" />
+            <span class="sr-only">Toggle navigation menu</span>
+          </Button>
+        </SheetTrigger>
+        <SheetContent side="left">
+          <nav class="grid gap-6 text-lg font-medium">
+            <a
+              href="#"
+              class="flex items-center gap-2 text-lg font-semibold"
+            >
+              <Package2 class="h-6 w-6" />
+              <span class="sr-only">Acme Inc</span>
+            </a>
+            <a href="#" class="hover:text-foreground">
+              Dashboard
+            </a>
+            <a
+              href="#"
+              class="text-muted-foreground hover:text-foreground"
+            >
+              Orders
+            </a>
+            <a
+              href="#"
+              class="text-muted-foreground hover:text-foreground"
+            >
+              Products
+            </a>
+            <a
+              href="#"
+              class="text-muted-foreground hover:text-foreground"
+            >
+              Customers
+            </a>
+            <a
+              href="#"
+              class="text-muted-foreground hover:text-foreground"
+            >
+              Analytics
+            </a>
+          </nav>
+        </SheetContent>
+      </Sheet>
+      <div class="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
+        <form class="ml-auto flex-1 sm:flex-initial">
+          <div class="relative">
+            <Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              type="search"
+              placeholder="Search products..."
+              class="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
+            />
+          </div>
+        </form>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <Button variant="secondary" size="icon" class="rounded-full">
+              <CircleUser class="h-5 w-5" />
+              <span class="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 class="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
+      <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Total Revenue
+            </CardTitle>
+            <DollarSign class="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div class="text-2xl font-bold">
+              $45,231.89
+            </div>
+            <p class="text-xs text-muted-foreground">
+              +20.1% from last month
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Subscriptions
+            </CardTitle>
+            <Users class="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div class="text-2xl font-bold">
+              +2350
+            </div>
+            <p class="text-xs text-muted-foreground">
+              +180.1% from last month
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Sales
+            </CardTitle>
+            <CreditCard class="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div class="text-2xl font-bold">
+              +12,234
+            </div>
+            <p class="text-xs text-muted-foreground">
+              +19% from last month
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Active Now
+            </CardTitle>
+            <Activity class="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div class="text-2xl font-bold">
+              +573
+            </div>
+            <p class="text-xs text-muted-foreground">
+              +201 since last hour
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+      <div class="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
+        <Card class="xl:col-span-2">
+          <CardHeader class="flex flex-row items-center">
+            <div class="grid gap-2">
+              <CardTitle>Transactions</CardTitle>
+              <CardDescription>
+                Recent transactions from your store.
+              </CardDescription>
+            </div>
+            <Button as-child size="sm" class="ml-auto gap-1">
+              <a href="#">
+                View All
+                <ArrowUpRight class="h-4 w-4" />
+              </a>
+            </Button>
+          </CardHeader>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Customer</TableHead>
+                  <TableHead class="hidden xl:table-column">
+                    Type
+                  </TableHead>
+                  <TableHead class="hidden xl:table-column">
+                    Status
+                  </TableHead>
+                  <TableHead class="hidden xl:table-column">
+                    Date
+                  </TableHead>
+                  <TableHead class="text-right">
+                    Amount
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow>
+                  <TableCell>
+                    <div class="font-medium">
+                      Liam Johnson
+                    </div>
+                    <div class="hidden text-sm text-muted-foreground md:inline">
+                      liam@example.com
+                    </div>
+                  </TableCell>
+                  <TableCell class="hidden xl:table-column">
+                    Sale
+                  </TableCell>
+                  <TableCell class="hidden xl:table-column">
+                    <Badge class="text-xs" variant="outline">
+                      Approved
+                    </Badge>
+                  </TableCell>
+                  <TableCell class="hidden md:table-cell lg:hidden xl:table-column">
+                    2023-06-23
+                  </TableCell>
+                  <TableCell class="text-right">
+                    $250.00
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>
+                    <div class="font-medium">
+                      Olivia Smith
+                    </div>
+                    <div class="hidden text-sm text-muted-foreground md:inline">
+                      olivia@example.com
+                    </div>
+                  </TableCell>
+                  <TableCell class="hidden xl:table-column">
+                    Refund
+                  </TableCell>
+                  <TableCell class="hidden xl:table-column">
+                    <Badge class="text-xs" variant="outline">
+                      Declined
+                    </Badge>
+                  </TableCell>
+                  <TableCell class="hidden md:table-cell lg:hidden xl:table-column">
+                    2023-06-24
+                  </TableCell>
+                  <TableCell class="text-right">
+                    $150.00
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>
+                    <div class="font-medium">
+                      Noah Williams
+                    </div>
+                    <div class="hidden text-sm text-muted-foreground md:inline">
+                      noah@example.com
+                    </div>
+                  </TableCell>
+                  <TableCell class="hidden xl:table-column">
+                    Subscription
+                  </TableCell>
+                  <TableCell class="hidden xl:table-column">
+                    <Badge class="text-xs" variant="outline">
+                      Approved
+                    </Badge>
+                  </TableCell>
+                  <TableCell class="hidden md:table-cell lg:hidden xl:table-column">
+                    2023-06-25
+                  </TableCell>
+                  <TableCell class="text-right">
+                    $350.00
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>
+                    <div class="font-medium">
+                      Emma Brown
+                    </div>
+                    <div class="hidden text-sm text-muted-foreground md:inline">
+                      emma@example.com
+                    </div>
+                  </TableCell>
+                  <TableCell class="hidden xl:table-column">
+                    Sale
+                  </TableCell>
+                  <TableCell class="hidden xl:table-column">
+                    <Badge class="text-xs" variant="outline">
+                      Approved
+                    </Badge>
+                  </TableCell>
+                  <TableCell class="hidden md:table-cell lg:hidden xl:table-column">
+                    2023-06-26
+                  </TableCell>
+                  <TableCell class="text-right">
+                    $450.00
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>
+                    <div class="font-medium">
+                      Liam Johnson
+                    </div>
+                    <div class="hidden text-sm text-muted-foreground md:inline">
+                      liam@example.com
+                    </div>
+                  </TableCell>
+                  <TableCell class="hidden xl:table-column">
+                    Sale
+                  </TableCell>
+                  <TableCell class="hidden xl:table-column">
+                    <Badge class="text-xs" variant="outline">
+                      Approved
+                    </Badge>
+                  </TableCell>
+                  <TableCell class="hidden md:table-cell lg:hidden xl:table-column">
+                    2023-06-27
+                  </TableCell>
+                  <TableCell class="text-right">
+                    $550.00
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Recent Sales</CardTitle>
+          </CardHeader>
+          <CardContent class="grid gap-8">
+            <div class="flex items-center gap-4">
+              <Avatar class="hidden h-9 w-9 sm:flex">
+                <AvatarImage src="/avatars/01.png" alt="Avatar" />
+                <AvatarFallback>OM</AvatarFallback>
+              </Avatar>
+              <div class="grid gap-1">
+                <p class="text-sm font-medium leading-none">
+                  Olivia Martin
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  olivia.martin@email.com
+                </p>
+              </div>
+              <div class="ml-auto font-medium">
+                +$1,999.00
+              </div>
+            </div>
+            <div class="flex items-center gap-4">
+              <Avatar class="hidden h-9 w-9 sm:flex">
+                <AvatarImage src="/avatars/02.png" alt="Avatar" />
+                <AvatarFallback>JL</AvatarFallback>
+              </Avatar>
+              <div class="grid gap-1">
+                <p class="text-sm font-medium leading-none">
+                  Jackson Lee
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  jackson.lee@email.com
+                </p>
+              </div>
+              <div class="ml-auto font-medium">
+                +$39.00
+              </div>
+            </div>
+            <div class="flex items-center gap-4">
+              <Avatar class="hidden h-9 w-9 sm:flex">
+                <AvatarImage src="/avatars/03.png" alt="Avatar" />
+                <AvatarFallback>IN</AvatarFallback>
+              </Avatar>
+              <div class="grid gap-1">
+                <p class="text-sm font-medium leading-none">
+                  Isabella Nguyen
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  isabella.nguyen@email.com
+                </p>
+              </div>
+              <div class="ml-auto font-medium">
+                +$299.00
+              </div>
+            </div>
+            <div class="flex items-center gap-4">
+              <Avatar class="hidden h-9 w-9 sm:flex">
+                <AvatarImage src="/avatars/04.png" alt="Avatar" />
+                <AvatarFallback>WK</AvatarFallback>
+              </Avatar>
+              <div class="grid gap-1">
+                <p class="text-sm font-medium leading-none">
+                  William Kim
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  will@email.com
+                </p>
+              </div>
+              <div class="ml-auto font-medium">
+                +$99.00
+              </div>
+            </div>
+            <div class="flex items-center gap-4">
+              <Avatar class="hidden h-9 w-9 sm:flex">
+                <AvatarImage src="/avatars/05.png" alt="Avatar" />
+                <AvatarFallback>SD</AvatarFallback>
+              </Avatar>
+              <div class="grid gap-1">
+                <p class="text-sm font-medium leading-none">
+                  Sofia Davis
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  sofia.davis@email.com
+                </p>
+              </div>
+              <div class="ml-auto font-medium">
+                +$39.00
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </main>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/block/Dashboard02.vue b/apps/www/src/lib/registry/default/block/Dashboard02.vue
new file mode 100644
index 00000000..c8853dfa
--- /dev/null
+++ b/apps/www/src/lib/registry/default/block/Dashboard02.vue
@@ -0,0 +1,222 @@
+<script lang="ts">
+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 containerClass = 'w-full h-full'
+</script>
+
+<script setup lang="ts">
+import { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'
+
+import { Badge } from '@/lib/registry/default/ui/badge'
+import { Button } from '@/lib/registry/default/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/default/ui/dropdown-menu'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
+</script>
+
+<template>
+  <div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
+    <div class="hidden border-r bg-muted/40 md:block">
+      <div class="flex h-full max-h-screen flex-col gap-2">
+        <div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
+          <a href="/" class="flex items-center gap-2 font-semibold">
+            <Package2 class="h-6 w-6" />
+            <span class="">Acme Inc</span>
+          </a>
+          <Button variant="outline" size="icon" class="ml-auto h-8 w-8">
+            <Bell class="h-4 w-4" />
+            <span class="sr-only">Toggle notifications</span>
+          </Button>
+        </div>
+        <div class="flex-1">
+          <nav class="grid items-start px-2 text-sm font-medium lg:px-4">
+            <a
+              href="/"
+              class="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
+            >
+              <Home class="h-4 w-4" />
+              Dashboard
+            </a>
+            <a
+              href="#"
+              class="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
+            >
+              <ShoppingCart class="h-4 w-4" />
+              Orders
+              <Badge class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
+                6
+              </Badge>
+            </a>
+            <a
+              href="#"
+              class="flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary"
+            >
+              <Package class="h-4 w-4" />
+              Products
+            </a>
+            <a
+              href="#"
+              class="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
+            >
+              <Users class="h-4 w-4" />
+              Customers
+            </a>
+            <a
+              href="#"
+              class="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
+            >
+              <LineChart class="h-4 w-4" />
+              Analytics
+            </a>
+          </nav>
+        </div>
+        <div class="mt-auto p-4">
+          <Card>
+            <CardHeader class="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 class="p-2 pt-0 md:p-4 md:pt-0">
+              <Button size="sm" class="w-full">
+                Upgrade
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col">
+      <header class="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
+        <Sheet>
+          <SheetTrigger as-child>
+            <Button
+              variant="outline"
+              size="icon"
+              class="shrink-0 md:hidden"
+            >
+              <Menu class="h-5 w-5" />
+              <span class="sr-only">Toggle navigation menu</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left" class="flex flex-col">
+            <nav class="grid gap-2 text-lg font-medium">
+              <a
+                href="#"
+                class="flex items-center gap-2 text-lg font-semibold"
+              >
+                <Package2 class="h-6 w-6" />
+                <span class="sr-only">Acme Inc</span>
+              </a>
+              <a
+                href="#"
+                class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+              >
+                <Home class="h-5 w-5" />
+                Dashboard
+              </a>
+              <a
+                href="#"
+                class="mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground"
+              >
+                <ShoppingCart class="h-5 w-5" />
+                Orders
+                <Badge class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
+                  6
+                </Badge>
+              </a>
+              <a
+                href="#"
+                class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+              >
+                <Package class="h-5 w-5" />
+                Products
+              </a>
+              <a
+                href="#"
+                class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+              >
+                <Users class="h-5 w-5" />
+                Customers
+              </a>
+              <a
+                href="#"
+                class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+              >
+                <LineChart class="h-5 w-5" />
+                Analytics
+              </a>
+            </nav>
+            <div class="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" class="w-full">
+                    Upgrade
+                  </Button>
+                </CardContent>
+              </Card>
+            </div>
+          </SheetContent>
+        </Sheet>
+        <div class="w-full flex-1">
+          <form>
+            <div class="relative">
+              <Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                type="search"
+                placeholder="Search products..."
+                class="w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3"
+              />
+            </div>
+          </form>
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <Button variant="secondary" size="icon" class="rounded-full">
+              <CircleUser class="h-5 w-5" />
+              <span class="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 class="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
+        <div class="flex items-center">
+          <h1 class="text-lg font-semibold md:text-2xl">
+            Inventory
+          </h1>
+        </div>
+        <div class="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm">
+          <div class="flex flex-col items-center gap-1 text-center">
+            <h3 class="text-2xl font-bold tracking-tight">
+              You have no products
+            </h3>
+            <p class="text-sm text-muted-foreground">
+              You can start selling as soon as you add a product.
+            </p>
+            <Button class="mt-4">
+              Add Product
+            </Button>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/block/Dashboard03.vue b/apps/www/src/lib/registry/default/block/Dashboard03.vue
new file mode 100644
index 00000000..bcbf1be2
--- /dev/null
+++ b/apps/www/src/lib/registry/default/block/Dashboard03.vue
@@ -0,0 +1,441 @@
+<script lang="ts">
+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 containerClass = 'w-full h-full'
+</script>
+
+<script setup lang="ts">
+import { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'
+
+import { Badge } from '@/lib/registry/default/ui/badge'
+import { Button } from '@/lib/registry/default/ui/button'
+import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/lib/registry/default/ui/drawer'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/default/ui/select'
+import { Textarea } from '@/lib/registry/default/ui/textarea'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/lib/registry/default/ui/tooltip'
+</script>
+
+<template>
+  <div class="grid h-screen w-full pl-[53px]">
+    <aside class="inset-y fixed  left-0 z-20 flex h-full flex-col border-r">
+      <div class="border-b p-2">
+        <Button variant="outline" size="icon" aria-label="Home">
+          <Triangle class="size-5 fill-foreground" />
+        </Button>
+      </div>
+      <nav class="grid gap-1 p-2">
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="rounded-lg bg-muted"
+              aria-label="Playground"
+            >
+              <SquareTerminal class="size-5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right" :side-offset="5">
+            Playground
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="rounded-lg"
+              aria-label="Models"
+            >
+              <Bot class="size-5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right" :side-offset="5">
+            Models
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="rounded-lg"
+              aria-label="API"
+            >
+              <Code2 class="size-5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right" :side-offset="5">
+            API
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="rounded-lg"
+              aria-label="Documentation"
+            >
+              <Book class="size-5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right" :side-offset="5">
+            Documentation
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="rounded-lg"
+              aria-label="Settings"
+            >
+              <Settings2 class="size-5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right" :side-offset="5">
+            Settings
+          </TooltipContent>
+        </Tooltip>
+      </nav>
+      <nav class="mt-auto grid gap-1 p-2">
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="mt-auto rounded-lg"
+              aria-label="Help"
+            >
+              <LifeBuoy class="size-5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right" :side-offset="5">
+            Help
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="mt-auto rounded-lg"
+              aria-label="Account"
+            >
+              <SquareUser class="size-5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right" :side-offset="5">
+            Account
+          </TooltipContent>
+        </Tooltip>
+      </nav>
+    </aside>
+    <div class="flex flex-col">
+      <header class="sticky top-0 z-10 flex h-[53px] items-center gap-1 border-b bg-background px-4">
+        <h1 class="text-xl font-semibold">
+          Playground
+        </h1>
+        <Drawer>
+          <DrawerTrigger as-child>
+            <Button variant="ghost" size="icon" class="md:hidden">
+              <Settings class="size-4" />
+              <span class="sr-only">Settings</span>
+            </Button>
+          </DrawerTrigger>
+          <DrawerContent class="max-h-[80vh]">
+            <DrawerHeader>
+              <DrawerTitle>Configuration</DrawerTitle>
+              <DrawerDescription>
+                Configure the settings for the model and messages.
+              </DrawerDescription>
+            </DrawerHeader>
+            <form class="grid w-full items-start gap-6 overflow-auto p-4 pt-0">
+              <fieldset class="grid gap-6 rounded-lg border p-4">
+                <legend class="-ml-1 px-1 text-sm font-medium">
+                  Settings
+                </legend>
+                <div class="grid gap-3">
+                  <Label for="model">Model</Label>
+                  <Select>
+                    <SelectTrigger
+                      id="model"
+                      class="items-start [&_[data-description]]:hidden"
+                    >
+                      <SelectValue placeholder="Select a model" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="genesis">
+                        <div class="flex items-start gap-3 text-muted-foreground">
+                          <Rabbit class="size-5" />
+                          <div class="grid gap-0.5">
+                            <p>
+                              Neural
+                              <span class="font-medium text-foreground">
+                                Genesis
+                              </span>
+                            </p>
+                            <p class="text-xs" data-description>
+                              Our fastest model for general use cases.
+                            </p>
+                          </div>
+                        </div>
+                      </SelectItem>
+                      <SelectItem value="explorer">
+                        <div class="flex items-start gap-3 text-muted-foreground">
+                          <Bird class="size-5" />
+                          <div class="grid gap-0.5">
+                            <p>
+                              Neural
+                              <span class="font-medium text-foreground">
+                                Explorer
+                              </span>
+                            </p>
+                            <p class="text-xs" data-description>
+                              Performance and speed for efficiency.
+                            </p>
+                          </div>
+                        </div>
+                      </SelectItem>
+                      <SelectItem value="quantum">
+                        <div class="flex items-start gap-3 text-muted-foreground">
+                          <Turtle class="size-5" />
+                          <div class="grid gap-0.5">
+                            <p>
+                              Neural
+                              <span class="font-medium text-foreground">
+                                Quantum
+                              </span>
+                            </p>
+                            <p class="text-xs" data-description>
+                              The most powerful model for complex
+                              computations.
+                            </p>
+                          </div>
+                        </div>
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div class="grid gap-3">
+                  <Label for="temperature">Temperature</Label>
+                  <Input id="temperature" type="number" placeholder="0.4" />
+                </div>
+                <div class="grid gap-3">
+                  <Label for="top-p">Top P</Label>
+                  <Input id="top-p" type="number" placeholder="0.7" />
+                </div>
+                <div class="grid gap-3">
+                  <Label for="top-k">Top K</Label>
+                  <Input id="top-k" type="number" placeholder="0.0" />
+                </div>
+              </fieldset>
+              <fieldset class="grid gap-6 rounded-lg border p-4">
+                <legend class="-ml-1 px-1 text-sm font-medium">
+                  Messages
+                </legend>
+                <div class="grid gap-3">
+                  <Label for="role">Role</Label>
+                  <Select default-value="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 class="grid gap-3">
+                  <Label for="content">Content</Label>
+                  <Textarea id="content" placeholder="You are a..." />
+                </div>
+              </fieldset>
+            </form>
+          </DrawerContent>
+        </Drawer>
+        <Button
+          variant="outline"
+          size="sm"
+          class="ml-auto gap-1.5 text-sm"
+        >
+          <Share class="size-3.5" />
+          Share
+        </Button>
+      </header>
+      <main class="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
+        <div class="relative hidden flex-col items-start gap-8 md:flex">
+          <form class="grid w-full items-start gap-6">
+            <fieldset class="grid gap-6 rounded-lg border p-4">
+              <legend class="-ml-1 px-1 text-sm font-medium">
+                Settings
+              </legend>
+              <div class="grid gap-3">
+                <Label for="model">Model</Label>
+                <Select>
+                  <SelectTrigger
+                    id="model"
+                    class="items-start [&_[data-description]]:hidden"
+                  >
+                    <SelectValue placeholder="Select a model" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="genesis">
+                      <div class="flex items-start gap-3 text-muted-foreground">
+                        <Rabbit class="size-5" />
+                        <div class="grid gap-0.5">
+                          <p>
+                            Neural
+                            <span class="font-medium text-foreground">
+                              Genesis
+                            </span>
+                          </p>
+                          <p class="text-xs" data-description>
+                            Our fastest model for general use cases.
+                          </p>
+                        </div>
+                      </div>
+                    </SelectItem>
+                    <SelectItem value="explorer">
+                      <div class="flex items-start gap-3 text-muted-foreground">
+                        <Bird class="size-5" />
+                        <div class="grid gap-0.5">
+                          <p>
+                            Neural
+                            <span class="font-medium text-foreground">
+                              Explorer
+                            </span>
+                          </p>
+                          <p class="text-xs" data-description>
+                            Performance and speed for efficiency.
+                          </p>
+                        </div>
+                      </div>
+                    </SelectItem>
+                    <SelectItem value="quantum">
+                      <div class="flex items-start gap-3 text-muted-foreground">
+                        <Turtle class="size-5" />
+                        <div class="grid gap-0.5">
+                          <p>
+                            Neural
+                            <span class="font-medium text-foreground">
+                              Quantum
+                            </span>
+                          </p>
+                          <p class="text-xs" data-description>
+                            The most powerful model for complex computations.
+                          </p>
+                        </div>
+                      </div>
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div class="grid gap-3">
+                <Label for="temperature">Temperature</Label>
+                <Input id="temperature" type="number" placeholder="0.4" />
+              </div>
+              <div class="grid grid-cols-2 gap-4">
+                <div class="grid gap-3">
+                  <Label for="top-p">Top P</Label>
+                  <Input id="top-p" type="number" placeholder="0.7" />
+                </div>
+                <div class="grid gap-3">
+                  <Label for="top-k">Top K</Label>
+                  <Input id="top-k" type="number" placeholder="0.0" />
+                </div>
+              </div>
+            </fieldset>
+            <fieldset class="grid gap-6 rounded-lg border p-4">
+              <legend class="-ml-1 px-1 text-sm font-medium">
+                Messages
+              </legend>
+              <div class="grid gap-3">
+                <Label for="role">Role</Label>
+                <Select default-value="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 class="grid gap-3">
+                <Label for="content">Content</Label>
+                <Textarea
+                  id="content"
+                  placeholder="You are a..."
+                  class="min-h-[9.5rem]"
+                />
+              </div>
+            </fieldset>
+          </form>
+        </div>
+        <div class="relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2">
+          <Badge variant="outline" class="absolute right-3 top-3">
+            Output
+          </Badge>
+          <div class="flex-1" />
+          <form class="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring">
+            <Label for="message" class="sr-only">
+              Message
+            </Label>
+            <Textarea
+              id="message"
+              placeholder="Type your message here..."
+              class="min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0"
+            />
+            <div class="flex items-center p-3 pt-0">
+              <Tooltip>
+                <TooltipTrigger as-child>
+                  <Button variant="ghost" size="icon">
+                    <Paperclip class="size-4" />
+                    <span class="sr-only">Attach file</span>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="top">
+                  Attach File
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger as-child>
+                  <Button variant="ghost" size="icon">
+                    <Mic class="size-4" />
+                    <span class="sr-only">Use Microphone</span>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="top">
+                  Use Microphone
+                </TooltipContent>
+              </Tooltip>
+              <Button type="submit" size="sm" class="ml-auto gap-1.5">
+                Send Message
+                <CornerDownLeft class="size-3.5" />
+              </Button>
+            </div>
+          </form>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/block/Dashboard04.vue b/apps/www/src/lib/registry/default/block/Dashboard04.vue
new file mode 100644
index 00000000..abb7d11d
--- /dev/null
+++ b/apps/www/src/lib/registry/default/block/Dashboard04.vue
@@ -0,0 +1,216 @@
+<script lang="ts">
+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 containerClass = 'w-full h-full'
+</script>
+
+<script setup lang="ts">
+import { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'
+
+import { Button } from '@/lib/registry/default/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
+import { Checkbox } from '@/lib/registry/default/ui/checkbox'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/default/ui/dropdown-menu'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
+</script>
+
+<template>
+  <div class="flex min-h-screen w-full flex-col">
+    <header class="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
+      <nav class="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">
+        <a
+          href="#"
+          class="flex items-center gap-2 text-lg font-semibold md:text-base"
+        >
+          <Package2 class="h-6 w-6" />
+          <span class="sr-only">Acme Inc</span>
+        </a>
+        <a
+          href="#"
+          class="text-muted-foreground transition-colors hover:text-foreground"
+        >
+          Dashboard
+        </a>
+        <a
+          href="#"
+          class="text-muted-foreground transition-colors hover:text-foreground"
+        >
+          Orders
+        </a>
+        <a
+          href="#"
+          class="text-muted-foreground transition-colors hover:text-foreground"
+        >
+          Products
+        </a>
+        <a
+          href="#"
+          class="text-muted-foreground transition-colors hover:text-foreground"
+        >
+          Customers
+        </a>
+        <a
+          href="#"
+          class="text-foreground transition-colors hover:text-foreground"
+        >
+          Settings
+        </a>
+      </nav>
+      <Sheet>
+        <SheetTrigger as-child>
+          <Button
+            variant="outline"
+            size="icon"
+            class="shrink-0 md:hidden"
+          >
+            <Menu class="h-5 w-5" />
+            <span class="sr-only">Toggle navigation menu</span>
+          </Button>
+        </SheetTrigger>
+        <SheetContent side="left">
+          <nav class="grid gap-6 text-lg font-medium">
+            <a
+              href="#"
+              class="flex items-center gap-2 text-lg font-semibold"
+            >
+              <Package2 class="h-6 w-6" />
+              <span class="sr-only">Acme Inc</span>
+            </a>
+            <a
+              href="#"
+              class="text-muted-foreground hover:text-foreground"
+            >
+              Dashboard
+            </a>
+            <a
+              href="#"
+              class="text-muted-foreground hover:text-foreground"
+            >
+              Orders
+            </a>
+            <a
+              href="#"
+              class="text-muted-foreground hover:text-foreground"
+            >
+              Products
+            </a>
+            <a
+              href="#"
+              class="text-muted-foreground hover:text-foreground"
+            >
+              Customers
+            </a>
+            <a href="#" class="hover:text-foreground">
+              Settings
+            </a>
+          </nav>
+        </SheetContent>
+      </Sheet>
+      <div class="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
+        <form class="ml-auto flex-1 sm:flex-initial">
+          <div class="relative">
+            <Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              type="search"
+              placeholder="Search products..."
+              class="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
+            />
+          </div>
+        </form>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <Button variant="secondary" size="icon" class="rounded-full">
+              <CircleUser class="h-5 w-5" />
+              <span class="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 class="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 class="mx-auto grid w-full max-w-6xl gap-2">
+        <h1 class="text-3xl font-semibold">
+          Settings
+        </h1>
+      </div>
+      <div class="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
+        <nav class="grid gap-4 text-sm text-muted-foreground">
+          <a href="#" class="font-semibold text-primary">
+            General
+          </a>
+          <a href="#">
+            Security
+          </a>
+          <a href="#">
+            Integrations
+          </a>
+          <a href="#">
+            Support
+          </a>
+          <a href="#">
+            Organizations
+          </a>
+          <a href="#">
+            Advanced
+          </a>
+        </nav>
+        <div class="grid gap-6">
+          <Card>
+            <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 class="border-t px-6 py-4">
+              <Button>Save</Button>
+            </CardFooter>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Plugins Directory</CardTitle>
+              <CardDescription>
+                The directory within your project, in which your plugins are
+                located.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form class="flex flex-col gap-4">
+                <Input
+                  placeholder="Project Name"
+                  default-value="/content/plugins"
+                />
+                <div class="flex items-center space-x-2">
+                  <Checkbox id="include" default-checked />
+                  <label
+                    for="include"
+                    class="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 class="border-t px-6 py-4">
+              <Button>Save</Button>
+            </CardFooter>
+          </Card>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard01.vue b/apps/www/src/lib/registry/new-york/block/Dashboard01.vue
new file mode 100644
index 00000000..cc4ce497
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/block/Dashboard01.vue
@@ -0,0 +1,462 @@
+<script lang="ts">
+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 = '825px'
+export const containerClass = 'w-full h-full'
+</script>
+
+<script setup lang="ts">
+import { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'
+import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/new-york/ui/avatar'
+import { Badge } from '@/lib/registry/new-york/ui/badge'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/lib/registry/new-york/ui/table'
+</script>
+
+<template>
+  <div class="flex min-h-screen w-full flex-col">
+    <header class="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
+      <nav class="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">
+        <a
+          href="#"
+          class="flex items-center gap-2 text-lg font-semibold md:text-base"
+        >
+          <Package2 class="h-6 w-6" />
+          <span class="sr-only">Acme Inc</span>
+        </a>
+        <a
+          href="#"
+          class="text-foreground transition-colors hover:text-foreground"
+        >
+          Dashboard
+        </a>
+        <a
+          href="#"
+          class="text-muted-foreground transition-colors hover:text-foreground"
+        >
+          Orders
+        </a>
+        <a
+          href="#"
+          class="text-muted-foreground transition-colors hover:text-foreground"
+        >
+          Products
+        </a>
+        <a
+          href="#"
+          class="text-muted-foreground transition-colors hover:text-foreground"
+        >
+          Customers
+        </a>
+        <a
+          href="#"
+          class="text-muted-foreground transition-colors hover:text-foreground"
+        >
+          Analytics
+        </a>
+      </nav>
+      <Sheet>
+        <SheetTrigger as-child>
+          <Button
+            variant="outline"
+            size="icon"
+            class="shrink-0 md:hidden"
+          >
+            <Menu class="h-5 w-5" />
+            <span class="sr-only">Toggle navigation menu</span>
+          </Button>
+        </SheetTrigger>
+        <SheetContent side="left">
+          <nav class="grid gap-6 text-lg font-medium">
+            <a
+              href="#"
+              class="flex items-center gap-2 text-lg font-semibold"
+            >
+              <Package2 class="h-6 w-6" />
+              <span class="sr-only">Acme Inc</span>
+            </a>
+            <a href="#" class="hover:text-foreground">
+              Dashboard
+            </a>
+            <a
+              href="#"
+              class="text-muted-foreground hover:text-foreground"
+            >
+              Orders
+            </a>
+            <a
+              href="#"
+              class="text-muted-foreground hover:text-foreground"
+            >
+              Products
+            </a>
+            <a
+              href="#"
+              class="text-muted-foreground hover:text-foreground"
+            >
+              Customers
+            </a>
+            <a
+              href="#"
+              class="text-muted-foreground hover:text-foreground"
+            >
+              Analytics
+            </a>
+          </nav>
+        </SheetContent>
+      </Sheet>
+      <div class="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
+        <form class="ml-auto flex-1 sm:flex-initial">
+          <div class="relative">
+            <Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              type="search"
+              placeholder="Search products..."
+              class="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
+            />
+          </div>
+        </form>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <Button variant="secondary" size="icon" class="rounded-full">
+              <CircleUser class="h-5 w-5" />
+              <span class="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 class="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
+      <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Total Revenue
+            </CardTitle>
+            <DollarSign class="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div class="text-2xl font-bold">
+              $45,231.89
+            </div>
+            <p class="text-xs text-muted-foreground">
+              +20.1% from last month
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Subscriptions
+            </CardTitle>
+            <Users class="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div class="text-2xl font-bold">
+              +2350
+            </div>
+            <p class="text-xs text-muted-foreground">
+              +180.1% from last month
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Sales
+            </CardTitle>
+            <CreditCard class="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div class="text-2xl font-bold">
+              +12,234
+            </div>
+            <p class="text-xs text-muted-foreground">
+              +19% from last month
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Active Now
+            </CardTitle>
+            <Activity class="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div class="text-2xl font-bold">
+              +573
+            </div>
+            <p class="text-xs text-muted-foreground">
+              +201 since last hour
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+      <div class="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
+        <Card class="xl:col-span-2">
+          <CardHeader class="flex flex-row items-center">
+            <div class="grid gap-2">
+              <CardTitle>Transactions</CardTitle>
+              <CardDescription>
+                Recent transactions from your store.
+              </CardDescription>
+            </div>
+            <Button as-child size="sm" class="ml-auto gap-1">
+              <a href="#">
+                View All
+                <ArrowUpRight class="h-4 w-4" />
+              </a>
+            </Button>
+          </CardHeader>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Customer</TableHead>
+                  <TableHead class="hidden xl:table-column">
+                    Type
+                  </TableHead>
+                  <TableHead class="hidden xl:table-column">
+                    Status
+                  </TableHead>
+                  <TableHead class="hidden xl:table-column">
+                    Date
+                  </TableHead>
+                  <TableHead class="text-right">
+                    Amount
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow>
+                  <TableCell>
+                    <div class="font-medium">
+                      Liam Johnson
+                    </div>
+                    <div class="hidden text-sm text-muted-foreground md:inline">
+                      liam@example.com
+                    </div>
+                  </TableCell>
+                  <TableCell class="hidden xl:table-column">
+                    Sale
+                  </TableCell>
+                  <TableCell class="hidden xl:table-column">
+                    <Badge class="text-xs" variant="outline">
+                      Approved
+                    </Badge>
+                  </TableCell>
+                  <TableCell class="hidden md:table-cell lg:hidden xl:table-column">
+                    2023-06-23
+                  </TableCell>
+                  <TableCell class="text-right">
+                    $250.00
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>
+                    <div class="font-medium">
+                      Olivia Smith
+                    </div>
+                    <div class="hidden text-sm text-muted-foreground md:inline">
+                      olivia@example.com
+                    </div>
+                  </TableCell>
+                  <TableCell class="hidden xl:table-column">
+                    Refund
+                  </TableCell>
+                  <TableCell class="hidden xl:table-column">
+                    <Badge class="text-xs" variant="outline">
+                      Declined
+                    </Badge>
+                  </TableCell>
+                  <TableCell class="hidden md:table-cell lg:hidden xl:table-column">
+                    2023-06-24
+                  </TableCell>
+                  <TableCell class="text-right">
+                    $150.00
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>
+                    <div class="font-medium">
+                      Noah Williams
+                    </div>
+                    <div class="hidden text-sm text-muted-foreground md:inline">
+                      noah@example.com
+                    </div>
+                  </TableCell>
+                  <TableCell class="hidden xl:table-column">
+                    Subscription
+                  </TableCell>
+                  <TableCell class="hidden xl:table-column">
+                    <Badge class="text-xs" variant="outline">
+                      Approved
+                    </Badge>
+                  </TableCell>
+                  <TableCell class="hidden md:table-cell lg:hidden xl:table-column">
+                    2023-06-25
+                  </TableCell>
+                  <TableCell class="text-right">
+                    $350.00
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>
+                    <div class="font-medium">
+                      Emma Brown
+                    </div>
+                    <div class="hidden text-sm text-muted-foreground md:inline">
+                      emma@example.com
+                    </div>
+                  </TableCell>
+                  <TableCell class="hidden xl:table-column">
+                    Sale
+                  </TableCell>
+                  <TableCell class="hidden xl:table-column">
+                    <Badge class="text-xs" variant="outline">
+                      Approved
+                    </Badge>
+                  </TableCell>
+                  <TableCell class="hidden md:table-cell lg:hidden xl:table-column">
+                    2023-06-26
+                  </TableCell>
+                  <TableCell class="text-right">
+                    $450.00
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>
+                    <div class="font-medium">
+                      Liam Johnson
+                    </div>
+                    <div class="hidden text-sm text-muted-foreground md:inline">
+                      liam@example.com
+                    </div>
+                  </TableCell>
+                  <TableCell class="hidden xl:table-column">
+                    Sale
+                  </TableCell>
+                  <TableCell class="hidden xl:table-column">
+                    <Badge class="text-xs" variant="outline">
+                      Approved
+                    </Badge>
+                  </TableCell>
+                  <TableCell class="hidden md:table-cell lg:hidden xl:table-column">
+                    2023-06-27
+                  </TableCell>
+                  <TableCell class="text-right">
+                    $550.00
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Recent Sales</CardTitle>
+          </CardHeader>
+          <CardContent class="grid gap-8">
+            <div class="flex items-center gap-4">
+              <Avatar class="hidden h-9 w-9 sm:flex">
+                <AvatarImage src="/avatars/01.png" alt="Avatar" />
+                <AvatarFallback>OM</AvatarFallback>
+              </Avatar>
+              <div class="grid gap-1">
+                <p class="text-sm font-medium leading-none">
+                  Olivia Martin
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  olivia.martin@email.com
+                </p>
+              </div>
+              <div class="ml-auto font-medium">
+                +$1,999.00
+              </div>
+            </div>
+            <div class="flex items-center gap-4">
+              <Avatar class="hidden h-9 w-9 sm:flex">
+                <AvatarImage src="/avatars/02.png" alt="Avatar" />
+                <AvatarFallback>JL</AvatarFallback>
+              </Avatar>
+              <div class="grid gap-1">
+                <p class="text-sm font-medium leading-none">
+                  Jackson Lee
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  jackson.lee@email.com
+                </p>
+              </div>
+              <div class="ml-auto font-medium">
+                +$39.00
+              </div>
+            </div>
+            <div class="flex items-center gap-4">
+              <Avatar class="hidden h-9 w-9 sm:flex">
+                <AvatarImage src="/avatars/03.png" alt="Avatar" />
+                <AvatarFallback>IN</AvatarFallback>
+              </Avatar>
+              <div class="grid gap-1">
+                <p class="text-sm font-medium leading-none">
+                  Isabella Nguyen
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  isabella.nguyen@email.com
+                </p>
+              </div>
+              <div class="ml-auto font-medium">
+                +$299.00
+              </div>
+            </div>
+            <div class="flex items-center gap-4">
+              <Avatar class="hidden h-9 w-9 sm:flex">
+                <AvatarImage src="/avatars/04.png" alt="Avatar" />
+                <AvatarFallback>WK</AvatarFallback>
+              </Avatar>
+              <div class="grid gap-1">
+                <p class="text-sm font-medium leading-none">
+                  William Kim
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  will@email.com
+                </p>
+              </div>
+              <div class="ml-auto font-medium">
+                +$99.00
+              </div>
+            </div>
+            <div class="flex items-center gap-4">
+              <Avatar class="hidden h-9 w-9 sm:flex">
+                <AvatarImage src="/avatars/05.png" alt="Avatar" />
+                <AvatarFallback>SD</AvatarFallback>
+              </Avatar>
+              <div class="grid gap-1">
+                <p class="text-sm font-medium leading-none">
+                  Sofia Davis
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  sofia.davis@email.com
+                </p>
+              </div>
+              <div class="ml-auto font-medium">
+                +$39.00
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </main>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard02.vue b/apps/www/src/lib/registry/new-york/block/Dashboard02.vue
new file mode 100644
index 00000000..37460ade
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/block/Dashboard02.vue
@@ -0,0 +1,222 @@
+<script lang="ts">
+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 containerClass = 'w-full h-full'
+</script>
+
+<script setup lang="ts">
+import { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'
+
+import { Badge } from '@/lib/registry/new-york/ui/badge'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
+</script>
+
+<template>
+  <div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
+    <div class="hidden border-r bg-muted/40 md:block">
+      <div class="flex h-full max-h-screen flex-col gap-2">
+        <div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
+          <a href="/" class="flex items-center gap-2 font-semibold">
+            <Package2 class="h-6 w-6" />
+            <span class="">Acme Inc</span>
+          </a>
+          <Button variant="outline" size="icon" class="ml-auto h-8 w-8">
+            <Bell class="h-4 w-4" />
+            <span class="sr-only">Toggle notifications</span>
+          </Button>
+        </div>
+        <div class="flex-1">
+          <nav class="grid items-start px-2 text-sm font-medium lg:px-4">
+            <a
+              href="/"
+              class="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
+            >
+              <Home class="h-4 w-4" />
+              Dashboard
+            </a>
+            <a
+              href="#"
+              class="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
+            >
+              <ShoppingCart class="h-4 w-4" />
+              Orders
+              <Badge class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
+                6
+              </Badge>
+            </a>
+            <a
+              href="#"
+              class="flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary"
+            >
+              <Package class="h-4 w-4" />
+              Products
+            </a>
+            <a
+              href="#"
+              class="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
+            >
+              <Users class="h-4 w-4" />
+              Customers
+            </a>
+            <a
+              href="#"
+              class="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
+            >
+              <LineChart class="h-4 w-4" />
+              Analytics
+            </a>
+          </nav>
+        </div>
+        <div class="mt-auto p-4">
+          <Card>
+            <CardHeader class="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 class="p-2 pt-0 md:p-4 md:pt-0">
+              <Button size="sm" class="w-full">
+                Upgrade
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col">
+      <header class="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
+        <Sheet>
+          <SheetTrigger as-child>
+            <Button
+              variant="outline"
+              size="icon"
+              class="shrink-0 md:hidden"
+            >
+              <Menu class="h-5 w-5" />
+              <span class="sr-only">Toggle navigation menu</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left" class="flex flex-col">
+            <nav class="grid gap-2 text-lg font-medium">
+              <a
+                href="#"
+                class="flex items-center gap-2 text-lg font-semibold"
+              >
+                <Package2 class="h-6 w-6" />
+                <span class="sr-only">Acme Inc</span>
+              </a>
+              <a
+                href="#"
+                class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+              >
+                <Home class="h-5 w-5" />
+                Dashboard
+              </a>
+              <a
+                href="#"
+                class="mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground"
+              >
+                <ShoppingCart class="h-5 w-5" />
+                Orders
+                <Badge class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
+                  6
+                </Badge>
+              </a>
+              <a
+                href="#"
+                class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+              >
+                <Package class="h-5 w-5" />
+                Products
+              </a>
+              <a
+                href="#"
+                class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+              >
+                <Users class="h-5 w-5" />
+                Customers
+              </a>
+              <a
+                href="#"
+                class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+              >
+                <LineChart class="h-5 w-5" />
+                Analytics
+              </a>
+            </nav>
+            <div class="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" class="w-full">
+                    Upgrade
+                  </Button>
+                </CardContent>
+              </Card>
+            </div>
+          </SheetContent>
+        </Sheet>
+        <div class="w-full flex-1">
+          <form>
+            <div class="relative">
+              <Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                type="search"
+                placeholder="Search products..."
+                class="w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3"
+              />
+            </div>
+          </form>
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <Button variant="secondary" size="icon" class="rounded-full">
+              <CircleUser class="h-5 w-5" />
+              <span class="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 class="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
+        <div class="flex items-center">
+          <h1 class="text-lg font-semibold md:text-2xl">
+            Inventory
+          </h1>
+        </div>
+        <div class="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm">
+          <div class="flex flex-col items-center gap-1 text-center">
+            <h3 class="text-2xl font-bold tracking-tight">
+              You have no products
+            </h3>
+            <p class="text-sm text-muted-foreground">
+              You can start selling as soon as you add a product.
+            </p>
+            <Button class="mt-4">
+              Add Product
+            </Button>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard03.vue b/apps/www/src/lib/registry/new-york/block/Dashboard03.vue
new file mode 100644
index 00000000..a71c6a66
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/block/Dashboard03.vue
@@ -0,0 +1,441 @@
+<script lang="ts">
+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 containerClass = 'w-full h-full'
+</script>
+
+<script setup lang="ts">
+import { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'
+
+import { Badge } from '@/lib/registry/new-york/ui/badge'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/lib/registry/new-york/ui/drawer'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/new-york/ui/select'
+import { Textarea } from '@/lib/registry/new-york/ui/textarea'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/lib/registry/new-york/ui/tooltip'
+</script>
+
+<template>
+  <div class="grid h-screen w-full pl-[53px]">
+    <aside class="inset-y fixed  left-0 z-20 flex h-full flex-col border-r">
+      <div class="border-b p-2">
+        <Button variant="outline" size="icon" aria-label="Home">
+          <Triangle class="size-5 fill-foreground" />
+        </Button>
+      </div>
+      <nav class="grid gap-1 p-2">
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="rounded-lg bg-muted"
+              aria-label="Playground"
+            >
+              <SquareTerminal class="size-5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right" :side-offset="5">
+            Playground
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="rounded-lg"
+              aria-label="Models"
+            >
+              <Bot class="size-5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right" :side-offset="5">
+            Models
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="rounded-lg"
+              aria-label="API"
+            >
+              <Code2 class="size-5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right" :side-offset="5">
+            API
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="rounded-lg"
+              aria-label="Documentation"
+            >
+              <Book class="size-5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right" :side-offset="5">
+            Documentation
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="rounded-lg"
+              aria-label="Settings"
+            >
+              <Settings2 class="size-5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right" :side-offset="5">
+            Settings
+          </TooltipContent>
+        </Tooltip>
+      </nav>
+      <nav class="mt-auto grid gap-1 p-2">
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="mt-auto rounded-lg"
+              aria-label="Help"
+            >
+              <LifeBuoy class="size-5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right" :side-offset="5">
+            Help
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="mt-auto rounded-lg"
+              aria-label="Account"
+            >
+              <SquareUser class="size-5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right" :side-offset="5">
+            Account
+          </TooltipContent>
+        </Tooltip>
+      </nav>
+    </aside>
+    <div class="flex flex-col">
+      <header class="sticky top-0 z-10 flex h-[53px] items-center gap-1 border-b bg-background px-4">
+        <h1 class="text-xl font-semibold">
+          Playground
+        </h1>
+        <Drawer>
+          <DrawerTrigger as-child>
+            <Button variant="ghost" size="icon" class="md:hidden">
+              <Settings class="size-4" />
+              <span class="sr-only">Settings</span>
+            </Button>
+          </DrawerTrigger>
+          <DrawerContent class="max-h-[80vh]">
+            <DrawerHeader>
+              <DrawerTitle>Configuration</DrawerTitle>
+              <DrawerDescription>
+                Configure the settings for the model and messages.
+              </DrawerDescription>
+            </DrawerHeader>
+            <form class="grid w-full items-start gap-6 overflow-auto p-4 pt-0">
+              <fieldset class="grid gap-6 rounded-lg border p-4">
+                <legend class="-ml-1 px-1 text-sm font-medium">
+                  Settings
+                </legend>
+                <div class="grid gap-3">
+                  <Label for="model">Model</Label>
+                  <Select>
+                    <SelectTrigger
+                      id="model"
+                      class="items-start [&_[data-description]]:hidden"
+                    >
+                      <SelectValue placeholder="Select a model" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="genesis">
+                        <div class="flex items-start gap-3 text-muted-foreground">
+                          <Rabbit class="size-5" />
+                          <div class="grid gap-0.5">
+                            <p>
+                              Neural
+                              <span class="font-medium text-foreground">
+                                Genesis
+                              </span>
+                            </p>
+                            <p class="text-xs" data-description>
+                              Our fastest model for general use cases.
+                            </p>
+                          </div>
+                        </div>
+                      </SelectItem>
+                      <SelectItem value="explorer">
+                        <div class="flex items-start gap-3 text-muted-foreground">
+                          <Bird class="size-5" />
+                          <div class="grid gap-0.5">
+                            <p>
+                              Neural
+                              <span class="font-medium text-foreground">
+                                Explorer
+                              </span>
+                            </p>
+                            <p class="text-xs" data-description>
+                              Performance and speed for efficiency.
+                            </p>
+                          </div>
+                        </div>
+                      </SelectItem>
+                      <SelectItem value="quantum">
+                        <div class="flex items-start gap-3 text-muted-foreground">
+                          <Turtle class="size-5" />
+                          <div class="grid gap-0.5">
+                            <p>
+                              Neural
+                              <span class="font-medium text-foreground">
+                                Quantum
+                              </span>
+                            </p>
+                            <p class="text-xs" data-description>
+                              The most powerful model for complex
+                              computations.
+                            </p>
+                          </div>
+                        </div>
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div class="grid gap-3">
+                  <Label for="temperature">Temperature</Label>
+                  <Input id="temperature" type="number" placeholder="0.4" />
+                </div>
+                <div class="grid gap-3">
+                  <Label for="top-p">Top P</Label>
+                  <Input id="top-p" type="number" placeholder="0.7" />
+                </div>
+                <div class="grid gap-3">
+                  <Label for="top-k">Top K</Label>
+                  <Input id="top-k" type="number" placeholder="0.0" />
+                </div>
+              </fieldset>
+              <fieldset class="grid gap-6 rounded-lg border p-4">
+                <legend class="-ml-1 px-1 text-sm font-medium">
+                  Messages
+                </legend>
+                <div class="grid gap-3">
+                  <Label for="role">Role</Label>
+                  <Select default-value="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 class="grid gap-3">
+                  <Label for="content">Content</Label>
+                  <Textarea id="content" placeholder="You are a..." />
+                </div>
+              </fieldset>
+            </form>
+          </DrawerContent>
+        </Drawer>
+        <Button
+          variant="outline"
+          size="sm"
+          class="ml-auto gap-1.5 text-sm"
+        >
+          <Share class="size-3.5" />
+          Share
+        </Button>
+      </header>
+      <main class="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
+        <div class="relative hidden flex-col items-start gap-8 md:flex">
+          <form class="grid w-full items-start gap-6">
+            <fieldset class="grid gap-6 rounded-lg border p-4">
+              <legend class="-ml-1 px-1 text-sm font-medium">
+                Settings
+              </legend>
+              <div class="grid gap-3">
+                <Label for="model">Model</Label>
+                <Select>
+                  <SelectTrigger
+                    id="model"
+                    class="items-start [&_[data-description]]:hidden"
+                  >
+                    <SelectValue placeholder="Select a model" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="genesis">
+                      <div class="flex items-start gap-3 text-muted-foreground">
+                        <Rabbit class="size-5" />
+                        <div class="grid gap-0.5">
+                          <p>
+                            Neural
+                            <span class="font-medium text-foreground">
+                              Genesis
+                            </span>
+                          </p>
+                          <p class="text-xs" data-description>
+                            Our fastest model for general use cases.
+                          </p>
+                        </div>
+                      </div>
+                    </SelectItem>
+                    <SelectItem value="explorer">
+                      <div class="flex items-start gap-3 text-muted-foreground">
+                        <Bird class="size-5" />
+                        <div class="grid gap-0.5">
+                          <p>
+                            Neural
+                            <span class="font-medium text-foreground">
+                              Explorer
+                            </span>
+                          </p>
+                          <p class="text-xs" data-description>
+                            Performance and speed for efficiency.
+                          </p>
+                        </div>
+                      </div>
+                    </SelectItem>
+                    <SelectItem value="quantum">
+                      <div class="flex items-start gap-3 text-muted-foreground">
+                        <Turtle class="size-5" />
+                        <div class="grid gap-0.5">
+                          <p>
+                            Neural
+                            <span class="font-medium text-foreground">
+                              Quantum
+                            </span>
+                          </p>
+                          <p class="text-xs" data-description>
+                            The most powerful model for complex computations.
+                          </p>
+                        </div>
+                      </div>
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div class="grid gap-3">
+                <Label for="temperature">Temperature</Label>
+                <Input id="temperature" type="number" placeholder="0.4" />
+              </div>
+              <div class="grid grid-cols-2 gap-4">
+                <div class="grid gap-3">
+                  <Label for="top-p">Top P</Label>
+                  <Input id="top-p" type="number" placeholder="0.7" />
+                </div>
+                <div class="grid gap-3">
+                  <Label for="top-k">Top K</Label>
+                  <Input id="top-k" type="number" placeholder="0.0" />
+                </div>
+              </div>
+            </fieldset>
+            <fieldset class="grid gap-6 rounded-lg border p-4">
+              <legend class="-ml-1 px-1 text-sm font-medium">
+                Messages
+              </legend>
+              <div class="grid gap-3">
+                <Label for="role">Role</Label>
+                <Select default-value="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 class="grid gap-3">
+                <Label for="content">Content</Label>
+                <Textarea
+                  id="content"
+                  placeholder="You are a..."
+                  class="min-h-[9.5rem]"
+                />
+              </div>
+            </fieldset>
+          </form>
+        </div>
+        <div class="relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2">
+          <Badge variant="outline" class="absolute right-3 top-3">
+            Output
+          </Badge>
+          <div class="flex-1" />
+          <form class="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring">
+            <Label for="message" class="sr-only">
+              Message
+            </Label>
+            <Textarea
+              id="message"
+              placeholder="Type your message here..."
+              class="min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0"
+            />
+            <div class="flex items-center p-3 pt-0">
+              <Tooltip>
+                <TooltipTrigger as-child>
+                  <Button variant="ghost" size="icon">
+                    <Paperclip class="size-4" />
+                    <span class="sr-only">Attach file</span>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="top">
+                  Attach File
+                </TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger as-child>
+                  <Button variant="ghost" size="icon">
+                    <Mic class="size-4" />
+                    <span class="sr-only">Use Microphone</span>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="top">
+                  Use Microphone
+                </TooltipContent>
+              </Tooltip>
+              <Button type="submit" size="sm" class="ml-auto gap-1.5">
+                Send Message
+                <CornerDownLeft class="size-3.5" />
+              </Button>
+            </div>
+          </form>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard04.vue b/apps/www/src/lib/registry/new-york/block/Dashboard04.vue
new file mode 100644
index 00000000..1f69e9a1
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/block/Dashboard04.vue
@@ -0,0 +1,216 @@
+<script lang="ts">
+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 containerClass = 'w-full h-full'
+</script>
+
+<script setup lang="ts">
+import { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'
+
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
+import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
+</script>
+
+<template>
+  <div class="flex min-h-screen w-full flex-col">
+    <header class="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
+      <nav class="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">
+        <a
+          href="#"
+          class="flex items-center gap-2 text-lg font-semibold md:text-base"
+        >
+          <Package2 class="h-6 w-6" />
+          <span class="sr-only">Acme Inc</span>
+        </a>
+        <a
+          href="#"
+          class="text-muted-foreground transition-colors hover:text-foreground"
+        >
+          Dashboard
+        </a>
+        <a
+          href="#"
+          class="text-muted-foreground transition-colors hover:text-foreground"
+        >
+          Orders
+        </a>
+        <a
+          href="#"
+          class="text-muted-foreground transition-colors hover:text-foreground"
+        >
+          Products
+        </a>
+        <a
+          href="#"
+          class="text-muted-foreground transition-colors hover:text-foreground"
+        >
+          Customers
+        </a>
+        <a
+          href="#"
+          class="text-foreground transition-colors hover:text-foreground"
+        >
+          Settings
+        </a>
+      </nav>
+      <Sheet>
+        <SheetTrigger as-child>
+          <Button
+            variant="outline"
+            size="icon"
+            class="shrink-0 md:hidden"
+          >
+            <Menu class="h-5 w-5" />
+            <span class="sr-only">Toggle navigation menu</span>
+          </Button>
+        </SheetTrigger>
+        <SheetContent side="left">
+          <nav class="grid gap-6 text-lg font-medium">
+            <a
+              href="#"
+              class="flex items-center gap-2 text-lg font-semibold"
+            >
+              <Package2 class="h-6 w-6" />
+              <span class="sr-only">Acme Inc</span>
+            </a>
+            <a
+              href="#"
+              class="text-muted-foreground hover:text-foreground"
+            >
+              Dashboard
+            </a>
+            <a
+              href="#"
+              class="text-muted-foreground hover:text-foreground"
+            >
+              Orders
+            </a>
+            <a
+              href="#"
+              class="text-muted-foreground hover:text-foreground"
+            >
+              Products
+            </a>
+            <a
+              href="#"
+              class="text-muted-foreground hover:text-foreground"
+            >
+              Customers
+            </a>
+            <a href="#" class="hover:text-foreground">
+              Settings
+            </a>
+          </nav>
+        </SheetContent>
+      </Sheet>
+      <div class="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
+        <form class="ml-auto flex-1 sm:flex-initial">
+          <div class="relative">
+            <Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              type="search"
+              placeholder="Search products..."
+              class="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
+            />
+          </div>
+        </form>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <Button variant="secondary" size="icon" class="rounded-full">
+              <CircleUser class="h-5 w-5" />
+              <span class="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 class="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 class="mx-auto grid w-full max-w-6xl gap-2">
+        <h1 class="text-3xl font-semibold">
+          Settings
+        </h1>
+      </div>
+      <div class="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
+        <nav class="grid gap-4 text-sm text-muted-foreground">
+          <a href="#" class="font-semibold text-primary">
+            General
+          </a>
+          <a href="#">
+            Security
+          </a>
+          <a href="#">
+            Integrations
+          </a>
+          <a href="#">
+            Support
+          </a>
+          <a href="#">
+            Organizations
+          </a>
+          <a href="#">
+            Advanced
+          </a>
+        </nav>
+        <div class="grid gap-6">
+          <Card>
+            <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 class="border-t px-6 py-4">
+              <Button>Save</Button>
+            </CardFooter>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Plugins Directory</CardTitle>
+              <CardDescription>
+                The directory within your project, in which your plugins are
+                located.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form class="flex flex-col gap-4">
+                <Input
+                  placeholder="Project Name"
+                  default-value="/content/plugins"
+                />
+                <div class="flex items-center space-x-2">
+                  <Checkbox id="include" default-checked />
+                  <label
+                    for="include"
+                    class="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 class="border-t px-6 py-4">
+              <Button>Save</Button>
+            </CardFooter>
+          </Card>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>