feat: Blocks (#428)

* chore: build registry

* feat: block preview

* refactor: change to use iframe
feat: add more blocks

* chore: fix build

* feat: add all other blocks

* feat: add copy button

* chore: cleanup

apps/www/.vitepress/theme/components/Announcement.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { announcementConfig } from '../config/site'
+import ArrowRightIcon from '~icons/radix-icons/arrow-right'
+</script>
+
+<template>
+  <a
+    :href="announcementConfig.link"
+    class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
+  >
+    {{ announcementConfig.icon }} <Separator class="mx-2 h-4" orientation="vertical" />
+    <span class="sm:hidden">{{ announcementConfig.title }}</span>
+    <span class="hidden sm:inline">
+      {{ announcementConfig.title }}
+    </span>
+    <ArrowRightIcon class="ml-1 h-4 w-4" />
+  </a>
+</template>

apps/www/.vitepress/theme/components/BlockCopyButton.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+import { toRefs } from 'vue'
+import { CheckIcon, ClipboardIcon } from '@radix-icons/vue'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/lib/registry/new-york/ui/tooltip'
+
+const props = withDefaults(defineProps<{
+  code?: string
+}>(), {
+  code: '',
+})
+const { code } = toRefs(props)
+
+const { copy, copied } = useClipboard({ source: code })
+</script>
+
+<template>
+  <Tooltip :delay-duration="100">
+    <TooltipTrigger as-child>
+      <Button
+        size="icon"
+        variant="outline"
+        class="h-7 w-7 [&_svg]:size-3.5"
+        @click="copy()"
+      >
+        <span class="sr-only">Copy</span>
+        <CheckIcon v-if="copied" />
+        <ClipboardIcon v-else />
+      </Button>
+    </TooltipTrigger>
+    <TooltipContent>Copy code</TooltipContent>
+  </Tooltip>
+</template>

apps/www/.vitepress/theme/components/BlockPage.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useUrlSearchParams } from '@vueuse/core'
+import ComponentLoader from './ComponentLoader.vue'
+
+const params = useUrlSearchParams('hash-params')
+</script>
+
+<template>
+  <div v-if="params.name && params.style" :class="params.containerClass">
+    <ComponentLoader :key="params.style?.toString()" :name="params.name?.toString()" :type-name="'block'" />
+  </div>
+</template>

apps/www/.vitepress/theme/components/BlockPreview.vue

