1570 changed files with 13531 additions and 73723 deletions
--- a/.editorconfig
+++ b/.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
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,16 @@
+// const process = require('node:process')
+// process.env.ESLINT_TSCONFIG = 'tsconfig.json'
+
+module.exports = {
+  extends: '@antfu',
+
+  rules: {
+    'vue/one-component-per-file': 'off',
+    'vue/no-reserved-component-names': 'off',
+    'vue/no-useless-v-bind': 'off',
+    'symbol-description': 'off',
+    'no-console': 'warn',
+    'no-tabs': 'off',
+    'no-invalid-character': 'off',
+  },
+}
--- a/.gitea/ISSUE_TEMPLATE/bug-report.yml
+++ b/.gitea/ISSUE_TEMPLATE/bug-report.yml
@ -1,55 +0,0 @@
-name: 🐞 Bug report
-description: Create a report to help us improve shadcn-vue.
-title: '[Bug]: '
-labels: [bug]
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Thanks for taking the time to fill out this bug report!
-        This form is only for submitting bug reports. If you have a usage question
-        or are unsure if this is really a bug, make sure to:
-
-        - Read the [docs](https://radix-vue.com/)
-        - Ask on [Discord Chat](https://chat.radix-vue.com/)
-        - Ask on [GitHub Discussions](https://github.com/shadcn-vue/shadcn-vue/discussions)
-  - type: input
-    id: reproduction
-    attributes:
-      label: Reproduction
-      description: |
-        A [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example) is **required**, otherwise the issue might be closed without further notice. [**Why?**](https://antfu.me/posts/why-reproductions-are-required)
-
-        To get started, you can use the StackBlitz and CodeSandbox playgrounds in shadcn-vue demos:
-        https://www.shadcn-vue.com/docs/components/accordion.html
-
-        or use template presets
-        https://vite.new
-        https://nuxt.new
-      placeholder: Reproduction
-    validations:
-      required: true
-  - type: textarea
-    id: bug-description
-    attributes:
-      label: Describe the bug
-      description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!
-      placeholder: Bug description
-    validations:
-      required: true
-  - type: textarea
-    id: system-info
-    attributes:
-      label: System Info
-      description: Output of `npx envinfo --system --npmPackages vue,@vueuse/core,radix-vue,nuxt,shadcn-vue,shadcn-nuxt,unplugin-auto-import --binaries --browsers`
-      render: bash
-      placeholder: System, Binaries, Browsers
-    validations:
-      required: true
-  - type: checkboxes
-    id: contributes
-    attributes:
-      label: Contributes
-      options:
-        - label: I am willing to submit a PR to fix this issue
-        - label: I am willing to submit a PR with failing tests
--- a/.gitea/actions/setup/action.yml
+++ b/.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'
--- a/.gitea/workflows/publish.yaml
+++ b/.gitea/workflows/publish.yaml
@ -1,90 +0,0 @@
-name: Publish www
-
-on:
-  push:
-    branches:
-      - dev
-    paths:
-      - 'apps/www/**'
-  pull_request:
-    branches:
-      - dev
-    paths:
-      - 'apps/www/**'
-  pull_request_target:
-    types:
-      # When a created pull request from forked repo, it will be comment 'Should deploy to add label'
-      - opened
-      # When a labeled '🚀request-deploy' pull request from forked repo, it will be deploy to Cloudflare Pages
-      - labeled
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-permissions:
-  # default contents: read & write (in forked repos, only read)
-  contents: write
-  # default deployments: read & write (in forked repos, only read)
-  deployments: write
-  # default pull-requests: read & write (in forked repos, only read)
-  pull-requests: write
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-    name: Publish to Cloudflare Pages
-    # push event in main branch
-    # workflow_dispatch event
-    # pull_request event from not forked repo
-    # pull_request_target event with label "🚀request-deploy" from forked repo
-    if: ${{
-      github.event_name == 'push' ||
-      github.event_name == 'workflow_dispatch' ||
-      (github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false) ||
-      (github.event_name == 'pull_request_target' &&
-      github.event.action == 'labeled' &&
-      github.event.pull_request.head.repo.fork == true &&
-      contains(github.event.label.name, '🚀request-deploy'))
-      }}
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup (Install Node & pnpm)
-        uses: ./.github/actions/setup
-
-      - name: Install dependencies
-        run: pnpm i --frozen-lockfile
-
-      - name: Build www
-        run: pnpm build
-
-      # Run a action to publish docs
-      - name: Publish to Cloudflare Pages
-        uses: zernonia/cloudflare-pages-action@v0.0.7
-        with:
-          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: shadcn-vue
-          directory: .vitepress/dist
-          # Optional: Enable this if you want to have GitHub Deployments triggered
-          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
-          # Optional: Switch what branch you are publishing to.
-          # By default this will be the branch which triggered this workflow
-          branch: ${{ github.ref == 'refs/heads/dev' && 'dev' || format('refs/pull/{0}/merge', github.event.number) }}
-          # Optional: Change the working directory
-          workingDirectory: apps/www
-          wranglerVersion: '3'
-
-      - name: Remove label
-        if: ${{ github.event_name == 'pull_request_target' && contains(github.event.label.name, '🚀request-deploy') }}
-        uses: actions/github-script@v6
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            github.rest.issues.removeLabel({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              name: ['🚀request-deploy']
-            })
--- a/.gitea/workflows/release.yaml
+++ b/.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 }}
--- a/.gitea/workflows/test.yaml
+++ b/.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
--- a/.github/ISSUE_TEMPLATE/bug-report.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report.yml
@ -0,0 +1,86 @@
+name: 🐞 Bug report
+description: Create a report to help us improve shadcn-vue.
+title: '[Bug]: '
+labels: [bug]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        **Before You Start...**
+
+        This form is only for submitting bug reports. If you have a usage question
+        or are unsure if this is really a bug, make sure to:
+
+        - Read the [docs](https://radix-vue.com/)
+        - Ask on [Discord Chat](https://chat.radix-vue.com/)
+        - Ask on [GitHub Discussions](https://github.com/shadcn-vue/shadcn-vue/discussions)
+
+        Also try to search for your issue - it may have already been answered or even fixed.
+        However, if you find that an old, closed issue still persists in the latest version,
+        you should open a new issue using the form below instead of commenting on the old issue.
+  - type: textarea
+    id: bug-env
+    attributes:
+      label: Environment
+      description: Please provide the following information about your environment.
+      value: |
+        Developement/Production OS: Windows 10 19043.1110
+        Node version: 16.0.0
+        Package manager: pnpm@8.6.0
+        Radix Vue version: 1.0.0
+        Shadcn Vue version: 1.0.0
+        Vue version: 3.0.0
+        Nuxt version: 3.0.0
+        Nuxt mode: universal
+        Nuxt target: server
+        CSS framework: tailwindcss@3.3.3
+        Client OS: Windows 10 19043.1110
+        Browser: Chrome 90.0.4430.212
+      render: bash
+    validations:
+      required: true
+  - type: input
+    id: reproduction-link
+    attributes:
+      label: Link to minimal reproduction
+      description: |
+        Please provide a link to a minimal reproduction of the bug.
+        A minimal reproduction is a CodeSandbox, CodePen, or a StackBlitz that contains the bare minimum amount of code needed to show the bug.
+        A minimal reproduction is required unless you are absolutely sure that the issue is obvious and the provided information is enough to understand the problem
+
+        This is **required** for us to be able to triage your issue in a timely manner.
+
+        Please do not just fill in a random link. The issue will be closed if no valid reproduction is provided.
+      placeholder: Reproduction Link
+    validations:
+      required: true
+  - type: textarea
+    id: steps-to-reproduce
+    attributes:
+      label: Steps to reproduce
+      description: |
+        How do you trigger this bug? Please walk us through it step by step.
+        Note that you can use [Markdown](https://guides.github.com/features/mastering-markdown/) to format lists and code.
+      placeholder: Steps to reproduce
+    validations:
+      required: true
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!
+      placeholder: Bug description
+    validations:
+      required: true
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected behavior
+      description: A clear and concise description of what you expected to happen.
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Conext & Screenshots (if applicable)
+      description: |
+        If applicable, provide any additional context or screenshots of the bug.
+        You can drag and drop images here to add them to the issue.
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
--- a/.github/ISSUE_TEMPLATE/feature-request.yml
+++ b/.github/ISSUE_TEMPLATE/feature-request.yml
--- a/.github/PULL_REQUEST_TEMPLATE.md.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md.md
--- a/.github/workflows/publish.yaml
+++ b/.github/workflows/publish.yaml
@ -0,0 +1,72 @@
+name: Publish www
+
+on:
+  push:
+    branches:
+      - dev
+    paths:
+      - 'apps/www/**'
+  pull_request:
+    branches:
+      - dev
+    paths:
+      - 'apps/www/**'
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+    name: Publish to Cloudflare Pages
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      # 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: 8
+          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: Build www
+        run: pnpm build
+
+      # Run a action to publish docs
+      - name: Publish to Cloudflare Pages
+        uses: cloudflare/pages-action@v1.5.0
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: shadcn-vue
+          directory: .vitepress/dist
+          # Optional: Enable this if you want to have GitHub Deployments triggered
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
+          # Optional: Switch what branch you are publishing to.
+          # By default this will be the branch which triggered this workflow
+          # branch: main
+          # Optional: Change the working directory
+          workingDirectory: apps/www
+          wranglerVersion: '3'
--- a/.github/workflows/release.yaml
+++ b/.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}}
--- a/.github/workflows/test.yaml
+++ b/.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: 8
+          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
--- a/.npmrc
+++ b/.npmrc
@ -1 +0,0 @@
-shell-emulator=true
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -1,7 +1,7 @@
 {
  "recommendations": [
    "Vue.volar",
-    "dbaeumer.vscode-eslint",
-    "bradlc.vscode-tailwindcss"
+    "Vue.vscode-typescript-vue-plugin",
+    "dbaeumer.vscode-eslint"
  ]
 }
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,28 +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"
+    "source.fixAll.eslint": true,
+    "source.organizeImports": false
  },
-  "eslint.useFlatConfig": true,
-  "eslint.rules.customizations": [
-    { "rule": "style/*", "severity": "off" },
-    { "rule": "format/*", "severity": "off" },
-    { "rule": "*-indent", "severity": "off" },
-    { "rule": "*-spacing", "severity": "off" },
-    { "rule": "*-spaces", "severity": "off" },
-    { "rule": "*-order", "severity": "off" },
-    { "rule": "*-dangle", "severity": "off" },
-    { "rule": "*-newline", "severity": "off" },
-    { "rule": "*quotes", "severity": "off" },
-    { "rule": "*semi", "severity": "off" }
-  ],
+
  "eslint.validate": [
    "javascript",
    "javascriptreact",
@ -34,9 +17,5 @@
    "json",
    "jsonc",
    "yaml"
-  ],
-  "tailwindCSS.experimental.classRegex": [
-    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
-    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ]
 }
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -19,7 +19,7 @@ This repository is structured as follows:
 ```
 apps
 └── www
-    ├── src
+    ├── src 
    │   └── content
    └── registry
        ├── default
@ -32,12 +32,12 @@ packages
 └── cli
 ```

-| Path                        | Description                                |
-| ----------------------------| -------------------------------------------|
-| `apps/www/.vitepress`       | The Vitepress application for the website. |
-| `apps/www/src/content`      | The content for the website.               |
-| `apps/www/src/lib/registry` | The registry for the components.           |
-| `packages/cli`              | The `shadcn-vue` package.                  |
+| Path                  | Description                              |
+| --------------------- | ---------------------------------------- |
+| `apps/www/app`        | The Next.js application for the website. |
+| `apps/www/content`    | The content for the website.             |
+| `apps/www/registry`   | The registry for the components.         |
+| `packages/cli`        | The `shadcn-vue` package.                |

 ## Development

@ -79,24 +79,22 @@ The documentation for this project is located in the `www` workspace. You can ru
 pnpm dev
 ```

-Documentation is written using [md](https://vitepress.dev/guide/markdown). You can find the documentation files in the `apps/www/src/content` directory.
+Documentation is written using [md](https://vitepress.dev/guide/markdown). You can find the documentation files in the `apps/www/content/docs` directory.

 ## Components

-We use a registry system for developing components. You can find the source code for the components under `apps/www/src/lib/registry`. The components are organized by styles.
+We use a registry system for developing components. You can find the source code for the components under `apps/www/registry`. The components are organized by styles.

 ```bash
 apps
 └── www
-    └── src
-        └── lib
-            └── registry
-                ├── default
-                │   ├── example
-                │   └── ui
-                └── new-york
-                    ├── example
-                    └── ui
+    └── registry
+        ├── default
+        │   ├── example
+        │   └── ui
+        └── new-york
+            ├── example
+            └── ui
 ```

 When adding or modifying components, please ensure that:
@ -132,10 +130,13 @@ the following categories:

  e.g. `feat(components): add new prop to the avatar component`

+
 If you are interested in the detailed specification you can visit
 https://www.conventionalcommits.org/ or check out the
 [Angular Commit Message Guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#-commit-message-guidelines).

+
+
 ## Requests for new components

 If you have a request for a new component, please open a discussion on GitHub. We'll be happy to help you out.
@ -154,4 +155,4 @@ Tests are written using [Vitest](https://vitest.dev). You can run all the tests
 pnpm test
 ```

-Please ensure that the tests are passing when submitting a pull request. If you're adding new features, please include tests.
+Please ensure that the tests are passing when submitting a pull request. If you're adding new features, please include tests.
--- a/README.md
+++ b/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
--- a/apps/www/.vitepress/config.mts
+++ b/apps/www/.vitepress/config.mts
@ -1,12 +1,9 @@
 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 { siteConfig } from './theme/config/site'
-import CodeWrapperPlugin from './theme/plugins/codewrapper'
 import ComponentPreviewPlugin from './theme/plugins/previewer'

 // https://vitepress.dev/reference/site-config
@ -20,9 +17,6 @@ export default defineConfig({
    ['link', { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }],
    ['link', { rel: 'manifest', href: '/site.webmanifest' }],

-    ['meta', { name: 'theme-color', media: '(prefers-color-scheme: light)', content: 'white' }],
-    ['meta', { name: 'theme-color', media: '(prefers-color-scheme: dark)', content: 'black' }],
-
    ['meta', { name: 'creator', content: 'radix-vue' }],
    ['meta', { name: 'theme-color', content: '#41b883' }],
    ['meta', { name: 'og:type', content: 'website' }],
@ -30,6 +24,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,20 +43,13 @@ 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: {
-    codeTransformers: [
-      transformerMetaWordHighlight(),
-    ],
+    theme: 'css-variables',
    config(md) {
      md.use(ComponentPreviewPlugin)
-      md.use(CodeWrapperPlugin)
    },
  },
  rewrites: {
@ -71,13 +59,13 @@ export default defineConfig({
    css: {
      postcss: {
        plugins: [
-          tailwind() as any,
+          tailwind(),
          autoprefixer(),
        ],
      },
    },
    plugins: [
-      Icons({ compiler: 'vue3', autoInstall: true }) as any,
+      Icons({ compiler: 'vue3', autoInstall: true }),
    ],
    resolve: {
      alias: {
--- a/apps/www/.vitepress/theme/components/APITable.vue
+++ b/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>
--- a/apps/www/.vitepress/theme/components/Announcement.vue
+++ b/apps/www/.vitepress/theme/components/Announcement.vue
@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { Separator } from '@/lib/registry/default/ui/separator'
-import ArrowRightIcon from '~icons/radix-icons/arrow-right'
-import { announcementConfig } from '../config/site'
-</script>
-
-<template>
-  <a
-    :href="announcementConfig.link"
-    class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
-  >
-    {{ announcementConfig.icon }} <Separator class="mx-2 h-4" orientation="vertical" />
-    <span class="sm:hidden">{{ announcementConfig.title }}</span>
-    <span class="hidden sm:inline">
-      {{ announcementConfig.title }}
-    </span>
-    <ArrowRightIcon class="ml-1 h-4 w-4" />
-  </a>
-</template>
--- a/apps/www/.vitepress/theme/components/BlockContainer.vue
+++ b/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>
--- a/apps/www/.vitepress/theme/components/BlockCopyButton.vue
+++ b/apps/www/.vitepress/theme/components/BlockCopyButton.vue
@ -1,38 +0,0 @@
-<script setup lang="ts">
-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
-}>(), {
-  code: '',
-})
-const { code } = toRefs(props)
-
-const { copy, copied } = useClipboard({ source: code })
-</script>
-
-<template>
-  <Tooltip :delay-duration="100">
-    <TooltipTrigger as-child>
-      <Button
-        size="icon"
-        variant="outline"
-        class="h-7 w-7 [&_svg]:size-3.5"
-        @click="copy()"
-      >
-        <span class="sr-only">Copy</span>
-        <CheckIcon v-if="copied" />
-        <ClipboardIcon v-else />
-      </Button>
-    </TooltipTrigger>
-    <TooltipContent>Copy code</TooltipContent>
-  </Tooltip>
-</template>
--- a/apps/www/.vitepress/theme/components/BlockPage.vue
+++ b/apps/www/.vitepress/theme/components/BlockPage.vue
@ -1,12 +0,0 @@
-<script setup lang="ts">
-import { useUrlSearchParams } from '@vueuse/core'
-import ComponentLoader from './ComponentLoader.vue'
-
-const params = useUrlSearchParams('history')
-</script>
-
-<template>
-  <div v-if="params.name" :class="params.containerClass">
-    <ComponentLoader :key="params.style?.toString()" :name="params.name?.toString()" :type-name="'block'" />
-  </div>
-</template>
--- a/apps/www/.vitepress/theme/components/BlockPreview.vue
+++ b/apps/www/.vitepress/theme/components/BlockPreview.vue
@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import Spinner from './Spinner.vue'
-
-const props = defineProps<{
-  name: string
-  styles?: string
-  containerClass?: string
-  container?: boolean
-}>()
-
-const isLoading = ref(true)
-
-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
-})
-</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 />
-    </div>
-    <div
-      :class="[container ? 'w-full' : 'absolute inset-0 hidden w-[1600px] bg-background md:block']"
-    >
-      <iframe
-        v-show="!isLoading"
-        :src="iframeURL"
-        class="relative z-20 w-full bg-background" :class="[container ? 'h-[--container-height]' : 'size-full']"
-        @load="isLoading = false"
-      />
-    </div>
-  </div>
-</template>
--- a/apps/www/.vitepress/theme/components/Blocks.vue
+++ b/apps/www/.vitepress/theme/components/Blocks.vue
@ -1,53 +0,0 @@
-<script setup lang="ts">
-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[]>([])
-
-import('../../../__registry__/index').then((res) => {
-  blocks.value = Object.values(res.Index.default).filter(i => i.type === 'components:block').map(i => i.name)
-})
-</script>
-
-<template>
-  <PageHeader class="page-header pb-8">
-    <Announcement />
-    <PageHeaderHeading>Building Blocks for the Web</PageHeaderHeading>
-    <PageHeaderDescription>
-      Beautifully designed. Copy and paste into your apps. Open Source.
-    </PageHeaderDescription>
-
-    <PageAction>
-      <a
-        href="/blocks.html#blocks"
-        :class="cn(buttonVariants(), 'rounded-[6px]')"
-      >
-        Browse
-      </a>
-      <a
-        href="https://github.com/radix-vue/shadcn-vue"
-        target="_blank"
-        :class="cn(
-          buttonVariants({ variant: 'outline' }),
-          'rounded-[6px]',
-        )"
-      >
-        <GitHubIcon class="mr-2 h-4 w-4" />
-        GitHub
-      </a>
-    </PageAction>
-  </PageHeader>
-
-  <section id="blocks" class="grid scroll-mt-24 gap-24 lg:gap-48">
-    <BlockContainer v-for="block in blocks" :key="block" :name="block" />
-  </section>
-</template>
--- a/apps/www/.vitepress/theme/components/Callout.vue
+++ b/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>
--- a/apps/www/.vitepress/theme/components/CarbonAds.vue
+++ b/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>
--- a/apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue
+++ b/apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue
@ -1,98 +0,0 @@
-<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 * as z from 'zod'
-
-const { codeConfig, setCodeConfig } = useConfigStore()
-
-const formSchema = toTypedSchema(z.object({
-  prefix: z.string().default(''),
-  componentsPath: z.string().default('@/components'),
-  utilsPath: z.string().default('@/utils'),
-}))
-
-const { handleSubmit, setValues } = useForm({
-  validationSchema: formSchema,
-  initialValues: codeConfig.value,
-})
-
-const onSubmit = handleSubmit((values) => {
-  setCodeConfig(values)
-  setValues(values)
-})
-</script>
-
-<template>
-  <Sheet
-    @update:open="(open) => {
-      if (open) setValues(codeConfig)
-    }"
-  >
-    <SheetTrigger as-child>
-      <Button
-        class="w-9 h-9"
-        :variant="'ghost'"
-        :size="'icon'"
-      >
-        <RadixIconsGear class="w-5 h-5" />
-      </Button>
-    </SheetTrigger>
-    <SheetContent>
-      <form @submit="onSubmit">
-        <SheetHeader>
-          <SheetTitle>Edit code config</SheetTitle>
-          <SheetDescription>
-            Configure how the CodeBlock should render on the site.
-          </SheetDescription>
-        </SheetHeader>
-
-        <div class="my-4">
-          <!-- <FormField v-slot="{ componentField }" name="prefix">
-            <FormItem>
-              <FormLabel>Prefix</FormLabel>
-              <FormControl>
-                <Input placeholder="" v-bind="componentField" />
-              </FormControl>
-              <FormDescription />
-              <FormMessage />
-            </FormItem>
-          </FormField> -->
-          <FormField v-slot="{ componentField }" name="componentsPath">
-            <FormItem>
-              <FormLabel>Components Path</FormLabel>
-              <FormControl>
-                <Input placeholder="@/components" v-bind="componentField" />
-              </FormControl>
-              <FormDescription />
-              <FormMessage />
-            </FormItem>
-          </FormField>
-          <FormField v-slot="{ componentField }" name="utilsPath">
-            <FormItem>
-              <FormLabel>Utils Path</FormLabel>
-              <FormControl>
-                <Input placeholder="@/utils" v-bind="componentField" />
-              </FormControl>
-              <FormDescription />
-              <FormMessage />
-            </FormItem>
-          </FormField>
-        </div>
-
-        <SheetFooter>
-          <SheetClose as-child>
-            <Button type="submit">
-              Save changes
-            </Button>
-          </SheetClose>
-        </SheetFooter>
-      </form>
-    </SheetContent>
-  </Sheet>
-</template>
--- a/apps/www/.vitepress/theme/components/CodeSandbox.vue
+++ b/apps/www/.vitepress/theme/components/CodeSandbox.vue
@ -1,36 +0,0 @@
-<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 { makeCodeSandboxParams } from '../utils/codeeditor'
-import Tooltip from './Tooltip.vue'
-
-const props = defineProps<{
-  name: string
-  code: string
-  style: Style
-}>()
-
-const { code } = toRefs(props)
-const sources = ref<Record<string, string>>({})
-
-watch(code, () => {
-  sources.value['App.vue'] = code.value
-}, { immediate: true })
-</script>
-
-<template>
-  <form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank">
-    <input type="hidden" name="query" value="file=src/App.vue">
-    <input type="hidden" name="environment" value="server">
-    <input type="hidden" name="hidedevtools" value="1">
-    <input type="hidden" name="parameters" :value="makeCodeSandboxParams(name, style, sources)">
-
-    <Tooltip :content="`Open ${name} in CodeSandbox`">
-      <Button :variant="'ghost'" :size="'icon'" type="submit">
-        <Icon icon="ph-codesandbox-logo" />
-      </Button>
-    </Tooltip>
-  </form>
-</template>
--- a/apps/www/.vitepress/theme/components/CodeWrapper.ts
+++ b/apps/www/.vitepress/theme/components/CodeWrapper.ts
@ -1,46 +0,0 @@
-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) => {
-    if (!Array.isArray(childNode) && typeof childNode === 'object') {
-      if (typeof childNode?.children === 'string')
-        cb(childNode)
-      else
-        crawlSpan(childNode?.children as VNodeArrayChildren ?? [], cb)
-    }
-  })
-}
-
-export default defineComponent(
-  (props, { slots }) => {
-    const { codeConfig } = useConfigStore()
-
-    return () => {
-      const clonedVNode = slots.default?.()?.[0]
-        ? cloneVNode(slots.default?.()?.[0], {
-          key: JSON.stringify(codeConfig.value),
-        })
-        : undefined
-
-      // @ts-expect-error  cloneVNode
-      const preVNode = [...clonedVNode?.children].find((node: VNode) => node.type === 'pre') as VNode
-      // @ts-expect-error  cloneVNode
-      const codeVNode = preVNode.children?.at(0) as VNode
-
-      if (codeVNode) {
-        crawlSpan(codeVNode.children as VNodeArrayChildren, (vnode) => {
-          if (typeof vnode.children === 'string') {
-            vnode.children = vnode.children.replaceAll('@/components', codeConfig.value.componentsPath)
-            vnode.children = vnode.children.replaceAll('@/libs', codeConfig.value.utilsPath)
-          }
-        })
-
-        return clonedVNode
-      }
-      else {
-        return slots.default?.()
-      }
-    }
-  },
-)
--- a/apps/www/.vitepress/theme/components/ComponentLoader.vue
+++ b/apps/www/.vitepress/theme/components/ComponentLoader.vue
@ -1,17 +1,16 @@
 <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
