.editorconfig

@@ -1,12 +0,0 @@
-# EditorConfig is awesome: https://EditorConfig.org
-
-# top-most EditorConfig file
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true

.gitea/actions/setup/action.yml

@@ -1,17 +0,0 @@
-name: Setup
-description: Installs Node, Enables Corepack and caches pnpm.
-
-runs:
-  using: composite
-
-  steps:
-    - name: Enable corepack
-      run: corepack enable
-      shell: bash
-
-    - name: Setup node & pnpm
-      uses: actions/setup-node@v4
-      with:
-        node-version: lts/*
-        cache: pnpm
-        registry-url: 'https://registry.npmjs.org'

.gitea/workflows/release.yaml

@@ -1,39 +0,0 @@
-# .github/workflows/release.yml
-
-name: Release
-
-permissions:
-  contents: write
-
-on:
-  push:
-    tags:
-      - 'v*'
-
-jobs:
-  release:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Setup (Install Node & pnpm)
-        uses: ./.github/actions/setup
-
-      - name: Install dependencies
-        run: pnpm i --frozen-lockfile
-
-      - run: pnpm dlx changelogithub
-        env:
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
-
-      - name: Build CLI & Publish to npm
-        run: pnpm --filter shadcn-vue pub:release
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Build Module & Publish to npm
-        run: pnpm --filter shadcn-nuxt pub:release
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitea/workflows/test.yaml

@@ -1,31 +0,0 @@
-name: Test
-
-on:
-  push:
-    branches:
-      - dev
-    paths:
-      - 'packages/**'
-
-  pull_request:
-    branches:
-      - dev
-    paths:
-      - 'packages/**'
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Setup (Install Node & pnpm)
-        uses: ./.github/actions/setup
-
-      - name: Install dependencies
-        run: pnpm i --frozen-lockfile
-
-      - name: Test
-        run: pnpm test

.github/workflows/publish.yaml

@@ -48,10 +48,32 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v3
 
-      - name: Setup (Install Node & pnpm)
-        uses: ./.github/actions/setup
+      # Run a build step here
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 9.0.5
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
         run: pnpm i --frozen-lockfile

.github/workflows/release.yaml

@@ -0,0 +1,27 @@
+# .github/workflows/release.yml
+
+name: Release
+
+permissions:
+  contents: write
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - run: npx changelogithub
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.github/workflows/test.yaml

@@ -0,0 +1,52 @@
+name: Test
+
+on:
+  push:
+    branches:
+      - dev
+    paths:
+      - 'packages/**'
+
+  pull_request:
+    branches:
+      - dev
+    paths:
+      - 'packages/**'
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 9.0.5
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm i --frozen-lockfile
+
+      - name: Test
+        run: pnpm test

.vscode/extensions.json

@@ -1,7 +1,6 @@
 {
   "recommendations": [
     "Vue.volar",
-    "dbaeumer.vscode-eslint",
-    "bradlc.vscode-tailwindcss"
+    "dbaeumer.vscode-eslint"
   ]
 }

.vscode/settings.json

@@ -1,16 +1,11 @@
 {
   "vue.server.hybridMode": true,
-  "vue.server.includeLanguages": [
-    "vue",
-    "markdown"
-  ],
   "prettier.enable": false,
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit",
     "source.organizeImports": "never"
   },
-  "eslint.useFlatConfig": true,
   "eslint.rules.customizations": [
     { "rule": "style/*", "severity": "off" },
     { "rule": "format/*", "severity": "off" },
@@ -34,9 +29,5 @@
     "json",
     "jsonc",
     "yaml"
-  ],
-  "tailwindCSS.experimental.classRegex": [
-    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
-    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
   ]
 }

README.md

@@ -1,7 +1,7 @@
 <p align="center">
  <img align="center" src="https://raw.githubusercontent.com/radix-vue/shadcn-vue/dev/apps/www/src/public/android-chrome-192x192.png" height="96" />
  <h1 align="center">
-  shadcn-vue by Niklas Hermanns
+  shadcn-vue
  </h1>
 </p>
 
@@ -31,7 +31,3 @@ All credits go to these open-source works and resources
 ## License
 
 Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).
-
-## Actions
-
-- Test

apps/www/.vitepress/config.mts

@@ -1,13 +1,14 @@
 import path from 'node:path'
-import { transformerMetaWordHighlight } from '@shikijs/transformers'
-import autoprefixer from 'autoprefixer'
-import tailwind from 'tailwindcss'
-import Icons from 'unplugin-icons/vite'
 import { defineConfig } from 'vitepress'
+import Icons from 'unplugin-icons/vite'
+import tailwind from 'tailwindcss'
+import autoprefixer from 'autoprefixer'
+import { cssVariables } from './theme/config/shiki'
 
+// import { transformerMetaWordHighlight, transformerNotationWordHighlight } from '@shikijs/transformers'
 import { siteConfig } from './theme/config/site'
-import CodeWrapperPlugin from './theme/plugins/codewrapper'
 import ComponentPreviewPlugin from './theme/plugins/previewer'
+import CodeWrapperPlugin from './theme/plugins/codewrapper'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -30,6 +31,7 @@ export default defineConfig({
     ['meta', { name: 'og:site_name', content: siteConfig.name }],
     ['meta', { name: 'og:image', content: siteConfig.ogImage }],
     ['meta', { name: 'twitter:image', content: siteConfig.ogImage }],
+
   ],
 
   sitemap: {
@@ -48,16 +50,14 @@ export default defineConfig({
       pattern: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/:path',
       text: 'Edit this page on GitHub',
     },
-    carbonAds: {
-      code: 'CW7DK27U',
-      placement: 'wwwshadcn-vuecom',
-    },
   },
 
   srcDir: path.resolve(__dirname, '../src'),
   markdown: {
+    theme: cssVariables,
     codeTransformers: [
-      transformerMetaWordHighlight(),
+      // transformerMetaWordHighlight(),
+      // transformerNotationWordHighlight(),
     ],
     config(md) {
       md.use(ComponentPreviewPlugin)
@@ -77,7 +77,7 @@ export default defineConfig({
       },
     },
     plugins: [
-      Icons({ compiler: 'vue3', autoInstall: true }) as any,
+      Icons({ compiler: 'vue3', autoInstall: true }),
     ],
     resolve: {
       alias: {

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

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import { capitalize } from 'vue'
-
-defineProps<{
-  type: 'prop' | 'emit' | 'slot' | 'method'
-  data: { name: string, description: string, type: string, required: boolean }[]
-}>()
-</script>
-
-<template>
-  <div>
-    <h3>{{ capitalize(type) }}</h3>
-
-    <div v-for="(item, index) in data" :key="index" class="py-4 border-b text-sm">
-      <div class="flex items-center gap-2 flex-wrap">
-        <h5 class="text-sm">
-          <code>{{ item.name }}</code>
-        </h5>
-        <code>{{ item.type }}</code>
-        <span v-if="item.required" class="font-normal text-red-500 text-xs">Required*</span>
-      </div>
-
-      <div class="[&_p]:!my-2 ml-1" v-html="item.description" />
-    </div>
-  </div>
-</template>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { announcementConfig } from '../config/site'
 import { Separator } from '@/lib/registry/default/ui/separator'
 import ArrowRightIcon from '~icons/radix-icons/arrow-right'
-import { announcementConfig } from '../config/site'
 </script>
 
 <template>

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

@@ -1,233 +0,0 @@
-<script setup lang="ts">
-import { useConfigStore } from '@/stores/config'
-import { CircleHelp, Info, Monitor, Smartphone, Tablet } from 'lucide-vue-next'
-import MagicString from 'magic-string'
-import { reactive, ref, watch } from 'vue'
-import { compileScript, parse, walk } from 'vue/compiler-sfc'
-import { highlight } from '../config/shiki'
-import BlockCopyButton from './BlockCopyButton.vue'
-import StyleSwitcher from './StyleSwitcher.vue'
-
-// 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'
-import BlockPreview from './BlockPreview.vue'
-
-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 = highlight(rawString.value, 'vue')
-  }
-  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 as string))
-            }"
-          >
-            <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="30"
-              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-vue-next 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"
-          :default-size="100"
-          :min-size="30"
-          :as-child="true"
-        >
-          <BlockPreview :name="name" styles="default" :container-class="metadata.containerClass ?? ''" container />
-        </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/BlockCopyButton.vue

@@ -1,13 +1,13 @@
 <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'
-import { CheckIcon, ClipboardIcon } from '@radix-icons/vue'
-import { useClipboard } from '@vueuse/core'
-import { toRefs } from 'vue'
 
 const props = withDefaults(defineProps<{
   code?: string

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

@@ -2,11 +2,11 @@
 import { useUrlSearchParams } from '@vueuse/core'
 import ComponentLoader from './ComponentLoader.vue'
 
-const params = useUrlSearchParams('history')
+const params = useUrlSearchParams('hash-params')
 </script>
 
 <template>
-  <div v-if="params.name" :class="params.containerClass">
+  <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

@@ -1,44 +1,245 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+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
-  styles?: string
-  containerClass?: string
-  container?: boolean
 }>()
 
+const { style, codeConfig } = useConfigStore()
+
 const isLoading = ref(true)
+const tabValue = ref('preview')
+const resizableRef = ref<InstanceType<typeof ResizablePanel>>()
 
-const iframeURL = computed(() => {
-  // @ts-expect-error env available in import.meta
-  if (import.meta.env.SSR)
-    return ''
-
-  const url = new URL(`${window.location.origin}/blocks/renderer`)
-  Object.entries(props).forEach(([key, value]) => {
-    if (value)
-      url.searchParams.append(key, value as string)
-  })
-  return url.href
+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>
-  <div class="relative rounded-lg border overflow-hidden bg-background" :class="[container ? '' : 'aspect-[4/2.5]']">
-    <div v-if="isLoading" class="flex items-center justify-center h-full">
-      <Spinner />
+  <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="30"
+              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>
-    <div
-      :class="[container ? 'w-full' : 'absolute inset-0 hidden w-[1600px] bg-background md:block']"
+    <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"
     >
-      <iframe
-        v-show="!isLoading"
-        :src="iframeURL"
-        class="relative z-20 w-full bg-background" :class="[container ? 'h-[--container-height]' : 'size-full']"
-        @load="isLoading = false"
+      <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="30"
+        >
+          <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"
       />
-    </div>
-  </div>
+    </TabsContent>
+  </Tabs>
 </template>

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

@@ -1,15 +1,15 @@
 <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'
-import GitHubIcon from '~icons/radix-icons/github-logo'
-import { ref } from 'vue'
-import Announcement from '../components/Announcement.vue'
-import PageAction from '../components/PageAction.vue'
-import PageHeader from '../components/PageHeader.vue'
-import PageHeaderDescription from '../components/PageHeaderDescription.vue'
-
-import PageHeaderHeading from '../components/PageHeaderHeading.vue'
-import BlockContainer from './BlockContainer.vue'
 
 const blocks = ref<string[]>([])
 
@@ -48,6 +48,6 @@ import('../../../__registry__/index').then((res) => {
   </PageHeader>
 
   <section id="blocks" class="grid scroll-mt-24 gap-24 lg:gap-48">
-    <BlockContainer v-for="block in blocks" :key="block" :name="block" />
+    <BlockPreview v-for="block in blocks" :key="block" :name="block" />
   </section>
 </template>

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

@@ -19,7 +19,7 @@ defineProps<CalloutProps>()
     <AlertTitle v-if="title">
       {{ title }}
     </AlertTitle>
-    <AlertDescription class="[&_a]:underline">
+    <AlertDescription>
       <slot />
     </AlertDescription>
   </Alert>

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

@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import { useData } from 'vitepress'
-import { onMounted, ref, watch } from 'vue'
-
-const { page, theme } = useData()
-const carbonOptions = theme.value.carbonAds
-const container = ref()
-
-let isInitialized = false
-
-function init() {
-  if (!isInitialized) {
-    isInitialized = true
-    const s = document.createElement('script')
-    s.type = 'text/javascript'
-    s.id = '_carbonads_js'
-    s.src = `//cdn.carbonads.com/carbon.js?serve=${carbonOptions.code}&placement=${carbonOptions.placement}&format=cover`
-    s.async = true
-    container.value.appendChild(s)
-  }
-}
-
-watch(() => page.value.relativePath, () => {
-  if (isInitialized) {
-    ;(window as any)._carbonads?.refresh()
-  }
-})
-
-// no need to account for option changes during dev, we can just
-// refresh the page
-if (carbonOptions) {
-  onMounted(() => {
-    // @ts-expect-error ignoring env
-    if (import.meta.env.DEV)
-      return
-
-    // if the page is loaded when aside is active, load carbon directly.
-    // otherwise, only load it if the page resizes to wide enough. this avoids
-    // loading carbon at all on mobile where it's never shown
-    init()
-  })
-}
-</script>
-
-<template>
-  <div
-    ref="container"
-  />
-</template>
-
-<style>
-#carbon-responsive {
-  @apply w-[238px] !mt-6;
-}
-
-.carbon-responsive-wrap {
-	@apply bg-muted/50 border border-muted p-4 rounded-md flex flex-col items-center !important;
-}
-
-.carbon-responsive-wrap .carbon-img {
-	@apply flex-none rounded overflow-hidden !important;
-}
-
-.carbon-responsive-wrap .carbon-text {
-  @apply text-muted-foreground text-sm flex-none text-center !important;
-}
-
-#carbonads .carbon-poweredby {
-	@apply bg-background text-muted-foreground block text-right text-[10px] uppercase no-underline !important;
-}
-</style>

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

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/new-york/ui/form'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
-import { useConfigStore } from '@/stores/config'
-import { toTypedSchema } from '@vee-validate/zod'
-import RadixIconsGear from '~icons/radix-icons/gear'
 import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
+import { useConfigStore } from '@/stores/config'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/new-york/ui/form'
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
+import RadixIconsGear from '~icons/radix-icons/gear'
 
 const { codeConfig, setCodeConfig } = useConfigStore()
 

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { Style } from '@/lib/registry/styles'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Icon } from '@iconify/vue'
 import { ref, toRefs, watch } from 'vue'
+import { Icon } from '@iconify/vue'
 import { makeCodeSandboxParams } from '../utils/codeeditor'
 import Tooltip from './Tooltip.vue'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import type { Style } from '@/lib/registry/styles'
 
 const props = defineProps<{
   name: string

apps/www/.vitepress/theme/components/CodeWrapper.ts

@@ -1,5 +1,5 @@
+import { type VNode, type VNodeArrayChildren, cloneVNode, defineComponent } from 'vue'
 import { useConfigStore } from '@/stores/config'
-import { cloneVNode, defineComponent, type VNode, type VNodeArrayChildren } from 'vue'
 
 function crawlSpan(children: VNodeArrayChildren, cb: (vnode: VNode) => void) {
   children.forEach((childNode) => {

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useConfigStore } from '@/stores/config'
 import { defineAsyncComponent } from 'vue'
 import Spinner from './Spinner.vue'
+import { useConfigStore } from '@/stores/config'
 
 const props = defineProps<{
   name: string

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

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
-import { cn } from '@/lib/utils'
-import { useConfigStore } from '@/stores/config'
-import { useClipboard } from '@vueuse/core'
+import { ref, watch } from 'vue'
+import { codeToHtml } from 'shiki'
 import MagicString from 'magic-string'
-import { computed, ref, watch } from 'vue'
-import { highlight } from '../config/shiki'
-import CodeSandbox from './CodeSandbox.vue'
+import { cssVariables } from '../config/shiki'
+import StyleSwitcher from './StyleSwitcher.vue'
 import ComponentLoader from './ComponentLoader.vue'
 import Stackblitz from './Stackblitz.vue'
-import StyleSwitcher from './StyleSwitcher.vue'
+import CodeSandbox from './CodeSandbox.vue'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
+import { useConfigStore } from '@/stores/config'
+import { cn } from '@/lib/utils'
 
 defineOptions({
   inheritAttrs: false,
@@ -24,7 +24,6 @@ const { style, codeConfig } = useConfigStore()
 
 const rawString = ref('')
 const codeHtml = ref('')
-const transformedRawString = computed(() => transformImportPath(rawString.value))
 
 function transformImportPath(code: string) {
   const s = new MagicString(code)
@@ -36,14 +35,15 @@ function transformImportPath(code: string) {
 watch([style, codeConfig], async () => {
   try {
     rawString.value = await import(`../../../src/lib/registry/${style.value}/example/${props.name}.vue?raw`).then(res => res.default.trim())
-    codeHtml.value = highlight(transformedRawString.value, 'vue')
+    codeHtml.value = await codeToHtml(transformImportPath(rawString.value), {
+      lang: 'vue',
+      theme: cssVariables,
+    })
   }
   catch (err) {
     console.error(err)
   }
 }, { immediate: true, deep: true })
-
-const { copy, copied } = useClipboard()
 </script>
 
 <template>
@@ -86,12 +86,8 @@ const { copy, copied } = useClipboard()
           <ComponentLoader v-bind="$attrs" :key="style" :name="name" :type-name="'example'" />
         </div>
       </TabsContent>
-      <TabsContent value="code" class="vp-doc">
-        <div v-if="codeHtml" class="language-vue" style="flex: 1;">
-          <button title="Copy Code" class="copy" :class="{ copied }" @click="copy(transformedRawString)" />
-
-          <div v-html="codeHtml" />
-        </div>
+      <TabsContent value="code">
+        <div v-if="codeHtml" class="language-vue" style="flex: 1;" v-html="codeHtml" />
         <slot v-else />
       </TabsContent>
     </Tabs>

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

@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useClipboard } from '@vueuse/core'
+import { useConfigStore } from '@/stores/config'
 import { themes } from '@/lib/registry'
 import { Button } from '@/lib/registry/new-york/ui/button'
-import { useConfigStore } from '@/stores/config'
-import { useClipboard } from '@vueuse/core'
 import CheckIcon from '~icons/radix-icons/check'
 import CopyIcon from '~icons/radix-icons/copy'
-import { computed, ref } from 'vue'
 
 const { theme, config } = useConfigStore()
 

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

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbSeparator,
-} from '@/lib/registry/new-york/ui/breadcrumb'
-import { useRoute } from 'vitepress'
-import { computed } from 'vue'
-
-const route = useRoute()
-
-interface Item {
-  title: string
-  href: string
-}
-
-function generateBreadcrumb(url: string): Item[] {
-  const breadcrumbItems: Item[] = []
-  const segments = url.split('/').filter(segment => segment !== '') // Remove empty segments
-
-  // Construct breadcrumb for each segment
-  let href = ''
-  for (let i = 0; i < segments.length; i++) {
-    const segment = segments[i].replace('.html', '')
-    href += `/${segment}`
-    breadcrumbItems.push({ title: segment, href })
-  }
-  return breadcrumbItems
-}
-
-const breadcrumbs = computed(() => generateBreadcrumb(route.path))
-</script>
-
-<template>
-  <Breadcrumb>
-    <BreadcrumbList>
-      <template v-for="(breadcrumb, index) in breadcrumbs" :key="breadcrumb.title">
-        <BreadcrumbItem>
-          <BreadcrumbLink
-            class="capitalize"
-            :href="index === 0 ? undefined : breadcrumb.href"
-            :class="{ 'text-foreground': index === breadcrumbs.length - 1 }"
-          >
-            {{ breadcrumb.title }}
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator v-if="index !== breadcrumbs.length - 1" />
-      </template>
-    </BreadcrumbList>
-  </Breadcrumb>
-</template>

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import Pencil2Icon from '~icons/radix-icons/pencil-2'
 import { useData } from 'vitepress'
 import { computed } from 'vue'
+import Pencil2Icon from '~icons/radix-icons/pencil-2'
+import { Button } from '@/lib/registry/default/ui/button'
 
 const { theme, page } = useData()
 

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ScrollArea, ScrollBar } from '@/lib/registry/default/ui/scroll-area'
-import { cn } from '@/lib/utils'
-import ArrowRightIcon from '~icons/radix-icons/arrow-right'
 import { useRoute } from 'vitepress'
 import { computed, toRefs } from 'vue'
+import { cn } from '@/lib/utils'
+import { ScrollArea, ScrollBar } from '@/lib/registry/default/ui/scroll-area'
+import ArrowRightIcon from '~icons/radix-icons/arrow-right'
 
 const { path } = toRefs(useRoute())
 
@@ -35,7 +35,7 @@ const examples = [
   },
   {
     name: 'Forms',
-    href: '/examples/forms',
+    href: '/examples/forms/forms',
     code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/forms',
   },
   {

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

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { Color } from '../types/colors'
+import { useConfigStore } from '@/stores/config'
 import { colors } from '@/lib/registry'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/lib/registry/new-york/ui/tooltip'
-import { useConfigStore } from '@/stores/config'
 import RadixIconsCheck from '~icons/radix-icons/check'
 
 defineProps<{

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

@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import MailExample from '@/examples/mail/Example.vue'
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
-import { cn } from '@/lib/utils'
-import GitHubIcon from '~icons/radix-icons/github-logo'
-import Announcement from '../components/Announcement.vue'
-import ExamplesNav from '../components/ExamplesNav.vue'
-import PageAction from '../components/PageAction.vue'
-
 import PageHeader from '../components/PageHeader.vue'
-import PageHeaderDescription from '../components/PageHeaderDescription.vue'
-
 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 Announcement from '../components/Announcement.vue'
+import GitHubIcon from '~icons/radix-icons/github-logo'
+
+import { buttonVariants } from '@/lib/registry/new-york/ui/button'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { cn } from '@/lib/utils'
+
+import MailExample from '@/examples/mail/Example.vue'
 </script>
 
 <template>

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
-import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
 import { ref } from 'vue'
 import { docsConfig } from '../config/docs'
 import Logo from './Logo.vue'
+import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
+import { Button } from '@/lib/registry/default/ui/button'
+import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 
 const open = ref(false)
 </script>
@@ -63,26 +63,17 @@ const open = ref(false)
         </div>
         <div class="flex flex-col space-y-2">
           <div v-for="(items, index) in docsConfig.sidebarNav" :key="index" class="flex flex-col space-y-3 pt-6">
-            <div class="flex items-center">
-              <h4 class="font-medium">
-                {{ items.title }}
-              </h4>
-              <span v-if="items.label" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
-                {{ items.label }}
-              </span>
-            </div>
+            <h4 class="font-medium">
+              {{ items.title }}
+            </h4>
 
             <a
               v-for="item in items.items" :key="item.href"
               :href="item.href"
-              class="text-muted-foreground inline-flex items-center"
+              class="text-muted-foreground"
               @click="open = false"
             >
               {{ item.title }}
-
-              <span v-if="item.label" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
-                {{ item.label }}
-              </span>
             </a>
           </div>
         </div>

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
 import WrapBalancer from 'vue-wrap-balancer'
+import { cn } from '@/lib/utils'
 </script>
 
 <template>
-  <WrapBalancer :class="cn('max-w-[750px] text-center text-lg font-light text-foreground', $attrs.class ?? '')" :prefer-native="false">
+  <WrapBalancer :class="cn('max-w-[750px] text-center text-lg text-muted-foreground sm:text-xl', $attrs.class ?? '')" :prefer-native="false">
     <slot />
   </WrapBalancer>
 </template>

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

@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'
 <template>
   <h1
     :class="cn(
-      'text-center text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]',
+      'text-center text-3xl font-bold leading-tight tracking-tighter md:text-6xl lg:leading-[1.1]',
       $attrs.class ?? '',
     )"
   >

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { Style } from '@/lib/registry/styles'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Icon } from '@iconify/vue'
 import { ref, toRefs, watch } from 'vue'
+import { Icon } from '@iconify/vue'
 import { makeStackblitzParams } from '../utils/codeeditor'
 import Tooltip from './Tooltip.vue'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import type { Style } from '@/lib/registry/styles'
 
 const props = defineProps<{
   name: string

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

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import type { SelectTriggerProps } from 'radix-vue'
+import { useConfigStore } from '@/stores/config'
+
+import { cn } from '@/lib/utils'
 import {
   Select,
   SelectContent,
@@ -7,10 +10,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/lib/registry/new-york/ui/select'
-
 import { styles } from '@/lib/registry/styles'
-import { cn } from '@/lib/utils'
-import { useConfigStore } from '@/stores/config'
 
 const props = defineProps<SelectTriggerProps & { class?: string }>()
 const { config } = useConfigStore()

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

@@ -1,16 +1,11 @@
 <script setup lang="ts">
-import type { TableOfContents, TableOfContentsItem } from '../types/docs'
-import { buttonVariants } from '@/lib/registry/default/ui/button'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/lib/registry/default/ui/collapsible'
-import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 import { onContentUpdated } from 'vitepress'
 import { shallowRef } from 'vue'
-import CarbonAds from '../components/CarbonAds.vue'
+import type { TableOfContents, TableOfContentsItem } from '../types/docs'
 import TableOfContentTree from './TableOfContentTree.vue'
-
-defineProps<{
-  showCarbonAds?: boolean
-}>()
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/lib/registry/default/ui/collapsible'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 
 const headers = shallowRef<TableOfContents>()
 
@@ -29,7 +24,7 @@ function getHeadingsWithHierarchy(divId: string) {
     const level = Number.parseInt(heading.tagName.charAt(1))
     if (!heading.id) {
       const newId = heading.textContent
-        ?.replaceAll(/[^a-z0-9 ]/gi, '')
+        .replaceAll(/[^a-zA-Z0-9 ]/g, '')
         .replaceAll(' ', '-')
         .toLowerCase()
       heading.id = `${newId}`
@@ -68,7 +63,6 @@ onContentUpdated(() => {
           On This Page
         </p>
         <TableOfContentTree :tree="headers" :level="1" />
-        <CarbonAds v-if="showCarbonAds" />
       </div>
     </ScrollArea>
   </div>

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute } from 'vitepress'
 import type { TableOfContentsItem } from '../types/docs'
 import { cn } from '@/lib/utils'
-import { useRoute } from 'vitepress'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 withDefaults(defineProps<{
   level: number

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Tabs, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
 import { computed, useSlots } from 'vue'
+import { Tabs, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
 
 const slots = useSlots()
 

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

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
+import { useData } from 'vitepress'
 import type { Color } from '../types/colors'
-import { colors } from '@/lib/registry'
+import { RADII, useConfigStore } from '@/stores/config'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import { Label } from '@/lib/registry/new-york/ui/label'
-import { RADII, useConfigStore } from '@/stores/config'
+import { colors } from '@/lib/registry'
 import RadixIconsCheck from '~icons/radix-icons/check'
-import RadixIconsMoon from '~icons/radix-icons/moon'
 import RadixIconsSun from '~icons/radix-icons/sun'
-import { useData } from 'vitepress'
+import RadixIconsMoon from '~icons/radix-icons/moon'
 
 defineProps<{
   allColors: Color[]
@@ -43,7 +43,7 @@ const { isDark } = useData()
           @click="setTheme(color)"
         >
           <span
-            class="h-5 w-5 rounded-full flex items-center justify-center shrink-0"
+            class="h-5 w-5 rounded-full flex items-center justify-center"
             :style="{ backgroundColor: colors[color][7].rgb }"
           >
             <RadixIconsCheck

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

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
-import { useConfigStore } from '@/stores/config'
-import { Paintbrush } from 'lucide-vue-next'
-import { onMounted, watch } from 'vue'
-import ThemeCustomizer from './ThemeCustomizer.vue'
-import { allColors } from './theming/utils/data'
-
-const { theme, radius } = useConfigStore()
-
-// Whenever the component is mounted, update the document class list
-onMounted(() => {
-  document.documentElement.style.setProperty('--radius', `${radius.value}rem`)
-  document.documentElement.classList.add(`theme-${theme.value}`)
-})
-
-// Whenever the theme value changes, update the document class list
-watch(theme, (theme) => {
-  document.documentElement.classList.remove(
-    ...allColors.map(color => `theme-${color}`),
-  )
-  document.documentElement.classList.add(`theme-${theme}`)
-})
-
-// Whenever the radius value changes, update the document style
-watch(radius, (radius) => {
-  document.documentElement.style.setProperty('--radius', `${radius}rem`)
-})
-</script>
-
-<template>
-  <Popover>
-    <PopoverTrigger as-child>
-      <Button
-        class="w-9 h-9"
-        :variant="'ghost'"
-        :size="'icon'"
-      >
-        <Paintbrush class="w-4 h-4" />
-      </Button>
-    </PopoverTrigger>
-    <PopoverContent :side-offset="8" align="end" class="w-96">
-      <ThemeCustomizer :all-colors="allColors" />
-    </PopoverContent>
-  </Popover>
-</template>

apps/www/.vitepress/theme/components/index.ts

@@ -1,12 +1,10 @@
-export { default as APITable } from './APITable.vue'
-export { default as BlockPreview } from './BlockPreview.vue'
-export { default as Callout } from './Callout.vue'
 export { default as CodeWrapper } from './CodeWrapper'
 export { default as ComponentPreview } from './ComponentPreview.vue'
+export { default as TabPreview } from './TabPreview.vue'
+export { default as TabMarkdown } from './TabMarkdown.vue'
+export { default as TabsMarkdown } from './TabsMarkdown.vue'
+export { default as Callout } from './Callout.vue'
 export { default as LinkedCard } from './LinkedCard.vue'
 export { default as ManualInstall } from './ManualInstall.vue'
 export { default as Steps } from './Steps.vue'
-export { default as TabMarkdown } from './TabMarkdown.vue'
-export { default as TabPreview } from './TabPreview.vue'
-export { default as TabsMarkdown } from './TabsMarkdown.vue'
 export { default as VPImage } from './VPImage.vue'

apps/www/.vitepress/theme/components/theming/Theming.vue

@@ -1,25 +1,27 @@
 <script setup lang="ts">
+import { type Ref, ref } from 'vue'
 import type { DateRange } from 'radix-vue'
+import { getLocalTimeZone, today } from '@internationalized/date'
+
+import ThemingLayout from './../../layout/ThemingLayout.vue'
+
 import CookieSettings from '@/examples/cards/components/CookieSettings.vue'
 import CreateAccount from '@/examples/cards/components/CreateAccount.vue'
-
 import PaymentMethod from '@/examples/cards/components/PaymentMethod.vue'
-
 import ReportAnIssue from '@/examples/cards/components/ReportAnIssue.vue'
 import ShareDocument from '@/examples/cards/components/ShareDocument.vue'
 import TeamMembers from '@/examples/cards/components/TeamMembers.vue'
+
 import CardChat from '@/lib/registry/new-york/example/CardChat.vue'
 import ActivityGoal from '@/lib/registry/new-york/example/Cards/ActivityGoal.vue'
-import DataTable from '@/lib/registry/new-york/example/Cards/DataTable.vue'
-
 import Metric from '@/lib/registry/new-york/example/Cards/Metric.vue'
+import DataTable from '@/lib/registry/new-york/example/Cards/DataTable.vue'
 import CardStats from '@/lib/registry/new-york/example/CardStats.vue'
-import { Card } from '@/lib/registry/new-york/ui/card'
-import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
-import { getLocalTimeZone, today } from '@internationalized/date'
 
-import { type Ref, ref } from 'vue'
-import ThemingLayout from './../../layout/ThemingLayout.vue'
+import {
+  Card,
+} from '@/lib/registry/new-york/ui/card'
+import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
 
 const now = today(getLocalTimeZone())
 

apps/www/.vitepress/theme/components/theming/utils/data.ts

@@ -1,42 +1,12 @@
+import { CreditCard } from 'lucide-vue-next'
 import RiAppleFill from '~icons/ri/apple-fill'
 import RiPaypalFill from '~icons/ri/paypal-fill'
-import { CreditCard } from 'lucide-vue-next'
 
-type Color =
-  | 'zinc'
-  | 'slate'
-  | 'stone'
-  | 'gray'
-  | 'neutral'
-  | 'red'
-  | 'rose'
-  | 'orange'
-  | 'green'
-  | 'blue'
-  | 'yellow'
-  | 'violet'
-
-// Create an array of color values
-export const allColors: Color[] = [
-  'zinc',
-  'rose',
-  'blue',
-  'green',
-  'orange',
-  'red',
-  'slate',
-  'stone',
-  'gray',
-  'neutral',
-  'yellow',
-  'violet',
-]
-
-// interface Payment {
-//   status: string
-//   email: string
-//   amount: number
-// }
+interface Payment {
+  status: string
+  email: string
+  amount: number
+}
 
 interface TeamMember {
   name: string

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

@@ -8,11 +8,11 @@ export interface NavItem {
 }
 
 export type SidebarNavItem = NavItem & {
-  items?: SidebarNavItem[]
+  items: SidebarNavItem[]
 }
 
 export type NavItemWithChildren = NavItem & {
-  items?: NavItemWithChildren[]
+  items: NavItemWithChildren[]
 }
 
 interface DocsConfig {
@@ -55,18 +55,22 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Introduction',
           href: '/docs/introduction',
+          items: [],
         },
         {
           title: 'Installation',
           href: '/docs/installation',
+          items: [],
         },
         {
           title: 'components.json',
           href: '/docs/components-json',
+          items: [],
         },
         {
           title: 'Theming',
           href: '/docs/theming',
+          items: [],
         },
         {
           title: 'Dark Mode',
@@ -76,22 +80,27 @@ export const docsConfig: DocsConfig = {
         {
           title: 'CLI',
           href: '/docs/cli',
+          items: [],
         },
         {
           title: 'Typography',
           href: '/docs/typography',
+          items: [],
         },
         {
           title: 'Figma',
           href: '/docs/figma',
+          items: [],
         },
         {
           title: 'Changelog',
           href: '/docs/changelog',
+          items: [],
         },
         {
           title: 'About',
           href: '/docs/about',
+          items: [],
         },
         {
           title: 'Contribution',
@@ -106,32 +115,21 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Vite',
           href: '/docs/installation/vite',
+          items: [],
         },
         {
           title: 'Nuxt',
           href: '/docs/installation/nuxt',
+          items: [],
         },
         {
           title: 'Astro',
           href: '/docs/installation/astro',
+          items: [],
         },
         {
           title: 'Laravel',
           href: '/docs/installation/laravel',
-        },
-      ],
-    },
-    {
-      title: 'Extended',
-      items: [
-        {
-          title: 'Auto Form',
-          href: '/docs/components/auto-form',
-          items: [],
-        },
-        {
-          title: 'Charts',
-          href: '/docs/charts',
           items: [],
         },
       ],
@@ -139,34 +137,35 @@ export const docsConfig: DocsConfig = {
     {
       title: 'Components',
       items: [
-        {
-          title: 'Sidebar',
-          href: '/docs/components/sidebar',
-          label: 'New',
-        },
         {
           title: 'Accordion',
           href: '/docs/components/accordion',
+          items: [],
         },
         {
           title: 'Alert',
           href: '/docs/components/alert',
+          items: [],
         },
         {
           title: 'Alert Dialog',
           href: '/docs/components/alert-dialog',
+          items: [],
         },
         {
           title: 'Aspect Ratio',
           href: '/docs/components/aspect-ratio',
+          items: [],
         },
         {
           title: 'Avatar',
           href: '/docs/components/avatar',
+          items: [],
         },
         {
           title: 'Badge',
           href: '/docs/components/badge',
+          items: [],
         },
         {
           title: 'Breadcrumb',
@@ -176,15 +175,18 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Button',
           href: '/docs/components/button',
+          items: [],
         },
         {
           title: 'Calendar',
           href: '/docs/components/calendar',
           items: [],
+          label: 'Updated',
         },
         {
           title: 'Card',
           href: '/docs/components/card',
+          items: [],
         },
         {
           title: 'Carousel',
@@ -194,35 +196,43 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Checkbox',
           href: '/docs/components/checkbox',
+          items: [],
         },
         {
           title: 'Collapsible',
           href: '/docs/components/collapsible',
+          items: [],
         },
         {
           title: 'Combobox',
           href: '/docs/components/combobox',
+          items: [],
         },
         {
           title: 'Command',
           href: '/docs/components/command',
+          items: [],
         },
         {
           title: 'Context Menu',
           href: '/docs/components/context-menu',
+          items: [],
         },
         {
           title: 'Data Table',
           href: '/docs/components/data-table',
+          items: [],
         },
         {
           title: 'Date Picker',
           href: '/docs/components/date-picker',
           items: [],
+          label: 'Updated',
         },
         {
           title: 'Dialog',
           href: '/docs/components/dialog',
+          items: [],
         },
         {
           title: 'Drawer',
@@ -232,60 +242,68 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Dropdown Menu',
           href: '/docs/components/dropdown-menu',
+          items: [],
         },
         {
           title: 'Form',
           href: '/docs/components/form',
+          items: [],
         },
         {
           title: 'Hover Card',
           href: '/docs/components/hover-card',
+          items: [],
         },
         {
           title: 'Input',
           href: '/docs/components/input',
+          items: [],
         },
         {
           title: 'Label',
           href: '/docs/components/label',
+          items: [],
         },
         {
           title: 'Menubar',
           href: '/docs/components/menubar',
+          items: [],
         },
         {
           title: 'Navigation Menu',
           href: '/docs/components/navigation-menu',
-        },
-        {
-          title: 'Number Field',
-          href: '/docs/components/number-field',
+          items: [],
         },
         {
           title: 'Pagination',
           href: '/docs/components/pagination',
+          items: [],
         },
         {
-          title: 'PIN Input',
+          title: 'Pin Input',
           href: '/docs/components/pin-input',
           items: [],
         },
         {
           title: 'Popover',
           href: '/docs/components/popover',
+          items: [],
         },
         {
           title: 'Progress',
           href: '/docs/components/progress',
+          items: [],
         },
         {
           title: 'Radio Group',
           href: '/docs/components/radio-group',
+          items: [],
         },
         {
           title: 'Range Calendar',
           href: '/docs/components/range-calendar',
           items: [],
+          label: 'New',
         },
         {
           title: 'Resizable',
@@ -295,47 +313,52 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Scroll Area',
           href: '/docs/components/scroll-area',
+          items: [],
         },
         {
           title: 'Select',
           href: '/docs/components/select',
+          items: [],
         },
         {
           title: 'Separator',
           href: '/docs/components/separator',
+          items: [],
         },
         {
           title: 'Sheet',
           href: '/docs/components/sheet',
+          items: [],
         },
         {
           title: 'Skeleton',
           href: '/docs/components/skeleton',
+          items: [],
         },
         {
           title: 'Slider',
           href: '/docs/components/slider',
+          items: [],
         },
         {
           title: 'Sonner',
           href: '/docs/components/sonner',
           items: [],
         },
-        {
-          title: 'Stepper',
-          href: '/docs/components/stepper',
-        },
         {
           title: 'Switch',
           href: '/docs/components/switch',
+          items: [],
         },
         {
           title: 'Table',
           href: '/docs/components/table',
+          items: [],
         },
         {
           title: 'Tabs',
           href: '/docs/components/tabs',
+          items: [],
         },
         {
           title: 'Tags Input',
@@ -345,22 +368,27 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Textarea',
           href: '/docs/components/textarea',
+          items: [],
         },
         {
           title: 'Toast',
           href: '/docs/components/toast',
+          items: [],
         },
         {
           title: 'Toggle',
           href: '/docs/components/toggle',
+          items: [],
         },
         {
           title: 'Toggle Group',
           href: '/docs/components/toggle-group',
+          items: [],
         },
         {
           title: 'Tooltip',
           href: '/docs/components/tooltip',
+          items: [],
         },
       ],
     },

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

@@ -1,41 +1,6 @@
-import type { HighlighterCore } from 'shiki/core'
-import type { ThemeOptions } from 'vitepress'
-import { computedAsync } from '@vueuse/core'
-import { createHighlighterCore } from 'shiki/core'
-import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
+import { createCssVariablesTheme } from 'shiki'
 
-export const shikiThemes: ThemeOptions = {
-  light: 'github-light-default',
-  dark: 'github-dark-default',
-}
-
-export const highlighter = computedAsync<HighlighterCore>(async (onCancel) => {
-  const shiki = await createHighlighterCore({
-    engine: createJavaScriptRegexEngine(),
-    themes: [
-      () => import('shiki/themes/github-dark-default.mjs'),
-      () => import('shiki/themes/github-light-default.mjs'),
-    ],
-    langs: [
-      () => import('shiki/langs/javascript.mjs'),
-      () => import('shiki/langs/vue.mjs'),
-    ],
-  })
-
-  onCancel(() => shiki?.dispose())
-  return shiki
+export const cssVariables = createCssVariablesTheme({
+  variablePrefix: '--shiki-',
+  variableDefaults: {},
 })
-
-export function highlight(code: string, lang: string) {
-  if (!highlighter.value)
-    return code
-
-  return highlighter.value.codeToHtml(code, {
-    lang,
-    defaultColor: false,
-    themes: {
-      dark: 'github-dark-default',
-      light: 'github-light-default',
-    },
-  })
-}

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

@@ -15,6 +15,6 @@ export const siteConfig = {
 
 export const announcementConfig = {
   icon: '✨',
-  title: 'Extended: Auto Form, Charts',
-  link: '/docs/components/auto-form.html',
+  title: 'Introducing Blocks!',
+  link: '/blocks',
 }

apps/www/.vitepress/theme/index.ts

@@ -1,8 +1,8 @@
-import * as components from './components'
-import DocsLayout from './layout/DocsLayout.vue'
-import ExamplesLayout from './layout/ExamplesLayout.vue'
 // https://vitepress.dev/guide/custom-theme
 import Layout from './layout/MainLayout.vue'
+import DocsLayout from './layout/DocsLayout.vue'
+import ExamplesLayout from './layout/ExamplesLayout.vue'
+import * as components from './components'
 import './style.css'
 import './styles/vp-doc.css'
 import './styles/shiki.css'

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
+import { useData, useRoute } from 'vitepress'
+import { docsConfig } from '../config/docs'
+import TableOfContentVue from '../components/TableOfContent.vue'
+import EditLink from '../components/EditLink.vue'
 import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 import RadixIconsCode from '~icons/radix-icons/code'
 import RadixIconsExternalLink from '~icons/radix-icons/external-link'
-import { useData, useRoute } from 'vitepress'
-import DocsBreadcrumb from '../components/DocsBreadcrumb.vue'
-import EditLink from '../components/EditLink.vue'
-import TableOfContent from '../components/TableOfContent.vue'
-import { docsConfig } from '../config/docs'
+import ChevronRightIcon from '~icons/lucide/chevron-right'
 
 const $route = useRoute()
 const { frontmatter } = useData()
@@ -27,10 +27,6 @@ const sourceLink = 'https://github.com/radix-vue/shadcn-vue/tree/dev/'
                 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold"
               >
                 {{ docsGroup.title }}
-
-                <span v-if="docsGroup.label" class="ml-2 font-normal rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
-                  {{ docsGroup.label }}
-                </span>
               </h4>
 
               <div
@@ -62,20 +58,23 @@ const sourceLink = 'https://github.com/radix-vue/shadcn-vue/tree/dev/'
       <main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
         <div class="mx-auto w-full min-w-0">
           <div class="block xl:hidden">
-            <TableOfContent />
+            <TableOfContentVue />
           </div>
 
-          <DocsBreadcrumb class="mb-4" />
+          <div class="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
+            <div class="overflow-hidden text-ellipsis whitespace-nowrap">
+              Docs
+            </div>
+            <ChevronRightIcon class="h-4 w-4" />
+            <div class="font-medium text-foreground">
+              {{ frontmatter.title }}
+            </div>
+          </div>
 
           <div class="space-y-2">
-            <div class="flex items-center space-x-4">
-              <h1 class="scroll-m-20 text-4xl font-bold tracking-tight">
-                {{ frontmatter.title }}
-              </h1>
-              <span v-if="frontmatter.label" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
-                {{ frontmatter.label }}
-              </span>
-            </div>
+            <h1 class="scroll-m-20 text-4xl font-bold tracking-tight">
+              {{ frontmatter.title }}
+            </h1>
             <p class="text-lg text-muted-foreground">
               {{ frontmatter.description }}
             </p>
@@ -104,7 +103,7 @@ const sourceLink = 'https://github.com/radix-vue/shadcn-vue/tree/dev/'
 
         <div class="hidden text-sm xl:block">
           <div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
-            <TableOfContent show-carbon-ads />
+            <TableOfContentVue />
           </div>
         </div>
       </main>

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

@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
-import { cn } from '@/lib/utils'
-import Announcement from '../components/Announcement.vue'
-import ExamplesNav from '../components/ExamplesNav.vue'
-import PageAction from '../components/PageAction.vue'
 import PageHeader from '../components/PageHeader.vue'
-
-import PageHeaderDescription from '../components/PageHeaderDescription.vue'
 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 Announcement from '../components/Announcement.vue'
+
+import { buttonVariants } from '@/lib/registry/new-york/ui/button'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { cn } from '@/lib/utils'
 </script>
 
 <template>

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

@@ -1,29 +1,28 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { useMagicKeys, useToggle } from '@vueuse/core'
+import { onMounted, ref, watch } from 'vue'
+import { Content, useData, useRoute, useRouter } from 'vitepress'
+import { type NavItem, docsConfig } from '../config/docs'
+import Logo from '../components/Logo.vue'
+import MobileNav from '../components/MobileNav.vue'
+import CodeConfigCustomizer from '../components/CodeConfigCustomizer.vue'
+
+import Kbd from '../components/Kbd.vue'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/lib/registry/default/ui/command'
+
+import { Button } from '@/lib/registry/default/ui/button'
+import RadixIconsGithubLogo from '~icons/radix-icons/github-logo'
+import RadixIconsMoon from '~icons/radix-icons/moon'
+import RadixIconsSun from '~icons/radix-icons/sun'
+import { useConfigStore } from '@/stores/config'
 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 { useConfigStore } from '@/stores/config'
-import { useMagicKeys, useToggle } from '@vueuse/core'
-import Circle from '~icons/radix-icons/circle'
-
 import File from '~icons/radix-icons/file'
-import RadixIconsGithubLogo from '~icons/radix-icons/github-logo'
-import RadixIconsMoon from '~icons/radix-icons/moon'
-import RadixIconsSun from '~icons/radix-icons/sun'
-import { Content, useData, useRoute, useRouter } from 'vitepress'
-import { onMounted, ref, watch } from 'vue'
-import CodeConfigCustomizer from '../components/CodeConfigCustomizer.vue'
-import Kbd from '../components/Kbd.vue'
-import Logo from '../components/Logo.vue'
-import MobileNav from '../components/MobileNav.vue'
-
-import ThemePopover from '../components/ThemePopover.vue'
-import { docsConfig, type NavItem } from '../config/docs'
+import Circle from '~icons/radix-icons/circle'
 
 const { radius, theme } = useConfigStore()
 // Whenever the component is mounted, update the document class list
@@ -41,7 +40,7 @@ const toggleDark = useToggle(isDark)
 const links = [
   {
     name: 'GitHub',
-    href: 'https://github.com/unovue/shadcn-vue',
+    href: 'https://github.com/radix-vue/shadcn-vue',
     icon: RadixIconsGithubLogo,
   },
   // {
@@ -134,8 +133,6 @@ watch(() => $route.path, (n) => {
             </div>
 
             <nav class="flex items-center">
-              <ThemePopover />
-
               <CodeConfigCustomizer />
 
               <Button
@@ -209,7 +206,7 @@ watch(() => $route.path, (n) => {
             <span class="inline-block ml-2">
               Ported to Vue by
               <a
-                href="https://github.com/unovue"
+                href="https://github.com/radix-vue"
                 target="_blank"
                 class="underline underline-offset-4 font-bold decoration-foreground"
               >
@@ -220,7 +217,7 @@ watch(() => $route.path, (n) => {
             <span class="inline-block ml-2">
               The code source is available on
               <a
-                href="https://github.com/unovue/shadcn-vue"
+                href="https://github.com/radix-vue/shadcn-vue"
                 target="_blank"
                 class="underline underline-offset-4 font-bold decoration-foreground"
               >
@@ -303,7 +300,7 @@ watch(() => $route.path, (n) => {
         </DialogContent>
       </Dialog>
       <DefaultToaster />
-      <NewYorkSonner class="pointer-events-auto" :theme="'system'" />
+      <NewYorkSonner :theme="'system'" />
       <NewYorkToaster />
     </div>
   </TooltipProvider>

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

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { Color } from '../types/colors'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/lib/registry/new-york/ui/dialog'
-import { Drawer, DrawerContent, DrawerTrigger } from '@/lib/registry/new-york/ui/drawer'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
-import { useConfigStore } from '@/stores/config'
-import { Paintbrush } from 'lucide-vue-next'
 import { onMounted, watch } from 'vue'
+import { Paintbrush } from 'lucide-vue-next'
+import PageHeader from '../components/PageHeader.vue'
+import PageHeaderHeading from '../components/PageHeaderHeading.vue'
+import PageHeaderDescription from '../components/PageHeaderDescription.vue'
 import CustomizerCode from '../components/CustomizerCode.vue'
+import type { Color } from '../types/colors'
+import ThemeCustomizer from '../components/ThemeCustomizer.vue'
 import InlineThemePicker from '../components/InlineThemePicker.vue'
 import PageAction from '../components/PageAction.vue'
-import PageHeader from '../components/PageHeader.vue'
-import PageHeaderDescription from '../components/PageHeaderDescription.vue'
-import PageHeaderHeading from '../components/PageHeaderHeading.vue'
-import ThemeCustomizer from '../components/ThemeCustomizer.vue'
+import { useConfigStore } from '@/stores/config'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/lib/registry/new-york/ui/dialog'
+import { Drawer, DrawerContent, DrawerTrigger } from '@/lib/registry/new-york/ui/drawer'
 
 // Create an array of color values
 const allColors: Color[] = [

apps/www/.vitepress/theme/plugins/utils.ts

@@ -1,7 +1,7 @@
 // Credit to @hairyf https://github.com/hairyf/markdown-it-vitepress-demo
 
-import type { AttributeNode, ElementNode } from '@vue/compiler-core'
 import { baseParse } from '@vue/compiler-core'
+import type { AttributeNode, ElementNode } from '@vue/compiler-core'
 
 export interface GenerateOptions {
   attrs?: string

apps/www/.vitepress/theme/style.css

@@ -6,7 +6,7 @@
 	:root {
 		--font-geist-sans: "geist-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 			Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-
+			
 		--background: 0 0% 100%;
 		--foreground: 240 10% 3.9%;
 		--card: 0 0% 100%;
@@ -27,31 +27,6 @@
 		--input: 240 5.9% 90%;
 		--ring: 240 5% 64.9%;
 		--radius: 0.5rem;
-
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-
-
-		--vis-primary-color: var(--primary);
-    --vis-secondary-color: 160 81% 40%;
-    --vis-text-color: var(--muted-foreground);
-
-
-		--vis-font-family: inherit !important;
-		--vis-area-stroke-width: 2px !important;
-		--vis-donut-central-label-text-color: hsl(var(--muted-foreground)) !important;
-		--vis-tooltip-background-color: none !important;
-    --vis-tooltip-border-color: none !important;
-    --vis-tooltip-text-color: none !important;
-    --vis-tooltip-shadow-color: none !important;
-    --vis-tooltip-backdrop-filter: none !important;
-    --vis-tooltip-padding: none !important;
   }
 
   .dark {
@@ -74,22 +49,11 @@
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;
-
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
 
 	* {
 		@apply border-border;
-    scrollbar-width: thin;
-    scrollbar-color: hsl(var(--border)) transparent;
 	}
 	html {
 		-webkit-text-size-adjust: 100%;
@@ -118,6 +82,19 @@
 		src: url("/fonts/Geist/GeistVariableVF.woff2") format("woff2");
 	}
 
+	/* === Scrollbars === */
+
+	::-webkit-scrollbar {
+		@apply w-2;
+		@apply h-2;
+	}
+
+	::-webkit-scrollbar-track {
+		@apply !bg-muted;
+	}
+	::-webkit-scrollbar-thumb {
+		@apply rounded-sm !bg-muted-foreground/30;
+	}
 
 	/* Firefox */
 	/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