@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import { CircleHelp, Info, Monitor, Smartphone, Tablet } from 'lucide-vue-next'
+import { reactive, ref, watch } from 'vue'
+import { codeToHtml } from 'shiki'
+import { compileScript, parse, walk } from 'vue/compiler-sfc'
+import MagicString from 'magic-string'
+import { cssVariables } from '../config/shiki'
+import StyleSwitcher from './StyleSwitcher.vue'
+import Spinner from './Spinner.vue'
+import BlockCopyButton from './BlockCopyButton.vue'
+import { useConfigStore } from '@/stores/config'
+
+// import { V0Button } from '@/components/v0-button'
+import { Badge } from '@/lib/registry/new-york/ui/badge'
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/lib/registry/new-york/ui/resizable'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/new-york/ui/tabs'
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+
+const props = defineProps<{
+  name: string
+}>()
+
+const { style, codeConfig } = useConfigStore()
+
+const isLoading = ref(true)
+const tabValue = ref('preview')
+const resizableRef = ref<InstanceType<typeof ResizablePanel>>()
+
+const rawString = ref('')
+const codeHtml = ref('')
+const metadata = reactive({
+  description: null as string | null,
+  iframeHeight: null as string | null,
+  containerClass: null as string | null,
+})
+
+function removeScript(code: string) {
+  const s = new MagicString(code)
+  const scriptTagRegex = /<script\s+lang="ts"\s*>[\s\S]+?<\/script>/g
+  let match
+  // eslint-disable-next-line no-cond-assign
+  while ((match = scriptTagRegex.exec(code)) !== null) {
+    const start = match.index
+    const end = match.index + match[0].length
+    s.overwrite(start, end, '') // Replace the script tag with an empty string
+  }
+  return s.trimStart().toString()
+}
+
+function transformImportPath(code: string) {
+  const s = new MagicString(code)
+  s.replaceAll(`@/lib/registry/${style.value}`, codeConfig.value.componentsPath)
+  s.replaceAll(`@/lib/utils`, codeConfig.value.utilsPath)
+  return s.toString()
+}
+
+watch([style, codeConfig], async () => {
+  try {
+    const baseRawString = await import(`../../../src/lib/registry/${style.value}/block/${props.name}.vue?raw`).then(res => res.default.trim())
+    rawString.value = transformImportPath(removeScript(baseRawString))
+
+    if (!metadata.description) {
+      const { descriptor } = parse(baseRawString)
+      const ast = compileScript(descriptor, { id: '' })
+      walk(ast.scriptAst, {
+        enter(node: any) {
+          const declaration = node.declaration
+          // Check if the declaration is a variable declaration
+          if (declaration?.type === 'VariableDeclaration') {
+            // Extract variable names and their values
+            declaration.declarations.forEach((decl: any) => {
+              // @ts-expect-error ignore missing type
+              metadata[decl.id.name] = decl.init ? decl.init.value : null
+            })
+          }
+        },
+      })
+    }
+
+    codeHtml.value = await codeToHtml(rawString.value, {
+      lang: 'vue',
+      theme: cssVariables,
+    })
+  }
+  catch (err) {
+    console.error(err)
+  }
+}, { immediate: true, deep: true })
+</script>
+
+<template>
+  <Tabs
+    :id="name"
+    v-model="tabValue"
+    class="relative grid w-full scroll-m-20 gap-4"
+    :style=" {
+      '--container-height': metadata.iframeHeight ?? '600px',
+    }"
+  >
+    <div class="flex flex-col items-center gap-4 sm:flex-row">
+      <div class="flex items-center gap-2">
+        <TabsList class="hidden sm:flex">
+          <TabsTrigger value="preview">
+            Preview
+          </TabsTrigger>
+          <TabsTrigger value="code">
+            Code
+          </TabsTrigger>
+        </TabsList>
+        <div class="hidden items-center gap-2 sm:flex">
+          <Separator
+            orientation="vertical"
+            class="mx-2 hidden h-4 md:flex"
+          />
+          <div class="flex items-center gap-2">
+            <a :href="`#${name}`">
+              <Badge variant="outline">{{ name }}</Badge>
+            </a>
+            <Popover>
+              <PopoverTrigger class="hidden text-muted-foreground hover:text-foreground sm:flex">
+                <Info class="h-3.5 w-3.5" />
+                <span class="sr-only">Block description</span>
+              </PopoverTrigger>
+              <PopoverContent
+                side="right"
+                :side-offset="10"
+                class="text-sm"
+              >
+                {{ metadata.description }}
+              </PopoverContent>
+            </Popover>
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center gap-2 pr-[14px] sm:ml-auto">
+        <div class="hidden h-[28px] items-center gap-1.5 rounded-md border p-[2px] shadow-sm md:flex">
+          <ToggleGroup
+            type="single"
+            default-value="100"
+            @update:model-value="(value) => {
+              resizableRef?.resize(parseInt(value))
+            }"
+          >
+            <ToggleGroupItem
+              value="100"
+              class="h-[22px] w-[22px] rounded-sm p-0"
+            >
+              <Monitor class="h-3.5 w-3.5" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="60"
+              class="h-[22px] w-[22px] rounded-sm p-0"
+            >
+              <Tablet class="h-3.5 w-3.5" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="25"
+              class="h-[22px] w-[22px] rounded-sm p-0"
+            >
+              <Smartphone class="h-3.5 w-3.5" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+        <Separator
+          orientation="vertical"
+          class="mx-2 hidden h-4 md:flex"
+        />
+        <StyleSwitcher class="h-7" />
+        <Popover>
+          <PopoverTrigger class="hidden text-muted-foreground hover:text-foreground sm:flex">
+            <CircleHelp class="h-3.5 w-3.5" />
+            <span class="sr-only">Block description</span>
+          </PopoverTrigger>
+          <PopoverContent
+            side="top"
+            :side-offset="20"
+            class="space-y-3 rounded-[0.5rem] text-sm"
+          >
+            <p class="font-medium">
+              What is the difference between the New York and Default style?
+            </p>
+            <p>
+              A style comes with its own set of components, animations,
+              icons and more.
+            </p>
+            <p>
+              The <span class="font-medium">Default</span> style has
+              larger inputs, uses lucide-react for icons and
+              tailwindcss-animate for animations.
+            </p>
+            <p>
+              The <span class="font-medium">New York</span> style ships
+              with smaller buttons and inputs. It also uses shadows on cards
+              and buttons.
+            </p>
+          </PopoverContent>
+        </Popover>
+        <Separator orientation="vertical" class="mx-2 h-4" />
+        <BlockCopyButton :code="rawString" />
+        <!-- <V0Button
+          name="{block.name}"
+          description="{block.description" || "Edit in v0"}
+          code="{block.code}"
+          style="{block.style}"
+        /> -->
+      </div>
+    </div>
+    <TabsContent
+      v-show="tabValue === 'preview'"
+      force-mount
+      value="preview"
+      class="relative after:absolute after:inset-0 after:right-3 after:z-0 after:rounded-lg after:bg-muted h-[--container-height] px-0"
+    >
+      <ResizablePanelGroup id="block-resizable" direction="horizontal" class="relative z-10">
+        <ResizablePanel
+          id="block-resizable-panel-1"
+          ref="resizableRef"
+          class="relative rounded-lg border bg-background transition-all "
+          :default-size="100"
+          :min-size="25"
+        >
+          <div v-if="isLoading" class="flex items-center justify-center h-full">
+            <Spinner />
+          </div>
+          <iframe
+            v-show="!isLoading"
+            :src="`/blocks/renderer#name=${name}&style=${style}&containerClass=${encodeURIComponent(metadata.containerClass ?? '')}`"
+            class="relative z-20 w-full bg-background h-[--container-height]"
+            @load="isLoading = false"
+          />
+        </ResizablePanel>
+        <ResizableHandle id="block-resizable-handle" class="relative hidden w-3 bg-transparent p-0 after:absolute after:right-0 after:top-1/2 after:h-8 after:w-[6px] after:-translate-y-1/2 after:translate-x-[-1px] after:rounded-full after:bg-border after:transition-all after:hover:h-10 sm:block" />
+        <ResizablePanel id="block-resizable-panel-2" :default-size="0" :min-size="0" />
+      </ResizablePanelGroup>
+    </TabsContent>
+    <TabsContent value="code" class="h-[--container-height]">
+      <div
+        class="language-vue !h-full !max-h-[none] !mt-0"
+        v-html="codeHtml"
+      />
+    </TabsContent>
+  </Tabs>
+</template>