-  typeName?: 'example' | 'block'
 }>()
 const { style } = useConfigStore()

 const Component = defineAsyncComponent({
  loadingComponent: Spinner,
-  loader: () => import(`../../../src/lib/registry/${style.value}/${props.typeName}/${props.name}.vue`),
+  loader: () => import(`../../../src/lib/registry/${style.value}/example/${props.name}.vue`),
  timeout: 5000,
 })
 </script>
--- a/apps/www/.vitepress/theme/components/ComponentPreview.vue
+++ b/apps/www/.vitepress/theme/components/ComponentPreview.vue
@ -1,49 +1,18 @@
 <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 MagicString from 'magic-string'
-import { computed, ref, watch } from 'vue'
-import { highlight } from '../config/shiki'
-import CodeSandbox from './CodeSandbox.vue'
-import ComponentLoader from './ComponentLoader.vue'
-import Stackblitz from './Stackblitz.vue'
 import StyleSwitcher from './StyleSwitcher.vue'
-
-defineOptions({
-  inheritAttrs: false,
-})
+import ComponentLoader from './ComponentLoader.vue'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
+import { useConfigStore } from '@/stores/config'
+import { cn } from '@/lib/utils'

 const props = withDefaults(defineProps<{
  name: string
  align?: 'center' | 'start' | 'end'
+  sfcTsCode?: string
+  sfcTsHtml?: string
 }>(), { align: 'center' })

-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)
-  s.replaceAll(`@/lib/registry/${style.value}`, codeConfig.value.componentsPath)
-  s.replaceAll(`@/lib/utils`, codeConfig.value.utilsPath)
-  return s.toString()
-}
-
-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')
-  }
-  catch (err) {
-    console.error(err)
-  }
-}, { immediate: true, deep: true })
-
-const { copy, copied } = useClipboard()
+const { style } = useConfigStore()
 </script>

 <template>
@ -70,28 +39,19 @@ const { copy, copied } = useClipboard()
      <TabsContent value="preview" class="relative rounded-md border">
        <div class="flex items-center justify-between p-4">
          <StyleSwitcher />
-
-          <div class="flex items-center gap-x-1">
-            <Stackblitz :key="style" :style="style" :name="name" :code="rawString" />
-            <CodeSandbox :key="style" :style="style" :name="name" :code="rawString" />
-          </div>
        </div>
        <div
-          :class="cn('preview flex min-h-[350px] w-full justify-center p-10 items-center', {
+          :class="cn('preview flex min-h-[350px] w-full justify-center p-6 lg:p-10', {
            'items-center': align === 'center',
            'items-start': align === 'start',
            'items-end': align === 'end',
          })"
        >
-          <ComponentLoader v-bind="$attrs" :key="style" :name="name" :type-name="'example'" />
+          <ComponentLoader :key="style" :name="name" />
        </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="sfcTsHtml" class="language-vue" style="flex: 1;" v-html="decodeURIComponent(sfcTsHtml)" />
        <slot v-else />
      </TabsContent>
    </Tabs>
--- a/apps/www/.vitepress/theme/components/CustomizerCode.vue
+++ b/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()

@ -15,7 +15,7 @@ const { copy, copied } = useClipboard()

 const codeRef = ref<HTMLElement>()
 async function copyCode() {
-  await copy(codeRef.value?.textContent?.replace(/\u00A0/g, ' ') ?? '')
+  await copy(codeRef.value?.innerText ?? '')
 }
 </script>

@ -23,32 +23,32 @@ async function copyCode() {
  <div class="relative">
    <pre class="max-h-[450px] overflow-x-auto rounded-lg border bg-zinc-950 !py-0 dark:bg-zinc-900">
 <code ref="codeRef" class="relative block rounded font-mono text-sm">
-<span class="line text-white">@layer base &#123;</span>
-  <span class="line text-white">:root &#123;</span>
-  <span class="line text-white">&nbsp;&nbsp;--background: {{ activeTheme?.cssVars.light.background }};</span>
-  <span class="line text-white">&nbsp;&nbsp;--foreground: {{ activeTheme?.cssVars.light.foreground }};</span>
+<span class="line">@layer base &#123;</span>
+  <span class="line">:root &#123;</span>
+  <span class="line">&nbsp;&nbsp;--background: {{ activeTheme?.cssVars.light.background }};</span>
+  <span class="line">&nbsp;&nbsp;--foreground: {{ activeTheme?.cssVars.light.foreground }};</span>
  <template v-for="prefix in (['card', 'popover', 'primary', 'secondary', 'muted', 'accent', 'destructive'] as const)" :key="prefix">
-    <span class="line text-white">--{{ prefix }}: {{ activeTheme?.cssVars.light[prefix] }};</span>
-    <span class="line text-white">--{{ prefix }}-foreground: {{ activeTheme?.cssVars.light[ `${prefix}-foreground`] }};</span>
+    <span class="line">--{{ prefix }}: {{ activeTheme?.cssVars.light[prefix] }};</span>
+    <span class="line">--{{ prefix }}-foreground: {{ activeTheme?.cssVars.light[ `${prefix}-foreground`] }};</span>
  </template>
-  <span class="line text-white">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars.light.border }};</span>
-  <span class="line text-white">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars.light.input }};</span>
-  <span class="line text-white">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars.light.ring }};</span>
-  <span class="line text-white">&nbsp;&nbsp;--radius: {{ config.radius }}rem;</span>
-  <span class="line text-white">&#125;</span>
-  <span class="line text-white">&nbsp;</span>
-  <span class="line text-white">.dark &#123;</span>
-  <span class="line text-white">&nbsp;&nbsp;--background:{{ activeTheme?.cssVars.dark.background }};</span>
-  <span class="line text-white">&nbsp;&nbsp;--foreground:{{ activeTheme?.cssVars.dark.foreground }};</span>
+  <span class="line">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars.light.border }};</span>
+  <span class="line">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars.light.input }};</span>
+  <span class="line">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars.light.ring }};</span>
+  <span class="line">&nbsp;&nbsp;--radius: {{ config.radius }}rem;</span>
+  <span class="line">&#125;</span>
+  <span class="line">&nbsp;</span>
+  <span class="line">.dark &#123;</span>
+  <span class="line">&nbsp;&nbsp;--background:{{ activeTheme?.cssVars.dark.background }};</span>
+  <span class="line">&nbsp;&nbsp;--foreground:{{ activeTheme?.cssVars.dark.foreground }};</span>
  <template v-for="prefix in (['card', 'popover', 'primary', 'secondary', 'muted', 'accent', 'destructive'] as const)" :key="prefix">