@@ -129,14 +106,14 @@
 		scrollbar-color: hsl(215.4 16.3% 56.9% / 0.3);
 	}
 
-  html.dark .shiki,
-  html.dark .shiki span {
-    color: var(--shiki-dark);
-  }
-  html:not(.dark) .shiki,
-  html:not(.dark) .shiki span {
-    color: var(--shiki-light);
-  }
+	.hide-scrollbar::-webkit-scrollbar {
+		display: none;
+	}
+
+	.hide-scrollbar {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
 
 	.antialised {
 		-webkit-font-smoothing: antialiased;
@@ -155,7 +132,7 @@
 		@apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
 		@apply -ml-[50px] -mt-1;
 		content: counter(step);
-	}
+	}	
 }
 
 @media (max-width: 640px) {
@@ -165,30 +142,22 @@
 }
 
 div[class^="language-"] {
-	@apply mb-4 mt-6 max-h-[650px] overflow-x-auto md:rounded-lg border
+	@apply mb-4 mt-6 max-h-[650px] overflow-x-auto md:rounded-lg border !bg-zinc-950 dark:!bg-zinc-900
 }
 pre {
 	@apply py-4;
 }
 
 pre code {
-	@apply relative font-mono text-sm ;
-}
-
-.line-numbers-wrapper, code {
-	--vp-code-line-height: 1.7;
-}
-
-.line-numbers-wrapper {
-	@apply font-mono;
+	@apply relative  font-mono text-sm ;
 }
 
 pre code .line {
-	@apply px-4 min-h-4 !py-0.5 w-full inline-block leading-[--vp-code-line-height];
-}
+	@apply  px-4 min-h-6 !py-0.5 w-full inline-block;
+} 
 
 .line-number {
-	@apply !text-[.75rem] !inline-block text-muted-foreground leading-[--vp-code-line-height];
+	@apply min-h-[1.375rem] !text-sm !inline-block text-muted-foreground;
 }
 
 ::view-transition-old(root),