apps/www/.vitepress/theme/components/Blocks.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import PageHeader from '../components/PageHeader.vue'
+import PageHeaderHeading from '../components/PageHeaderHeading.vue'
+import PageHeaderDescription from '../components/PageHeaderDescription.vue'
+import PageAction from '../components/PageAction.vue'
+import Announcement from '../components/Announcement.vue'
+import BlockPreview from './BlockPreview.vue'
+import GitHubIcon from '~icons/radix-icons/github-logo'
+
+import { buttonVariants } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
+
+const blocks = ref<string[]>([])
+
+import('../../../__registry__/index').then((res) => {
+  blocks.value = Object.values(res.Index.default).filter(i => i.type === 'components:block').map(i => i.name)
+})
+</script>
+
+<template>
+  <PageHeader class="page-header pb-8">
+    <Announcement />
+    <PageHeaderHeading>Building Blocks for the Web</PageHeaderHeading>
+    <PageHeaderDescription>
+      Beautifully designed. Copy and paste into your apps. Open Source.
+    </PageHeaderDescription>
+
+    <PageAction>
+      <a
+        href="/blocks.html#blocks"
+        :class="cn(buttonVariants(), 'rounded-[6px]')"
+      >
+        Browse
+      </a>
+      <a
+        href="https://github.com/radix-vue/shadcn-vue"
+        target="_blank"
+        :class="cn(
+          buttonVariants({ variant: 'outline' }),
+          'rounded-[6px]',
+        )"
+      >
+        <GitHubIcon class="mr-2 h-4 w-4" />
+        GitHub
+      </a>
+    </PageAction>
+  </PageHeader>
+
+  <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>

apps/www/.vitepress/theme/components/ComponentLoader.vue

@@ -5,12 +5,13 @@ import { useConfigStore } from '@/stores/config'
 
 const props = defineProps<{
   name: string
+  typeName?: 'example' | 'block'
 }>()
 const { style } = useConfigStore()
 
 const Component = defineAsyncComponent({
   loadingComponent: Spinner,
-  loader: () => import(`../../../src/lib/registry/${style.value}/example/${props.name}.vue`),
+  loader: () => import(`../../../src/lib/registry/${style.value}/${props.typeName}/${props.name}.vue`),
   timeout: 5000,
 })
 </script>