-    <span class="line text-white">--{{ prefix }}:{{ activeTheme?.cssVars.dark[ prefix] }};</span>
-    <span class="line text-white">--{{ prefix }}-foreground:{{ activeTheme?.cssVars.dark[ `${prefix}-foreground`] }};</span>
+    <span class="line">--{{ prefix }}:{{ activeTheme?.cssVars.dark[ prefix] }};</span>
+    <span class="line">--{{ prefix }}-foreground:{{ activeTheme?.cssVars.dark[ `${prefix}-foreground`] }};</span>
  </template>
-  <span class="line text-white">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars.dark.border }};</span>
-  <span class="line text-white">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars.dark.input }};</span>
-  <span class="line text-white">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars.dark.ring }};</span>
-  <span class="line text-white">&#125;</span>
-<span class="line text-white">&#125;</span>
+  <span class="line">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars.dark.border }};</span>
+  <span class="line">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars.dark.input }};</span>
+  <span class="line">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars.dark.ring }};</span>
+  <span class="line">&#125;</span>
+<span class="line">&#125;</span>
 </code>
 </pre>
    <Button size="sm" class="absolute right-4 top-4 bg-muted text-muted-foreground hover:bg-muted hover:text-muted-foreground" @click="copyCode">
--- a/apps/www/.vitepress/theme/components/DocsBreadcrumb.vue
+++ b/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>
--- a/apps/www/.vitepress/theme/components/EditLink.vue
+++ b/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()

--- a/apps/www/.vitepress/theme/components/ExamplesNav.vue
+++ b/apps/www/.vitepress/theme/components/ExamplesNav.vue
@ -1,18 +1,13 @@
 <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())

 const examples = [
-  {
-    name: 'Mail',
-    href: '/examples/mail',
-    code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/mail',
-  },
  {
    name: 'Dashboard',
    href: '/examples/dashboard',
@ -35,7 +30,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',
  },
  {
@ -63,7 +58,7 @@ const currentExample = computed(() => examples.find(ex => path.value.startsWith(
          :href="example.href"
          :class="cn(
            'flex items-center px-4',
-            path?.startsWith(example.href) || (path === '/' && example.name === 'Mail')
+            path?.startsWith(example.href) || (path === '/' && example.name === 'Dashboard')
              ? 'font-bold text-primary'
              : 'font-medium text-muted-foreground',
          )"
--- a/apps/www/.vitepress/theme/components/InlineThemePicker.vue
+++ b/apps/www/.vitepress/theme/components/InlineThemePicker.vue
@ -1,54 +0,0 @@
-<script lang="ts" setup>
-import type { Color } from '../types/colors'
-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<{
-  allColors: Color[]
-}>()
-
-const { theme, setTheme } = useConfigStore()
-</script>
-
-<template>
-  <div>
-    <TooltipProvider
-      v-for="(color, index) in allColors.slice(0, 5)"
-      :key="index"
-    >
-      <Tooltip>
-        <TooltipTrigger as-child>
-          <button
-            :key="index"
-            class="flex h-9 w-9 items-center justify-center rounded-full border-2 border-border text-xs"
-            :class="
-              color === theme
-                ? 'border-primary'
-                : 'border-transparent'
-            "
-            @click="setTheme(color)"
-          >
-            <span
-              class="flex h-6 w-6 items-center justify-center rounded-full"
-              :style="{ backgroundColor: colors[color][6].rgb }"
-            >
-              <RadixIconsCheck
-                v-if="color === theme"
-                class="h-4 w-4 text-white"
-              />
-            </span>
-          </button>
-        </TooltipTrigger>
-        <TooltipContent
-          align="center"
-          :side-offset="1"
-          class="capitalize bg-zinc-900 text-zinc-50"
-        >
-          {{ allColors[index] }}
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  </div>
-</template>
--- a/apps/www/.vitepress/theme/components/Kbd.vue
+++ b/apps/www/.vitepress/theme/components/Kbd.vue
@ -18,9 +18,9 @@ const kbdClass = computed(() => {
    {
      variants: {
        size: {
-          xs: 'min-h-4 text-[10px] h-4 px-1',
-          sm: 'min-h-5 text-[11px] h-5 px-1',
-          md: 'min-h-6 text-[12px] h-6 px-1.5',
+          xs: 'min-h-[16px] text-[10px] h-4 px-1',
+          sm: 'min-h-[20px] text-[11px] h-5 px-1',
+          md: 'min-h-[24px] text-[12px] h-6 px-1.5',
        },
      },
    },
--- a/apps/www/.vitepress/theme/components/LandingPage.vue
+++ b/apps/www/.vitepress/theme/components/LandingPage.vue
@ -1,28 +1,37 @@
 <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 ExamplesNav from '../components/ExamplesNav.vue'
+import ArrowRightIcon from '~icons/radix-icons/arrow-right'
+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 DashboardExample from '@/examples/dashboard/Example.vue'
 </script>

 <template>
  <PageHeader class="page-header pb-8">
-    <Announcement />
+    <a
+      href="/docs/changelog"
+      class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
+    >
+      🚧   <Separator class="mx-2 h-4" orientation="vertical" />
+      <span class="sm:hidden">WIP</span>
+      <span class="hidden sm:inline">WIP
+      </span>
+      <!-- <ArrowRightIcon class="ml-1 h-4 w-4" /> -->
+    </a>
    <PageHeaderHeading>Build your component library.</PageHeaderHeading>
    <PageHeaderDescription>
      Beautifully designed components that you can copy and paste into your
      apps. Accessible. Customizable. Open Source.
    </PageHeaderDescription>

-    <PageAction>
+    <section class="flex w-full items-center space-x-4 pb-8 pt-4 md:pb-10">
      <a
        href="/docs/introduction"
        :class="cn(buttonVariants(), 'rounded-[6px]')"
@ -40,22 +49,22 @@ import PageHeaderHeading from '../components/PageHeaderHeading.vue'
        <GitHubIcon class="mr-2 h-4 w-4" />
        GitHub
      </a>
-    </PageAction>
+    </section>
  </PageHeader>
  <ExamplesNav />
  <section class="space-y-8 overflow-hidden rounded-lg border-2 border-primary dark:border-muted md:hidden">
    <VPImage
-      alt="Mail"
+      alt="Dashboard"
      width="1280"
      height="866" class="block" :image="{
-        dark: '/examples/mail-dark.png',
-        light: '/examples/mail-light.png',
+        dark: '/examples/dashboard-dark.png',
+        light: '/examples/dashboard-light.png',
      }"
    />
  </section>
  <section class="hidden md:block">
    <div class="overflow-hidden rounded-[0.5rem] border bg-background shadow">
-      <MailExample />
+      <DashboardExample />
    </div>
  </section>
 </template>
--- a/apps/www/.vitepress/theme/components/LinkedCard.vue
+++ b/apps/www/.vitepress/theme/components/LinkedCard.vue
@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 </script>

 <template>
-  <a :class="cn('flex w-full flex-col items-center rounded-lg border bg-card p-6 text-card-foreground shadow transition-colors hover:bg-muted/50 sm:p-10', $attrs.class ?? '')">
+  <a :class="cn('flex w-full flex-col items-center rounded-xl border bg-card p-6 text-card-foreground shadow transition-colors hover:bg-muted/50 sm:p-10', $attrs.class ?? '')">
    <slot />
  </a>
 </template>
--- a/apps/www/.vitepress/theme/components/Logo.vue
+++ b/apps/www/.vitepress/theme/components/Logo.vue
@ -2,7 +2,7 @@
 </script>

 <template>
-  <a href="/" class="mr-4 md:mr-2 lg:mr-6 flex items-center lg:space-x1 xl:space-x-2">
+  <a href="/" class="mr-6 flex items-center space-x-2">
    <svg class="h-6 w-6" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_102_1338)">
        <path d="M208 128L128 208" stroke="#41B883" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />
@ -15,7 +15,7 @@
      </defs>
    </svg>

-    <span class="font-bold">
+    <span class="font-bold ">
      shadcn-vue
    </span>
  </a>
--- a/apps/www/.vitepress/theme/components/MobileNav.vue
+++ b/apps/www/.vitepress/theme/components/MobileNav.vue
@ -1,10 +1,11 @@
 <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'
+import ViewVerticalIcon from '~icons/radix-icons/view-vertical'

 const open = ref(false)
 </script>
@ -16,35 +17,7 @@ const open = ref(false)
        variant="ghost"
        class="mr-2 px-2 text-base flex-shrink-0 hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
      >
-        <svg
-          strokeWidth="1.5"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-5 w-5"
-        >
-          <path
-            d="M3 5H11"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M3 12H16"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-          <path
-            d="M3 19H21"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
+        <ViewVerticalIcon class="h-5 w-5" />
        <span class="sr-only">Toggle Menu</span>
      </Button>
    </SheetTrigger>
@ -63,26 +36,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>
--- a/apps/www/.vitepress/theme/components/PageAction.vue
+++ b/apps/www/.vitepress/theme/components/PageAction.vue
@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-</script>
-
-<template>
-  <section
-    :class="cn(
-      'flex w-full items-center justify-center space-x-4 py-4 md:pb-10',
-      $attrs.class ?? '',
-    )"
-  >
-    <slot />
-  </section>
-</template>
--- a/apps/www/.vitepress/theme/components/PageHeader.vue
+++ b/apps/www/.vitepress/theme/components/PageHeader.vue
@ -7,7 +7,7 @@ import { cn } from '@/lib/utils'
 <template>
  <section
    :class="cn(
-      'mx-auto flex max-w-[980px] flex-col items-center gap-2 py-8 md:py-12 md:pb-8 lg:py-24 lg:pb-20',
+      'flex max-w-[980px] flex-col items-start gap-2 px-4 pt-8 md:pt-12',
      $attrs.class ?? '',
    )"
  >
--- a/apps/www/.vitepress/theme/components/PageHeaderDescription.vue
+++ b/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-lg text-muted-foreground sm:text-xl', $attrs.class ?? '')" :prefer-native="false">
    <slot />
  </WrapBalancer>
 </template>
--- a/apps/www/.vitepress/theme/components/PageHeaderHeading.vue
+++ b/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-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]',
      $attrs.class ?? '',
    )"
  >
--- a/apps/www/.vitepress/theme/components/Stackblitz.vue
+++ b/apps/www/.vitepress/theme/components/Stackblitz.vue
@ -1,35 +0,0 @@
-<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 { makeStackblitzParams } from '../utils/codeeditor'
-import Tooltip from './Tooltip.vue'
-
-const props = defineProps<{
-  name: string
-  code: string
-  style: Style
-}>()
-
-const { code } = toRefs(props)
-const sources = ref<Record<string, string>>({})
-
-watch(code, () => {
-  sources.value['App.vue'] = code.value
-}, { immediate: true })
-
-function handleClick() {
-  makeStackblitzParams(props.name, props.style, sources.value)
-}
-</script>
-
-<template>
-  <div>
-    <Tooltip :content="`Open ${name} in Stackblitz`">
-      <Button :variant="'ghost'" :size="'icon'" @click="handleClick">
-        <Icon icon="simple-icons:stackblitz" />
-      </Button>
-    </Tooltip>
-  </div>
-</template>
--- a/apps/www/.vitepress/theme/components/StyleSwitcher.vue
+++ b/apps/www/.vitepress/theme/components/StyleSwitcher.vue
@ -1,5 +1,8 @@
 <script setup lang="ts">
-import type { SelectTriggerProps } from 'radix-vue'
+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()
--- a/apps/www/.vitepress/theme/components/TabMarkdown.vue
+++ b/apps/www/.vitepress/theme/components/TabMarkdown.vue
@ -1,15 +0,0 @@
-<script setup lang="ts">
-import { TabsContent } from '@/lib/registry/default/ui/tabs'
-
-withDefaults(defineProps<{
-  title?: string
-}>(), {
-  title: '',
-})
-</script>
-
-<template>
-  <TabsContent :value="title" class="relative space-y-10">
-    <slot />
-  </TabsContent>
-</template>
--- a/apps/www/.vitepress/theme/components/TabPreview.vue
+++ b/apps/www/.vitepress/theme/components/TabPreview.vue
@ -3,14 +3,10 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default

 const props = withDefaults(defineProps<{
  name: string
-  names?: string[]
  align?: 'center' | 'start' | 'end'
  sfcTsCode?: string
  sfcTsHtml?: string
-}>(), {
-  align: 'center',
-  names: () => ['CLI', 'Manual'],
-})
+}>(), { align: 'center' })
 </script>

 <template>