apps/www/.vitepress/theme/styles/vp-doc.css

@@ -345,13 +345,13 @@
 }
 
 .vp-doc [class*='language-'] code .highlighted {
+  background-color: hsl(240 3.7% 15.9%);
   transition: background-color 0.5s;
   /* margin: 0 -24px;
   padding: 0 24px; */
   width: calc(100% + 2 * 24px);
   display: inline-block;
-  @apply bg-[hsl(var(--muted))] dark:bg-[hsl(var(--muted))]
-} 
+}
 
 .vp-doc [class*='language-'] code .highlighted.error {
   background-color: var(--vp-code-line-error-color);

apps/www/.vitepress/theme/utils/codeeditor.ts

@@ -1,11 +1,10 @@
-import type { Style } from '@/lib/registry/styles'
-import sdk from '@stackblitz/sdk'
 import { getParameters } from 'codesandbox/lib/api/define'
+import sdk from '@stackblitz/sdk'
+import { dependencies as deps } from '../../../package.json'
 import { Index as demoIndex } from '../../../../www/__registry__'
-// @ts-expect-error ?raw
 import tailwindConfigRaw from '../../../tailwind.config?raw'
-// @ts-expect-error ?raw
 import cssRaw from '../../../../../packages/cli/test/fixtures/nuxt/assets/css/tailwind.css?raw'
+import type { Style } from '@/lib/registry/styles'
 
 export function makeCodeSandboxParams(componentName: string, style: Style, sources: Record<string, string>) {
   let files: Record<string, any> = {}
@@ -36,15 +35,7 @@ const viteConfig = {
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
-import tailwind from 'tailwindcss';
-import autoprefixer from 'autoprefixer';
-
 export default defineConfig({
-  css: {
-    postcss: {
-      plugins: [tailwind(), autoprefixer()],
-    },
-  },
   plugins: [vue()],
   resolve: {
     alias: {
@@ -91,7 +82,7 @@ function constructFiles(componentName: string, style: Style, sources: Record<str
   const iconPackage = style === 'default' ? 'lucide-vue-next' : '@radix-icons/vue'
   const dependencies = {
     'vue': 'latest',
-    'radix-vue': 'latest',
+    'radix-vue': deps['radix-vue'],
     '@radix-ui/colors': 'latest',
     'clsx': 'latest',
     'class-variance-authority': 'latest',
@@ -111,6 +102,7 @@ function constructFiles(componentName: string, style: Style, sources: Record<str
     '@vitejs/plugin-vue': 'latest',
     'vue-tsc': 'latest',
     'tailwindcss': 'latest',
+    'postcss': 'latest',
     'autoprefixer': 'latest',
   }
 
@@ -131,7 +123,7 @@ function constructFiles(componentName: string, style: Style, sources: Record<str
     }
   })
 
-  // @ts-expect-error componentName might not exist in Index
+  // @ts-expect-error componentName migth not exist in Index
   const registryDependencies = demoIndex[style][componentName as any]?.registryDependencies?.filter(i => i !== 'utils')
 
   const files = {
@@ -153,6 +145,15 @@ function constructFiles(componentName: string, style: Style, sources: Record<str
       content: tailwindConfigRaw,
       isBinary: false,
     },
+    'postcss.config.js': {
+      content: `module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}`,
+      isBinary: false,
+    },
     'tsconfig.json': {
       content: `{
 "$schema": "https://json.schemastore.org/tsconfig",

apps/www/package.json

@@ -1,7 +1,7 @@
 {
   "name": "www",
   "type": "module",
-  "version": "0.11.3",
+  "version": "0.10.4",
   "files": [
     "dist"
   ],
@@ -12,70 +12,64 @@
     "typecheck": "vue-tsc",
     "typecheck:registry": "vue-tsc -p tsconfig.registry.json",
     "build:registry": "tsx ./scripts/build-registry.ts",
-    "build:registry-strict": "pnpm typecheck:registry && tsx ./scripts/build-registry.ts",
-    "docs:gen": "tsx ./scripts/autogen.ts"
+    "build:registry-strict": "pnpm typecheck:registry && tsx ./scripts/build-registry.ts"
   },
   "dependencies": {
     "@formkit/auto-animate": "^0.8.2",
-    "@internationalized/date": "^3.5.5",
+    "@internationalized/date": "^3.5.2",
     "@radix-icons/vue": "^1.0.0",
-    "@stackblitz/sdk": "^1.11.0",
-    "@tanstack/vue-table": "^8.20.5",
-    "@unovis/ts": "^1.4.4",
-    "@unovis/vue": "^1.4.4",
-    "@vee-validate/zod": "^4.13.2",
-    "@vueuse/core": "^11.1.0",
+    "@stackblitz/sdk": "^1.9.0",
+    "@tanstack/vue-table": "^8.16.0",
+    "@unovis/ts": "^1.4.0",
+    "@unovis/vue": "^1.4.0",
+    "@vee-validate/zod": "^4.12.6",
+    "@vueuse/core": "^10.9.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "codesandbox": "^2.2.3",
-    "date-fns": "^4.1.0",
-    "embla-carousel-autoplay": "^8.3.0",
-    "embla-carousel-vue": "^8.3.0",
-    "lucide-vue-next": "^0.441.0",
-    "magic-string": "^0.30.11",
-    "radix-vue": "catalog:",
+    "date-fns": "^3.6.0",
+    "embla-carousel": "^8.0.2",
+    "embla-carousel-autoplay": "^8.0.2",
+    "embla-carousel-vue": "^8.0.2",
+    "lucide-vue-next": "^0.359.0",
+    "magic-string": "^0.30.10",
+    "radix-vue": "^1.7.2",
     "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.1.2",
-    "vaul-vue": "^0.2.0",
-    "vee-validate": "4.13.2",
-    "vue": "^3.5.6",
-    "vue-sonner": "^1.1.5",
-    "vue-wrap-balancer": "^1.2.1",
-    "zod": "catalog:"
+    "vaul-vue": "^0.1.0",
+    "vee-validate": "4.12.5",
+    "vue": "^3.4.24",
+    "vue-sonner": "^1.1.2",
+    "vue-wrap-balancer": "^1.1.3",
+    "zod": "^3.23.3"
   },
   "devDependencies": {
-    "@babel/traverse": "^7.25.6",
-    "@iconify-json/gravity-ui": "^1.1.3",
-    "@iconify-json/lucide": "^1.1.198",
-    "@iconify-json/ph": "^1.1.13",
+    "@iconify-json/lucide": "^1.1.180",
+    "@iconify-json/ph": "^1.1.12",
     "@iconify-json/radix-icons": "^1.1.14",
-    "@iconify-json/ri": "^1.1.21",
-    "@iconify-json/simple-icons": "^1.1.108",
-    "@iconify-json/tabler": "^1.1.116",
+    "@iconify-json/simple-icons": "^1.1.94",
+    "@iconify-json/tabler": "^1.1.106",
     "@iconify/vue": "^4.1.2",
-    "@oxc-parser/wasm": "catalog:",
-    "@shikijs/transformers": "^1.17.7",
+    "@oxc-parser/wasm": "^0.1.0",
+    "@shikijs/transformers": "^1.3.0",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.5.5",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vitejs/plugin-vue-jsx": "^4.0.1",
-    "@vue/compiler-core": "^3.5.6",
-    "@vue/compiler-dom": "^3.5.6",
+    "@types/node": "^20.12.7",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vue/compiler-core": "^3.4.24",
+    "@vue/compiler-dom": "^3.4.24",
     "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "^10.4.20",
-    "fast-glob": "^3.3.2",
+    "autoprefixer": "^10.4.19",
     "lodash-es": "^4.17.21",
-    "markdown-it": "^14.1.0",
     "pathe": "^1.1.2",
-    "rimraf": "^6.0.1",
-    "shiki": "^1.22.1",
-    "tailwind-merge": "^2.5.2",
-    "tailwindcss": "^3.4.12",
-    "tsx": "^4.19.1",
-    "typescript": "catalog:",
-    "unplugin-icons": "^0.19.3",
-    "vitepress": "^1.3.4",
-    "vue-component-meta": "^2.1.6",
-    "vue-tsc": "^2.1.6"
+    "rimraf": "^5.0.5",
+    "shiki": "^1.3.0",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss": "^3.4.3",
+    "tsx": "^4.7.2",
+    "typescript": "^5.4.5",
+    "unplugin-icons": "^0.18.5",
+    "vitepress": "^1.1.3",
+    "vue-tsc": "^2.0.14"
   }
 }

apps/www/scripts/autogen.ts

@@ -1,150 +0,0 @@
-import type { ComponentMeta, MetaCheckerOptions, PropertyMeta, PropertyMetaSchema } from 'vue-component-meta'
-import { existsSync, mkdirSync, writeFileSync } from 'node:fs'
-import { join, parse, resolve } from 'node:path'
-import { fileURLToPath } from 'node:url'
-import fg from 'fast-glob'
-import MarkdownIt from 'markdown-it'
-import { createComponentMetaChecker } from 'vue-component-meta'
-
-const __dirname = fileURLToPath(new URL('.', import.meta.url))
-
-const md = new MarkdownIt()
-
-const ROOTPATH = '../'
-const OUTPUTPATH = '../src/content/meta'
-
-const checkerOptions: MetaCheckerOptions = {
-  forceUseTs: true,
-  printer: { newLine: 1 },
-}
-
-const tsconfigChecker = createComponentMetaChecker(
-  resolve(__dirname, ROOTPATH, 'tsconfig.registry.json'),
-  checkerOptions,
-)
-
-const components = fg.sync(['chart/**/*.vue', 'chart*/**/*.vue'], {
-  cwd: resolve(__dirname, ROOTPATH, 'src/lib/registry/default/ui/'),
-  absolute: true,
-})
-
-components.forEach((componentPath) => {
-  try {
-    const componentName = parse(componentPath).name
-    const meta = parseMeta(tsconfigChecker.getComponentMeta(componentPath))
-
-    const metaDirPath = resolve(__dirname, OUTPUTPATH)
-    // if meta dir doesn't exist create
-    if (!existsSync(metaDirPath))
-      mkdirSync(metaDirPath)
-
-    const metaMdFilePath = join(metaDirPath, `${componentName}.md`)
-
-    let parsedString = '<!-- This file was automatic generated. Do not edit it manually -->\n\n'
-    if (meta.props.length)
-      parsedString += `<APITable :type="'prop'" :data="${JSON.stringify(meta.props, null, 2).replace(/"/g, '\'')}" />\n`
-
-    if (meta.events.length)
-      parsedString += `\n<APITable :type="'emit'" :data="${JSON.stringify(meta.events, null, 2).replace(/"/g, '\'')}" />\n`
-
-    if (meta.slots.length)
-      parsedString += `\n<APITable :type="'slot'" :data="${JSON.stringify(meta.slots, null, 2).replace(/"/g, '\'')}" />\n`
-
-    if (meta.methods.length)
-      parsedString += `\n<APITable :type="'method'" :data="${JSON.stringify(meta.methods, null, 2).replace(/"/g, '\'')}" />\n`
-
-    writeFileSync(metaMdFilePath, parsedString)
-  }
-  catch (err) {
-    console.log(err)
-  }
-})
-
-function parseTypeFromSchema(schema: PropertyMetaSchema): string {
-  if (typeof schema === 'object' && (schema.kind === 'enum' || schema.kind === 'array')) {
-    const isFlatEnum = schema.schema?.every(val => typeof val === 'string')
-    const enumValue = schema?.schema?.filter(i => i !== 'undefined') ?? []
-
-    if (isFlatEnum && /^[A-Z]/.test(schema.type))
-      return enumValue.join(' | ')
-    else if (typeof schema.schema?.[0] === 'object' && schema.schema?.[0].kind === 'enum')
-      return schema.schema.map((s: PropertyMetaSchema) => parseTypeFromSchema(s)).join(' | ')
-    else
-      return schema.type
-  }
-  else if (typeof schema === 'object' && schema.kind === 'object') {
-    return schema.type
-  }
-  else if (typeof schema === 'string') {
-    return schema
-  }
-  else {
-    return ''
-  }
-}
-
-// Utilities
-function parseMeta(meta: ComponentMeta) {
-  const props = meta.props
-  // Exclude global props
-    .filter(prop => !prop.global)
-    .map((prop) => {
-      let defaultValue = prop.default
-      const { name, description, required } = prop
-
-      if (name === 'as')
-        defaultValue = defaultValue ?? '"div"'
-
-      if (defaultValue === 'undefined')
-        defaultValue = undefined
-
-      return ({
-        name,
-        description: md.render(description),
-        type: prop.type.replace(/\s*\|\s*undefined/g, ''),
-        required,
-        default: defaultValue ?? undefined,
-      })
-    })
-
-  const events = meta.events
-    .map((event) => {
-      const { name, type } = event
-      return ({
-        name,
-        type: type.replace(/\s*\|\s*undefined/g, ''),
-      })
-    })
-
-  const defaultSlot = meta.slots?.[0]
-  const slots: { name: string, description: string, type: string }[] = []
-
-  if (defaultSlot && defaultSlot.type !== '{}') {
-    const schema = defaultSlot.schema
-    if (typeof schema === 'object' && schema.schema) {
-      Object.values(schema.schema).forEach((childMeta: PropertyMeta) => {
-        slots.push({
-          name: childMeta.name,
-          description: md.render(childMeta.description),
-          type: parseTypeFromSchema(childMeta.schema),
-        })
-      })
-    }
-  }
-
-  // exposed method
-  const methods = meta.exposed
-    .filter(expose => typeof expose.schema === 'object' && expose.schema.kind === 'event')
-    .map(expose => ({
-      name: expose.name,
-      description: md.render(expose.description),
-      type: expose.type,
-    }))
-
-  return {
-    props,
-    events,
-    slots,
-    methods,
-  }
-}

apps/www/scripts/build-registry.ts

@@ -4,10 +4,10 @@ import { template } from 'lodash-es'
 import { rimraf } from 'rimraf'
 
 import { colorMapping, colors } from '../src/lib/registry/colors'
-import { buildRegistry } from '../src/lib/registry/registry'
 import { registrySchema } from '../src/lib/registry/schema'
 import { styles } from '../src/lib/registry/styles'
 import { themes } from '../src/lib/registry/themes'
+import { buildRegistry } from '../src/lib/registry/registry'
 
 const REGISTRY_PATH = path.join(process.cwd(), 'src/public/registry')
 
@@ -80,17 +80,10 @@ for (const style of styles) {
       continue
 
     const files = item.files?.map((file) => {
-      let content: string = ''
-
-      try {
-        content = fs.readFileSync(
-          path.join(process.cwd(), 'src/lib/registry', style.name, file),
-          'utf8',
-        )
-      }
-      catch (err) {
-        console.log(`'${file}' is missing`)
-      }
+      let content = fs.readFileSync(
+        path.join(process.cwd(), 'src/lib/registry', style.name, file),
+        'utf8',
+      )
 
       // Replace Windows-style newlines with Unix-style newlines
       content = content.replace(/\r\n/g, newLine)
@@ -106,7 +99,7 @@ for (const style of styles) {
       files,
     }
 
-    const payloadStr = `${JSON.stringify(payload, null, 2).replace(/\r\n/g, newLine)}\n`
+    const payloadStr = JSON.stringify(payload, null, 2).replace(/\r\n/g, newLine)
 
     fs.writeFileSync(
       path.join(targetPath, `${item.name}.json`),
@@ -202,73 +195,73 @@ export const BASE_STYLES = `@tailwind base;
 export const BASE_STYLES_WITH_VARIABLES = `@tailwind base;
 @tailwind components;
 @tailwind utilities;
-
+ 
 @layer base {
   :root {
     --background: <%- colors.light["background"] %>;
     --foreground: <%- colors.light["foreground"] %>;
-
+ 
     --muted: <%- colors.light["muted"] %>;
     --muted-foreground: <%- colors.light["muted-foreground"] %>;
-
+ 
     --popover: <%- colors.light["popover"] %>;
     --popover-foreground: <%- colors.light["popover-foreground"] %>;
-
+ 
     --card: <%- colors.light["card"] %>;
     --card-foreground: <%- colors.light["card-foreground"] %>;
-
+ 
     --border: <%- colors.light["border"] %>;
     --input: <%- colors.light["input"] %>;
-
+ 
     --primary: <%- colors.light["primary"] %>;
     --primary-foreground: <%- colors.light["primary-foreground"] %>;
-
+ 
     --secondary: <%- colors.light["secondary"] %>;
     --secondary-foreground: <%- colors.light["secondary-foreground"] %>;
-
+ 
     --accent: <%- colors.light["accent"] %>;
     --accent-foreground: <%- colors.light["accent-foreground"] %>;
-
+ 
     --destructive: <%- colors.light["destructive"] %>;
     --destructive-foreground: <%- colors.light["destructive-foreground"] %>;
-
+ 
     --ring: <%- colors.light["ring"] %>;
-
+ 
     --radius: 0.5rem;
   }
-
+ 
   .dark {
     --background: <%- colors.dark["background"] %>;
     --foreground: <%- colors.dark["foreground"] %>;
-
+ 
     --muted: <%- colors.dark["muted"] %>;
     --muted-foreground: <%- colors.dark["muted-foreground"] %>;
-
+ 
     --popover: <%- colors.dark["popover"] %>;
     --popover-foreground: <%- colors.dark["popover-foreground"] %>;
-
+ 
     --card: <%- colors.dark["card"] %>;
     --card-foreground: <%- colors.dark["card-foreground"] %>;
-
+ 
     --border: <%- colors.dark["border"] %>;
     --input: <%- colors.dark["input"] %>;
-
+ 
     --primary: <%- colors.dark["primary"] %>;
     --primary-foreground: <%- colors.dark["primary-foreground"] %>;
-
+ 
     --secondary: <%- colors.dark["secondary"] %>;
     --secondary-foreground: <%- colors.dark["secondary-foreground"] %>;
-
+ 
     --accent: <%- colors.dark["accent"] %>;
     --accent-foreground: <%- colors.dark["accent-foreground"] %>;
-
+ 
     --destructive: <%- colors.dark["destructive"] %>;
     --destructive-foreground: <%- colors.dark["destructive-foreground"] %>;
-
+ 
     --ring: <%- colors.dark["ring"] %>;
   }
 }
-
+ 
 @layer base {
   * {
     @apply border-border;
@@ -289,8 +282,8 @@ for (const baseColor of ['slate', 'gray', 'zinc', 'neutral', 'stone', 'lime']) {
     for (const [key, value] of Object.entries(values)) {
       if (typeof value === 'string') {
         const resolvedColor = value.replace(
-          /\{\{base\}\}-/g,
-          `${baseColor}-`,
+          /{{base}}-/g,
+					`${baseColor}-`,
         )
         base.inlineColors[mode][key] = resolvedColor
 
@@ -326,64 +319,64 @@ export const THEME_STYLES_WITH_VARIABLES = `
   .theme-<%- theme %> {
     --background: <%- colors.light["background"] %>;
     --foreground: <%- colors.light["foreground"] %>;
-
+ 
     --muted: <%- colors.light["muted"] %>;
     --muted-foreground: <%- colors.light["muted-foreground"] %>;
-
+ 
     --popover: <%- colors.light["popover"] %>;
     --popover-foreground: <%- colors.light["popover-foreground"] %>;
-
+ 
     --card: <%- colors.light["card"] %>;
     --card-foreground: <%- colors.light["card-foreground"] %>;
-
+ 
     --border: <%- colors.light["border"] %>;
     --input: <%- colors.light["input"] %>;
-
+ 
     --primary: <%- colors.light["primary"] %>;
     --primary-foreground: <%- colors.light["primary-foreground"] %>;
-
+ 
     --secondary: <%- colors.light["secondary"] %>;
     --secondary-foreground: <%- colors.light["secondary-foreground"] %>;
-
+ 
     --accent: <%- colors.light["accent"] %>;
     --accent-foreground: <%- colors.light["accent-foreground"] %>;
-
+ 
     --destructive: <%- colors.light["destructive"] %>;
     --destructive-foreground: <%- colors.light["destructive-foreground"] %>;
-
+ 
     --ring: <%- colors.light["ring"] %>;
-
+ 
     --radius: 0.5rem;
   }
-
+ 
   .dark .theme-<%- theme %> {
     --background: <%- colors.dark["background"] %>;
     --foreground: <%- colors.dark["foreground"] %>;
-
+ 
     --muted: <%- colors.dark["muted"] %>;
     --muted-foreground: <%- colors.dark["muted-foreground"] %>;
-
+ 
     --popover: <%- colors.dark["popover"] %>;
     --popover-foreground: <%- colors.dark["popover-foreground"] %>;
-
+ 
     --card: <%- colors.dark["card"] %>;
     --card-foreground: <%- colors.dark["card-foreground"] %>;
-
+ 
     --border: <%- colors.dark["border"] %>;
     --input: <%- colors.dark["input"] %>;
-
+ 
     --primary: <%- colors.dark["primary"] %>;
     --primary-foreground: <%- colors.dark["primary-foreground"] %>;
-
+ 
     --secondary: <%- colors.dark["secondary"] %>;
     --secondary-foreground: <%- colors.dark["secondary-foreground"] %>;
-
+ 
     --accent: <%- colors.dark["accent"] %>;
     --accent-foreground: <%- colors.dark["accent-foreground"] %>;
-
+ 
     --destructive: <%- colors.dark["destructive"] %>;
     --destructive-foreground: <%- colors.dark["destructive-foreground"] %>;
-
+ 
     --ring: <%- colors.dark["ring"] %>;
   }`
 
@@ -403,4 +396,4 @@ fs.writeFileSync(
   'utf8',
 )
 
-console.log('✅ Done!!')
+console.log('✅ Done!')

apps/www/src/components.d.ts

@@ -1,10 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-export {}
-
-/* prettier-ignore */
-declare module 'vue' {
-  export interface GlobalComponents {
-    ComponentPreview: typeof import('../.vitepress/theme/components/ComponentPreview.vue')['default']
-  }
-}

apps/www/src/content/docs/changelog.md

@@ -1,139 +1,3 @@
 ---
 title: Changelog
-description: Latest updates and announcements.
 ---
-
-## June 2024
-
-### New Component - Number Field
-A new component has been added to the project [`NumberField`](/docs/components/number-field.html).
-
-A number field allows a user to enter a number and increment or decrement the value using stepper buttons.
-
-<ComponentPreview name="NumberFieldDemo" class="max-w-[180px]" />
-
-## May 2024
-
-### New Component - Charts
-Several kinds of chart components has been added to the project.
-
-Charts are versatile visualization tools, allowing users to represent data using various options for effective analysis.
-
-1. [`Area Chart`](/docs/charts/area) - An area chart visually represents data over time, displaying trends and patterns through filled-in areas under a line graph.
-
-<ComponentPreview name="AreaChartDemo"  />
-
-2. [`Bar Chart`](/docs/charts/bar) - A line chart visually represents data using rectangular bars of varying lengths to compare quantities across different categories or groups.
-
-<ComponentPreview name="BarChartDemo"  />
-
-3. [`Donut Chart`](/docs/charts/donut) - A line chart visually represents data in a circular form, similar to a pie chart but with a central void, emphasizing proportions within categories.
-
-<ComponentPreview name="DonutChartDemo"  />
-
-4. [`Line Chart`](/docs/charts/line) - A line chart  visually displays data points connected by straight lines, illustrating trends or relationships over a continuous axis.
-
-<ComponentPreview name="LineChartDemo"  />
-
-### New Component - Auto Form
-
-[`Auto Form`](/docs/components/auto-form.html) is a drop-in form builder for your internal and low-priority forms with existing zod schemas.
-
-For example, if you already have zod schemas for your API and want to create a simple admin panel to edit user profiles, simply pass the schema to AutoForm and you're done.
-
-The following form has been created by passing a `zod` schema object to our `AutoForm` component.
-
-<ComponentPreview name="AutoFormBasic" />
-
-## April 2024
-
-### Component Updated - Calendar
-
-The [`Calendar`](/docs/components/calendar.html) component has been updated and is now built on top of the [RadixVue Calendar](https://www.radix-vue.com/components/calendar.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
-
-If you're looking for a range calendar, check out the [`Range Calendar`](/docs/components/range-calendar.html) component.
-
-And if you're looking for a date picker input, check out the [`Date Picker`](/docs/components/date-picker.html) component.
-
-<ComponentPreview name="CalendarDemo" />
-
-<ComponentPreview name="RangeCalendarDemo" />
-
-<ComponentPreview name="DatePickerDemo" />
-
-### Building Blocks for the Web
-
-[`Blocks`](/blocks) are composed of different components that can be used to build your apps, with each block being a standalone section of your application. These blocks are fully responsive, accessible, and composable, and are built using the same principles as the other components in `shadcn-vue`.
-
-<div>
-    <image
-        src="/examples/block-dark.png"
-        :width="1280"
-        :height="727"
-        alt="Building Blocks"
-        class="hidden dark:block"
-    />
-    <image
-        src="/examples/block-light.png"
-        :width="1280"
-        :height="727"
-        alt="Building Blocks"
-        class="block dark:hidden"
-    />
-</div>
-
-## March 2024
-
-### New Component - Breadcrumb
-
-[`Breadcrumb`](/docs/components/breadcrumb.html) displays the path to the current resource using a hierarchy of links.
-
-<ComponentPreview name="BreadcrumbDemo" />
-
-### New Component - Pin Input (OTP Input)
-
-[`Pin Input`](/docs/components/pin-input.html) allows users to input a sequence of one-character alphanumeric inputs.
-
-<ComponentPreview name="PinInputDemo" />
-
-### New Component - Resizable
-
-[`Resizable`](/docs/components/resizable.html) - Accessible resizable panel groups and layouts with keyboard support.
-
-<ComponentPreview name="ResizableDemo" />
-
-### New Component - Drawer
-
-[`Drawer`](/docs/components/drawer.html) - A drawer component for vue that is built on top of [Vaul Vue](https://github.com/radix-vue/vaul-vue).
-
-<ComponentPreview name="DrawerDemo" />
-
-## February 2024
-
-### New Component - Tag Inputs
-
-[`Tag inputs`](/docs/components/tags-input.html) render tags inside an input, followed by an actual text input.
-
-<ComponentPreview name="TagsInputDemo" />
-
-## January 2024
-
-### New Component - Sonner
-
-[`Sonner`](/docs/components/sonner.html) is an opinionated toast component for Vue.
-
-The Sonner component is provided by [vue-sonner](https://vue-sonner.vercel.app/), which is a Vue port of Sonner, originally created by [Emil Kowalski](https://twitter.com/emilkowalski_) for React.
-
-<ComponentPreview name="SonnerDemo" />
-
-### New Component - Toggle Group
-
-[`Toggle Group`](/docs/components/toggle-group.html) - A set of two-state buttons that can be toggled on or off.
-
-<ComponentPreview name="ToggleGroupDemo" />
-
-### New Component - Carousel
-
-[`Carousel`](/docs/components/carousel.html) - A carousel with motion and swipe built using [Embla](https://www.embla-carousel.com/) library.
-
-<ComponentPreview name="CarouselDemo" />

apps/www/src/content/docs/charts.md

@@ -1,107 +0,0 @@
----
-title: Charts
-description: Versatile visualization tool, allowing users to represent data using various types of charts for effective analysis.
-label: Alpha
----
-
-<script setup>
-import Area from '~icons/gravity-ui/chart-area-stacked'
-import Bar from '~icons/gravity-ui/chart-column'
-import Line from '~icons/gravity-ui/chart-line'
-import Pie from '~icons/gravity-ui/chart-pie'
-</script>
-
-<Callout>
-  Only works with Vue >3.3
-</Callout>
-
-`Charts` components were built on top of [Unovis](https://unovis.dev/) (a modular data visualization framework), and inspired by [tremor](https://www.tremor.so).
-
-## Chart type
-
-<div class="grid gap-4 mt-8 sm:grid-cols-2 sm:gap-6 not-docs">
-  <LinkedCard href="/docs/charts/area">
-    <Area class="text-foreground/80 w-11 h-11" />
-    <p class="mt-2 font-medium">Area</p>
-  </LinkedCard>
-
-  <LinkedCard href="/docs/charts/line">
-    <Line class="text-foreground/80 w-11 h-11" />
-    <p class="mt-2 font-medium">Line</p>
-  </LinkedCard>
-
-  <LinkedCard href="/docs/charts/bar">
-    <Bar class="text-foreground/80 w-11 h-11" />
-    <p class="mt-2 font-medium">Bar</p>
-  </LinkedCard>
-
-  <LinkedCard href="/docs/charts/donut">
-    <Pie class="text-foreground/80 w-11 h-11" />
-    <p class="mt-2 font-medium">Donut</p>
-  </LinkedCard>
-</div>
-
-## Installation
-
-<Steps>
-
-### Update `css`
-
-Add the following tooltip styling to your `tailwind.css` file:
-
-```css
-@layer base {
-  :root {
-    /* ... */
-    --vis-tooltip-background-color: none !important;
-    --vis-tooltip-border-color: none !important;
-    --vis-tooltip-text-color: none !important;
-    --vis-tooltip-shadow-color: none !important;
-    --vis-tooltip-backdrop-filter: none !important;
-    --vis-tooltip-padding: none !important;
-
-    --vis-primary-color: var(--primary);
-    /* change to any hsl value you want */
-    --vis-secondary-color: 160 81% 40%;
-    --vis-text-color: var(--muted-foreground);
-  }
-```
-
-If you are not using `css-variables` for your component, you need to update the `--vis-primary-color` and `--vis-text-color` to your desired hsl value.
-
-You may use [this tool](https://redpixelthemes.com/blog/tailwindcss-colors-different-formats/) to help you find the hsl value for your primary color and text color. Be sure to provide `dark` mode styling as well.
-
-</Steps>
-
-## Colors
-
-By default, we construct the primary theme color, and secondary (`--vis-secondary-color`) color with different opacity for the graph.
-
-However, you can always pass in the desired `color` into each chart.
-
-```vue
-<template>
-  <AreaChart
-    :data="data"
-    :colors="['blue', 'pink', 'orange', 'red']"
-  />
-</template>
-```
-
-## Custom tooltip
-
-If you want to customize the `Tooltip` for the chart, you can pass `customTooltip` prop with a custom Vue component.
-The custom component would receive `title` and `data` props, check out [ChartTooltip.vue component](https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/lib/registry/default/ui/chart/ChartTooltip.vue) for example.
-
-The expected prop definition would be:
-
-```ts
-defineProps<{
-  title?: string
-  data: {
-    name: string
-    color: string
-    value: any
-  }[]
-}>()
-```

apps/www/src/content/docs/charts/area.md

@@ -1,46 +0,0 @@
----
-title: Area
-description: An area chart visually represents data over time, displaying trends and patterns through filled-in areas under a line graph.
-source: apps/www/src/lib/registry/default/ui/chart-area
-label: Alpha
----
-
-<ComponentPreview name="AreaChartDemo"  />
-
-## Installation
-
-<Callout>
-  Only works with Vue >3.3
-</Callout>
-
-<Steps>
-
-### Run the following command
-
-```bash
-npx shadcn-vue@latest add chart-area
-```
-
-### Setup
-
-Follow the [guide](/docs/charts.html#installation) to complete the setup.
-
-</Steps>
-
-## API
-
-<!-- @include: @/content/meta/AreaChart.md -->
-
-## Example
-
-### Sparkline
-
-We can turn the chart into sparkline chart by hiding axis, gridline and legends.
-
-<ComponentPreview name="AreaChartSparkline"  />
-
-### Custom Tooltip
-
-If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](/docs/charts.html#custom-tooltip).
-
-<ComponentPreview name="AreaChartCustomTooltip"  />

apps/www/src/content/docs/charts/bar.md

@@ -1,50 +0,0 @@
----
-title: Bar
-description: A line chart visually represents data using rectangular bars of varying lengths to compare quantities across different categories or groups.
-source: apps/www/src/lib/registry/default/ui/chart-bar
-label: Alpha
----
-
-<ComponentPreview name="BarChartDemo"  />
-
-## Installation
-
-<Callout>
-  Only works with Vue >3.3
-</Callout>
-
-<Steps>
-
-### Run the following command
-
-```bash
-npx shadcn-vue@latest add chart-bar
-```
-
-### Setup
-
-Follow the [guide](/docs/charts.html#installation) to complete the setup.
-
-</Steps>
-
-## API
-
-<!-- @include: @/content/meta/BarChart.md -->
-
-## Example
-
-### Stacked
-
-You can stack the bar chart by settings prop `type` to `stacked`.
-
-<ComponentPreview name="BarChartStacked"  />
-
-### Rounded
-
-<ComponentPreview name="BarChartRounded"  />
-
-### Custom Tooltip
-
-If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](/docs/charts.html#custom-tooltip).
-
-<ComponentPreview name="BarChartCustomTooltip"  />

apps/www/src/content/docs/charts/donut.md

@@ -1,52 +0,0 @@
----
-title: Donut
-description: A line chart visually represents data in a circular form, similar to a pie chart but with a central void, emphasizing proportions within categories.
-source: apps/www/src/lib/registry/default/ui/chart-donut
-label: Alpha
----
-
-<ComponentPreview name="DonutChartDemo"  />
-
-## Installation
-
-<Callout>
-Only works with Vue >3.3
-</Callout>
-
-<Steps>
-
-### Run the following command
-
-```bash
-npx shadcn-vue@latest add chart-donut
-```
-
-### Setup
-
-Follow the [guide](/docs/charts.html#installation) to complete the setup.
-
-</Steps>
-
-## API
-
-<!-- @include: @/content/meta/DonutChart.md -->
-
-## Example
-
-### Pie Chart
-
-If you want to render pie chart instead, pass `type` as `pie`.
-
-<ComponentPreview name="DonutChartPie"  />
-
-### Color
-
-We generate colors automatically based on the primary and secondary color and assigned them accordingly. Feel free to pass in your own array of colors.
-
-<ComponentPreview name="DonutChartColor"  />
-
-### Custom Tooltip
-
-If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](/docs/charts.html#custom-tooltip).
-
-<ComponentPreview name="DonutChartCustomTooltip"  />

apps/www/src/content/docs/charts/line.md

@@ -1,46 +0,0 @@
----
-title: Line
-description: A line chart  visually displays data points connected by straight lines, illustrating trends or relationships over a continuous axis.
-source: apps/www/src/lib/registry/default/ui/chart-line
-label: Alpha
----
-
-<ComponentPreview name="LineChartDemo"  />
-
-## Installation
-
-<Callout>
-  Only works with Vue >3.3
-</Callout>
-
-<Steps>
-
-### Run the following command
-
-```bash
-npx shadcn-vue@latest add chart-line
-```
-
-### Setup
-
-Follow the [guide](/docs/charts.html#installation) to complete the setup.
-
-</Steps>
-
-## API
-
-<!-- @include: @/content/meta/LineChart.md -->
-
-## Example
-
-### Sparkline
-
-We can turn the chart into sparkline chart by hiding axis, gridline and legends.
-
-<ComponentPreview name="LineChartSparkline"  />
-
-### Custom Tooltip
-
-If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](/docs/charts.html#custom-tooltip).
-
-<ComponentPreview name="LineChartCustomTooltip"  />

apps/www/src/content/docs/cli.md

@@ -15,7 +15,7 @@ npx shadcn-vue@latest init
 
 You will be asked a few questions to configure `components.json`:
 
-```ansi:line-numbers
+```txt:line-numbers
 Would you like to use TypeScript (recommended)? no / yes
 Which framework are you using? Vite / Nuxt / Laravel
 Which style would you like to use? › Default
@@ -29,7 +29,7 @@ Configure the import alias for utils: › @/lib/utils
 
 ### Options
 
-```ansi
+```txt
 Usage: shadcn-vue init [options]
 
 initialize your project and install dependencies
@@ -50,7 +50,7 @@ npx shadcn-vue@latest add [component]
 
 You will be presented with a list of components to choose from:
 
-```ansi
+```txt
 Which components would you like to add? › Space to select. Return to submit.
 
 ◯  accordion
@@ -67,7 +67,7 @@ Which components would you like to add? › Space to select. Return to submit.
 
 ### Options
 
-```ansi
+```txt
 Usage: shadcn-vue add [options] [components...]
 
 add components to your project
@@ -90,7 +90,7 @@ Use the `update` command to update components in your project. This will overwri
 
 We plan on improving this command in the future to improve the update experience.
 
-```ansi
+```txt
 Usage: shadcn-vue update [options] [components...]
 
 update components in your project

apps/www/src/content/docs/components.md

@@ -1,6 +0,0 @@
-<script setup>
-import { useRouter } from 'vitepress'
-
-const router = useRouter()
-router.go('/docs/components/accordion')
-</script>

apps/www/src/content/docs/components/aspect-ratio.md

@@ -46,7 +46,7 @@ import { AspectRatio } from '@/components/ui/aspect-ratio'
 <template>
   <div class="w-[450px]">
     <AspectRatio :ratio="16 / 9">
-      <img src="..." alt="Image" class="rounded-md object-cover w-full h-full">
+      <img src="..." alt="Image" class="rounded-md object-cover">
     </AspectRatio>
   </div>
 </template>

apps/www/src/content/docs/components/auto-form.md

@@ -1,549 +0,0 @@
----
-title: AutoForm
-description: Automatically generate a form from Zod schema.
-primitive: https://vee-validate.logaretm.com/v4/guide/overview/
----
-
-<Callout class="mt-6">
-
-Credit: Heavily inspired by [AutoForm](https://github.com/vantezzen/auto-form) by Vantezzen
-
-</Callout>
-
-## What is AutoForm
-
-AutoForm is a drop-in form builder for your internal and low-priority forms with existing zod schemas. For example, if you already have zod schemas for your API and want to create a simple admin panel to edit user profiles, simply pass the schema to AutoForm and you're done.
-
-## Installation
-
-<Steps>
-
-### Run the following command
-
-```bash
-npx shadcn-vue@latest update form
-npx shadcn-vue@latest add auto-form
-```
-
-</Steps>
-
-## Field types
-
-Currently, these field types are supported out of the box:
-
-- boolean (checkbox, switch)
-- date (date picker)
-- enum (select, radio group)
-- number (input)
-- string (input, textfield)
-- file (file)
-
-You can add support for other field types by adding them to the `INPUT_COMPONENTS` object in `auto-form/constants.ts`.
-
-## Zod configuration
-
-### Validations
-
-Your form schema can use any of zod's validation methods including refine.
-
-<Callout>
-
-⚠️ However, there's a known issue with Zod’s `refine` and `superRefine` not executing whenever some object keys are missing.
-[Read more](https://github.com/logaretm/vee-validate/issues/4338)
-
-</Callout>
-
-### Descriptions
-
-You can use the `describe` method to set a label for each field. If no label is set, the field name will be used and un-camel-cased.
-
-```ts
-const formSchema = z.object({
-  username: z.string().describe('Your username'),
-  someValue: z.string(), // Will be "Some Value"
-})
-```
-
-You can also configure the label with [`fieldConfig`](#label) too.
-
-### Optional fields
-
-By default, all fields are required. You can make a field optional by using the `optional` method.
-
-```ts
-const formSchema = z.object({
-  username: z.string().optional(),
-})
-```
-
-### Default values
-
-You can set a default value for a field using the `default` method.
-
-```ts
-const formSchema = z.object({
-  favouriteNumber: z.number().default(5),
-})
-```
-
-If you want to set default value of date, convert it to Date first using `new Date(val)`.
-
-### Sub-objects
-
-You can nest objects to create accordion sections.
-
-```ts
-const formSchema = z.object({
-  address: z.object({
-    street: z.string(),
-    city: z.string(),
-    zip: z.string(),
-
-    // You can nest objects as deep as you want
-    nested: z.object({
-      foo: z.string(),
-      bar: z.string(),
-
-      nested: z.object({
-        foo: z.string(),
-        bar: z.string(),
-      }),
-    }),
-  }),
-})
-```
-
-Like with normal objects, you can use the `describe` method to set a label and description for the section:
-
-```ts
-const formSchema = z.object({
-  address: z
-    .object({
-      street: z.string(),
-      city: z.string(),
-      zip: z.string(),
-    })
-    .describe('Your address'),
-})
-```
-
-### Select/Enums
-
-AutoForm supports `enum` and `nativeEnum` to create select fields.
-
-```ts
-const formSchema = z.object({
-  color: z.enum(['red', 'green', 'blue']),
-})
-
-enum BreadTypes {
-  // For native enums, you can alternatively define a backed enum to set a custom label
-  White = 'White bread',
-  Brown = 'Brown bread',
-  Wholegrain = 'Wholegrain bread',
-  Other,
-}
-// Keep in mind that zod will validate and return the enum labels, not the enum values!
-const formSchema = z.object({
-  bread: z.nativeEnum(BreadTypes),
-})
-```
-
-### Arrays
-
-AutoForm supports arrays _of objects_. Because inferring things like field labels from arrays of strings/numbers/etc. is difficult, only objects are supported.
-
-```ts
-const formSchema = z.object({
-  guestListName: z.string(),
-  invitedGuests: z
-    .array(
-      // Define the fields for each item
-      z.object({
-        name: z.string(),
-        age: z.number(),
-      })
-    )
-    // Optionally set a custom label - otherwise this will be inferred from the field name
-    .describe('Guests invited to the party'),
-})
-```
-
-Arrays are not supported as the root element of the form schema.
-
-You also can set default value of an array using .default(), but please make sure the array element has same structure with the schema.
-
-```ts
-const formSchema = z.object({
-  guestListName: z.string(),
-  invitedGuests: z
-    .array(
-      // Define the fields for each item
-      z.object({
-        name: z.string(),
-        age: z.number(),
-      })
-    )
-    .describe('Guests invited to the party')
-    .default([
-      { name: 'John', age: 24, },
-      { name: 'Jane', age: 20, },
-    ]),
-})
-```
-
-## Field configuration
-
-As zod doesn't allow adding other properties to the schema, you can use the `fieldConfig` prop to add additional configuration for the UI of each field.
-
-```vue
-<template>
-  <AutoForm
-    :field-config="{
-      username: {
-        // fieldConfig
-      },
-    }"
-  />
-</template>
-```
-
-### Label
-
-You can use the `label` property to customize label if you want to overwrite the pre-defined label via [Zod's description](#descriptions).
-
-```vue
-<template>
-  <AutoForm
-    :field-config="{
-      username: {
-        label: 'Custom username',
-      },
-    }"
-  />
-</template>
-```
-
-### Description
-
-You can use the `description` property to add a description below the field.
-
-```vue
-<template>
-  <AutoForm
-    :field-config="{
-      username: {
-        description: 'Enter a unique username. This will be shown to other users.',
-      },
-    }"
-  />
-</template>
-```
-
-### Input props
-
-You can use the `inputProps` property to pass props to the input component. You can use any props that the HTML component accepts.
-
-```vue
-<template>
-  <AutoForm
-    :field-config="{
-      username: {
-        inputProps: {
-          type: 'text',
-          placeholder: 'Username',
-        },
-      },
-    }"
-  />
-</template>
-
-// This will be rendered as:
-<input type="text" placeholder="Username" />
-```
-
-Disabling the label of an input can be done by using the `showLabel` property in `inputProps`.
-
-```vue
-<template>
-  <AutoForm
-    :field-config="{
-      username: {
-        inputProps: {
-          type: 'text',
-          placeholder: 'Username',
-          showLabel: false,
-        },
-      },
-    }"
-  />
-</template>
-```
-
-### Component
-
-By default, AutoForm will use the Zod type to determine which input component to use. You can override this by using the `component` property.
-
-```vue
-<template>
-  <AutoForm
-    :field-config="{
-      acceptTerms: {
-        // Booleans use a checkbox by default, use a switch instead
-        component: 'switch',
-      },
-    }"
-  />
-</template>
-```
-
-The complete list of supported field types is typed. Current supported types are:
-
-- `checkbox` (default for booleans)
-- `switch`
-- `date` (default for dates)
-- `select` (default for enums)
-- `radio`
-- `textarea`
-
-Alternatively, you can pass a Vue component to the `component` property to use a custom component.
-
-In `CustomField.vue`
-
-```vue
-<script setup lang="ts">
-import type { FieldProps } from './interface'
-import { AutoFormLabel } from '@/ui/auto-form'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/ui/form'
-import { Input } from '@/ui/input'
-import { computed } from 'vue'
-import AutoFormLabel from './AutoFormLabel.vue'
-
-const props = defineProps<FieldProps>()
-</script>
-
-<template>
-  <FormField v-slot="slotProps" :name="fieldName">
-    <FormItem v-bind="$attrs">
-      <AutoFormLabel v-if="!config?.hideLabel" :required="required">
-        {{ config?.label }}
-      </AutoFormLabel>
-      <FormControl>
-        <CustomInput v-bind="slotProps" />
-      </FormControl>
-      <FormDescription v-if="config?.description">
-        {{ config.description }}
-      </FormDescription>
-      <FormMessage />
-    </FormItem>
-  </FormField>
-</template>
-```
-
-Pass the above component in `fieldConfig`.
-
-```vue
-<template>
-  <AutoForm
-    :field-config="{
-      username: {
-        component: CustomField,
-      },
-    }"
-  />
-</template>
-```
-
-### Named slot
-
-You can use Vue named slot to customize the rendered `AutoFormField`.
-
-```vue
-<template>
-  <AutoForm
-    :field-config="{
-      customParent: {
-        label: 'Wrapper',
-      },
-    }"
-  >
-    <template #customParent="slotProps">
-      <div class="flex items-end space-x-2">
-        <AutoFormField v-bind="slotProps" class="w-full" />
-        <Button type="button">
-          Check
-        </Button>
-      </div>
-    </template>
-  </AutoForm>
-</template>
-```
-
-### Accessing the form data
-
-There are two ways to access the form data:
-
-### @submit
-
-The preferred way is to use the `submit` emit. This will be called when the form is submitted and the data is valid.
-
-```vue
-<template>
-  <AutoForm
-    @submit="(data) => {
-      // Do something with the data
-    }"
-  />
-</template>
-```
-
-### Controlled form
-
-By passing the `form` as props, you can control and use the method provided by `Form`.
-
-```vue
-<script setup lang="ts">
-import { AutoForm } from '@/components/ui/auto-form'
-import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
-import * as z from 'zod'
-
-const schema = z.object({
-  username: z.string(),
-})
-const form = useForm({
-  validationSchema: toTypedSchema(schema),
-})
-
-form.setFieldValue('username', 'bar')
-</script>
-
-<template>
-  <AutoForm :form="form" :schema="schema" />
-</template>
-```
-
-### Submitting the form
-
-You can use any `button` component to create a submit button. Most importantly is to add attributes `type="submit"`.
-
-```vue
-<template>
-  <AutoForm>
-    <CustomButton type="submit">
-      Send now
-    </CustomButton>
-  </AutoForm>
-
-  // or
-  <AutoForm>
-    <button type="submit">
-      Send now
-    </button>
-  </AutoForm>
-</template>
-```
-
-### Adding other elements
-
-All children passed to the `AutoForm` component will be rendered below the form.
-
-```vue
-<template>
-  <AutoForm>
-    <Button>Send now</Button>
-    <p class="text-gray-500 text-sm">
-      By submitting this form, you agree to our
-      <a href="#" class="text-primary underline">
-        terms and conditions
-      </a>.
-    </p>
-  </AutoForm>
-</template>
-```
-
-### Dependencies
-
-AutoForm allows you to add dependencies between fields to control fields based on the value of other fields. For this, a `dependencies` array can be passed to the `AutoForm` component.
-
-```vue
-<template>
-  <AutoForm
-    :dependencies="[
-      {
-        // 'age' hides 'parentsAllowed' when the age is 18 or older
-        sourceField: 'age',
-        type: DependencyType.HIDES,
-        targetField: 'parentsAllowed',
-        when: age => age >= 18,
-      },
-      {
-        // 'vegetarian' checkbox hides the 'Beef Wellington' option from 'mealOptions'
-        // if its not already selected
-        sourceField: 'vegetarian',
-        type: DependencyType.SETS_OPTIONS,
-        targetField: 'mealOptions',
-        when: (vegetarian, mealOption) =>
-          vegetarian && mealOption !== 'Beef Wellington',
-        options: ['Pasta', 'Salad'],
-      },
-    ]"
-  />
-</template>
-```
-
-The following dependency types are supported:
-
-- `DependencyType.HIDES`: Hides the target field when the `when` function returns true
-- `DependencyType.DISABLES`: Disables the target field when the `when` function returns true
-- `DependencyType.REQUIRES`: Sets the target field to required when the `when` function returns true
-- `DependencyType.SETS_OPTIONS`: Sets the options of the target field to the `options` array when the `when` function returns true
-
-The `when` function is called with the value of the source field and the value of the target field and should return a boolean to indicate if the dependency should be applied.
-
-Please note that dependencies will not cause the inverse action when returning `false` - for example, if you mark a field as required in your zod schema (i.e. by not explicitly setting `optional`), returning `false` in your `REQURIES` dependency will not mark it as optional. You should instead use zod's `optional` method to mark as optional by default and use the `REQURIES` dependency to mark it as required when the dependency is met.
-
-Please note that dependencies do not have any effect on the validation of the form. You should use zod's `refine` method to validate the form based on the value of other fields.
-
-You can create multiple dependencies for the same field and dependency type - for example to hide a field based on multiple other fields. This will then hide the field when any of the dependencies are met.
-
-## Example
-
-### Basic
-
-<ComponentPreview name="AutoFormBasic" />
-
-### Input Without Label
-This example shows how to use AutoForm input without label.
-
-<ComponentPreview name="AutoFormInputWithoutLabel" />
-
-### Sub Object
-Automatically generate a form from a Zod schema.
-
-<ComponentPreview name="AutoFormSubObject" />
-
-### Controlled
-This example shows how to use AutoForm in a controlled way.
-
-<ComponentPreview name="AutoFormControlled" />
-
-### Confirm Password
-Refined schema to validate that two fields match.
-
-<ComponentPreview name="AutoFormConfirmPassword" />
-
-### API Example
-The form select options are fetched from an API.
-
-<ComponentPreview name="AutoFormApi" />
-
-### Array support
-You can use arrays in your schemas to create dynamic forms.
-
-<ComponentPreview name="AutoFormArray" />
-
-### Dependencies
-Create dependencies between fields.
-
-<ComponentPreview name="AutoFormDependencies" />

apps/www/src/content/docs/components/badge.md

@@ -23,8 +23,8 @@ npx shadcn-vue@latest add badge
 
 ```vue
 <script setup lang="ts">
+import { type VariantProps, cva } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
-import { cva, type VariantProps } from 'class-variance-authority'
 
 defineProps<Props>()
 

apps/www/src/content/docs/components/breadcrumb.md

@@ -22,7 +22,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb'
+} from '@/lib/components/ui/breadcrumb'
 </script>
 
 <template>
@@ -58,14 +58,14 @@ Use a custom component as `slot` for `<BreadcrumbSeparator />` to create a custo
 
 ```vue showLineNumbers {2,20-22}
 <script setup lang="ts">
+import { Slash } from 'lucide-react'
 import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb'
-import { Slash } from 'lucide-vue-next'
+} from '@/lib/components/ui/breadcrumb'
 </script>
 
 <template>
@@ -99,8 +99,6 @@ You can compose `<BreadcrumbItem />` with a `<DropdownMenu />` to create a dropd
 
 ```vue showLineNumbers {2-7,16-26}
 <script setup lang="ts">
-import { BreadcrumbItem } from '@/components/ui/breadcrumb'
-
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -108,6 +106,8 @@ import {
   DropdownMenuTrigger,
 } from '@/lib/components/ui/dropdown-menu'
 
+import { BreadcrumbItem } from '@/lib/components/ui/breadcrumb'
+
 import ChevronDownIcon from '~icons/radix-icons/chevron-down'
 </script>
 
@@ -143,7 +143,7 @@ import {
   BreadcrumbEllipsis,
   BreadcrumbItem,
   BreadcrumbList,
-} from '@/components/ui/breadcrumb'
+} from '@/lib/components/ui/breadcrumb'
 </script>
 
 <template>
@@ -169,13 +169,13 @@ To use a custom link component from your routing library, you can use the `asChi
 
 ```vue showLineNumbers {15-19}
 <script setup lang="ts">
+import { RouterLink } from 'vue-router'
 import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbList,
-} from '@/components/ui/breadcrumb'
-import { RouterLink } from 'vue-router'
+} from '@/lib/components/ui/breadcrumb'
 </script>
 
 <template>

apps/www/src/content/docs/components/button.md

@@ -23,8 +23,8 @@ npx shadcn-vue@latest add button
 
 ```vue
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
 import { cva } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',

apps/www/src/content/docs/components/calendar.md

@@ -24,10 +24,6 @@ If you're looking for a range calendar, check out the [Range Calendar](/docs/com
 ```bash
 npx shadcn-vue@latest add calendar
 ```
-::: tip
-The component depends on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package, which solves a lot of the problems that come with working with dates and times in JavaScript.
-Check [Dates & Times in Radix Vue](https://www.radix-vue.com/guides/dates.html) for more information and installation instructions.
-:::
 
 ## Datepicker
 

apps/www/src/content/docs/components/carousel.md

@@ -183,7 +183,7 @@ Use the `@init-api` emit method on `<Carousel />` component to set the instance
 
 You can access it through setting a template ref on the `<Carousel />` component.
 
-```vue:line-numbers {2,5,10}
+```vue:line-numbers {2,5,9}
 <script setup>
 const carouselContainerRef = ref<InstanceType<typeof Carousel> | null>(null)
 

apps/www/src/content/docs/components/collapsible.md

@@ -51,12 +51,12 @@ module.exports = {
 
 ```vue
 <script setup lang="ts">
+import { ref } from 'vue'
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@/components/ui/collapsible'
-import { ref } from 'vue'
 
 const isOpen = ref(false)
 </script>

apps/www/src/content/docs/components/combobox.md

@@ -22,8 +22,11 @@ See installation instructions for the [Popover](/docs/components/popover#install
 
 ```vue
 <script setup lang="ts">
-import { Button } from '@/components/ui/button'
+import { Check, ChevronsUpDown } from 'lucide-vue-next'
 
+import { ref } from 'vue'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
 import {
   Command,
   CommandEmpty,
@@ -37,14 +40,11 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover'
-import { cn } from '@/lib/utils'
-import { Check, ChevronsUpDown } from 'lucide-vue-next'
-import { ref } from 'vue'
 
 const frameworks = [
   { value: 'next.js', label: 'Next.js' },
   { value: 'sveltekit', label: 'SvelteKit' },
-  { value: 'nuxt', label: 'Nuxt' },
+  { value: 'nuxt.js', label: 'Nuxt.js' },
   { value: 'remix', label: 'Remix' },
   { value: 'astro', label: 'Astro' },
 ]
@@ -76,7 +76,7 @@ const value = ref('')
             <CommandItem
               v-for="framework in frameworks"
               :key="framework.value"
-              :value="framework.value"
+              :value="framework"
               @select="open = false"
             >
               <Check

apps/www/src/content/docs/components/command.md

@@ -101,7 +101,7 @@ watch(CmdJ, (v) => {
         <span class="text-xs">⌘</span>J
       </kbd>
     </p>
-    <CommandDialog :open="open" @update:open="handleOpenChange">
+    <CommandDialog :open="open" :on-open-change="handleOpenChange">
       <CommandInput placeholder="Type a command or search..." />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>

apps/www/src/content/docs/components/data-table.md

@@ -1,7 +1,7 @@
 ---
 title: Data Table
 description: Powerful table and datagrids built using TanStack Table.
-primitive: https://tanstack.com/table/v8/docs/introduction
+primitive: https://tanstack.com/table/v8/docs/guide/introduction
 ---
 
 <ComponentPreview name="DataTableDemo" />
@@ -10,7 +10,7 @@ primitive: https://tanstack.com/table/v8/docs/introduction
 
 Every data table or datagrid I've created has been unique. They all behave differently, have specific sorting and filtering requirements, and work with different data sources.
 
-It doesn't make sense to combine all of these variations into a single component. If we do that, we'll lose the flexibility that [headless UI](https://tanstack.com/table/latest/docs/introduction#what-is-headless-ui) provides.
+It doesn't make sense to combine all of these variations into a single component. If we do that, we'll lose the flexibility that [headless UI](https://tanstack.com/table/v8/docs/guide/introduction#what-is-headless-ui) provides.
 
 So instead of a data-table component, I thought it would be more helpful to provide a guide on how to build your own.
 
@@ -55,20 +55,6 @@ npm install @tanstack/vue-table
 
 <ComponentPreview name="DataTableColumnPinningDemo" />
 
-### Reactive Table
-
-A reactive table was added in `v8.20.0` of the TanStack Table. You can see the [docs](https://tanstack.com/table/latest/docs/framework/vue/guide/table-state#using-reactive-data) for more information. We added an example where we are randomizing `status` column. One main point is that you need to mutate **full** data, as it is a `shallowRef` object.
-
-> __*⚠️ `shallowRef` is used under the hood for performance reasons, meaning that the data is not deeply reactive, only the `.value` is. To update the data you have to mutate the data directly.*__
-
-Relative PR: [Tanstack/table #5687](https://github.com/TanStack/table/pull/5687#issuecomment-2281067245)
-
-If you want to mutate `props.data`, you should use [`defineModel`](https://vuejs.org/api/sfc-script-setup.html#definemodel).
-
-There is no difference between using `ref` or `shallowRef` for your data object; it will be automatically mutated by the TanStack Table to `shallowRef`.
-
-<ComponentPreview name="DataTableReactiveDemo" />
-
 ## Prerequisites
 
 We are going to build a table to show recent payments. Here's what our data looks like:
@@ -102,7 +88,7 @@ export const payments: Payment[] = [
 
 Start by creating the following file structure:
 
-```ansi
+```txt
  components
     └── payments
           ├── columns.ts
@@ -111,7 +97,7 @@ Start by creating the following file structure:
 └── app.vue
 ```
 
-I'm using a Nuxt example here but this works for any other Vue framework.
+I'm using a Nuxt.js example here but this works for any other Vue framework.
 
 - `columns.ts` It will contain our column definitions.
 - `data-table.vue` It will contain our `<DataTable />` component.
@@ -128,7 +114,7 @@ Let's start by building a basic table.
 
 First, we'll define our columns in the `columns.ts` file.
 
-```ts:line-numbers
+```ts:line-numbers {1,12-27}
 import { h } from 'vue'
 
 export const columns: ColumnDef<Payment>[] = [
@@ -160,70 +146,66 @@ formatted, sorted and filtered.
 
 Next, we'll create a `<DataTable />` component to render our table.
 
-```vue
+```vue:line-numbers
 <script setup lang="ts" generic="TData, TValue">
 import type { ColumnDef } from '@tanstack/vue-table'
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
+    FlexRender,
+    getCoreRowModel,
+    useVueTable,
+} from "@tanstack/vue-table"
 
 import {
-  FlexRender,
-  getCoreRowModel,
-  useVueTable,
-} from '@tanstack/vue-table'
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
 
 const props = defineProps<{
-  columns: ColumnDef<TData, TValue>[]
-  data: TData[]
+    columns: ColumnDef<TData, TValue>[]
+    data: TData[]
 }>()
 
 const table = useVueTable({
-  get data() { return props.data },
-  get columns() { return props.columns },
-  getCoreRowModel: getCoreRowModel(),
+    get data() { return props.data },
+    get columns() { return props.columns },
+    getCoreRowModel: getCoreRowModel(),
 })
 </script>
 
 <template>
-  <div class="border rounded-md">
-    <Table>
-      <TableHeader>
-        <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
-          <TableHead v-for="header in headerGroup.headers" :key="header.id">
-            <FlexRender
-              v-if="!header.isPlaceholder" :render="header.column.columnDef.header"
-              :props="header.getContext()"
-            />
-          </TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        <template v-if="table.getRowModel().rows?.length">
-          <TableRow
-            v-for="row in table.getRowModel().rows" :key="row.id"
-            :data-state="row.getIsSelected() ? 'selected' : undefined"
-          >
-            <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
-              <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
-            </TableCell>
-          </TableRow>
-        </template>
-        <template v-else>
-          <TableRow>
-            <TableCell :colspan="columns.length" class="h-24 text-center">
-              No results.
-            </TableCell>
-          </TableRow>
-        </template>
-      </TableBody>
-    </Table>
-  </div>
+    <div class="border rounded-md">
+        <Table>
+            <TableHeader>
+                <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+                    <TableHead v-for="header in headerGroup.headers" :key="header.id">
+                        <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header"
+                            :props="header.getContext()" />
+                    </TableHead>
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                <template v-if="table.getRowModel().rows?.length">
+                    <TableRow v-for="row in table.getRowModel().rows" :key="row.id"
+                        :data-state="row.getIsSelected() ? 'selected' : undefined">
+                        <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
+                            <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+                        </TableCell>
+                    </TableRow>
+                </template>
+                <template v-else>
+                    <TableRow>
+                        <TableCell :colSpan="columns.length" class="h-24 text-center">
+                            No results.
+                        </TableCell>
+                    </TableRow>
+                </template>
+            </TableBody>
+        </Table>
+    </div>
 </template>
 ```
 
@@ -239,12 +221,12 @@ const table = useVueTable({
 
 Finally, we'll render our table in our index component.
 
-```vue
+```vue:line-numbers {28}
 <script setup lang="ts">
-import type { Payment } from './components/columns'
-import { onMounted, ref } from 'vue'
-import { columns } from './components/columns'
-import DataTable from './components/DataTable.vue'
+import { ref, onMounted } from 'vue'
+import { columns } from "./components/columns"
+import type { Payment } from './components/columns';
+import DataTable from "./components/DataTable.vue"
 
 const data = ref<Payment[]>([])
 
@@ -252,18 +234,18 @@ async function getData(): Promise<Payment[]> {
   // Fetch data from your API here.
   return [
     {
-      id: '728ed52f',
+      id: "728ed52f",
       amount: 100,
-      status: 'pending',
-      email: 'm@example.com',
+      status: "pending",
+      email: "m@example.com",
     },
     // ...
   ]
 }
 
 onMounted(async () => {
-  data.value = await getData()
-})
+  data.value = await getData();
+});
 </script>
 
 <template>
@@ -285,23 +267,23 @@ Let's format the amount cell to display the dollar amount. We'll also align the
 
 Update the `header` and `cell` definitions for amount as follows:
 
-```ts
+```ts:line-numbers title="components/payments/columns.ts" {5-17}
 import { h } from 'vue'
 
 export const columns: ColumnDef<Payment>[] = [
-  {
-    accessorKey: 'amount',
-    header: () => h('div', { class: 'text-right' }, 'Amount'),
-    cell: ({ row }) => {
-      const amount = Number.parseFloat(row.getValue('amount'))
-      const formatted = new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-      }).format(amount)
+    {
+        accessorKey: "amount",
+        header: () => h('div', { class: 'text-right' }, 'Amount'),
+        cell: ({ row }) => {
+            const amount = parseFloat(row.getValue("amount"))
+            const formatted = new Intl.NumberFormat("en-US", {
+                style: "currency",
+                currency: "USD",
+            }).format(amount)
 
-      return h('div', { class: 'text-right font-medium' }, formatted)
-    },
-  }
+            return h('div', { class: 'text-right font-medium' }, formatted)
+        },
+    }
 ]
 ```
 You can use the same approach to format other cells and headers.
@@ -313,13 +295,14 @@ Let's add row actions to our table. We'll use a `<Dropdown />` component for thi
 
 <Steps>
 
-### Add the following into your `DataTableDropDown.vue` component
+### Add the following into your `DataTableDropDown.vue` component:
 
-```vue
+```vue:line-numbers
+// DataTableDropDown.vue
 <script setup lang="ts">
-import { Button } from '@/components/ui/button'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { MoreHorizontal } from 'lucide-vue-next'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { Button } from '@/components/ui/button'
 
 defineProps<{
   payment: {
@@ -351,30 +334,32 @@ function copy(id: string) {
     </DropdownMenuContent>
   </DropdownMenu>
 </template>
+
 ```
 
 ### Update columns definition
 
 Update our columns definition to add a new `actions` column. The `actions` cell returns a `<Dropdown />` component.
 
-```ts
+```ts:line-numbers showLineNumber{2,6-16}
+import { ColumnDef } from "@tanstack/vue-table"
 import DropdownAction from '@/components/DataTableDropDown.vue'
-import { ColumnDef } from '@tanstack/vue-table'
 
 export const columns: ColumnDef<Payment>[] = [
   // ...
-  {
-    id: 'actions',
-    enableHiding: false,
-    cell: ({ row }) => {
-      const payment = row.original
+    {
+        id: 'actions',
+        enableHiding: false,
+        cell: ({ row }) => {
+            const payment = row.original
 
-      return h('div', { class: 'relative' }, h(DropdownAction, {
-        payment,
-      }))
+            return h('div', { class: 'relative' }, h(DropdownAction, {
+                payment,
+            }))
+        },
     },
-  },
 ]
+
 ```
 
 You can access the row data using `row.original` in the `cell` function. Use this to handle actions for your row eg. use the `id` to make a DELETE call to your API.
@@ -411,45 +396,47 @@ This will automatically paginate your rows into pages of 10. See the [pagination
 
 We can add pagination controls to our table using the `<Button />` component and the `table.previousPage()`, `table.nextPage()` API methods.
 
-```vue
+```vue:line-numbers {3,15,21-39}
 <script lang="ts" generic="TData, TValue">
-import { Button } from '@/components/ui/button'
+import { Button } from "@/components/ui/button"
 
 const table = useVueTable({
-  get data() { return props.data },
-  get columns() { return props.columns },
-  getCoreRowModel: getCoreRowModel(),
-  getPaginationRowModel: getPaginationRowModel(),
+    get data() { return props.data },
+    get columns() { return props.columns },
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
 })
+
 </script>
 
 <template>
-  <div>
-    <div class="border rounded-md">
-      <Table>
-        { // .... }
-      </Table>
-    </div>
-    <div class="flex items-center justify-end py-4 space-x-2">
+    <div>
+      <div class="border rounded-md">
+        <Table>
+          { // .... }
+        </Table>
+      </div>
+      <div class="flex items-center justify-end py-4 space-x-2">
       <Button
-        variant="outline"
-        size="sm"
-        :disabled="!table.getCanPreviousPage()"
-        @click="table.previousPage()"
-      >
-        Previous
-      </Button>
-      <Button
-        variant="outline"
-        size="sm"
-        :disabled="!table.getCanNextPage()"
-        @click="table.nextPage()"
-      >
-        Next
-      </Button>
+          variant="outline"
+          size="sm"
+          :disabled="!table.getCanPreviousPage()"
+          @click="table.previousPage()"
+        >
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          :disabled="!table.getCanNextPage()"
+          @click="table.nextPage()"
+        >
+          Next
+        </Button>
+      </div>
     </div>
-  </div>
 </template>
+
 ```
 
 See [Reusable Components](#reusable-components) section for a more advanced pagination component.
@@ -462,23 +449,24 @@ Let's make the email column sortable.
 
 <Steps>
 
-### Add the following into your `utils` file
-
-```ts
-import type { Updater } from '@tanstack/vue-table'
-import type { Ref } from 'vue'
+### Add the following into your `utils` file:
 
+```ts:line-numbers {5,6,12-17}
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
+import type { Updater } from '@tanstack/vue-table'
+import { type Ref } from 'vue'
+
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
 
 export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
-  ref.value = typeof updaterOrValue === 'function'
-    ? updaterOrValue(ref.value)
-    : updaterOrValue
+  ref.value
+    = typeof updaterOrValue === 'function'
+      ? updaterOrValue(ref.value)
+      : updaterOrValue
 }
 ```
 
@@ -486,60 +474,62 @@ The `valueUpdater` function updates a Vue `ref` object's value. It handles both
 
 ### Update `<DataTable>`
 
-```vue:line-numbers {4,14,17,33,40-44}
+```vue:line-numbers {4,7,16,34,41-44}
 <script setup lang="ts" generic="TData, TValue">
 import type {
   ColumnDef,
   SortingState,
 } from '@tanstack/vue-table'
 
+import { valueUpdater } from '@/lib/utils'
+
 import { ArrowUpDown, ChevronDown } from 'lucide-vue-next'
 import { h, ref } from 'vue'
 
 import {
-  FlexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useVueTable,
-} from '@tanstack/vue-table'
-import { valueUpdater } from '@/lib/utils'
+    FlexRender,
+    getCoreRowModel,
+    getPaginationRowModel,
+    getSortedRowModel,
+    useVueTable,
+} from "@tanstack/vue-table"
 
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table"
 
 const props = defineProps<{
-  columns: ColumnDef<TData, TValue>[]
-  data: TData[]
+    columns: ColumnDef<TData, TValue>[]
+    data: TData[]
 }>()
 
 const sorting = ref<SortingState>([])
 
 const table = useVueTable({
-  get data() { return props.data },
-  get columns() { return props.columns },
-  getCoreRowModel: getCoreRowModel(),
-  getPaginationRowModel: getPaginationRowModel(),
-  getSortedRowModel: getSortedRowModel(),
-  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
-  state: {
-    get sorting() { return sorting.value },
-  },
+    get data() { return props.data },
+    get columns() { return props.columns },
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
+    state: {
+        get sorting() { return sorting.value },
+    },
 })
+
 </script>
 
 <template>
-  <div>
-    <div class="border rounded-md">
-      <Table>{ ... }</Table>
+   <div>
+      <div class="border rounded-md">
+        <Table>{ ... }</Table>
+      </div>
     </div>
-  </div>
 </template>
 ```
 
@@ -880,237 +870,11 @@ This adds a checkbox to each row and a checkbox in the header to select all rows
 
 You can show the number of selected rows using the `table.getFilteredSelectedRowModel()` API.
 
-```vue:line-numbers {8-11}
-<template>
-  <div>
-    <div class="border rounded-md">
-        <Table />
-    </div>
-
-    <div class="flex items-center justify-end space-x-2 py-4">
-      <div class="flex-1 text-sm text-muted-foreground">
-        {{ table.getFilteredSelectedRowModel().rows.length }} of
-        {{ table.getFilteredRowModel().rows.length }} row(s) selected.
-      </div>
-      <div class="space-x-2">
-        <PaginationButtons />
-      </div>
-    </div>
-  </div>
-</template>
-
-```
-
-</Steps>
-
-<Steps>
-
-## Expanding
-
-Let's make rows expandable.
-
-### Update `<DataTable>`
-
-```vue:line-numbers {7,30,43,52,57,63,103-116}
-<script setup lang="ts" generic="TData, TValue">
-import type {
-  ColumnDef,
-  ColumnFiltersState,
-  SortingState,
-  VisibilityState,
-  ExpandedState,
-} from '@tanstack/vue-table'
-
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-
-import { valueUpdater } from '@/lib/utils'
-
-import { ArrowUpDown, ChevronDown } from 'lucide-vue-next'
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
-import { h, ref } from 'vue'
-
-import {
-    FlexRender,
-    getCoreRowModel,
-    getPaginationRowModel,
-    getFilteredRowModel,
-    getSortedRowModel,
-    getExpandedRowModel,
-    useVueTable,
-} from "@tanstack/vue-table"
-
-const props = defineProps<{
-    columns: ColumnDef<TData, TValue>[]
-    data: TData[]
-}>()
-
-const sorting = ref<SortingState>([])
-const columnFilters = ref<ColumnFiltersState>([])
-const columnVisibility = ref<VisibilityState>({})
-const rowSelection = ref({})
-const expanded = ref<ExpandedState>({})
-
-const table = useVueTable({
-    get data() { return props.data },
-    get columns() { return props.columns },
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
-    onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
-    onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),
-    onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
-    onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),
-    onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),
-    state: {
-        get sorting() { return sorting.value },
-        get columnFilters() { return columnFilters.value },
-        get columnVisibility() { return columnVisibility.value },
-        get rowSelection() { return rowSelection.value },
-        get expanded() { return expanded.value },
-    },
-})
-</script>
-
-<template>
-    <div>
-        <div class="flex items-center py-4">
-            <Input class="max-w-sm" placeholder="Filter emails..."
-                :model-value="table.getColumn('email')?.getFilterValue() as string"
-                @update:model-value=" table.getColumn('email')?.setFilterValue($event)" />
-            <DropdownMenu>
-                <DropdownMenuTrigger as-child>
-                    <Button variant="outline" class="ml-auto">
-                        Columns
-                        <ChevronDown class="w-4 h-4 ml-2" />
-                    </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                    <DropdownMenuCheckboxItem
-                        v-for="column in table.getAllColumns().filter((column) => column.getCanHide())" :key="column.id"
-                        class="capitalize" :checked="column.getIsVisible()" @update:checked="(value) => {
-                            column.toggleVisibility(!!value)
-                        }">
-                        {{ column.id }}
-                    </DropdownMenuCheckboxItem>
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </div>
-        <div class="border rounded-md">
-            <Table>
-                <TableHeader>
-                    <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
-                        <TableHead v-for="header in headerGroup.headers" :key="header.id">
-                            <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header"
-                                :props="header.getContext()" />
-                        </TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    <template v-if="table.getRowModel().rows?.length">
-                      <template v-for="row in table.getRowModel().rows" :key="row.id">
-                        <TableRow :data-state="row.getIsSelected() ? 'selected' : undefined">
-                            <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
-                                <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
-                            </TableCell>
-                        </TableRow>
-                        <TableRow v-if="row.getIsExpanded()">
-                          <TableCell :colspan="row.getAllCells().length">
-                            {{ JSON.stringify(row.original) }}
-                          </TableCell>
-                        </TableRow>
-                      </template>
-                    </template>
-                    <template v-else>
-                        <TableRow>
-                            <TableCell :colSpan="columns.length" class="h-24 text-center">
-                                No results.
-                            </TableCell>
-                        </TableRow>
-                    </template>
-                </TableBody>
-            </Table>
-        </div>
-    </div>
-</template>
-```
-
-### Add the expand action to the `DataTableDropDown.vue` component
-
-```vue:line-numbers {12-14,34-36}
-<script setup lang="ts">
-import { MoreHorizontal } from 'lucide-vue-next'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
-import { Button } from '@/components/ui/button'
-
-defineProps<{
-  payment: {
-    id: string
-  }
-}>()
-
-defineEmits<{
-  (e: 'expand'): void
-}>()
-
-function copy(id: string) {
-  navigator.clipboard.writeText(id)
-}
-</script>
-
-<template>
-  <DropdownMenu>
-    <DropdownMenuTrigger as-child>
-      <Button variant="ghost" class="w-8 h-8 p-0">
-        <span class="sr-only">Open menu</span>
-        <MoreHorizontal class="w-4 h-4" />
-      </Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent align="end">
-      <DropdownMenuLabel>Actions</DropdownMenuLabel>
-      <DropdownMenuItem @click="copy(payment.id)">
-        Copy payment ID
-      </DropdownMenuItem>
-      <DropdownMenuItem @click="$emit('expand')">
-        Expand
-      </DropdownMenuItem>
-      <DropdownMenuSeparator />
-      <DropdownMenuItem>View customer</DropdownMenuItem>
-      <DropdownMenuItem>View payment details</DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
-</template>
-```
-
-### Make rows expandable
-
-Now we can update the action cell to add the expand control.
-
-```vue:line-numbers {11}
-<script setup lang="ts">
-export const columns: ColumnDef<Payment>[] = [
-  {
-    id: 'actions',
-    enableHiding: false,
-    cell: ({ row }) => {
-      const payment = row.original
-
-      return h('div', { class: 'relative' }, h(DropdownAction, {
-        payment,
-        onExpand: row.toggleExpanded,
-      }))
-    },
-  },
-]
-</script>
-
+```vue
+<div class="flex-1 text-sm text-muted-foreground">
+    {{ table.getFilteredSelectedRowModel().rows.length }} of
+    {{ table.getFilteredRowModel().rows.length }} row(s) selected.
+</div>
 ```
 
 </Steps>

apps/www/src/content/docs/components/dialog.md

@@ -62,10 +62,6 @@ import {
 
 <ComponentPreview name="DialogScrollOverlayDemo" />
 
-### Form
-
-<ComponentPreview name="DialogForm" />
-
 ## Notes
 
 To activate the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or `Dropdown Menu` component in the `Dialog` component. For more information, refer to the linked issue [here](https://github.com/radix-ui/primitives/issues/1836).

apps/www/src/content/docs/components/form.md

@@ -23,7 +23,7 @@ The `<Form />` component is a wrapper around the `vee-validate` library. It prov
 - Composable components for building forms.
 - A `<FormField />` component for building controlled form fields.
 - Form validation using `zod`.
-- Applies the correct `aria` attributes to form fields based on states, handle unique IDs
+- Applies the correct `aria` attributes to form fields based on states, handle unqiue IDs
 - Built to work with all Radix Vue components.
 - Bring your own schema library. We use `zod` but you can use any other supported schema validation you want, like [`yup`](https://github.com/jquense/yup) or [`valibot`](https://valibot.dev/).
 - **You have full control over the markup and styling.**

apps/www/src/content/docs/components/navigation-menu.md

@@ -47,7 +47,7 @@ import {
 
 ### Link Component
 
-When using the Nuxt `<NuxtLink />` component, you can use `navigationMenuTriggerStyle()` to apply the correct styles to the trigger.
+When using the Nuxt.js `<NuxtLink />` component, you can use `navigationMenuTriggerStyle()` to apply the correct styles to the trigger.
 
 ```ts
 import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu'

apps/www/src/content/docs/components/number-field.md

@@ -1,71 +0,0 @@
----
-title: Number Field
-description: A number field allows a user to enter a number and increment or decrement the value using stepper buttons.
-source: apps/www/src/lib/registry/default/ui/number-field
-primitive: https://www.radix-vue.com/components/number-field.html
----
-
-<ComponentPreview name="NumberFieldDemo" class="max-w-[180px]" />
-
-## Installation
-
-<TabPreview name="CLI">
-<template #CLI>
-
-```bash
-npx shadcn-vue@latest add number-field
-```
-</template>
-</TabPreview>
-
-## Usage
-
-```vue
-<script setup lang="ts">
-import { Label } from '@/components/ui/label'
-import {
-  NumberField,
-  NumberFieldContent,
-  NumberFieldDecrement,
-  NumberFieldIncrement,
-  NumberFieldInput,
-} from '@/components/ui/number-field'
-</script>
-
-<template>
-  <NumberField>
-    <Label>Age</Label>
-    <NumberFieldContent>
-      <NumberFieldDecrement />
-      <NumberFieldInput />
-      <NumberFieldIncrement />
-    </NumberFieldContent>
-  </NumberField>
-</template>
-```
-
-## Examples
-
-### Default
-
-<ComponentPreview name="NumberFieldDemo" class="max-w-[180px]" />
-
-### Disabled
-
-<ComponentPreview name="NumberFieldDisabled" class="max-w-[180px]" />
-
-### Decimal
-
-<ComponentPreview name="NumberFieldDecimal" class="max-w-[180px]" />
-
-### Percentage
-
-<ComponentPreview name="NumberFieldPercentage" class="max-w-[180px]" />
-
-### Currency
-
-<ComponentPreview name="NumberFieldCurrency" class="max-w-[220px]" />
-
-### Form
-
-<ComponentPreview name="NumberFieldForm" class="max-w-xs" />

apps/www/src/content/docs/components/pagination.md

@@ -17,10 +17,6 @@ npx shadcn-vue@latest add pagination
 
 ```vue
 <script setup lang="ts">
-import {
-  Button,
-} from '@/components/ui/button'
-
 import {
   Pagination,
   PaginationEllipsis,
@@ -31,6 +27,10 @@ import {
   PaginationNext,
   PaginationPrev,
 } from '@/components/ui/pagination'
+
+import {
+  Button,
+} from '@/components/ui/button'
 </script>
 
 <template>

apps/www/src/content/docs/components/separator.md

@@ -44,6 +44,6 @@ import { Separator } from '@/components/ui/separator'
 </script>
 
 <template>
-  <Separator label="Or" />
+  <Separator />
 </template>
 ```

apps/www/src/content/docs/components/sheet.md

@@ -32,7 +32,7 @@ import {
     <SheetTrigger>Open</SheetTrigger>
     <SheetContent>
       <SheetHeader>
-        <SheetTitle>Are you absolutely sure?</SheetTitle>
+        <SheetTitle>Are you sure absolutely sure?</SheetTitle>
         <SheetDescription>
           This action cannot be undone. This will permanently delete your account
           and remove your data from our servers.
@@ -61,7 +61,7 @@ You can adjust the size of the sheet using CSS classes:
     <SheetTrigger>Open</SheetTrigger>
     <SheetContent class="w-[400px] sm:w-[540px]">
       <SheetHeader>
-        <SheetTitle>Are you absolutely sure?</SheetTitle>
+        <SheetTitle>Are you sure absolutely sure?</SheetTitle>
         <SheetDescription>
           This action cannot be undone. This will permanently delete your account
           and remove your data from our servers.

apps/www/src/content/docs/components/sidebar.md

@@ -1,12 +0,0 @@
----
-title: Sidebar
-description: A composable, themeable and customizable sidebar component.
----
-
-<BlockPreview name="Sidebar07" ></BlockPreview>
-
-## Installation
-
-```bash
-npx shadcn-vue@latest add sidebar
-```

apps/www/src/content/docs/components/sonner.md

@@ -41,8 +41,8 @@ import { Toaster } from '@/components/ui/sonner'
 
 ```vue
 <script setup lang="ts">
-import { Button } from '@/components/ui/button'
 import { toast } from 'vue-sonner'
+import { Button } from '@/components/ui/button'
 </script>
 
 <template>
@@ -61,23 +61,3 @@ import { toast } from 'vue-sonner'
   </Button>
 </template>
 ```
-
-## Examples
-
-### Sonner with Dialog
-
-Related issue https://github.com/radix-vue/shadcn-vue/issues/462
-
-Add `pointer-events-auto` class to Toaster component in your `App.vue` file:
-
-```vue {6}
-<script setup lang="ts">
-import { Toaster } from '@/components/ui/sonner'
-</script>
-
-<template>
-  <Toaster class="pointer-events-auto" />
-</template>
-```
-
-<ComponentPreview name="SonnerWithDialog" />

apps/www/src/content/docs/components/stepper.md

@@ -1,64 +0,0 @@
----
-title: Stepper
-description: A set of steps that are used to indicate progress through a multi-step process.
-source: apps/www/src/lib/registry/default/ui/stepper
-primitive: https://www.radix-vue.com/components/stepper.html
----
-
-<ComponentPreview name="StepperDemo" />
-
-## Installation
-
-```bash
-npx shadcn-vue@latest add stepper
-```
-
-## Usage
-
-```vue
-<script setup lang="ts">
-import {
-  Stepper,
-  StepperDescription,
-  StepperIndicator,
-  StepperItem,
-  StepperSeparator,
-  StepperTitle,
-  StepperTrigger,
-} from '@/components/ui/stepper'
-</script>
-
-<template>
-  <Stepper>
-    <StepperItem :step="1">
-      <StepperTrigger>
-        <StepperIndicator>1</StepperIndicator>
-        <StepperTitle>Step 1</StepperTitle>
-        <StepperDescription>This is the first step</StepperDescription>
-      </StepperTrigger>
-      <StepperSeparator />
-    </StepperItem>
-    <StepperItem :step="2">
-      <StepperTrigger>
-        <StepperIndicator>2</StepperIndicator>
-        <StepperTitle>Step 2</StepperTitle>
-        <StepperDescription>This is the second step</StepperDescription>
-      </StepperTrigger>
-    </StepperItem>
-  </Stepper>
-</template>
-```
-
-## Examples
-
-### Horizontal
-
-<ComponentPreview name="StepperHorizental" />
-
-### Vertical
-
-<ComponentPreview name="StepperVertical" />
-
-### Form
-
-<ComponentPreview name="StepperForm" />

apps/www/src/content/docs/components/switch.md

@@ -48,19 +48,6 @@ import { Switch } from '@/components/ui/switch'
 </template>
 ```
 
-# Add icon inside switch thumb
-
-```vue
-<template>
-  <Switch :checked="isDark" @update:checked="toggleTheme">
-    <template #thumb>
-      <Icon v-if="isDark" icon="lucide:moon" class="size-3" />
-      <Icon v-else icon="lucide:sun" class="size-3" />
-    </template>
-  </Switch>
-</template>
-```
-
 ## Examples
 
 ### Form

apps/www/src/content/docs/components/tabs.md

@@ -39,9 +39,3 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
   </Tabs>
 </template>
 ```
-
-## Examples
-
-### Vertical
-
-<ComponentPreview name="TabsVerticalDemo" />

apps/www/src/content/docs/components/tags-input.md

@@ -18,7 +18,3 @@ npx shadcn-vue@latest add tags-input
 ### Tags with Combobox
 
 <ComponentPreview name="TagsInputComboboxDemo" />
-
-### Form
-
-<ComponentPreview name="TagsInputFormDemo" />

apps/www/src/content/docs/components/toast.md

@@ -44,8 +44,8 @@ import { useToast } from '@/components/ui/toast/use-toast'
 ```vue
 <script setup lang="ts">
 import { Button } from '@/components/ui/button'
-import { Toaster } from '@/components/ui/toast'
 import { useToast } from '@/components/ui/toast/use-toast'
+import { Toaster } from "@/components/ui/toast"
 
 const { toast } = useToast()
 </script>

apps/www/src/content/docs/components/v-date-picker.md

@@ -15,19 +15,19 @@ See installation instructions for the [Popover](/docs/components/popover#install
 
 ```vue
 <script setup lang="ts">
+import { format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+
+import { ref } from 'vue'
+import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/v-calendar'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover'
 
-import { Calendar } from '@/components/ui/v-calendar'
-import { cn } from '@/lib/utils'
-import { format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { ref } from 'vue'
-
 const date = ref<Date>()
 </script>
 

apps/www/src/content/docs/contribution.md

@@ -2,15 +2,6 @@
 title: Contribution
 description: Learn on how to contribute to shadcn/vue.
 ---
-<script setup lang="ts">
-import { Button } from "@/lib/registry/new-york/ui/button"
-
-const latestSyncCommitTag = "06cc0cdf3d080555d26abbe6639f2d7f6341ec73"
-
-const latestSyncCommitUrl = `https://github.com/shadcn-ui/ui/commit/${latestSyncCommitTag}`
-const diffUrl = `https://github.com/shadcn-ui/ui/compare/${latestSyncCommitTag}...main`
-</script>
-
 ## Introduction
 
 Thanks for your interest in contributing to shadcn-vue.com. We're happy to have you here.
@@ -101,13 +92,13 @@ You can use the `pnpm --filter=[WORKSPACE]` command to start the development pro
 
 1. To run the `shadcn-vue.com` website:
 
-```bash
+```
 pnpm dev
 ```
 
 2. To run the `shadcn-vue` cli package:
 
-```bash
+```
 pnpm dev:cli
 ```
 
@@ -185,7 +176,7 @@ To do so, we have a helper function named [`useForwardPropsEmits`](https://www.r
 To be more clear, the function `useForwardPropsEmits` takes in props and an optional emit function, and returns a
 computed object that combines the parsed props and emits as props.
 
-Here's an example from `Accordion` root component.
+Here's an example from `Accordian` root component.
 
 ```vue
 <script setup lang="ts">
@@ -209,7 +200,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 </template>
 ```
 
-As you can see, `AccordionRootEmits` and `AccordionRootProps` types are imported from radix, combined with `useForwardPropsEmits` and then are binded using `v-bind` syntax.
+As you can see, `AccordionRootEmits` and `AccordionRootProps` types are imported from radix, combined with `useForwardPropsEmits` and then are binded using `v-bind` syntaxt.
 
 ### CSS Classes
 There are cases when we want to accept `class` as a prop in our `shadcn/vue` component and then combine it with a default tailwind class on our `radix-vue` component via `cn` utility function.
@@ -221,9 +212,9 @@ Take a look at `DrawerDescription.vue`.
 ```vue
 <script lang="ts" setup>
 import type { DrawerDescriptionProps } from 'vaul-vue'
-import { cn } from '@/lib/utils'
 import { DrawerDescription } from 'vaul-vue'
-import { computed, type HtmlHTMLAttributes } from 'vue'
+import { type HtmlHTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()
 
@@ -270,9 +261,9 @@ Take a look at `AccordionItem.vue`
 
 ```vue
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from 'vue'
 import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
 
@@ -307,9 +298,9 @@ Let's take a look at `Button.vue`
 ```vue
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Primitive, type PrimitiveProps } from 'radix-vue'
 import { type ButtonVariants, buttonVariants } from '.'
+import { cn } from '@/lib/utils'
 
 interface Props extends PrimitiveProps {
   variant?: ButtonVariants['variant']
@@ -335,25 +326,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 You'll need to extend `PrimitiveProps` in your props to support `Primitive` component. In most cases you would also need a default value for [`as`](https://www.radix-vue.com/utilities/primitive.html#changing-as-value) property.
 
-## Updating with `shadcn/ui`
-
-`shadcn/vue` is an unofficial, community-led Vue port of `shadcn/ui`, as time goes by, they might get out of sync.
-
-As of today, we are in sync with this <a :href="latestSyncCommitUrl" target="_blank">commit</a> of `shadcn/ui`.
-
-Click on the following link to check if there are newer commits that we should be synced with.
-
-<div class="text-center">
-  <a :href="diffUrl" target="_blank">
-    <Button>
-      Check Diff
-    </Button>
-  </a>
-</div>
-
-1. There are no changes - If you see "There isn’t anything to compare", nothing needs to be done as we are synced with latest version.
-2. If there are changes, you should review thoese changes and try to apply them on `shadcn/vue` codebase and create a PR, remember to update the `latestSyncCommitTag` in [this file](https://github.com/radix-vue/shadcn-vue/blob/dev/apps/www/src/content/docs/contribution.md) too.
-
 ## Debugging
 Here are some tools and techniques that can help you debug more effectively while contributing to `shadcn/vue` or developing your own projects.