apps/www/.vitepress/theme/components/ComponentPreview.vue

@@ -83,7 +83,7 @@ watch([style, codeConfig], async () => {
             'items-end': align === 'end',
           })"
         >
-          <ComponentLoader v-bind="$attrs" :key="style" :name="name" />
+          <ComponentLoader v-bind="$attrs" :key="style" :name="name" :type-name="'example'" />
         </div>
       </TabsContent>
       <TabsContent value="code">

apps/www/.vitepress/theme/components/LandingPage.vue

@@ -4,7 +4,7 @@ import PageHeaderHeading from '../components/PageHeaderHeading.vue'
 import PageHeaderDescription from '../components/PageHeaderDescription.vue'
 import PageAction from '../components/PageAction.vue'
 import ExamplesNav from '../components/ExamplesNav.vue'
-import { announcementConfig } from '../config/site'
+import Announcement from '../components/Announcement.vue'
 import GitHubIcon from '~icons/radix-icons/github-logo'
 
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
@@ -16,16 +16,7 @@ import MailExample from '@/examples/mail/Example.vue'
 
 <template>
   <PageHeader class="page-header pb-8">
-    <a
+    <Announcement />
-      :href="announcementConfig.link"
-      class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
-    >
-      {{ announcementConfig.icon }}   <Separator class="mx-2 h-4" orientation="vertical" />
-      <span class="sm:hidden">{{ announcementConfig.title }}</span>
-      <span class="hidden sm:inline">{{ announcementConfig.title }}
-      </span>
-      <!-- <ArrowRightIcon class="ml-1 h-4 w-4" /> -->
-    </a>
     <PageHeaderHeading>Build your component library.</PageHeaderHeading>
     <PageHeaderDescription>
       Beautifully designed components that you can copy and paste into your

apps/www/.vitepress/theme/config/docs.ts

@@ -38,6 +38,10 @@ export const docsConfig: DocsConfig = {
       title: 'Examples',
       href: '/examples/mail',
     },