@ -19,17 +15,24 @@ const props = withDefaults(defineProps<{
      <div class="flex items-center justify-between pb-3">
        <TabsList class="w-full justify-start rounded-none border-b bg-transparent p-0">
          <TabsTrigger
-            v-for="(tab, index) in props.names"
-            :key="index"
-            :value="tab"
+            value="CLI"
            class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
          >
-            {{ tab }}
+            CLI
+          </TabsTrigger>
+          <TabsTrigger
+            value="Manual"
+            class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+          >
+            Manual
          </TabsTrigger>
        </TabsList>
      </div>
-      <TabsContent v-for="(tab, index) in props.names" :key="index" :value="tab" class="relative space-y-10">
-        <slot :name="tab" />
+      <TabsContent value="CLI" class="relative space-y-10">
+        <slot name="CLI" />
+      </TabsContent>
+      <TabsContent value="Manual">
+        <slot name="Manual" />
      </TabsContent>
    </Tabs>
  </div>
--- a/apps/www/.vitepress/theme/components/TableOfContent.vue
+++ b/apps/www/.vitepress/theme/components/TableOfContent.vue
@ -1,16 +1,10 @@
 <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'

 const headers = shallowRef<TableOfContents>()

@ -28,8 +22,8 @@ function getHeadingsWithHierarchy(divId: string) {
  headings.forEach((heading: HTMLHeadingElement) => {
    const level = Number.parseInt(heading.tagName.charAt(1))
    if (!heading.id) {
-      const newId = heading.textContent
-        ?.replaceAll(/[^a-z0-9 ]/gi, '')
+      const newId = heading.innerText
+        .replaceAll(/[^a-zA-Z0-9 ]/g, '')
        .replaceAll(' ', '-')
        .toLowerCase()
      heading.id = `${newId}`
@ -61,16 +55,11 @@ onContentUpdated(() => {
 </script>

 <template>
-  <div class="hidden xl:block">
-    <ScrollArea orientation="vertical" class="h-[calc(100vh-6.5rem)] z-30 md:block overflow-y-auto" type="hover">
-      <div class="space-y-2">
-        <p class="font-medium">
-          On This Page
-        </p>
-        <TableOfContentTree :tree="headers" :level="1" />
-        <CarbonAds v-if="showCarbonAds" />
-      </div>
-    </ScrollArea>
+  <div class="space-y-2 hidden xl:block">
+    <p class="font-medium">
+      On This Page
+    </p>
+    <TableOfContentTree :tree="headers" :level="1" />
  </div>

  <div class="block xl:hidden mb-6">
--- a/apps/www/.vitepress/theme/components/TableOfContentTree.vue
+++ b/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
--- a/apps/www/.vitepress/theme/components/TabsMarkdown.vue
+++ b/apps/www/.vitepress/theme/components/TabsMarkdown.vue
@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { Tabs, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
-import { computed, useSlots } from 'vue'
-
-const slots = useSlots()
-
-const tabs = computed(() => slots.default?.()?.map(i => i?.props?.title as string) ?? [])
-</script>
-
-<template>
-  <Tabs :default-value="tabs[0]" class="relative mr-auto w-full">
-    <div class="flex items-center justify-between">
-      <TabsList class="w-full justify-start rounded-none border-b bg-transparent p-0">
-        <TabsTrigger v-for="tab in tabs" :key="tab" :value="tab" class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none">
-          {{ tab }}
-        </TabsTrigger>
-      </TabsList>
-    </div>
-
-    <slot />
-  </Tabs>
-</template>
--- a/apps/www/.vitepress/theme/components/ThemeCustomizer.vue
+++ b/apps/www/.vitepress/theme/components/ThemeCustomizer.vue
@ -1,106 +0,0 @@
-<script lang="ts" setup>
-import type { Color } from '../types/colors'
-import { colors } from '@/lib/registry'
-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 RadixIconsCheck from '~icons/radix-icons/check'
-import RadixIconsMoon from '~icons/radix-icons/moon'
-import RadixIconsSun from '~icons/radix-icons/sun'
-import { useData } from 'vitepress'
-
-defineProps<{
-  allColors: Color[]
-}>()
-
-const { theme, radius, setRadius, setTheme } = useConfigStore()
-const { isDark } = useData()
-</script>
-
-<template>
-  <div class="p-4">
-    <div class="grid space-y-1">
-      <h1 class="text-md text-foreground font-semibold">
-        Customize
-      </h1>
-      <p class="text-xs text-muted-foreground">
-        Pick a style and color for your components.
-      </p>
-    </div>
-    <div class="space-y-1.5 pt-6">
-      <Label for="color" class="text-xs"> Color </Label>
-      <div class="grid grid-cols-3 gap-2 py-1.5">
-        <Button
-          v-for="(color, index) in allColors"
-          :key="index"
-          variant="outline"
-          class="h-8 justify-start px-3"
-          :class="
-            color === theme
-              ? 'border-foreground border-2'
-              : ''
-          "
-          @click="setTheme(color)"
-        >
-          <span
-            class="h-5 w-5 rounded-full flex items-center justify-center shrink-0"
-            :style="{ backgroundColor: colors[color][7].rgb }"
-          >
-            <RadixIconsCheck
-              v-if="color === theme"
-              class="h-3 w-3 text-white"
-            />
-          </span>
-          <span class="ml-2 text-xs capitalize">
-            {{ color }}
-          </span>
-        </Button>
-      </div>
-    </div>
-    <div class="space-y-1.5 pt-6">
-      <Label for="radius" class="text-xs"> Radius </Label>
-      <div class="grid grid-cols-5 gap-2 py-1.5">
-        <Button
-          v-for="(r, index) in RADII"
-          :key="index"
-          variant="outline"
-          class="h-8 justify-center px-3"
-          :class="
-            r === radius
-              ? 'border-foreground border-2'
-              : ''
-          "
-          @click="setRadius(r)"
-        >
-          <span class="text-xs">
-            {{ r }}
-          </span>
-        </Button>
-      </div>
-    </div>
-    <div class="space-y-1.5 pt-6">
-      <Label for="theme" class="text-xs"> Theme </Label>
-
-      <div class="flex space-x-2 py-1.5">
-        <Button
-          class="h-8"
-          variant="outline"
-          :class="{ 'border-2 border-foreground': !isDark }"
-          @click="isDark = false"
-        >
-          <RadixIconsSun class="w-4 h-4 mr-2" />
-          <span class="text-xs">Light</span>
-        </Button>
-        <Button
-          class="h-8"
-          variant="outline"
-          :class="{ 'border-2 border-foreground': isDark }"
-          @click="isDark = true"
-        >
-          <RadixIconsMoon class="w-4 h-4 mr-2" />
-          <span class="text-xs">Dark</span>
-        </Button>
-      </div>
-    </div>
-  </div>
-</template>
--- a/apps/www/.vitepress/theme/components/ThemePopover.vue
+++ b/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>
--- a/apps/www/.vitepress/theme/components/Tooltip.vue
+++ b/apps/www/.vitepress/theme/components/Tooltip.vue
@ -1,25 +0,0 @@
-<script setup lang="ts">
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/lib/registry/default/ui/tooltip'
-
-defineProps<{
-  content: string
-}>()
-</script>
-
-<template>
-  <TooltipProvider>
-    <Tooltip>
-      <TooltipTrigger as-child>
-        <slot />
-      </TooltipTrigger>
-      <TooltipContent>
-        {{ content }}
-      </TooltipContent>
-    </Tooltip>
-  </TooltipProvider>
-</template>
--- a/apps/www/.vitepress/theme/components/index.ts
+++ b/apps/www/.vitepress/theme/components/index.ts
@ -1,12 +1,7 @@
-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 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'
--- a/apps/www/.vitepress/theme/components/theming/Theming.vue
+++ b/apps/www/.vitepress/theme/components/theming/Theming.vue
@ -1,32 +1,43 @@
 <script setup lang="ts">
-import type { DateRange } from 'radix-vue'
+import { ref } from 'vue'
+import { ChevronDown, Minus, Plus, Send } from 'lucide-vue-next'
+import { addDays, startOfToday } from 'date-fns'
+import ThemingLayout from './../../layout/ThemingLayout.vue'
+
+import Container from '@/examples/cards/components/Container.vue'
 import CookieSettings from '@/examples/cards/components/CookieSettings.vue'
 import CreateAccount from '@/examples/cards/components/CreateAccount.vue'
-
+import DatePicker from '@/examples/cards/components/DatePicker.vue'
+import GitHubCard from '@/examples/cards/components/GitHubCard.vue'
+import Notifications from '@/examples/cards/components/Notifications.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 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 DataTable from '@/lib/registry/new-york/example/Cards/DataTable.vue'
+import CardStats from '@/lib/registry/default/example/CardStats.vue'

-import { type Ref, ref } from 'vue'
-import ThemingLayout from './../../layout/ThemingLayout.vue'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/new-york/ui/card'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Calendar } from '@/lib/registry/new-york/ui/calendar'

-const now = today(getLocalTimeZone())
+const goal = ref(350)

 const range = ref({
-  start: now,
-  end: now.add({ days: 8 }),
-}) as Ref<DateRange>
+  start: startOfToday(),
+  end: addDays(startOfToday(), 8),
+})
 </script>

 <template>
@ -54,7 +65,7 @@ const range = ref({
      <div class="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
        <div class="hidden gap-1 sm:grid-cols-[280px_1fr] md:grid">
          <Card class="max-w-[280px]">
-            <RangeCalendar v-model="range" />
+            <Calendar v-model.range="range" />
          </Card>

          <div class="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
--- a/apps/www/.vitepress/theme/components/theming/utils/data.ts
+++ b/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
--- a/apps/www/.vitepress/theme/config/docs.ts
+++ b/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 {
@ -23,7 +23,7 @@ interface DocsConfig {
 export const docsConfig: DocsConfig = {
  mainNav: [
    {
-      title: 'Docs',
+      title: 'Documentation',
      href: '/docs/introduction',
    },
    {
@ -36,11 +36,7 @@ export const docsConfig: DocsConfig = {
    },
    {
      title: 'Examples',
-      href: '/examples/mail',
-    },
-    {
-      title: 'Blocks',
-      href: '/blocks',
+      href: '/examples/dashboard',
    },
    {
      title: 'GitHub',
@ -55,47 +51,46 @@ 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',
-        },
-        {
-          title: 'Dark Mode',
-          href: '/docs/dark-mode',
          items: [],
        },
        {
          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',
-        },
-        {
-          title: 'Contribution',
-          href: '/docs/contribution',
          items: [],
        },
      ],
@ -106,32 +101,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',
-        },
+        // {
+        //   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,43 +123,40 @@ 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',
-        },
-        {
-          title: 'Breadcrumb',
-          href: '/docs/components/breadcrumb',
          items: [],
        },
        {
          title: 'Button',
          href: '/docs/components/button',
+          items: [],
        },
        {
          title: 'Calendar',
@ -185,35 +166,39 @@ export const docsConfig: DocsConfig = {
        {
          title: 'Card',
          href: '/docs/components/card',
-        },
-        {
-          title: 'Carousel',
-          href: '/docs/components/carousel',
          items: [],
        },
        {
          title: 'Checkbox',
          href: '/docs/components/checkbox',
+          items: [],
        },
        {
          title: 'Collapsible',
          href: '/docs/components/collapsible',
+          items: [],
        },
        {
          title: 'Combobox',
          href: '/docs/components/combobox',
+          label: 'New',
+          items: [],
        },
        {
          title: 'Command',
          href: '/docs/components/command',
+          label: 'New',
+          items: [],
        },
        {
          title: 'Context Menu',
          href: '/docs/components/context-menu',
+          items: [],
        },
        {
          title: 'Data Table',
          href: '/docs/components/data-table',
+          items: [],
        },
        {
          title: 'Date Picker',
@ -223,144 +208,126 @@ export const docsConfig: DocsConfig = {
        {
          title: 'Dialog',
          href: '/docs/components/dialog',
-        },
-        {
-          title: 'Drawer',
-          href: '/docs/components/drawer',
          items: [],
        },
        {
          title: 'Dropdown Menu',
          href: '/docs/components/dropdown-menu',
+          items: [],
        },
        {
          title: 'Form',
-          href: '/docs/components/form',
+          href: '#',
+          label: 'Soon',
+          disabled: true,
+          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',
-        },
-        {
-          title: 'Pagination',
-          href: '/docs/components/pagination',
-        },
-        {
-          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',
-        },
-        {
-          title: 'Range Calendar',
-          href: '/docs/components/range-calendar',
-          items: [],
-        },
-        {
-          title: 'Resizable',
-          href: '/docs/components/resizable',
          items: [],
        },
        {
          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',
-        },
-        {
-          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',
-        },
-        {
-          title: 'Tags Input',
-          href: '/docs/components/tags-input',
          items: [],
        },
        {
          title: 'Textarea',
          href: '/docs/components/textarea',
+          items: [],
        },
-        {
-          title: 'Toast',
-          href: '/docs/components/toast',
-        },
+        // {
+        //   title: "Toast",
+        //   href: "#",
+        //   label: "Soon",
+        //   disabled: true,
+        //   items: []
+        // },
        {
          title: 'Toggle',
          href: '/docs/components/toggle',
-        },
-        {
-          title: 'Toggle Group',
-          href: '/docs/components/toggle-group',
+          items: [],
        },
        {
          title: 'Tooltip',
          href: '/docs/components/tooltip',
+          items: [],
        },
      ],
    },
@ -374,11 +341,6 @@ interface Example {
  code: string
 }
 export const examples: Example[] = [
-  {
-    name: 'Mail',
-    href: '/examples/mail',
-    code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/mail',
-  },
  {
    name: 'Dashboard',
    href: '/examples/dashboard',
@ -390,10 +352,10 @@ export const examples: Example[] = [
    code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/cards',
  },
  // {
-  // name: "Tasks",
-  // href: "/examples/tasks",
-  // label: "New",
-  // code: "https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/tasks"
+  // 	name: "Tasks",
+  // 	href: "/examples/tasks",
+  // 	label: "New",
+  // 	code: "https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/tasks"
  // },
  {
    name: 'Playground',
--- a/apps/www/.vitepress/theme/config/shiki.ts
+++ b/apps/www/.vitepress/theme/config/shiki.ts
@ -1,41 +0,0 @@
-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'
-
-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 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',
-    },
-  })
-}
--- a/apps/www/.vitepress/theme/config/site.ts
+++ b/apps/www/.vitepress/theme/config/site.ts
@ -12,9 +12,3 @@ export const siteConfig = {
  },
  keywords: 'shadcn,Vue,Nuxt,Vue Components,TailwindCSS,Radix Vue',
 }
-
-export const announcementConfig = {
-  icon: '✨',
-  title: 'Extended: Auto Form, Charts',
-  link: '/docs/components/auto-form.html',
-}
--- a/apps/www/.vitepress/theme/index.ts
+++ b/apps/www/.vitepress/theme/index.ts
@ -1,8 +1,9 @@
-import * as components from './components'
-import DocsLayout from './layout/DocsLayout.vue'
-import ExamplesLayout from './layout/ExamplesLayout.vue'
+/* eslint-disable vue/component-definition-name-casing */
 // 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'
--- a/apps/www/.vitepress/theme/layout/DocsLayout.vue
+++ b/apps/www/.vitepress/theme/layout/DocsLayout.vue
@ -1,12 +1,12 @@
 <script setup lang="ts">
-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 TableOfContentVue from '../components/TableOfContent.vue'
+import EditLink from '../components/EditLink.vue'
+import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
+import { Badge } from '@/lib/registry/default/ui/badge'
+import RadixIconsCode from '~icons/radix-icons/code'
+import ChevronRightIcon from '~icons/lucide/chevron-right'

 const $route = useRoute()
 const { frontmatter } = useData()
@ -20,17 +20,13 @@ const sourceLink = 'https://github.com/radix-vue/shadcn-vue/tree/dev/'
      <aside
        class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto"
      >
-        <ScrollArea orientation="vertical" class="relative overflow-hidden h-full py-6 pr-6 lg:py-8" :type="'auto'">
+        <ScrollArea orientation="vertical" class="h-full py-6 pl-8 pr-6 lg:py-8" :type="'auto'">
          <div class="w-full">
            <div v-for="docsGroup in docsConfig.sidebarNav" :key="docsGroup.title" class="pb-4">
              <h4
                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
@ -49,9 +45,9 @@ const sourceLink = 'https://github.com/radix-vue/shadcn-vue/tree/dev/'
                >
                  {{ doc.title }}

-                  <span v-if="doc.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">
+                  <Badge v-if="doc.label" class="ml-2" :variant="'secondary'">
                    {{ doc.label }}
-                  </span>
+                  </Badge>
                </a>
              </div>
            </div>
@ -62,30 +58,29 @@ 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>
          </div>

          <div class="flex items-center space-x-2 pt-4">
-            <a v-if="frontmatter.docs" :href="frontmatter.docs" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
-              <RadixIconsExternalLink class="mr-1" />
-              Docs
-            </a>
            <a v-if="frontmatter.source" :href="sourceLink + frontmatter.source" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
              <RadixIconsCode class="mr-1" />
              Component Source
@ -104,7 +99,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>
--- a/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
+++ b/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
@ -1,19 +1,29 @@
 <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 ExamplesNav from '../components/ExamplesNav.vue'
+import ArrowRightIcon from '~icons/radix-icons/arrow-right'
+
+import { buttonVariants } from '@/lib/registry/new-york/ui/button'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { cn } from '@/lib/utils'
 </script>

 <template>
  <div class="container relative">
    <PageHeader class="page-header pb-8">
-      <Announcement />
+      <a
+        href="/docs/changelog"
+        class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
+      >
+        🎉 <Separator class="mx-2 h-4" orientation="vertical" />
+        <span class="sm:hidden">Style, a new CLI and more.</span>
+        <span class="hidden sm:inline">
+          Introducing Style, a new CLI and more.
+        </span>
+        <ArrowRightIcon class="ml-1 h-4 w-4" />
+      </a>
      <PageHeaderHeading class="hidden md:block">
        Check out some examples.
      </PageHeaderHeading>
@ -25,7 +35,7 @@ import PageHeaderHeading from '../components/PageHeaderHeading.vue'
        components. Use this as a guide to build your own.
      </PageHeaderDescription>

-      <PageAction>
+      <section class="flex w-full items-center space-x-4 pb-8 pt-4 md:pb-10">
        <a
          href="/docs/introduction"
          :class="cn(buttonVariants(), 'rounded-[6px]')"
@ -41,7 +51,7 @@ import PageHeaderHeading from '../components/PageHeaderHeading.vue'
        >
          Components
        </a>
-      </PageAction>
+      </section>
    </PageHeader>
    <section>
      <ExamplesNav />
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@ -1,29 +1,25 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/lib/registry/default/ui/command'
-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 { Content, useData, useRoute, useRouter } from 'vitepress'
+import { SearchIcon } from 'lucide-vue-next'
+import { type NavItem, docsConfig } from '../config/docs'
 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 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 TablerBrandX from '~icons/tabler/brand-x'
+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 File from '~icons/radix-icons/file'
+import Circle from '~icons/radix-icons/circle'

 const { radius, theme } = useConfigStore()
 // Whenever the component is mounted, update the document class list
@ -41,7 +37,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,
  },
  // {
@ -52,13 +48,7 @@ const links = [
 ]

 const isOpen = ref(false)
-const { Meta_K, Ctrl_K } = useMagicKeys({
-  passive: false,
-  onEventFired(e) {
-    if (e.key === 'k' && (e.metaKey || e.ctrlKey))
-      e.preventDefault()
-  },
-})
+const { Meta_K, Ctrl_K } = useMagicKeys()

 watch([Meta_K, Ctrl_K], (v) => {
  if (v[0] || v[1])
@ -86,225 +76,205 @@ watch(() => $route.path, (n) => {
 </script>

 <template>
-  <TooltipProvider>
-    <div v-if="$route.data.frontmatter.layout === false">
-      <Content :key="$route.path" />
-    </div>
-    <div v-else vaul-drawer-wrapper class="flex min-h-screen flex-col bg-background">
-      <header class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg border-b border-border">
-        <div
-          class="container flex h-14 max-w-screen-2xl items-center"
-        >
-          <div class="mr-4 md:mr-1 hidden md:flex">
-            <Logo />
+  <div class="flex min-h-screen flex-col bg-background">
+    <header class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg border-b border-border">
+      <div
+        class="container flex justify-between h-14 items-center"
+      >
+        <MobileNav />

-            <nav
-              class="flex items-center max-lg:space-x-4 space-x-6 text-sm font-medium"
+        <div class="mr-4 hidden md:flex">
+          <Logo />
+
+          <nav
+            class="flex items-center space-x-6 text-sm font-medium"
+          >
+            <a
+              v-for="route in docsConfig.mainNav"
+              :key="route.title"
+              :href="route.href"
+              :target="route.external ? '_target' : undefined"
+              class="transition-colors hover:text-foreground/80 text-foreground/60"
+              :class="{
+                'font-semibold !text-foreground': $route.path === `${route.href}.html`,
+              }"
            >
-              <a
-                v-for="route in docsConfig.mainNav"
-                :key="route.title"
-                :href="route.href"
-                :target="route.external ? '_target' : undefined"
-                class="transition-colors hover:text-foreground/80 text-foreground/60"
-                :class="{
-                  'font-semibold !text-foreground': $route.path === `${route.href}.html`,
-                  'hidden lg:block': route?.href?.includes('github'),
-                }"
-              >
-                {{ route.title }}
-              </a>
-            </nav>
-          </div>
-          <MobileNav />
+              {{ route.title }}
+            </a>
+          </nav>
+        </div>

-          <div class="flex flex-1 items-center justify-between space-x-2 md:justify-end">
-            <div class="w-full flex-1 md:w-auto md:flex-none">
-              <Button
-                variant="outline"
-                class="relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64"
-                @click="isOpen = true"
-              >
-                <span class="hidden lg:inline-flex">Search documentation...</span>
-                <span class="inline-flex lg:hidden">Search...</span>
-                <Kbd class="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
-                  <span class="text-xs">⌘</span>K
-                </Kbd>
-              </Button>
+        <div class=" flex items-center justify-end space-x-4 ">
+          <Button
+            variant="outline"
+            class="w-72 h-8 px-3 hidden lg:flex lg:justify-between lg:items-center"
+            @click="isOpen = true"
+          >
+            <div class="flex items-center">
+              <SearchIcon class="w-4 h-4 mr-2 text-muted-foreground" />
+              <span class="text-muted-foreground"> Search for anything... </span>
            </div>
+            <div class="flex items-center gap-x-1">
+              <Kbd> <span>⌘</span>K </Kbd>
+            </div>
+          </Button>

-            <nav class="flex items-center">
-              <ThemePopover />
-
-              <CodeConfigCustomizer />
-
-              <Button
-                v-for="link in links"
-                :key="link.name"
-                as="a"
-                class="w-9 h-9"
-                :href="link.href" target="_blank"
-                :variant="'ghost'"
-                :size="'icon'"
-              >
-                <component :is="link.icon" class="w-5 h-5" />
-              </Button>
-
-              <ClientOnly>
-                <Button
-                  class="w-9 h-9"
-                  aria-label="Toggle dark mode"
-                  :variant="'ghost'"
-                  :size="'icon'"
-                  @click="toggleDark()"
-                >
-                  <component
-                    :is="isDark ? RadixIconsSun : RadixIconsMoon"
-                    class="w-5 h-5 text-foreground"
-                  />
-                </Button>
-              </ClientOnly>
-            </nav>
+          <div
+            v-for="link in links"
+            :key="link.name"
+            class="flex items-center space-x-1"
+          >
+            <a :href="link.href" target="_blank" class="text-foreground">
+              <component :is="link.icon" class="w-5 h-5" />
+            </a>
          </div>
-        </div>
-      </header>

-      <div class="flex-1  bg-background">
-        <Transition name="fade" mode="out-in">
-          <component :is="'docs'" v-if="$route.path.includes('docs')">
-            <Transition name="fade" mode="out-in">
-              <Content :key="$route.path" />
-            </Transition>
-          </component>
-          <component :is="'examples'" v-else-if="$route.path.includes('examples')">
-            <Transition name="fade" mode="out-in">
-              <Content :key="$route.path" />
-            </Transition>
-          </component>
-          <component :is="frontmatter.layout" v-else-if="frontmatter.layout">
-            <slot />
-          </component>
-          <main v-else class="container">
-            <Transition name="fade" mode="out-in">
-              <Content :key="$route.path" />
-            </Transition>
-          </main>
-        </Transition>
+          <button
+            class="flex items-center justify-center"
+            aria-label="Toggle dark mode"
+            @click="toggleDark()"
+          >
+            <component
+              :is="isDark ? RadixIconsSun : RadixIconsMoon"
+              class="w-5 h-5 text-foreground"
+            />
+          </button>
+        </div>
      </div>
+    </header>

-      <footer class="py-6 md:px-8 md:py-0">
-        <div class="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
-          <div class="text-center text-sm leading-loose text-muted-foreground md:text-left">
-            <span class="inline-block">
-              Built and designed by
-              <a
-                href="https://twitter.com/shadcn"
-                target="_blank"
-                class="underline underline-offset-4 font-bold decoration-foreground"
-              >
-                shadcn
-              </a>
-            </span>
-            <span class="ml-0.5"> . </span>
-            <span class="inline-block ml-2">
-              Ported to Vue by
-              <a
-                href="https://github.com/unovue"
-                target="_blank"
-                class="underline underline-offset-4 font-bold decoration-foreground"
-              >
-                Radix Vue
-              </a>
-            </span>
-            <span class="ml-0.5"> . </span>
-            <span class="inline-block ml-2">
-              The code source is available on
-              <a
-                href="https://github.com/unovue/shadcn-vue"
-                target="_blank"
-                class="underline underline-offset-4 font-bold decoration-foreground"
-              >
-                GitHub
-              </a>
-            </span>
-          </div>
-        </div>
-      </footer>
-
-      <Dialog v-model:open="isOpen">
-        <DialogContent class="p-0">
-          <Command>
-            <CommandInput placeholder="Type a command or search..." />
-            <CommandEmpty>
-              No results found.
-            </CommandEmpty>
-            <CommandList
-              @escape-key-down=" isOpen = false"
-            >
-              <CommandGroup heading="Links">
-                <CommandItem
-                  v-for="item in docsConfig.mainNav"
-                  :key="item.title"
-                  :heading="item.title"
-                  :value="item.title"
-                  class="py-3"
-                  @select="handleSelectLink(item)"
-                >
-                  <File class="mr-2 h-5 w-5" />
-                  <span>{{ item.title }}</span>
-                </CommandItem>
-              </CommandGroup>
-              <CommandSeparator />
-              <CommandGroup v-for="item in docsConfig.sidebarNav" :key="item.title" :heading="item.title">
-                <CommandItem
-                  v-for="subItem in item.items"
-                  :key="subItem.title"
-                  :heading="subItem.title"
-                  :value="subItem.title"
-                  class="py-3"
-                  @select="
-                    handleSelectLink(subItem)"
-                >
-                  <Circle class="mr-2 h-4 w-4" />
-                  <span>{{ subItem.title }}</span>
-                </CommandItem>
-              </CommandGroup>
-              <CommandSeparator />
-              <CommandGroup heading="Theme">
-                <CommandItem
-                  value="light-theme"
-                  class="py-3"
-                  @select="
-                    () => {
-                      isDark = false;
-                      isOpen = false;
-                    }
-                  "
-                >
-                  <RadixIconsSun class="mr-2 h-5 w-5" />
-                  <span>Light Theme</span>
-                </CommandItem>
-                <CommandItem
-                  value="dark-theme"
-                  class="py-3"
-                  @select="
-                    () => {
-                      isDark = true;
-                      isOpen = false;
-                    }
-                  "
-                >
-                  <RadixIconsMoon class="mr-2 h-5 w-5" />
-                  <span>Dark Theme</span>
-                </CommandItem>
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </DialogContent>
-      </Dialog>
-      <DefaultToaster />
-      <NewYorkSonner class="pointer-events-auto" :theme="'system'" />
-      <NewYorkToaster />
+    <div class="flex-1  bg-background">
+      <Transition name="fade" mode="out-in">
+        <component :is="'docs'" v-if="$route.path.includes('docs')">
+          <Transition name="fade" mode="out-in">
+            <Content :key="$route.path" />
+          </Transition>
+        </component>
+        <component :is="'examples'" v-else-if="$route.path.includes('examples')">
+          <Transition name="fade" mode="out-in">
+            <Content :key="$route.path" />
+          </Transition>
+        </component>
+        <component :is="frontmatter.layout" v-else-if="frontmatter.layout">
+          <slot />
+        </component>
+        <main v-else class="container">
+          <Transition name="fade" mode="out-in">
+            <Content :key="$route.path" />
+          </Transition>
+        </main>
+      </Transition>
    </div>
-  </TooltipProvider>
+
+    <footer class="py-6 md:px-8 md:py-0">
+      <div class="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
+        <div class="text-center text-sm leading-loose text-muted-foreground md:text-left">
+          <span class="inline-block">
+            Built and designed by
+            <a
+              href="https://twitter.com/shadcn"
+              target="_blank"
+              class="underline underline-offset-4 font-bold decoration-foreground"
+            >
+              shadcn
+            </a>
+          </span>
+          <span class="ml-0.5"> . </span>
+          <span class="inline-block ml-2">
+            Ported to Vue by
+            <a
+              href="https://github.com/radix-vue"
+              target="_blank"
+              class="underline underline-offset-4 font-bold decoration-foreground"
+            >
+              Radix Vue
+            </a>
+          </span>
+          <span class="ml-0.5"> . </span>
+          <span class="inline-block ml-2">
+            The code source is available on
+            <a
+              href="https://github.com/radix-vue/shadcn-vue"
+              target="_blank"
+              class="underline underline-offset-4 font-bold decoration-foreground"
+            >
+              GitHub
+            </a>
+          </span>
+        </div>
+      </div>
+    </footer>
+
+    <Dialog v-model:open="isOpen">
+      <DialogContent class="p-0">
+        <Command>
+          <CommandInput placeholder="Type a command or search..." />
+          <CommandEmpty>
+            No results found.
+          </CommandEmpty>
+          <CommandList
+            @escape-key-down=" isOpen = false"
+          >
+            <CommandGroup heading="Links">
+              <CommandItem
+                v-for="item in docsConfig.mainNav"
+                :key="item.title"
+                :heading="item.title"
+                :value="item.title"
+                class="py-3"
+                @select="handleSelectLink(item)"
+              >
+                <File class="mr-2 h-5 w-5" />
+                <span>{{ item.title }}</span>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup v-for="item in docsConfig.sidebarNav" :key="item.title" :heading="item.title">
+              <CommandItem
+                v-for="subItem in item.items"
+                :key="subItem.title"
+                :heading="subItem.title"
+                :value="subItem.title"
+                class="py-3"
+                @select="
+                  handleSelectLink(subItem)"
+              >
+                <Circle class="mr-2 h-4 w-4" />
+                <span>{{ subItem.title }}</span>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Theme">
+              <CommandItem
+                value="light-theme"
+                class="py-3"
+                @select="
+                  () => {
+                    isDark = false;
+                    isOpen = false;
+                  }
+                "
+              >
+                <RadixIconsSun class="mr-2 h-5 w-5" />
+                <span>Light Theme</span>
+              </CommandItem>
+              <CommandItem
+                value="dark-theme"
+                class="py-3"
+                @select="
+                  () => {
+                    isDark = true;
+                    isOpen = false;
+                  }
+                "
+              >
+                <RadixIconsMoon class="mr-2 h-5 w-5" />
+                <span>Dark Theme</span>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </DialogContent>
+    </Dialog>
+  </div>
 </template>
--- a/apps/www/.vitepress/theme/layout/ThemingLayout.vue
+++ b/apps/www/.vitepress/theme/layout/ThemingLayout.vue
@ -1,19 +1,35 @@
 <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 CustomizerCode from '../components/CustomizerCode.vue'
-import InlineThemePicker from '../components/InlineThemePicker.vue'
-import PageAction from '../components/PageAction.vue'
+import { Paintbrush } from 'lucide-vue-next'
+import { useData } from 'vitepress'
 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 PageHeaderDescription from '../components/PageHeaderDescription.vue'
+import CustomizerCode from '../components/CustomizerCode.vue'
+import { RADII, useConfigStore } from '@/stores/config'
+import { colors } from '@/lib/registry'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Label } from '@/lib/registry/new-york/ui/label'
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/lib/registry/new-york/ui/tooltip'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/lib/registry/new-york/ui/dialog'
+import RadixIconsCheck from '~icons/radix-icons/check'
+import RadixIconsSun from '~icons/radix-icons/sun'
+import RadixIconsMoon from '~icons/radix-icons/moon'
+
+type Color =
+  | 'zinc'
+  | 'slate'
+  | 'stone'
+  | 'gray'
+  | 'neutral'
+  | 'red'
+  | 'rose'
+  | 'orange'
+  | 'green'
+  | 'blue'
+  | 'yellow'
+  | 'violet'

 // Create an array of color values
 const allColors: Color[] = [
@ -31,7 +47,8 @@ const allColors: Color[] = [
  'violet',
 ]

-const { theme, radius } = useConfigStore()
+const { theme, radius, setRadius, setTheme } = useConfigStore()
+const { isDark } = useData()

 // Whenever the component is mounted, update the document class list
 onMounted(() => {
@ -55,63 +72,173 @@ watch(radius, (radius) => {

 <template>
  <div class="container relative">
-    <PageHeader>
-      <PageHeaderHeading class="hidden md:block">
-        Add colors. Make it yours.
-      </PageHeaderHeading>
-      <PageHeaderHeading class="md:hidden">
-        Make it yours
-      </PageHeaderHeading>
-      <PageHeaderDescription>
-        Hand-picked themes that you can copy and paste into your apps.
-      </PageHeaderDescription>
-
-      <PageAction>
-        <InlineThemePicker class="gap-x-1 me-4 hidden lg:flex" :all-colors="allColors" />
-
-        <Drawer>
-          <DrawerTrigger as-child>
-            <Button variant="outline" class="md:hidden h-9 rounded-[0.5rem]">
-              <Paintbrush class="w-4 h-4 mr-2" />
-              Customize
-            </Button>
-          </DrawerTrigger>
-          <DrawerContent class="p-6 pt-0">
-            <ThemeCustomizer :all-colors="allColors" />
-          </DrawerContent>
-        </Drawer>
-
-        <Popover>
-          <PopoverTrigger as-child>
-            <Button variant="outline" class="hidden md:flex h-9 rounded-[0.5rem]">
-              <Paintbrush class="w-4 h-4 mr-2" />
-              Customize
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent :side-offset="8" align="end" class="w-96">
-            <ThemeCustomizer :all-colors="allColors" />
-          </PopoverContent>
-        </Popover>
-
-        <Dialog>
-          <DialogTrigger as-child>
-            <Button class="h-9 ml-2 rounded-[0.5rem]">
-              Copy code
-            </Button>
-          </DialogTrigger>
-          <DialogContent class="sm:max-w-[625px]">
-            <DialogHeader>
-              <DialogTitle>Theme</DialogTitle>
-              <DialogDescription>
-                Copy and paste the following code into your CSS file.
-              </DialogDescription>
-            </DialogHeader>
-            <CustomizerCode />
-          </DialogContent>
-        </Dialog>
-      </PageAction>
-    </PageHeader>
+    <div class="flex justify-between items-center">
+      <div>
+        <PageHeader class="page-header pb-8">
+          <PageHeaderHeading class="hidden md:block">
+            Make it yours.
+          </PageHeaderHeading>
+          <PageHeaderDescription>
+            Hand-picked themes that you can copy and paste into your apps.
+          </PageHeaderDescription>
+        </PageHeader>
+      </div>
+      <div class="px-4 pb-8 md:ml-auto md:pb-0">
+        <div class="flex items-center space-x-2">
+          <div class="hidden md:flex">
+            <div class="mr-4 hidden items-center space-x-1 lg:flex">
+              <TooltipProvider
+                v-for="(color, index) in allColors.slice(0, 5)"
+                :key="index"
+              >
+                <Tooltip>
+                  <TooltipTrigger as-child>
+                    <button
+                      :key="index"
+                      class="flex h-9 w-9 items-center justify-center rounded-full border-2 border-border text-xs"
+                      :class="
+                        color === theme
+                          ? 'border-foreground'
+                          : 'border-transparent'
+                      "
+                      @click="setTheme(color)"
+                    >
+                      <span
+                        class="flex h-6 w-6 items-center justify-center rounded-full"
+                        :style="{ backgroundColor: colors[color][7].rgb }"
+                      >
+                        <RadixIconsCheck
+                          v-if="color === theme"
+                          class="h-4 w-4 text-white"
+                        />
+                      </span>
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent
+                    align="center"
+                    :side-offset="1"
+                    class="capitalize"
+                  >
+                    {{ allColors[index] }}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+            <Popover>
+              <PopoverTrigger as-child>
+                <Button variant="outline" class="h-9 rounded-[0.5rem]">
+                  <Paintbrush class="w-4 h-4 mr-2" />
+                  Customize
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent :side-offset="8" align="end" class="w-96">
+                <div class="p-4">
+                  <div class="grid space-y-1">
+                    <h1 class="text-md text-foreground font-semibold">
+                      Customize
+                    </h1>
+                    <p class="text-xs text-muted-foreground">
+                      Pick a style and color for your components.
+                    </p>
+                  </div>
+                  <div class="space-y-1.5 pt-6">
+                    <Label for="color" class="text-xs"> Color </Label>
+                    <div class="grid grid-cols-3 gap-2 py-1.5">
+                      <Button
+                        v-for="(color, index) in allColors"
+                        :key="index"
+                        variant="outline"
+                        class="h-8 justify-start px-3"
+                        :class="
+                          color === theme
+                            ? 'border-foreground border-2'
+                            : ''
+                        "
+                        @click="setTheme(color)"
+                      >
+                        <span
+                          class="h-5 w-5 rounded-full flex items-center justify-center"
+                          :style="{ backgroundColor: colors[color][7].rgb }"
+                        >
+                          <RadixIconsCheck
+                            v-if="color === theme"
+                            class="h-3 w-3 text-white"
+                          />
+                        </span>
+                        <span class="ml-2 text-xs capitalize">
+                          {{ color }}
+                        </span>
+                      </Button>
+                    </div>
+                  </div>
+                  <div class="space-y-1.5 pt-6">
+                    <Label for="radius" class="text-xs"> Radius </Label>
+                    <div class="grid grid-cols-5 gap-2 py-1.5">
+                      <Button
+                        v-for="(r, index) in RADII"
+                        :key="index"
+                        variant="outline"
+                        class="h-8 justify-center px-3"
+                        :class="
+                          r === radius
+                            ? 'border-foreground border-2'
+                            : ''
+                        "
+                        @click="setRadius(r)"
+                      >
+                        <span class="text-xs">
+                          {{ r }}
+                        </span>
+                      </Button>
+                    </div>
+                  </div>
+                  <div class="space-y-1.5 pt-6">
+                    <Label for="theme" class="text-xs"> Theme </Label>

+                    <div class="flex space-x-2 py-1.5">
+                      <Button
+                        class="h-8"
+                        variant="outline"
+                        :class="{ 'border-2 border-foreground': !isDark }"
+                        @click="isDark = false"
+                      >
+                        <RadixIconsSun class="w-4 h-4 mr-2" />
+                        <span class="text-xs">Light</span>
+                      </Button>
+                      <Button
+                        class="h-8"
+                        variant="outline"
+                        :class="{ 'border-2 border-foreground': isDark }"
+                        @click="isDark = true"
+                      >
+                        <RadixIconsMoon class="w-4 h-4 mr-2" />
+                        <span class="text-xs">Dark</span>
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+            <Dialog>
+              <DialogTrigger as-child>
+                <Button class="h-9 ml-2 rounded-[0.5rem]">
+                  Copy code
+                </Button>
+              </DialogTrigger>
+              <DialogContent class="sm:max-w-[625px]">
+                <DialogHeader>
+                  <DialogTitle>Theme</DialogTitle>
+                  <DialogDescription>
+                    Copy and paste the following code into your CSS file.
+                  </DialogDescription>
+                </DialogHeader>
+                <CustomizerCode />
+              </DialogContent>
+            </Dialog>
+          </div>
+        </div>
+      </div>
+    </div>
    <section>
      <slot />
    </section>
--- a/apps/www/.vitepress/theme/plugins/codewrapper.ts
+++ b/apps/www/.vitepress/theme/plugins/codewrapper.ts
@ -1,20 +0,0 @@
-import type { MarkdownRenderer } from 'vitepress'
-
-export default function (md: MarkdownRenderer) {
-  const defaultFenceRenderer = md.renderer.rules.fence
-  if (!defaultFenceRenderer)
-    return
-
-  md.renderer.rules.fence = function (tokens, idx, options, env, self) {
-    // Check if this is a code block
-    const token = tokens[idx]
-    const isAllowedExtension = (token.info.includes('vue') || token.info.includes('astro') || token.info.includes('ts'))
-    if (token && token.tag === 'code' && isAllowedExtension) {
-      // Wrap the code block in CodeWrapper
-      return `<CodeWrapper>${defaultFenceRenderer(tokens, idx, options, env, self)}</CodeWrapper>`
-    }
-
-    // If not a code block, return the default rendering
-    return defaultFenceRenderer(tokens, idx, options, env, self)
-  }
-}
--- a/apps/www/.vitepress/theme/plugins/previewer.ts
+++ b/apps/www/.vitepress/theme/plugins/previewer.ts
@ -1,5 +1,7 @@
-import type { MarkdownRenderer } from 'vitepress'
-import { parseProps } from './utils'
+import { dirname, resolve } from 'node:path'
+import fs from 'node:fs'
+import type { MarkdownEnv, MarkdownRenderer } from 'vitepress'
+import { generateDemoComponent, parseProps } from './utils'

 export default function (md: MarkdownRenderer) {
  function addRenderRule(type: string) {
@ -10,9 +12,25 @@ export default function (md: MarkdownRenderer) {
      if (!content.match(/^<ComponentPreview\s/) || !content.endsWith('/>'))
        return defaultRender!(tokens, idx, options, env, self)

+      const { path } = env as MarkdownEnv
      const props = parseProps(content)
-      const { attrs } = props
-      const demoScripts = `<ComponentPreview ${attrs ?? ''} v-bind='${JSON.stringify(props)}'></ComponentPreview>`.trim()
+
+      const { name, attrs } = props
+      const pluginPath = dirname(__dirname)
+      const srcPath = resolve(pluginPath, '../../src/lib/registry/default/example/', `${name}.vue`).replace(/\\/g, '/')
+
+      if (!fs.existsSync(srcPath)) {
+        console.error(`rendering ${path}: ${srcPath} does not exist`)
+        return defaultRender!(tokens, idx, options, env, self)
+      }
+
+      const demoScripts = generateDemoComponent(md, env, {
+        attrs,
+        props,
+        code: fs.readFileSync(srcPath, 'utf-8'),
+        path: srcPath,
+      })
+
      return demoScripts
    }
  }
--- a/apps/www/.vitepress/theme/plugins/utils.ts
+++ b/apps/www/.vitepress/theme/plugins/utils.ts
@ -1,7 +1,8 @@
 // Credit to @hairyf https://github.com/hairyf/markdown-it-vitepress-demo

-import type { AttributeNode, ElementNode } from '@vue/compiler-core'
+import type { MarkdownEnv, MarkdownRenderer } from 'vitepress'
 import { baseParse } from '@vue/compiler-core'
+import type { AttributeNode, ElementNode } from '@vue/compiler-core'

 export interface GenerateOptions {
  attrs?: string
@ -10,6 +11,36 @@ export interface GenerateOptions {
  code: string
 }

+export function parse(
+  md: MarkdownRenderer,
+  env: MarkdownEnv,
+  { code, attrs: _attrs, props }: GenerateOptions,
+) {
+  const highlightedHtml = md.options.highlight!(code, 'vue', _attrs || '')
+  const sfcTsHtml = highlightedHtml
+
+  const attrs
+   = `sfcTsCode="${encodeURIComponent(code)}"\n`
+   + `sfcTsHtml="${encodeURIComponent(sfcTsHtml)}"\n`
+   + `v-bind='${JSON.stringify(props)}'\n`
+
+  return {
+    attrs,
+    highlightedHtml,
+    sfcTsCode: code,
+    sfcTsHtml,
+  }
+}
+
+export function generateDemoComponent(
+  md: MarkdownRenderer,
+  env: MarkdownEnv,
+  options: GenerateOptions,
+) {
+  const { attrs } = parse(md, env, options)
+  return `<ComponentPreview \n${attrs}></ComponentPreview>`.trim()
+}
+
 export function isUndefined(v: any): v is undefined {
  return v === undefined || v === null
 }
--- a/apps/www/.vitepress/theme/style.css
+++ b/apps/www/.vitepress/theme/style.css
@ -1,12 +1,10 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
 	: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%;
@ -21,75 +19,39 @@
 		--muted-foreground: 240 3.8% 46.1%;
 		--accent: 240 4.8% 95.9%;
 		--accent-foreground: 240 5.9% 10%;
-		--destructive: 0 72.22% 50.59%;
+		--destructive: 0 84.2% 60.2%;
 		--destructive-foreground: 0 0% 98%;
 		--border: 240 5.9% 90%;
 		--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 {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
-    --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%;
-  }
+	.dark {
+		--background: 240 10% 3.9%;
+		--foreground: 0 0% 98%;
+		--card: 240 10% 3.9%;
+		--card-foreground: 0 0% 98%;
+		--popover: 240 10% 3.9%;
+		--popover-foreground: 0 0% 98%;
+		--primary: 0 0% 98%;
+		--primary-foreground: 240 5.9% 10%;
+		--secondary: 240 3.7% 15.9%;
+		--secondary-foreground: 0 0% 98%;
+		--muted: 240 3.7% 15.9%;
+		--muted-foreground: 240 5% 64.9%;
+		--accent: 240 3.7% 15.9%;
+		--accent-foreground: 0 0% 98%;
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 0 85.7% 97.3%;
+		--border: 240 3.7% 15.9%;
+		--input: 240 3.7% 15.9%;
+		--ring: 240 4.9% 83.9%;
+	}


 	* {
 		@apply border-border;
-    scrollbar-width: thin;
-    scrollbar-color: hsl(var(--border)) transparent;
 	}
 	html {
 		-webkit-text-size-adjust: 100%;
@ -97,9 +59,7 @@
 	}
 	body {
 		@apply bg-background text-foreground min-h-screen antialiased font-sans;
-		/* font-feature-settings: "rlig" 1, "calt" 1; */
-		font-synthesis-weight: none;
-    text-rendering: optimizeLegibility;
+		font-feature-settings: "rlig" 1, "calt" 1;
 	}

 	/* Mobile tap highlight */
@ -108,16 +68,19 @@
 		-webkit-tap-highlight-color: rgba(128, 128, 128, 0.5);
 	}

-	/* Font face Geist font */
+	/* === Scrollbars === */

-	@font-face {
-		font-family: "geist-sans";
-		font-style: normal;
-		font-weight: 100 900;
-		font-display: swap;
-		src: url("/fonts/Geist/GeistVariableVF.woff2") format("woff2");
+	::-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 +92,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;
@ -153,9 +116,9 @@

 	.step:before {
 		@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;
+		@apply ml-[-50px] mt-[-4px];
 		content: counter(step);
-	}
+	}	
 }

@media (max-width: 640px) {
@ -165,33 +128,25 @@
 }

 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-[1.5rem] !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),
 ::view-transition-new(root) {
  animation-duration: 0.3s;
-}
+}
--- a/apps/www/.vitepress/theme/styles/shiki.css
+++ b/apps/www/.vitepress/theme/styles/shiki.css
@ -1,5 +1,5 @@
 :root {
-  --shiki-foreground: #FFF8;
+  --shiki-color-text: #EEEEEE;
  --shiki-color-background: #ffffff;
  --shiki-token-constant: #ffffff;
  --shiki-token-string: #ffffff88;
@ -7,14 +7,7 @@
  --shiki-token-keyword: #ffffff88;
  --shiki-token-parameter: #AA0000;
  --shiki-token-function: #ffffff;
-  --shiki-token-string-expression: #ebebeb;
+  --shiki-token-string-expression: #ffffff88;
  --shiki-token-punctuation: #ffffff;
  --shiki-token-link: #EE0000;
-}
-
-.shiki .highlighted-word {
-	border-radius: calc(var(--radius) - 2px);
-    border-color: rgba(63,63,70,.7);
-    background-color: rgba(63,63,70,.5);
-    padding: 0.25rem;
 }
--- a/apps/www/.vitepress/theme/styles/themes.css
+++ b/apps/www/.vitepress/theme/styles/themes.css
@ -1,11 +1,3 @@
-html {
-  color-scheme: light;
-}
-
-html.dark {
-  color-scheme: dark;
-}
-
 .theme-zinc {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
--- a/apps/www/.vitepress/theme/styles/vp-doc.css
+++ b/apps/www/.vitepress/theme/styles/vp-doc.css
@ -3,7 +3,6 @@
  --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
  --vp-code-bg: hsl(var(--muted));
  --vp-c-divider: hsl(var(--muted));
-  --vp-code-block-color: #fff
 } 


@ -345,13 +344,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);
@ -415,7 +414,7 @@

 .vp-doc div[class*='language-'].line-numbers-mode {
  /*rtl:ignore*/
-  padding-left: 0px;
+  padding-left: 32px;
 }

 .vp-doc .line-numbers-wrapper {
@ -567,12 +566,4 @@

 .vp-external-link-icon::after {
  content: '';
-}
-
-.vp-doc [class*=language-] code {
-  color: var(--vp-code-block-color);
-}
-
-.line-numbers-mode pre code .line {
-  padding-left: 3rem !important;
 }
--- a/apps/www/.vitepress/theme/types/colors.ts
+++ b/apps/www/.vitepress/theme/types/colors.ts
@ -1,13 +0,0 @@
-export type Color =
-  | 'zinc'
-  | 'slate'
-  | 'stone'
-  | 'gray'
-  | 'neutral'
-  | 'red'
-  | 'rose'
-  | 'orange'
-  | 'green'
-  | 'blue'
-  | 'yellow'
-  | 'violet'
--- a/apps/www/.vitepress/theme/utils/codeeditor.ts
+++ b/apps/www/.vitepress/theme/utils/codeeditor.ts
@ -1,219 +0,0 @@
-import type { Style } from '@/lib/registry/styles'
-import sdk from '@stackblitz/sdk'
-import { getParameters } from 'codesandbox/lib/api/define'
-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'
-
-export function makeCodeSandboxParams(componentName: string, style: Style, sources: Record<string, string>) {
-  let files: Record<string, any> = {}
-  files = constructFiles(componentName, style, sources)
-  files['.codesandbox/Dockerfile'] = {
-    content: 'FROM node:18',
-  }
-  return getParameters({ files, template: 'node' })
-}
-
-export function makeStackblitzParams(componentName: string, style: Style, sources: Record<string, string>) {
-  const files: Record<string, string> = {}
-  Object.entries(constructFiles(componentName, style, sources)).forEach(([k, v]) => (files[`${k}`] = typeof v.content === 'object' ? JSON.stringify(v.content, null, 2) : v.content))
-
-  return sdk.openProject({
-    title: `${componentName} - Radix Vue`,
-    files,
-    template: 'node',
-  }, {
-    newWindow: true,
-    openFile: ['src/App.vue'],
-  })
-}
-
-const viteConfig = {
-  'vite.config.js': {
-    content: `import path from "path"
-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: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
-})`,
-    isBinary: false,
-  },
-  'index.html': {
-    content: `<!DOCTYPE html>
-    <html class="dark" lang="en">
-      <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Vite + Vue + TS</title>
-      </head>
-      <body>
-        <div vaul-drawer-wrapper id="app"></div>
-        <script type="module" src="/src/main.ts"></script>
-      </body>
-    </html>
-    `,
-    isBinary: false,
-  },
-}
-
-function constructFiles(componentName: string, style: Style, sources: Record<string, string>) {
-  const componentsJson = {
-    style,
-    tailwind: {
-      config: 'tailwind.config.js',
-      css: 'src/assets/index.css',
-      baseColor: 'zinc',
-      cssVariables: true,
-    },
-    aliases: {
-      utils: '@/utils',
-      components: '@/components',
-    },
-  }
-
-  const iconPackage = style === 'default' ? 'lucide-vue-next' : '@radix-icons/vue'
-  const dependencies = {
-    'vue': 'latest',
-    'radix-vue': 'latest',
-    '@radix-ui/colors': 'latest',
-    'clsx': 'latest',
-    'class-variance-authority': 'latest',
-    'tailwind-merge': 'latest',
-    'tailwindcss-animate': 'latest',
-    [iconPackage]: 'latest',
-    'shadcn-vue': 'latest',
-    'typescript': 'latest',
-    'vaul-vue': 'latest',
-    'vue-sonner': 'latest',
-    '@unovis/vue': 'latest',
-    '@unovis/ts': 'latest',
-  }
-
-  const devDependencies = {
-    'vite': 'latest',
-    '@vitejs/plugin-vue': 'latest',
-    'vue-tsc': 'latest',
-    'tailwindcss': 'latest',
-    'autoprefixer': 'latest',
-  }
-
-  // We have static replace here as this is only showing for code reproduction, doesn't need dynamic codeConfig
-  const transformImportPath = (code: string) => {
-    let parsed = code
-    parsed = parsed.replaceAll(`@/lib/registry/${style}`, '@/components')
-    parsed = parsed.replaceAll('@/lib/utils', '@/utils')
-    return parsed
-  }
-
-  const componentFiles = Object.keys(sources).filter(key => key.endsWith('.vue') && key !== 'index.vue')
-  const components: Record<string, any> = {}
-  componentFiles.forEach((i) => {
-    components[`src/${i}`] = {
-      isBinary: false,
-      content: transformImportPath(sources[i]),
-    }
-  })
-
-  // @ts-expect-error componentName might not exist in Index
-  const registryDependencies = demoIndex[style][componentName as any]?.registryDependencies?.filter(i => i !== 'utils')
-
-  const files = {
-    'package.json': {
-      content: {
-        name: `shadcn-vue-${componentName.toLowerCase().replace(/ /g, '-')}`,
-        scripts: { start: `shadcn-vue add ${registryDependencies.join(' ')} -y && vite` },
-        dependencies,
-        devDependencies,
-      },
-      isBinary: false,
-    },
-    'components.json': {
-      content: componentsJson,
-      isBinary: false,
-    },
-    ...viteConfig,
-    'tailwind.config.js': {
-      content: tailwindConfigRaw,
-      isBinary: false,
-    },
-    'tsconfig.json': {
-      content: `{
-"$schema": "https://json.schemastore.org/tsconfig",
-"compilerOptions": {
-  "baseUrl": ".",
-  "paths": {
-    "@/*": ["./src/*"]
-  }
-}
-}`,
-      isBinary: false,
-    },
-    'src/utils.ts': {
-      isBinary: false,
-      content: `import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}`,
-    },
-    'src/assets/index.css': {
-      content: cssRaw,
-      isBinary: false,
-    },
-    'src/main.ts': {
-      content: `import { createApp } from 'vue';
-import App from './App.vue';
-import './assets/global.css';
-import './assets/index.css';
-
-createApp(App).mount('#app')`,
-      isBinary: false,
-    },
-    'src/App.vue': {
-      isBinary: false,
-      content: sources['index.vue'],
-    },
-    ...components,
-    'src/assets/global.css': {
-      content: `body {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding-top: 120px;
-  width: 100vw;
-  height: 100vh;
-  background-color: hsl(var(--background));
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  color: hsl(var(--foreground));
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-feature-settings: "rlig" 1, "calt" 1;
-} 
-
-#app {
-  @apply w-full flex items-center justify-center px-12;
-}`,
-      isBinary: false,
-    },
-  }
-
-  return files
-}
--- a/apps/www/registry/README.md
+++ b/apps/www/registry/README.md
@ -1 +1 @@
-> Files inside this directory is autogenerated by `./scripts/build-registry.ts`. **Do not edit them manually.**
+> Files inside this directory is autogenerated by `./scripts/build-registry.ts`. **Do not edit them manually.**
--- a/apps/www/registry/index.ts
+++ b/apps/www/registry/index.ts
--- a/apps/www/package.json
+++ b/apps/www/package.json
@ -1,7 +1,7 @@
 {
  "name": "www",
  "type": "module",
-  "version": "0.11.3",
+  "version": "0.1.8",
  "files": [
    "dist"
  ],
@ -9,73 +9,47 @@
    "dev": "vitepress dev",
    "build": "vitepress build",
    "preview": "vitepress preview",
-    "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": "tsx ./scripts/build-registry.ts"
  },
  "dependencies": {
-    "@formkit/auto-animate": "^0.8.2",
-    "@internationalized/date": "^3.5.5",
+    "@morev/vue-transitions": "^2.3.6",
    "@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",
+    "@tanstack/vue-table": "^8.9.9",
+    "@unovis/ts": "^1.2.1",
+    "@unovis/vue": "1.3.0-alpha.3",
+    "@vueuse/core": "^10.4.1",
    "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:",
+    "clsx": "^2.0.0",
+    "date-fns": "^2.30.0",
+    "lucide-vue-next": "^0.276.0",
    "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:"
+    "v-calendar": "^3.0.3",
+    "vue": "^3.3.4",
+    "vue-wrap-balancer": "^1.1.3",
+    "zod": "^3.22.2"
  },
  "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/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/vue": "^4.1.2",
-    "@oxc-parser/wasm": "catalog:",
-    "@shikijs/transformers": "^1.17.7",
-    "@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",
-    "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "^10.4.20",
-    "fast-glob": "^3.3.2",
-    "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"
+    "@iconify-json/radix-icons": "^1.1.11",
+    "@iconify-json/tabler": "^1.1.89",
+    "@iconify/json": "^2.2.108",
+    "@iconify/vue": "^4.1.1",
+    "@types/lodash.template": "^4.5.1",
+    "@types/node": "^20.6.0",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "@vitejs/plugin-vue-jsx": "^3.0.2",
+    "@vue/compiler-core": "^3.3.4",
+    "@vue/compiler-dom": "^3.3.4",
+    "autoprefixer": "^10.4.15",
+    "lodash.template": "^4.5.0",
+    "radix-vue": "^0.4.1",
+    "rimraf": "^5.0.1",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss": "^3.3.3",
+    "tsx": "^3.12.10",
+    "typescript": "^5.2.2",
+    "unplugin-icons": "^0.17.0",
+    "vite": "^4.4.9",
+    "vitepress": "^1.0.0-rc.13",
+    "vue-tsc": "^1.8.11"
  }
 }
--- a/apps/www/scripts/autogen.ts
+++ b/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,
-  }
-}
--- a/apps/www/scripts/build-registry.ts
+++ b/apps/www/scripts/build-registry.ts
@ -1,13 +1,13 @@
 import fs from 'node:fs'
 import path, { basename } from 'node:path'
-import { template } from 'lodash-es'
+import template from 'lodash.template'
 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')

@ -40,13 +40,15 @@ for (const style of styles) {
      file => `../src/lib/registry/${style.name}/${file}`,
    )

-    // const type = item.type.split(':')[1]
+    const type = item.type.split(':')[1]
    index += `
    "${item.name}": {
      name: "${item.name}",
      type: "${item.type}",
      registryDependencies: ${JSON.stringify(item.registryDependencies)},
-      component: () => import("${resolveFiles[0]}").then((m) => m.default),
+      component: () => import("../src/lib/registry/${style.name}/${type}/${
+			item.name
+		}.vue").then((m) => m.default),
      files: [${resolveFiles.map(file => `"${file}"`)}],
    },`
  }
@ -66,8 +68,6 @@ fs.writeFileSync(path.join(process.cwd(), '__registry__/index.ts'), index)
 // ----------------------------------------------------------------------------
 // Build registry/styles/[style]/[name].json.
 // ----------------------------------------------------------------------------
-const newLine = '\n'
-
 for (const style of styles) {
  const targetPath = path.join(REGISTRY_PATH, 'styles', style.name)

@ -80,20 +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`)
-      }
-
-      // Replace Windows-style newlines with Unix-style newlines
-      content = content.replace(/\r\n/g, newLine)
+      const content = fs.readFileSync(
+        path.join(process.cwd(), 'src/lib/registry', style.name, file),
+        'utf8',
+      )

      return {
        name: basename(file),
@ -106,11 +96,9 @@ for (const style of styles) {
      files,
    }

-    const payloadStr = `${JSON.stringify(payload, null, 2).replace(/\r\n/g, newLine)}\n`
-
    fs.writeFileSync(
      path.join(targetPath, `${item.name}.json`),
-      payloadStr,
+      JSON.stringify(payload, null, 2),
      'utf8',
    )
  }
@ -202,73 +190,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 +277,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,68 +314,68 @@ 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"] %>;
  }`

-const themeCSS: Array<string> = []
+const themeCSS = []
 for (const theme of themes) {
  themeCSS.push(
    template(THEME_STYLES_WITH_VARIABLES)({
@ -403,4 +391,4 @@ fs.writeFileSync(
  'utf8',
 )

-console.log('✅ Done!!')
+console.log('✅ Done!')
--- a/apps/www/src/assets/diagrams.drawio
+++ b/apps/www/src/assets/diagrams.drawio
@ -1,176 +0,0 @@
-<mxfile host="app.diagrams.net" modified="2024-03-15T08:14:00.888Z" agent="Mozilla/5.0 (X11; Linux x86_64; rv:124.0) Gecko/20100101 Firefox/124.0" etag="eUNOuIh_rCPXdI6LG0BE" version="24.0.6" type="device">
-  <diagram name="Page-1" id="10a91c8b-09ff-31b1-d368-03940ed4cc9e">
-    <mxGraphModel dx="1636" dy="971" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1100" pageHeight="850" background="none" math="0" shadow="0">
-      <root>
-        <mxCell id="0" />
-        <mxCell id="1" parent="0" />
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-41" value="" style="rounded=0;whiteSpace=wrap;html=1;fontColor=none;noLabel=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
-          <mxGeometry x="30" y="70" width="1010" height="680" as="geometry" />
-        </mxCell>
-        <mxCell id="62893188c0fa7362-1" value="Shadcn/Vue" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" parent="1" vertex="1">
-          <mxGeometry x="380" y="130" width="120" height="60" as="geometry" />
-        </mxCell>
-        <mxCell id="62893188c0fa7362-2" value="Packages" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" parent="1" vertex="1">
-          <mxGeometry x="160" y="250" width="120" height="60" as="geometry" />
-        </mxCell>
-        <mxCell id="62893188c0fa7362-3" value="Apps/www" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" parent="1" vertex="1">
-          <mxGeometry x="630" y="250" width="120" height="60" as="geometry" />
-        </mxCell>
-        <mxCell id="62893188c0fa7362-4" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;sketch=1;curveFitting=1;jiggle=2;shadow=0;" parent="1" source="PaMXV6_IjdSjTMUUNi7L-27" target="62893188c0fa7362-3" edge="1">
-          <mxGeometry x="-0.3002" y="13" relative="1" as="geometry">
-            <mxPoint as="offset" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="62893188c0fa7362-5" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;sketch=1;curveFitting=1;jiggle=2;shadow=0;" parent="1" source="62893188c0fa7362-1" target="62893188c0fa7362-2" edge="1">
-          <mxGeometry x="-0.359" y="-11" relative="1" as="geometry">
-            <mxPoint as="offset" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="62893188c0fa7362-8" value="Module" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" parent="1" vertex="1">
-          <mxGeometry x="80" y="360" width="120" height="60" as="geometry" />
-        </mxCell>
-        <mxCell id="62893188c0fa7362-9" value="CLI" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" parent="1" vertex="1">
-          <mxGeometry x="220" y="360" width="120" height="60" as="geometry" />
-        </mxCell>
-        <mxCell id="62893188c0fa7362-14" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;sketch=1;curveFitting=1;jiggle=2;shadow=0;" parent="1" source="62893188c0fa7362-2" target="62893188c0fa7362-8" edge="1">
-          <mxGeometry x="-0.2" y="-14" relative="1" as="geometry">
-            <mxPoint as="offset" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="62893188c0fa7362-15" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;sketch=1;curveFitting=1;jiggle=2;shadow=0;" parent="1" source="62893188c0fa7362-2" target="62893188c0fa7362-9" edge="1">
-          <mxGeometry x="-0.2" y="14" relative="1" as="geometry">
-            <mxPoint as="offset" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="62893188c0fa7362-16" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;entryX=0.75;entryY=0;entryDx=0;entryDy=0;sketch=1;curveFitting=1;jiggle=2;shadow=0;" parent="1" source="62893188c0fa7362-3" target="PaMXV6_IjdSjTMUUNi7L-2" edge="1">
-          <mxGeometry x="-0.2614" y="-13" relative="1" as="geometry">
-            <mxPoint as="offset" />
-            <mxPoint x="644.5454545454545" y="360" as="targetPoint" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="62893188c0fa7362-17" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;entryX=0.25;entryY=0;entryDx=0;entryDy=0;sketch=1;curveFitting=1;jiggle=2;shadow=0;" parent="1" source="62893188c0fa7362-3" target="PaMXV6_IjdSjTMUUNi7L-1" edge="1">
-          <mxGeometry x="-0.1294" y="17" relative="1" as="geometry">
-            <mxPoint as="offset" />
-            <mxPoint x="782.7272727272725" y="360" as="targetPoint" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-1" value="Registry" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" vertex="1" parent="1">
-          <mxGeometry x="720" y="370" width="120" height="60" as="geometry" />
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-2" value=".vitepress" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" vertex="1" parent="1">
-          <mxGeometry x="420" y="370" width="120" height="60" as="geometry" />
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-3" value="Scripts" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" vertex="1" parent="1">
-          <mxGeometry x="870" y="370" width="120" height="60" as="geometry" />
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-4" value="Src" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" vertex="1" parent="1">
-          <mxGeometry x="570" y="370" width="120" height="60" as="geometry" />
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-7" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;entryX=0.333;entryY=0.017;entryDx=0;entryDy=0;exitX=1;exitY=1;exitDx=0;exitDy=0;entryPerimeter=0;sketch=1;curveFitting=1;jiggle=2;shadow=0;" edge="1" parent="1" source="62893188c0fa7362-3" target="PaMXV6_IjdSjTMUUNi7L-3">
-          <mxGeometry x="-0.1294" y="17" relative="1" as="geometry">
-            <mxPoint as="offset" />
-            <mxPoint x="841" y="270" as="sourcePoint" />
-            <mxPoint x="910" y="320" as="targetPoint" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-9" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;entryX=0.5;entryY=0;entryDx=0;entryDy=0;exitX=0.358;exitY=1.017;exitDx=0;exitDy=0;exitPerimeter=0;sketch=1;curveFitting=1;jiggle=2;shadow=0;" edge="1" parent="1" source="62893188c0fa7362-3" target="PaMXV6_IjdSjTMUUNi7L-4">
-          <mxGeometry x="-0.2614" y="-13" relative="1" as="geometry">
-            <mxPoint as="offset" />
-            <mxPoint x="720" y="540" as="sourcePoint" />
-            <mxPoint x="613" y="600" as="targetPoint" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-11" value="Content" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" vertex="1" parent="1">
-          <mxGeometry x="420" y="500" width="120" height="60" as="geometry" />
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-12" value="Examples" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" vertex="1" parent="1">
-          <mxGeometry x="570" y="500" width="120" height="60" as="geometry" />
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-13" value="Lib/Registry" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" vertex="1" parent="1">
-          <mxGeometry x="720" y="500" width="120" height="60" as="geometry" />
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-14" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;entryX=0.5;entryY=0;entryDx=0;entryDy=0;exitX=0.308;exitY=1.033;exitDx=0;exitDy=0;exitPerimeter=0;sketch=1;curveFitting=1;jiggle=2;shadow=0;" edge="1" parent="1" source="PaMXV6_IjdSjTMUUNi7L-4" target="PaMXV6_IjdSjTMUUNi7L-11">
-          <mxGeometry x="-0.2614" y="-13" relative="1" as="geometry">
-            <mxPoint as="offset" />
-            <mxPoint x="560" y="470" as="sourcePoint" />
-            <mxPoint x="507" y="529" as="targetPoint" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-15" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;entryX=0.5;entryY=0;entryDx=0;entryDy=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;sketch=1;curveFitting=1;jiggle=2;shadow=0;" edge="1" parent="1" source="PaMXV6_IjdSjTMUUNi7L-4" target="PaMXV6_IjdSjTMUUNi7L-12">
-          <mxGeometry x="-0.2614" y="-13" relative="1" as="geometry">
-            <mxPoint as="offset" />
-            <mxPoint x="657" y="442" as="sourcePoint" />
-            <mxPoint x="540" y="560" as="targetPoint" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-16" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;entryX=0.5;entryY=0;entryDx=0;entryDy=0;exitX=0.75;exitY=1;exitDx=0;exitDy=0;sketch=1;curveFitting=1;jiggle=2;shadow=0;" edge="1" parent="1" source="PaMXV6_IjdSjTMUUNi7L-4" target="PaMXV6_IjdSjTMUUNi7L-13">
-          <mxGeometry x="-0.2614" y="-13" relative="1" as="geometry">
-            <mxPoint as="offset" />
-            <mxPoint x="660" y="435" as="sourcePoint" />
-            <mxPoint x="660" y="555" as="targetPoint" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-20" value="Default" style="rounded=1;whiteSpace=wrap;html=1;fontFamily=Garamond;fontSize=17;sketch=1;curveFitting=1;jiggle=2;shadow=0;" vertex="1" parent="1">
-          <mxGeometry x="650" y="630" width="120" height="60" as="geometry" />
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-21" value="New York" style="rounded=1;whiteSpace=wrap;html=1;fontFamily=Garamond;fontSize=17;sketch=1;curveFitting=1;jiggle=2;shadow=0;" vertex="1" parent="1">
-          <mxGeometry x="800" y="630" width="120" height="60" as="geometry" />
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-22" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;entryX=0.5;entryY=0;entryDx=0;entryDy=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;sketch=1;curveFitting=1;jiggle=2;shadow=0;" edge="1" parent="1" source="PaMXV6_IjdSjTMUUNi7L-13" target="PaMXV6_IjdSjTMUUNi7L-20">
-          <mxGeometry x="-0.2614" y="-13" relative="1" as="geometry">
-            <mxPoint as="offset" />
-            <mxPoint x="730" y="670" as="sourcePoint" />
-            <mxPoint x="530" y="818" as="targetPoint" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-23" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;entryX=0.5;entryY=0;entryDx=0;entryDy=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;sketch=1;curveFitting=1;jiggle=2;shadow=0;" edge="1" parent="1" source="PaMXV6_IjdSjTMUUNi7L-13" target="PaMXV6_IjdSjTMUUNi7L-21">
-          <mxGeometry x="-0.2614" y="-13" relative="1" as="geometry">
-            <mxPoint as="offset" />
-            <mxPoint x="790" y="670" as="sourcePoint" />
-            <mxPoint x="750" y="820" as="targetPoint" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-26" value="1" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
-          <mxGeometry x="140" y="230" width="40" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-28" value="3" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
-          <mxGeometry x="400" y="350" width="40" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-29" value="4" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
-          <mxGeometry x="550" y="350" width="40" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-30" value="5" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
-          <mxGeometry x="700" y="350" width="40" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-31" value="6" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
-          <mxGeometry x="850" y="350" width="40" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-32" value="7" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
-          <mxGeometry x="400" y="480" width="40" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-33" value="8" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
-          <mxGeometry x="550" y="480" width="40" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-34" value="9" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
-          <mxGeometry x="700" y="480" width="40" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-36" value="10" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
-          <mxGeometry x="630" y="610" width="40" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-38" value="11" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
-          <mxGeometry x="780" y="610" width="40" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-39" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;sketch=1;curveFitting=1;jiggle=2;shadow=0;" edge="1" parent="1" source="62893188c0fa7362-1" target="PaMXV6_IjdSjTMUUNi7L-27">
-          <mxGeometry x="-0.3002" y="13" relative="1" as="geometry">
-            <mxPoint as="offset" />
-            <mxPoint x="500" y="189" as="sourcePoint" />
-            <mxPoint x="630" y="251" as="targetPoint" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="PaMXV6_IjdSjTMUUNi7L-27" value="2" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
-          <mxGeometry x="610" y="230" width="40" height="40" as="geometry" />
-        </mxCell>
-      </root>
-    </mxGraphModel>
-  </diagram>
-</mxfile>
--- a/apps/www/src/components.d.ts
+++ b/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']
-  }
-}
--- a/apps/www/src/content/api-examples.md
+++ b/apps/www/src/content/api-examples.md
@ -47,5 +47,3 @@ const { site, theme, page, frontmatter } = useData()
 ## More

 Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).
-
-kick
--- a/apps/www/src/content/blocks.md
+++ b/apps/www/src/content/blocks.md
@ -1,9 +0,0 @@
---
-title: Building Blocks
---
-
-<script setup>
-import Blocks from "../../.vitepress/theme/components/Blocks.vue"
-</script>
-
-<Blocks />
--- a/apps/www/src/content/blocks/renderer.md
+++ b/apps/www/src/content/blocks/renderer.md
@ -1,10 +0,0 @@
---
-title: Blocks - shadcn-vue
-layout: false
---
-
-<script setup>
-import BlockPage from "../../../.vitepress/theme/components/BlockPage.vue"
-</script>
-
-<BlockPage />
--- a/apps/www/src/content/docs/about.md
+++ b/apps/www/src/content/docs/about.md
@ -5,7 +5,7 @@ description: Powered by amazing open source projects.

 ## About

-[shadcn-vue](https://shadcn-vue.com) is a port of [shadcn/ui](https://ui.shadcn.com) for Vue/Nuxt. It's maintained by [radix-vue](https://github.com/radix-vue).
+[shadcn-vue](https://shadcn-vuee.com) is a port of [shadcn/ui](https://ui.shadcn.com) for Vue/Nuxt. It's maintained by [radix-vue](https://github.com/radix-vue).

 ## Credits

@ -17,4 +17,4 @@ description: Powered by amazing open source projects.

 ## License

-MIT © [shadcn](https://shadcn.com) & [radix-vue](https://github.com/radix-vue)
+MIT © [shadcn](https://shadcn.com) & [radix-vue](https://github.com/radix-vue)
--- a/apps/www/src/content/docs/changelog.md
+++ b/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" />
--- a/apps/www/src/content/docs/charts.md
+++ b/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
-  }[]
-}>()
-```
--- a/apps/www/src/content/docs/charts/area.md
+++ b/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"  />
--- a/apps/www/src/content/docs/charts/bar.md
+++ b/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"  />
--- a/apps/www/src/content/docs/charts/donut.md
+++ b/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"  />
--- a/apps/www/src/content/docs/charts/line.md
+++ b/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"  />
--- a/apps/www/src/content/docs/cli.md
+++ b/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
@ -24,12 +24,12 @@ Where is your global CSS file? › › src/index.css
 Do you want to use CSS variables for colors? › no / yes
 Where is your tailwind.config.js located? › tailwind.config.js
 Configure the import alias for components: › @/components
-Configure the import alias for utils: › @/lib/utils
+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
@ -101,4 +101,4 @@ Arguments:
 Options:
  -c, --cwd <cwd>  the working directory. (default: the current directory)
  -h, --help       display help for command
-```
+```
--- a/apps/www/src/content/docs/components-json.md
+++ b/apps/www/src/content/docs/components-json.md
@ -89,6 +89,7 @@ This is used to generate the default color palette for your components. **This c
 }
 ```

+
 ### tailwind.cssVariables

 You can choose between using CSS variables or Tailwind CSS utility classes for theming.
@ -108,6 +109,7 @@ For more information, see the [theming docs](/docs/theming).

 **This cannot be changed after initialization.** To switch between CSS variables and utility classes, you'll have to delete and re-install your components.

+
 ## aliases

 The CLI uses these values and the `paths` config from your `tsconfig.json` or `jsconfig.json` file to place generated components in the correct location.
@ -115,6 +117,7 @@ The CLI uses these values and the `paths` config from your `tsconfig.json` or `j
 Path aliases have to be set up in your `tsconfig.json` or `jsconfig.json` file.

 > A fallback to `tsconfig.app.json` if no `paths` were found in `tsconfig.json`
+ 

 <Callout class="mt-6">

@ -123,6 +126,7 @@ Path aliases have to be set up in your `tsconfig.json` or `jsconfig.json` file.

 </Callout>

+
 ### aliases.utils

 Import alias for your utility functions.
@ -142,21 +146,7 @@ Import alias for your components.
 ```json title="components.json"
 {
  "aliases": {
-    "components": "@/components"
+    "components": "@/lib/components"
  }
 }
-```
-
-### aliases.ui
-
-Import alias for `ui` components.
-
-The CLI will use the `aliases.ui` value to determine where to place your `ui` components. Use this config if you want to customize the installation directory for your `ui` components.
-
-```json title="components.json"
-{
-  "aliases": {
-    "ui": "@/app/ui"
-  }
-}
-```
+```
--- a/apps/www/src/content/docs/components.md
+++ b/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>
--- a/apps/www/src/content/docs/components/accordion.md
+++ b/apps/www/src/content/docs/components/accordion.md
@ -1,13 +1,15 @@
 ---
 title: Accordion
-description: A vertically stacked set of interactive headings that each reveal a section of content.
-source: apps/www/src/lib/registry/default/ui/accordion
+description: A vertically stacked set of interactive headings that each reveal a section of content. 
+source: apps/www/src/lib/registry/default/ui/accordion 
 primitive: https://www.radix-vue.com/components/accordion.html
 ---

-<ComponentPreview name="AccordionDemo" class="sm:max-w-[70%]" />
+
+<ComponentPreview name="AccordionDemo" class="[&_.accordion]:sm:max-w-[70%]" />

 ## Installation
+ 

 <Steps>

@ -44,8 +46,9 @@ module.exports = {
  },
 }
 ```
-
+  
 </Steps>
+ 

 ## Usage

@ -65,3 +68,4 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/
  </Accordion>
 </template>
 ```
+
--- a/apps/www/src/content/docs/components/alert-dialog.md
+++ b/apps/www/src/content/docs/components/alert-dialog.md
@ -1,18 +1,21 @@
 ---
 title: Alert Dialog
 description: A modal dialog that interrupts the user with important content and expects a response.
-source: apps/www/src/lib/registry/default/ui/alert-dialog
+source: apps/www/src/lib/registry/default/ui/alert-dialog 
 primitive: https://www.radix-vue.com/components/alert-dialog.html
 ---
-
+    
+ 
 <ComponentPreview name="AlertDialogDemo" />
-
+ 
 ## Installation

+ 
+
 ```bash
 npx shadcn-vue@latest add alert-dialog
 ```
-
+  
 ## Usage

 ```vue
@ -48,4 +51,4 @@ import {
    </AlertDialogContent>
  </AlertDialog>
 </template>
-```
+```
--- a/Show More
+++ b/Show More