+    {
+      title: 'Blocks',
+      href: '/blocks',
+    },
     {
       title: 'GitHub',
       href: 'https://github.com/radix-vue/shadcn-vue',

apps/www/.vitepress/theme/config/site.ts

@@ -15,6 +15,6 @@ export const siteConfig = {
 
 export const announcementConfig = {
   icon: '✨',
-  title: 'New components!',
+  title: 'Introducing Blocks!',
-  link: '/docs/components/carousel.html',
+  link: '/blocks',
 }

apps/www/.vitepress/theme/layout/ExamplesLayout.vue

@@ -4,8 +4,7 @@ import PageHeaderHeading from '../components/PageHeaderHeading.vue'
 import PageHeaderDescription from '../components/PageHeaderDescription.vue'
 import PageAction from '../components/PageAction.vue'
 import ExamplesNav from '../components/ExamplesNav.vue'
-import { announcementConfig } from '../config/site'
+import Announcement from '../components/Announcement.vue'
-import ArrowRightIcon from '~icons/radix-icons/arrow-right'
 
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { Separator } from '@/lib/registry/new-york/ui/separator'
@@ -15,17 +14,7 @@ import { cn } from '@/lib/utils'
 <template>
   <div class="container relative">
     <PageHeader class="page-header pb-8">
-      <a
+      <Announcement />
-        :href="announcementConfig.link"
-        class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
-      >
-        {{ announcementConfig.icon }} <Separator class="mx-2 h-4" orientation="vertical" />
-        <span class="sm:hidden">{{ announcementConfig.title }}</span>
-        <span class="hidden sm:inline">
-          {{ announcementConfig.title }}
-        </span>
-        <ArrowRightIcon class="ml-1 h-4 w-4" />
-      </a>
       <PageHeaderHeading class="hidden md:block">
         Check out some examples.
       </PageHeaderHeading>

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,7 +85,11 @@ watch(() => $route.path, (n) => {
 </script>
 
 <template>
-  <div vaul-drawer-wrapper class="flex min-h-screen flex-col bg-background">
+  <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"
@@ -298,4 +303,5 @@ watch(() => $route.path, (n) => {
       <NewYorkSonner :theme="'system'" />
       <NewYorkToaster />
     </div>
-</template>../components/CodeConfigCustomizer.vue
+  </TooltipProvider>
+</template>

apps/www/__registry__/index.ts

@@ -1102,6 +1102,62 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/Cards/Metric.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/Cards/Metric.vue"],
     },
+    "Authentication01": {
+      name: "Authentication01",
+      type: "components:block",
+      registryDependencies: ["button","card","input","label"],
+      component: () => import("../src/lib/registry/default/block/Authentication01.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/block/Authentication01.vue"],
+    },
+    "Authentication02": {
+      name: "Authentication02",
+      type: "components:block",
+      registryDependencies: ["button","card","input","label"],
+      component: () => import("../src/lib/registry/default/block/Authentication02.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/block/Authentication02.vue"],
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      type: "components:block",
+      registryDependencies: ["button","card","input","label"],
+      component: () => import("../src/lib/registry/default/block/Authentication03.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/block/Authentication03.vue"],
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      type: "components:block",
+      registryDependencies: ["button","input","label"],
+      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",
@@ -2202,5 +2258,61 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/Cards/Metric.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/Cards/Metric.vue"],
     },
+    "Authentication01": {
+      name: "Authentication01",
+      type: "components:block",
+      registryDependencies: ["button","card","input","label"],
+      component: () => import("../src/lib/registry/new-york/block/Authentication01.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/block/Authentication01.vue"],
+    },
+    "Authentication02": {
+      name: "Authentication02",
+      type: "components:block",
+      registryDependencies: ["button","card","input","label"],
+      component: () => import("../src/lib/registry/new-york/block/Authentication02.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/block/Authentication02.vue"],
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      type: "components:block",
+      registryDependencies: ["button","card","input","label"],
+      component: () => import("../src/lib/registry/new-york/block/Authentication03.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/block/Authentication03.vue"],
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      type: "components:block",
+      registryDependencies: ["button","input","label"],
+      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"],
+    },
   },
 }

apps/www/src/content/blocks.md

@@ -0,0 +1,9 @@
+---
+title: Building Blocks
+---
+
+<script setup>
+import Blocks from "../../.vitepress/theme/components/Blocks.vue"
+</script>
+
+<Blocks />

apps/www/src/content/blocks/renderer.md

@@ -0,0 +1,10 @@
+---
+title: Blocks - shadcn-vue
+layout: false
+---
+
+<script setup>
+import BlockPage from "../../../.vitepress/theme/components/BlockPage.vue"
+</script>
+
+<BlockPage />

apps/www/src/lib/registry/default/block/Authentication01.vue

@@ -0,0 +1,41 @@
+<script lang="ts">
+export const description
+  = 'A simple login form with email and password. The submit button says \'Sign in\'.'
+export const iframeHeight = '600px'
+export const containerClass = 'w-full h-screen flex items-center justify-center px-4'
+</script>
+
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+</script>
+
+<template>
+  <Card class="w-full max-w-sm">
+    <CardHeader>
+      <CardTitle class="text-2xl">
+        Login
+      </CardTitle>
+      <CardDescription>
+        Enter your email below to login to your account.
+      </CardDescription>
+    </CardHeader>
+    <CardContent class="grid gap-4">
+      <div class="grid gap-2">
+        <Label for="email">Email</Label>
+        <Input id="email" type="email" placeholder="m@example.com" required />
+      </div>
+      <div class="grid gap-2">
+        <Label for="password">Password</Label>
+        <Input id="password" type="password" required />
+      </div>
+    </CardContent>
+    <CardFooter>
+      <Button class="w-full">
+        Sign in
+      </Button>
+    </CardFooter>
+  </Card>
+</template>

apps/www/src/lib/registry/default/block/Authentication02.vue

@@ -0,0 +1,60 @@
+<script lang="ts">
+export const description
+  = 'A login form with email and password. There\'s an option to login with Google and a link to sign up if you don\'t have an account.'
+export const iframeHeight = '600px'
+export const containerClass = 'w-full h-screen flex items-center justify-center px-4'
+</script>
+
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+</script>
+
+<template>
+  <Card class="mx-auto max-w-sm">
+    <CardHeader>
+      <CardTitle class="text-2xl">
+        Login
+      </CardTitle>
+      <CardDescription>
+        Enter your email below to login to your account
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div class="grid gap-4">
+        <div class="grid gap-2">
+          <Label for="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder="m@example.com"
+            required
+          />
+        </div>
+        <div class="grid gap-2">
+          <div class="flex items-center">
+            <Label for="password">Password</Label>
+            <a href="#" class="ml-auto inline-block text-sm underline">
+              Forgot your password?
+            </a>
+          </div>
+          <Input id="password" type="password" required />
+        </div>
+        <Button type="submit" class="w-full">
+          Login
+        </Button>
+        <Button variant="outline" class="w-full">
+          Login with Google
+        </Button>
+      </div>
+      <div class="mt-4 text-center text-sm">
+        Don't have an account?
+        <a href="#" class="underline">
+          Sign up
+        </a>
+      </div>
+    </CardContent>
+  </Card>
+</template>

apps/www/src/lib/registry/default/block/Authentication03.vue

@@ -0,0 +1,65 @@
+<script lang="ts">
+export const description
+  = 'A sign up form with first name, last name, email and password inside a card. There\'s an option to sign up with GitHub and a link to login if you already have an account'
+export const iframeHeight = '600px'
+export const containerClass = 'w-full h-screen flex items-center justify-center px-4'
+</script>
+
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+</script>
+
+<template>
+  <Card class="mx-auto max-w-sm">
+    <CardHeader>
+      <CardTitle class="text-xl">
+        Sign Up
+      </CardTitle>
+      <CardDescription>
+        Enter your information to create an account
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div class="grid gap-4">
+        <div class="grid grid-cols-2 gap-4">
+          <div class="space-y-2">
+            <Label for="first-name">First name</Label>
+            <Input id="first-name" placeholder="Max" required />
+          </div>
+          <div class="grid gap-2">
+            <Label for="last-name">Last name</Label>
+            <Input id="last-name" placeholder="Robinson" required />
+          </div>
+        </div>
+        <div class="grid gap-2">
+          <Label for="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder="m@example.com"
+            required
+          />
+        </div>
+        <div class="grid gap-2">
+          <Label for="password">Password</Label>
+          <Input id="password" type="password" />
+        </div>
+        <Button type="submit" class="w-full">
+          Create an account
+        </Button>
+        <Button variant="outline" class="w-full">
+          Sign up with GitHub
+        </Button>
+      </div>
+      <div class="mt-4 text-center text-sm">
+        Already have an account?
+        <a href="#" class="underline">
+          Sign in
+        </a>
+      </div>
+    </CardContent>
+  </Card>
+</template>

apps/www/src/lib/registry/default/block/Authentication04.vue

@@ -0,0 +1,73 @@
+<script lang="ts">
+export const description
+  = 'A login page with two columns. The first column has the login form with email and password. There\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'
+export const iframeHeight = '800px'
+export const containerClass = 'w-full h-full p-4 lg:p-0'
+</script>
+
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+</script>
+
+<template>
+  <div class="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]">
+    <div class="flex items-center justify-center py-12">
+      <div class="mx-auto grid w-[350px] gap-6">
+        <div class="grid gap-2 text-center">
+          <h1 class="text-3xl font-bold">
+            Login
+          </h1>
+          <p class="text-balance text-muted-foreground">
+            Enter your email below to login to your account
+          </p>
+        </div>
+        <div class="grid gap-4">
+          <div class="grid gap-2">
+            <Label for="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="m@example.com"
+              required
+            />
+          </div>
+          <div class="grid gap-2">
+            <div class="flex items-center">
+              <Label for="password">Password</Label>
+              <a
+                href="/forgot-password"
+                class="ml-auto inline-block text-sm underline"
+              >
+                Forgot your password?
+              </a>
+            </div>
+            <Input id="password" type="password" required />
+          </div>
+          <Button type="submit" class="w-full">
+            Login
+          </Button>
+          <Button variant="outline" class="w-full">
+            Login with Google
+          </Button>
+        </div>
+        <div class="mt-4 text-center text-sm">
+          Don't have an account?
+          <a href="#" class="underline">
+            Sign up
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="hidden bg-muted lg:block">
+      <img
+        src="/placeholder.svg"
+        alt="Image"
+        width="1920"
+        height="1080"
+        class="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+      >
+    </div>
+  </div>
+</template>

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>

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>

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>

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>

apps/www/src/lib/registry/new-york/block/Authentication01.vue

@@ -0,0 +1,41 @@
+<script lang="ts">
+export const description
+  = 'A simple login form with email and password. The submit button says \'Sign in\'.'
+export const iframeHeight = '600px'
+export const containerClass = 'w-full h-screen flex items-center justify-center px-4'
+</script>
+
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+</script>
+
+<template>
+  <Card class="w-full max-w-sm">
+    <CardHeader>
+      <CardTitle class="text-2xl">
+        Login
+      </CardTitle>
+      <CardDescription>
+        Enter your email below to login to your account.
+      </CardDescription>
+    </CardHeader>
+    <CardContent class="grid gap-4">
+      <div class="grid gap-2">
+        <Label for="email">Email</Label>
+        <Input id="email" type="email" placeholder="m@example.com" required />
+      </div>
+      <div class="grid gap-2">
+        <Label for="password">Password</Label>
+        <Input id="password" type="password" required />
+      </div>
+    </CardContent>
+    <CardFooter>
+      <Button class="w-full">
+        Sign in
+      </Button>
+    </CardFooter>
+  </Card>
+</template>

apps/www/src/lib/registry/new-york/block/Authentication02.vue

@@ -0,0 +1,60 @@
+<script lang="ts">
+export const description
+  = 'A login form with email and password. There\'s an option to login with Google and a link to sign up if you don\'t have an account.'
+export const iframeHeight = '600px'
+export const containerClass = 'w-full h-screen flex items-center justify-center px-4'
+</script>
+
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+</script>
+
+<template>
+  <Card class="mx-auto max-w-sm">
+    <CardHeader>
+      <CardTitle class="text-2xl">
+        Login
+      </CardTitle>
+      <CardDescription>
+        Enter your email below to login to your account
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div class="grid gap-4">
+        <div class="grid gap-2">
+          <Label for="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder="m@example.com"
+            required
+          />
+        </div>
+        <div class="grid gap-2">
+          <div class="flex items-center">
+            <Label for="password">Password</Label>
+            <a href="#" class="ml-auto inline-block text-sm underline">
+              Forgot your password?
+            </a>
+          </div>
+          <Input id="password" type="password" required />
+        </div>
+        <Button type="submit" class="w-full">
+          Login
+        </Button>
+        <Button variant="outline" class="w-full">
+          Login with Google
+        </Button>
+      </div>
+      <div class="mt-4 text-center text-sm">
+        Don't have an account?
+        <a href="#" class="underline">
+          Sign up
+        </a>
+      </div>
+    </CardContent>
+  </Card>
+</template>

apps/www/src/lib/registry/new-york/block/Authentication03.vue

@@ -0,0 +1,65 @@
+<script lang="ts">
+export const description
+  = 'A sign up form with first name, last name, email and password inside a card. There\'s an option to sign up with GitHub and a link to login if you already have an account'
+export const iframeHeight = '600px'
+export const containerClass = 'w-full h-screen flex items-center justify-center px-4'
+</script>
+
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+</script>
+
+<template>
+  <Card class="mx-auto max-w-sm">
+    <CardHeader>
+      <CardTitle class="text-xl">
+        Sign Up
+      </CardTitle>
+      <CardDescription>
+        Enter your information to create an account
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div class="grid gap-4">
+        <div class="grid grid-cols-2 gap-4">
+          <div class="space-y-2">
+            <Label for="first-name">First name</Label>
+            <Input id="first-name" placeholder="Max" required />
+          </div>
+          <div class="grid gap-2">
+            <Label for="last-name">Last name</Label>
+            <Input id="last-name" placeholder="Robinson" required />
+          </div>
+        </div>
+        <div class="grid gap-2">
+          <Label for="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder="m@example.com"
+            required
+          />
+        </div>
+        <div class="grid gap-2">
+          <Label for="password">Password</Label>
+          <Input id="password" type="password" />
+        </div>
+        <Button type="submit" class="w-full">
+          Create an account
+        </Button>
+        <Button variant="outline" class="w-full">
+          Sign up with GitHub
+        </Button>
+      </div>
+      <div class="mt-4 text-center text-sm">
+        Already have an account?
+        <a href="#" class="underline">
+          Sign in
+        </a>
+      </div>
+    </CardContent>
+  </Card>
+</template>

apps/www/src/lib/registry/new-york/block/Authentication04.vue

@@ -0,0 +1,73 @@
+<script lang="ts">
+export const description
+  = 'A login page with two columns. The first column has the login form with email and password. There\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'
+export const iframeHeight = '800px'
+export const containerClass = 'w-full h-full p-4 lg:p-0'
+</script>
+
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+</script>
+
+<template>
+  <div class="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]">
+    <div class="flex items-center justify-center py-12">
+      <div class="mx-auto grid w-[350px] gap-6">
+        <div class="grid gap-2 text-center">
+          <h1 class="text-3xl font-bold">
+            Login
+          </h1>
+          <p class="text-balance text-muted-foreground">
+            Enter your email below to login to your account
+          </p>
+        </div>
+        <div class="grid gap-4">
+          <div class="grid gap-2">
+            <Label for="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="m@example.com"
+              required
+            />
+          </div>
+          <div class="grid gap-2">
+            <div class="flex items-center">
+              <Label for="password">Password</Label>
+              <a
+                href="/forgot-password"
+                class="ml-auto inline-block text-sm underline"
+              >
+                Forgot your password?
+              </a>
+            </div>
+            <Input id="password" type="password" required />
+          </div>
+          <Button type="submit" class="w-full">
+            Login
+          </Button>
+          <Button variant="outline" class="w-full">
+            Login with Google
+          </Button>
+        </div>
+        <div class="mt-4 text-center text-sm">
+          Don't have an account?
+          <a href="#" class="underline">
+            Sign up
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="hidden bg-muted lg:block">
+      <img
+        src="/placeholder.svg"
+        alt="Image"
+        width="1920"
+        height="1080"
+        class="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+      >
+    </div>
+  </div>
+</template>

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>

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>

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>

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>

apps/www/src/lib/registry/registry.ts

@@ -27,9 +27,12 @@ export async function buildRegistry() {
   const uiRegistry = await crawlUI(ui_path)
 
   const example_path = resolve('./src/lib/registry/default/example')
-  const exampleRegistry = await crawlExample(example_path)
+  const exampleRegistry = await crawlDirectory(example_path, 'example')
 
-  return uiRegistry.concat(exampleRegistry)
+  const block_path = resolve('./src/lib/registry/default/block')
+  const blockRegistry = await crawlDirectory(block_path, 'block')
+
+  return uiRegistry.concat(exampleRegistry).concat(blockRegistry)
 }
 
 async function crawlUI(rootPath: string) {
@@ -53,15 +56,15 @@ async function crawlUI(rootPath: string) {
   return uiRegistry
 }
 
-async function crawlExample(rootPath: string) {
+async function crawlDirectory(rootPath: string, typeName: 'example' | 'block') {
-  const type = 'components:example'
+  const type = `components:${typeName}` as const
 
   const dir = await readdir(rootPath, {
     recursive: true,
     withFileTypes: true,
   })
 
-  const exampleRegistry: Registry = []
+  const registry: Registry = []
 
   for (const dirent of dir) {
     if (dirent.name === 'index.ts')
@@ -69,11 +72,11 @@ async function crawlExample(rootPath: string) {
 
     if (dirent.isFile()) {
       const [name] = dirent.name.split('.vue')
-      const file_path = join('example', normalize(dirent.path).split('/example')[1], dirent.name)
+      const file_path = join(typeName, normalize(dirent.path).split(`/${typeName}`)[1], dirent.name)
       const { dependencies, registryDependencies }
       = await getDependencies(join(dirent.path, dirent.name))
 
-      exampleRegistry.push({
+      registry.push({
         name,
         type,
         files: [file_path],
@@ -87,14 +90,14 @@ async function crawlExample(rootPath: string) {
     // if (dirent.isDirectory()) {
     // 	const componentPath = resolve(rootPath, dirent.name);
     // 	const ui = await buildUIRegistry(componentPath, dirent.name);
-    // 	exampleRegistry.push({
+    // 	registry.push({
     // 		...ui,
     // 		type
     // 	});
     // }
   }
 
-  return exampleRegistry
+  return registry
 }
 
 async function buildUIRegistry(componentPath: string, componentName: string) {

apps/www/src/lib/registry/schema.ts

@@ -10,6 +10,7 @@ export const registrySchema = z.array(
       'components:ui',
       'components:component',
       'components:example',
+      'components:block',
     ]),
   }),
 )

apps/www/src/public/placeholder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>