diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 2005df39..6a2af8cf 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,5 +1,4 @@
-const process = require('node:process')
-
+// const process = require('node:process')
 // process.env.ESLINT_TSCONFIG = 'tsconfig.json'
 
 module.exports = {
@@ -8,6 +7,7 @@ module.exports = {
   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',
diff --git a/apps/www/.vitepress/config.mts b/apps/www/.vitepress/config.mts
index 5673e83a..78e6b8e1 100644
--- a/apps/www/.vitepress/config.mts
+++ b/apps/www/.vitepress/config.mts
@@ -1,15 +1,22 @@
 import path from 'node:path'
 import { defineConfig } from 'vitepress'
+import Icons from 'unplugin-icons/vite'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: 'shadcn-vue',
   description: 'A VitePress Site',
   srcDir: path.resolve(__dirname, '../src/content'),
+  markdown: {
+    theme: 'css-variables',
+  },
   vite: {
+    plugins: [
+      Icons({ compiler: 'vue3', autoInstall: true }) as any,
+    ],
     resolve: {
       alias: {
-        '@': path.resolve(__dirname, '../src/lib'),
+        '@': path.resolve(__dirname, '../src'),
       },
     },
   },
diff --git a/apps/www/.vitepress/theme/components/ComponentPreview.vue b/apps/www/.vitepress/theme/components/ComponentPreview.vue
new file mode 100644
index 00000000..2ff0ea80
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/ComponentPreview.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
+import { cn } from '@/lib/utils'
+import LucideSpinner from '~icons/lucide/loader-2'
+
+const props = withDefaults(defineProps<{
+  name: string
+  align?: 'center' | 'start' | 'end'
+}>(), { align: 'center' })
+
+const Component = defineAsyncComponent({
+  loadingComponent: LucideSpinner,
+  loader: () => import(`../../../src/lib/registry/default/examples/${props.name}.vue`),
+  timeout: 5000,
+})
+</script>
+
+<template>
+  <div class="group relative my-4 flex flex-col space-y-2">
+    <Tabs default-value="preview" class="relative mr-auto w-full">
+      <div class="flex items-center justify-between pb-3">
+        <TabsList class="w-full justify-start rounded-none border-b bg-transparent p-0">
+          <TabsTrigger
+            value="preview"
+            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"
+          >
+            Preview
+          </TabsTrigger>
+          <TabsTrigger
+            value="code"
+            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"
+          >
+            Code
+          </TabsTrigger>
+        </TabsList>
+      </div>
+      <TabsContent value="preview" class="relative rounded-md border">
+        <div
+          :class="cn('preview flex min-h-[350px] w-full justify-center p-10', {
+            'items-center': align === 'center',
+            'items-start': align === 'start',
+            'items-end': align === 'end',
+          })"
+        >
+          <Component :is="Component" />
+        </div>
+      </TabsContent>
+      <TabsContent value="code">
+        <slot />
+      </TabsContent>
+    </Tabs>
+  </div>
+</template>
diff --git a/apps/www/.vitepress/theme/components/ManualInstall.vue b/apps/www/.vitepress/theme/components/ManualInstall.vue
new file mode 100644
index 00000000..b6c276ca
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/ManualInstall.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'
+</script>
+
+<template>
+  <Accordion type="single" :collapsible="true">
+    <AccordionItem value="manual-installation" class="border-none">
+      <AccordionTrigger>
+        Manual Installation
+      </AccordionTrigger>
+      <AccordionContent>
+        <slot />
+      </AccordionContent>
+    </AccordionItem>
+  </Accordion>
+</template>
diff --git a/apps/www/.vitepress/theme/components/TableOfContent.vue b/apps/www/.vitepress/theme/components/TableOfContent.vue
new file mode 100644
index 00000000..36ceb6dd
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/TableOfContent.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { onContentUpdated } from 'vitepress'
+import { shallowRef } from 'vue'
+import type { TableOfContents, TableOfContentsItem } from '../types/docs'
+import TableOfContentTree from './TableOfContentTree.vue'
+
+const headers = shallowRef<TableOfContents>()
+
+function getHeadingsWithHierarchy(divId: string) {
+  const div = document.querySelector(divId)
+  if (!div)
+    return { items: [] }
+
+  const headings: HTMLHeadingElement[] = Array.from(
+    div.querySelectorAll('h2, h3'),
+  )
+  const hierarchy: TableOfContents = { items: [] }
+  let currentLevel: TableOfContentsItem | undefined
+
+  headings.forEach((heading: HTMLHeadingElement) => {
+    const level = Number.parseInt(heading.tagName.charAt(1))
+    if (!heading.id) {
+      const newId = heading.innerText
+        .replaceAll(/[^a-zA-Z0-9 ]/g, '')
+        .replaceAll(' ', '-')
+        .toLowerCase()
+      heading.id = `${newId}`
+    }
+
+    const item: TableOfContentsItem = {
+      title: heading.textContent || '',
+      url: `#${heading.id}`,
+      items: [],
+    }
+
+    if (level === 2) {
+      hierarchy.items.push(item)
+      currentLevel = item
+    }
+    else if (level === 3 && currentLevel?.items) {
+      currentLevel.items.push(item)
+    }
+  })
+  return hierarchy
+}
+
+onContentUpdated(() => {
+  headers.value = getHeadingsWithHierarchy('.vp-doc')
+})
+</script>
+
+<template>
+  <div class="space-y-2">
+    <p class="font-medium">
+      On This Page
+    </p>
+    <TableOfContentTree :tree="headers" :level="1" />
+  </div>
+</template>
diff --git a/apps/www/.vitepress/theme/components/TableOfContentTree.vue b/apps/www/.vitepress/theme/components/TableOfContentTree.vue
new file mode 100644
index 00000000..7e07e8fd
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/TableOfContentTree.vue
@@ -0,0 +1,51 @@
+<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'
+
+withDefaults(defineProps<{
+  level: number
+  tree: TableOfContentsItem
+}>(), {
+  level: 1,
+  tree: () => ({
+    items: [],
+  }),
+})
+
+const route = useRoute()
+const hash = ref('')
+function setHash() {
+  hash.value = location.hash
+}
+onMounted(() => {
+  window.addEventListener('hashchange', setHash)
+  setHash()
+})
+onUnmounted(() => {
+  window.removeEventListener('hashchange', setHash)
+})
+watch(() => route.path, () => {
+  setHash()
+})
+</script>
+
+<template>
+  <ul :class="cn('m-0 list-none', { 'pl-4': level !== 1 })">
+    <template v-if="tree.items?.length">
+      <li v-for="item in tree.items" :key="item.title" class="mt-0 pt-2">
+        <a
+          :href="item.url"
+          :class="
+            cn('inline-block no-underline transition-colors hover:text-foreground',
+               item.url === hash
+                 ? 'font-medium text-foreground'
+                 : 'text-muted-foreground')"
+        >{{ item.title }} </a>
+
+        <TableOfContentTree v-if="item.items?.length" :tree="item" :level="level + 1" />
+      </li>
+    </template>
+  </ul>
+</template>
diff --git a/apps/www/.vitepress/theme/components/index.ts b/apps/www/.vitepress/theme/components/index.ts
new file mode 100644
index 00000000..b42f16d0
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/index.ts
@@ -0,0 +1,2 @@
+export { default as ComponentPreview } from './ComponentPreview.vue'
+export { default as ManualInstall } from './ManualInstall.vue'
diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts
new file mode 100644
index 00000000..1a28cbea
--- /dev/null
+++ b/apps/www/.vitepress/theme/config/docs.ts
@@ -0,0 +1,365 @@
+export interface NavItem {
+  title: string
+  href?: string
+  disabled?: boolean
+  external?: boolean
+  icon?: string
+  label?: string
+}
+
+export type SidebarNavItem = NavItem & {
+  items: SidebarNavItem[]
+}
+
+export type NavItemWithChildren = NavItem & {
+  items: NavItemWithChildren[]
+}
+
+interface DocsConfig {
+  mainNav: NavItem[]
+  sidebarNav: SidebarNavItem[]
+}
+
+export const docsConfig: DocsConfig = {
+  mainNav: [
+    {
+      title: 'Documentation',
+      href: '/docs',
+    },
+    {
+      title: 'Components',
+      href: '/docs/components/accordion',
+    },
+    {
+      title: 'Themes',
+      href: '/themes',
+    },
+    {
+      title: 'Examples',
+      href: '/examples/dashboard',
+    },
+    {
+      title: 'GitHub',
+      href: 'https://github.com/huntabyte/shadcn-svelte',
+      external: true,
+    },
+  ],
+  sidebarNav: [
+    {
+      title: 'Getting Started',
+      items: [
+        {
+          title: 'Introduction',
+          href: '/docs',
+          items: [],
+        },
+        {
+          title: 'Installation',
+          href: '/docs/installation',
+          items: [],
+        },
+        {
+          title: 'components.json',
+          href: '/docs/components-json',
+          items: [],
+        },
+        {
+          title: 'Theming',
+          href: '/docs/theming',
+          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',
+          items: [],
+        },
+      ],
+    },
+    {
+      title: 'Components',
+      items: [
+        {
+          title: 'Accordion',
+          href: '/docs/components/accordion',
+          items: [],
+        },
+        {
+          title: 'Alert',
+          href: '/docs/components/alert',
+          items: [],
+        },
+        {
+          title: 'Alert Dialog',
+          href: '/docs/components/alert-dialog',
+          items: [],
+        },
+        {
+          title: 'Aspect Ratio',
+          href: '/docs/components/aspect-ratio',
+          items: [],
+        },
+        {
+          title: 'Avatar',
+          href: '/docs/components/avatar',
+          items: [],
+        },
+        {
+          title: 'Badge',
+          href: '/docs/components/badge',
+          items: [],
+        },
+        {
+          title: 'Button',
+          href: '/docs/components/button',
+          items: [],
+        },
+        // {
+        //   title: "Calendar",
+        //   href: "#",
+        //   label: "Soon",
+        //   disabled: true,
+        //   items: []
+        // },
+        {
+          title: 'Card',
+          href: '/docs/components/card',
+          items: [],
+        },
+        {
+          title: 'Checkbox',
+          href: '/docs/components/checkbox',
+          items: [],
+        },
+        {
+          title: 'Collapsible',
+          href: '/docs/components/collapsible',
+          items: [],
+        },
+        {
+          title: 'Combobox',
+          disabled: true,
+          label: 'Soon',
+          href: '#',
+          items: [],
+        },
+        // {
+        //   title: "Command",
+        //   href: "#",
+        //   label: "Soon",
+        //   disabled: true,
+        //   items: []
+        // },
+        {
+          title: 'Context Menu',
+          href: '/docs/components/context-menu',
+          items: [],
+        },
+        {
+          title: 'Data Table',
+          href: '/docs/components/data-table',
+          items: [],
+        },
+        // {
+        //   title: "Date Picker",
+        //   href: "#",
+        //   label: "Soon",
+        //   disabled: true,
+        //   items: []
+        // },
+        {
+          title: 'Dialog',
+          href: '/docs/components/dialog',
+          items: [],
+        },
+        {
+          title: 'Dropdown Menu',
+          href: '/docs/components/dropdown-menu',
+          items: [],
+        },
+        {
+          title: '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: "#",
+        //   label: "Soon",
+        //   disabled: true,
+        //   items: []
+        // },
+        {
+          title: 'Popover',
+          href: '/docs/components/popover',
+          items: [],
+        },
+        {
+          title: 'Progress',
+          href: '/docs/components/progress',
+          items: [],
+        },
+        {
+          title: 'Radio Group',
+          href: '/docs/components/radio-group',
+          items: [],
+        },
+        // {
+        //   title: "Scroll Area",
+        //   href: "#",
+        //   label: "Soon",
+        //   disabled: true,
+        //   items: []
+        // },
+        {
+          title: 'Select',
+          href: '/docs/components/select',
+          items: [],
+        },
+        {
+          title: 'Separator',
+          href: '/docs/components/separator',
+          items: [],
+        },
+        {
+          title: 'Sheet',
+          href: '/docs/components/sheet',
+          items: [],
+        },
+        {
+          title: 'Skeleton',
+          href: '/docs/components/skeleton',
+          items: [],
+        },
+        {
+          title: 'Slider',
+          href: '/docs/components/slider',
+          items: [],
+        },
+        {
+          title: 'Switch',
+          href: '/docs/components/switch',
+          items: [],
+        },
+        {
+          title: 'Table',
+          href: '/docs/components/table',
+          items: [],
+        },
+        {
+          title: 'Tabs',
+          href: '/docs/components/tabs',
+          items: [],
+        },
+        {
+          title: 'Textarea',
+          href: '/docs/components/textarea',
+          items: [],
+        },
+        // {
+        //   title: "Toast",
+        //   href: "#",
+        //   label: "Soon",
+        //   disabled: true,
+        //   items: []
+        // },
+        {
+          title: 'Toggle',
+          href: '/docs/components/toggle',
+          items: [],
+        },
+        {
+          title: 'Tooltip',
+          href: '/docs/components/tooltip',
+          items: [],
+        },
+      ],
+    },
+  ],
+}
+
+interface Example {
+  name: string
+  href: string
+  label?: string
+  code: string
+}
+export const examples: Example[] = [
+  {
+    name: 'Dashboard',
+    href: '/examples/dashboard',
+    code: 'https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/docs/dashboard',
+  },
+  {
+    name: 'Cards',
+    href: '/examples/cards',
+    code: 'https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/routes/examples/cards',
+  },
+  // {
+  // 	name: "Tasks",
+  // 	href: "/examples/tasks",
+  // 	label: "New",
+  // 	code: "https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/apps/www/app/examples/tasks"
+  // },
+  {
+    name: 'Playground',
+    href: '/examples/playground',
+    code: 'https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/apps/www/app/examples/playground',
+  },
+  {
+    name: 'Music',
+    href: '/examples/music',
+    code: 'https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/apps/www/app/examples/music',
+  },
+  {
+    name: 'Authentication',
+    href: '/examples/authentication',
+    code: 'https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/routes/examples/authentication',
+  },
+  {
+    name: 'Forms',
+    href: '/examples/forms',
+    code: 'https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/routes/examples/forms',
+  },
+]
diff --git a/apps/www/.vitepress/theme/config/site.ts b/apps/www/.vitepress/theme/config/site.ts
new file mode 100644
index 00000000..b4ce6775
--- /dev/null
+++ b/apps/www/.vitepress/theme/config/site.ts
@@ -0,0 +1,14 @@
+export const siteConfig = {
+  name: 'shadcn-vue',
+  url: 'https://shadcn-vue.com',
+  ogImage: 'https://shadcn-vue.com/og.png',
+  description:
+		'Beautifully designed components built with Radix Vue and Tailwind CSS.',
+  links: {
+    twitter: 'https://twitter.com/huntabyte',
+    github: 'https://github.com/huntabyte/shadcn-vue',
+    shadTwitter: 'https://twitter.com/shadcn',
+    shadGithub: 'https://github.com/shadcn/ui',
+  },
+  keywords: 'shadcn,Vue,Nuxt,Vue Components,TailwindCSS,Radix Vue',
+}
diff --git a/apps/www/.vitepress/theme/index.ts b/apps/www/.vitepress/theme/index.ts
index 4fda16cd..52335bb9 100644
--- a/apps/www/.vitepress/theme/index.ts
+++ b/apps/www/.vitepress/theme/index.ts
@@ -1,10 +1,19 @@
+/* eslint-disable vue/component-definition-name-casing */
 // https://vitepress.dev/guide/custom-theme
-import Layout from './Layout.vue'
+import Layout from './layout/MainLayout.vue'
+import DocsLayout from './layout/DocsLayout.vue'
+import * as components from './components'
 import './style.css'
+import './styles/vp-doc.css'
+import './styles/shiki.css'
 
 export default {
   Layout,
-  enhanceApp({ app, router, siteData }) {
+  enhanceApp({ app }) {
     // ...
+    app.component('docs', DocsLayout)
+
+    for (const component of Object.keys(components))
+      app.component(component, components[component])
   },
 }
diff --git a/apps/www/.vitepress/theme/layout/DocsLayout.vue b/apps/www/.vitepress/theme/layout/DocsLayout.vue
new file mode 100644
index 00000000..30117124
--- /dev/null
+++ b/apps/www/.vitepress/theme/layout/DocsLayout.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { useData, useRoute } from 'vitepress'
+import { docsConfig } from '../config/docs'
+import TableOfContentVue from '../components/TableOfContent.vue'
+import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
+import RadixIconsCode from '~icons/radix-icons/code'
+
+const $route = useRoute()
+const { frontmatter } = useData()
+</script>
+
+<template>
+  <div class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
+    <aside
+      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="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 }}
+            </h4>
+
+            <div
+              v-for="doc in docsGroup.items "
+              :key="doc.title"
+              class="grid grid-flow-row auto-rows-max text-sm"
+            >
+              <a
+                v-if="doc.href"
+                :disabled="doc.disabled"
+                :href="doc.href"
+                class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                :class="{
+                  '!font-semibold !text-foreground': $route.path === `${doc.href}.html`,
+                }"
+              >
+                {{ doc.title }}
+              </a>
+            </div>
+          </div>
+        </div>
+      </ScrollArea>
+    </aside>
+
+    <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="space-y-2">
+          <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.source" :href="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
+          </a>
+          <a v-if="frontmatter.primitive" :href="frontmatter.primitive" 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">
+            Primitive API Reference
+          </a>
+        </div>
+
+        <div class="vp-doc">
+          <slot />
+        </div>
+      </div>
+
+      <div class="hidden text-sm xl:block">
+        <div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
+          <TableOfContentVue />
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
new file mode 100644
index 00000000..12b6cb83
--- /dev/null
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { useDark, useToggle } from '@vueuse/core'
+import { Content, useData, useRoute } from 'vitepress'
+import { Button } from '@/lib/registry/default/ui/button'
+import { Kbd } from '@/lib/registry/default/ui/kbd'
+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 LucidePanelRightOpen from '~icons/lucide/panel-right-open'
+import LucideSearch from '~icons/lucide/search'
+
+const { frontmatter } = useData()
+
+const $route = useRoute()
+const isDark = useDark()
+
+const toggleDark = useToggle(isDark)
+
+const routes = [
+  {
+    name: 'Documentation',
+    path: '/docs',
+  },
+  {
+    name: 'Components',
+    path: '/docs/components/accordion',
+  },
+  {
+    name: 'Themes',
+    path: '/themes',
+  },
+  {
+    name: 'Examples',
+    path: '/examples/dashboard',
+  },
+  {
+    name: 'GitHub',
+    path: 'https://github.com/radix-vue/shadcn-vue',
+    target: '_blank',
+  },
+]
+
+const links = [
+  {
+    name: 'GitHub',
+    href: 'https://github.com/radix-vue',
+    icon: RadixIconsGithubLogo,
+  },
+  {
+    name: 'X',
+    href: 'https://x.com',
+    icon: TablerBrandX,
+  },
+]
+</script>
+
+<template>
+  <div class="flex min-h-screen flex-col bg-background">
+    <header class="sticky z-40 top-0 bg-background border-b border-border">
+      <div
+        class="max-w-8xl flex h-[58px] items-center justify-between p-4 mx-auto"
+      >
+        <div class="flex gap-6 md:gap-8">
+          <a href="/" class="text-md font-bold"> shadcn-vue </a>
+
+          <nav
+            v-for="route in routes"
+            :key="route.name"
+            class="flex items-center space-x-6 text-sm font-medium"
+          >
+            <a
+              :href="route.path"
+              :target="route.target"
+              class="transition-colors hover:text-foreground/80 text-foreground/60"
+              :class="{
+                'font-semibold !text-foreground': $route.path === `${route.path}.html`,
+              }"
+            >
+              {{ route.name }}
+            </a>
+          </nav>
+        </div>
+
+        <div class="md:flex flex-1 items-center justify-end space-x-4 hidden">
+          <Button
+            variant="outline"
+            class="w-72 h-8 px-3 hidden lg:flex lg:justify-between lg:items-center"
+          >
+            <div class="flex items-center">
+              <LucideSearch class="w-4 h-4 mr-2 text-muted" />
+              <span class="text-muted"> Search for anything... </span>
+            </div>
+            <div class="flex items-center gap-x-1">
+              <Kbd>⌘</Kbd>
+              <Kbd>K</Kbd>
+            </div>
+          </Button>
+
+          <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>
+
+          <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>
+
+          <button class="flex md:hidden items-center justify-center">
+            <LucidePanelRightOpen class="w-5 h-5 text-foreground" />
+          </button>
+        </div>
+        <button class="flex md:hidden items-center justify-center">
+          <LucidePanelRightOpen class="w-5 h-5 text-foreground" />
+        </button>
+      </div>
+    </header>
+
+    <div class="flex-1">
+      <component :is="'docs'" v-if="$route.path.includes('docs')">
+        <Content />
+      </component>
+      <component :is="frontmatter.layout" v-else-if="frontmatter.layout">
+        <slot />
+      </component>
+      <main v-else>
+        <Content />
+      </main>
+    </div>
+
+    <footer class="bg-background z-40 border-t border-border text-foreground">
+      <div class="max-w-8xl h-20 flex items-center justify-between p-4 mx-auto">
+        <div class="flex justify-center items-center">
+          <span class="text-sm">
+            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="text-sm ml-0.5"> . </span>
+          <span class="text-sm ml-2">
+            Ported to Vue by {{ " " }}
+            <a
+              href="https://twitter.com"
+              target="_blank"
+              class="underline underline-offset-4 font-bold decoration-foreground"
+            >
+              Radix Vue
+            </a>
+          </span>
+          <span class="text-sm ml-0.5"> . </span>
+          <span class="text-sm 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>
+  </div>
+</template>
diff --git a/apps/www/.vitepress/theme/style.css b/apps/www/.vitepress/theme/style.css
index b57f839e..3efcf01d 100644
--- a/apps/www/.vitepress/theme/style.css
+++ b/apps/www/.vitepress/theme/style.css
@@ -1,5 +1,160 @@
+@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;
 
-html {
-  font-family: Arial, Helvetica;
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 240 10% 3.9%;
+
+		--muted: 240 4.8% 95.9%;
+		--muted-foreground: 240 3.8% 46.1%;
+
+		--popover: 0 0% 100%;
+		--popover-foreground: 240 10% 3.9%;
+
+		--card: 0 0% 100%;
+		--card-foreground: 240 10% 3.9%;
+
+		--border: 240 5.9% 90%;
+		--input: 240 5.9% 90%;
+
+		--primary: 240 5.9% 10%;
+		--primary-foreground: 0 0% 98%;
+
+		--secondary: 240 4.8% 95.9%;
+		--secondary-foreground: 240 5.9% 10%;
+
+		--accent: 240 4.8% 95.9%;
+		--accent-foreground: 240 5.9% 10%;
+
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 0 0% 98%;
+
+		--ring: 240 5% 64.9%;
+
+		--radius: 0.5rem;
+	}
+
+	.dark {
+		--background: 240 10% 3.9%;
+		--foreground: 0 0% 98%;
+
+		--muted: 240 3.7% 15.9%;
+		--muted-foreground: 240 5% 64.9%;
+
+		--popover: 240 10% 3.9%;
+		--popover-foreground: 0 0% 98%;
+
+		--card: 240 10% 3.9%;
+		--card-foreground: 0 0% 98%;
+
+		--border: 240 3.7% 15.9%;
+		--input: 240 3.7% 15.9%;
+
+		--primary: 0 0% 98%;
+		--primary-foreground: 240 5.9% 10%;
+
+		--secondary: 240 3.7% 15.9%;
+		--secondary-foreground: 0 0% 98%;
+
+		--accent: 240 3.7% 15.9%;
+		--accent-foreground: 0 0% 98%;
+
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 0 85.7% 97.3%;
+
+		--ring: 240 3.7% 15.9%;
+	}
+}
+@layer base {
+	* {
+		@apply border-border;
+	}
+	html {
+		-webkit-text-size-adjust: 100%;
+		font-variation-settings: normal;
+	}
+	body {
+		@apply bg-background text-foreground min-h-screen antialiased font-sans;
+		font-feature-settings: "rlig" 1, "calt" 1;
+	}
+
+	/* Mobile tap highlight */
+	/* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
+	html {
+		-webkit-tap-highlight-color: rgba(128, 128, 128, 0.5);
+	}
+
+	/* === Scrollbars === */
+
+	::-webkit-scrollbar {
+		@apply w-2;
+		@apply h-2;
+	}
+
+	::-webkit-scrollbar-track {
+		@apply !bg-muted;
+	}
+	::-webkit-scrollbar-thumb {
+		@apply rounded-sm !bg-muted-foreground/30;
+	}
+
+	/* Firefox */
+	/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
+	html {
+		scrollbar-color: hsl(215.4 16.3% 46.9% / 0.3);
+	}
+
+	html.dark {
+		scrollbar-color: hsl(215.4 16.3% 56.9% / 0.3);
+	}
+
+	.hide-scrollbar::-webkit-scrollbar {
+		display: none;
+	}
+
+	.hide-scrollbar {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
+
+	.antialised {
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+
+  pre {
+    @apply mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border !bg-zinc-950 py-4 dark:!bg-zinc-900
+
+  }
+  pre code {
+    @apply relative rounded font-mono text-sm ;
+  }
+  pre code .line {
+    @apply  px-4 min-h-[1.5rem] py-0.5 w-full inline-block;
+  } 
+ 
 }
 
+@layer utilities {
+	.step {
+		counter-increment: step;
+	}
+
+	.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-[-4px];
+		content: counter(step);
+	}
+}
+
+@media (max-width: 640px) {
+	.container {
+		@apply px-4;
+	}
+}
+
+
+
diff --git a/apps/www/.vitepress/theme/styles/shiki.css b/apps/www/.vitepress/theme/styles/shiki.css
new file mode 100644
index 00000000..a35beff2
--- /dev/null
+++ b/apps/www/.vitepress/theme/styles/shiki.css
@@ -0,0 +1,13 @@
+:root {
+  --shiki-color-text: #EEEEEE;
+  --shiki-color-background: #ffffff;
+  --shiki-token-constant: #ffffff;
+  --shiki-token-string: #ffffff88;
+  --shiki-token-comment: #880000;
+  --shiki-token-keyword: #ffffff88;
+  --shiki-token-parameter: #AA0000;
+  --shiki-token-function: #ffffff;
+  --shiki-token-string-expression: #ffffff88;
+  --shiki-token-punctuation: #ffffff;
+  --shiki-token-link: #EE0000;
+}
\ No newline at end of file
diff --git a/apps/www/.vitepress/theme/styles/vp-doc.css b/apps/www/.vitepress/theme/styles/vp-doc.css
new file mode 100644
index 00000000..e38d6893
--- /dev/null
+++ b/apps/www/.vitepress/theme/styles/vp-doc.css
@@ -0,0 +1,570 @@
+:root {
+  --vp-icon-copy: 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 2'/%3E%3C/svg%3E");
+  --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(240 3.7% 15.9%);
+  --vp-c-divider: hsl(240 3.7% 15.9%);
+}
+
+
+/**
+ * Headings
+ * -------------------------------------------------------------------------- */
+
+.vp-doc h1,
+.vp-doc h2,
+.vp-doc h3,
+.vp-doc h4,
+.vp-doc h5,
+.vp-doc h6 {
+  position: relative;
+  font-weight: 600;
+  outline: none;
+}
+
+.vp-doc h1 {
+  letter-spacing: -0.02em;
+  line-height: 40px;
+  font-size: 28px;
+}
+
+.vp-doc h2 {
+  /* margin: 48px 0 16px; */
+  margin: 16px 0 16px;
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 24px;
+  letter-spacing: -0.02em;
+  line-height: 32px;
+  font-size: 24px;
+}
+
+.vp-doc h3 {
+  margin: 32px 0 0;
+  letter-spacing: -0.01em;
+  line-height: 28px;
+  font-size: 20px;
+}
+
+.vp-doc .header-anchor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin-left: -0.87em;
+  font-weight: 500;
+  user-select: none;
+  opacity: 0;
+  text-decoration: none;
+  transition:
+    color 0.25s,
+    opacity 0.25s;
+}
+
+.vp-doc .header-anchor:before {
+  content: var(--vp-header-anchor-symbol);
+}
+
+.vp-doc h1:hover .header-anchor,
+.vp-doc h1 .header-anchor:focus,
+.vp-doc h2:hover .header-anchor,
+.vp-doc h2 .header-anchor:focus,
+.vp-doc h3:hover .header-anchor,
+.vp-doc h3 .header-anchor:focus,
+.vp-doc h4:hover .header-anchor,
+.vp-doc h4 .header-anchor:focus,
+.vp-doc h5:hover .header-anchor,
+.vp-doc h5 .header-anchor:focus,
+.vp-doc h6:hover .header-anchor,
+.vp-doc h6 .header-anchor:focus {
+  opacity: 1;
+}
+
+@media (min-width: 768px) {
+  .vp-doc h1 {
+    letter-spacing: -0.02em;
+    line-height: 40px;
+    font-size: 32px;
+  }
+}
+
+.vp-doc h2 .header-anchor {
+  top: 24px;
+}
+
+/**
+ * Paragraph and inline elements
+ * -------------------------------------------------------------------------- */
+
+/* .vp-doc p,
+.vp-doc summary {
+  margin: 16px 0;
+}
+
+.vp-doc p {
+  line-height: 28px;
+}
+
+.vp-doc blockquote {
+  margin: 16px 0;
+  border-left: 2px solid var(--vp-c-divider);
+  padding-left: 16px;
+  transition: border-color 0.5s;
+}
+
+.vp-doc blockquote > p {
+  margin: 0;
+  font-size: 16px;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+}
+
+.vp-doc a {
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition:
+    color 0.25s,
+    opacity 0.25s;
+}
+
+.vp-doc a:hover {
+  color: var(--vp-c-brand-2);
+}
+
+.vp-doc strong {
+  font-weight: 600;
+} */
+
+/**
+ * Lists
+ * -------------------------------------------------------------------------- */
+
+.vp-doc ul,
+.vp-doc ol {
+  padding-left: 1.25rem;
+  margin: 16px 0;
+}
+
+.vp-doc ul {
+  list-style: disc;
+}
+
+.vp-doc ol {
+  list-style: decimal;
+}
+
+.vp-doc li + li {
+  margin-top: 8px;
+}
+
+.vp-doc li > ol,
+.vp-doc li > ul {
+  margin: 8px 0 0;
+}
+
+/**
+ * Table
+ * -------------------------------------------------------------------------- */
+
+.vp-doc table {
+  display: block;
+  border-collapse: collapse;
+  margin: 20px 0;
+  overflow-x: auto;
+}
+
+.vp-doc tr {
+  border-top: 1px solid var(--vp-c-divider);
+  transition: background-color 0.5s;
+}
+
+.vp-doc tr:nth-child(2n) {
+  background-color: var(--vp-c-bg-soft);
+}
+
+.vp-doc th,
+.vp-doc td {
+  border: 1px solid var(--vp-c-divider);
+  padding: 8px 16px;
+}
+
+.vp-doc th {
+  text-align: left;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  background-color: var(--vp-c-bg-soft);
+}
+
+.vp-doc td {
+  font-size: 14px;
+}
+
+/**
+ * Decorational elements
+ * -------------------------------------------------------------------------- */
+
+.vp-doc hr {
+  margin: 16px 0;
+  border: none;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+/**
+ * Custom Block
+ * -------------------------------------------------------------------------- */
+
+.vp-doc .custom-block {
+  margin: 16px 0;
+}
+
+.vp-doc .custom-block p {
+  margin: 8px 0;
+  line-height: 24px;
+}
+
+.vp-doc .custom-block p:first-child {
+  margin: 0;
+}
+
+.vp-doc .custom-block div[class*='language-'] {
+  margin: 8px 0;
+  border-radius: 8px;
+}
+
+.vp-doc .custom-block div[class*='language-'] code {
+  font-weight: 400;
+  background-color: transparent;
+}
+
+.vp-doc .custom-block .vp-code-group .tabs {
+  margin: 0;
+  border-radius: 8px 8px 0 0;
+}
+
+/**
+ * Code
+ * -------------------------------------------------------------------------- */
+
+/* inline code */
+.vp-doc :not(pre, h1, h2, h3, h4, h5, h6) > code {
+  font-size: var(--vp-code-font-size);
+  color: var(--vp-code-color);
+}
+
+.vp-doc :not(pre) > code {
+  border-radius: 4px;
+  padding: 3px 6px;
+  background-color: var(--vp-code-bg);
+  transition:
+    color 0.25s,
+    background-color 0.5s;
+}
+
+.vp-doc a > code {
+  color: var(--vp-code-link-color);
+}
+
+.vp-doc a:hover > code {
+  color: var(--vp-code-link-hover-color);
+}
+
+.vp-doc h1 > code,
+.vp-doc h2 > code,
+.vp-doc h3 > code {
+  font-size: 0.9em;
+}
+
+.vp-doc div[class*='language-'],
+.vp-block {
+  position: relative;
+  margin: 16px -24px;
+  background-color: var(--vp-code-block-bg);
+  overflow-x: auto;
+  transition: background-color 0.5s;
+}
+
+@media (min-width: 640px) {
+  .vp-doc div[class*='language-'],
+  .vp-block {
+    border-radius: 8px;
+    margin: 16px 0;
+  }
+}
+
+@media (max-width: 639px) {
+  .vp-doc li div[class*='language-'] {
+    border-radius: 8px 0 0 8px;
+  }
+}
+
+.vp-doc div[class*='language-'] + div[class*='language-'],
+.vp-doc div[class$='-api'] + div[class*='language-'],
+.vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
+  margin-top: -8px;
+}
+
+.vp-doc [class*='language-'] pre,
+.vp-doc [class*='language-'] code {
+  /*rtl:ignore*/
+  direction: ltr;
+  /*rtl:ignore*/
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+.vp-doc [class*='language-'] pre {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  /* padding: 20px 0; */
+  background: transparent;
+  overflow-x: auto;
+}
+
+.vp-doc [class*='language-'] code {
+  display: block;
+  /* padding: 0 24px; */
+  width: fit-content;
+  min-width: 100%;
+  line-height: var(--vp-code-line-height);
+  /* font-size: var(--vp-code-font-size); */
+  color: var(--vp-code-block-color);
+  transition: color 0.5s;
+}
+
+.vp-doc [class*='language-'] code .highlighted {
+  background-color: var(--vp-code-line-highlight-color);
+  transition: background-color 0.5s;
+  margin: 0 -24px;
+  padding: 0 24px;
+  width: calc(100% + 2 * 24px);
+  display: inline-block;
+}
+
+.vp-doc [class*='language-'] code .highlighted.error {
+  background-color: var(--vp-code-line-error-color);
+}
+
+.vp-doc [class*='language-'] code .highlighted.warning {
+  background-color: var(--vp-code-line-warning-color);
+}
+
+.vp-doc [class*='language-'] code .diff {
+  transition: background-color 0.5s;
+  margin: 0 -24px;
+  padding: 0 24px;
+  width: calc(100% + 2 * 24px);
+  display: inline-block;
+}
+
+.vp-doc [class*='language-'] code .diff::before {
+  position: absolute;
+  left: 10px;
+}
+
+.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+  filter: blur(0.095rem);
+  opacity: 0.4;
+  transition:
+    filter 0.35s,
+    opacity 0.35s;
+}
+
+.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+  opacity: 0.7;
+  transition:
+    filter 0.35s,
+    opacity 0.35s;
+}
+
+.vp-doc [class*='language-']:hover .has-focused-lines .line:not(.has-focus) {
+  filter: blur(0);
+  opacity: 1;
+}
+
+.vp-doc [class*='language-'] code .diff.remove {
+  background-color: var(--vp-code-line-diff-remove-color);
+  opacity: 0.7;
+}
+
+.vp-doc [class*='language-'] code .diff.remove::before {
+  content: '-';
+  color: var(--vp-code-line-diff-remove-symbol-color);
+}
+
+.vp-doc [class*='language-'] code .diff.add {
+  background-color: var(--vp-code-line-diff-add-color);
+}
+
+.vp-doc [class*='language-'] code .diff.add::before {
+  content: '+';
+  color: var(--vp-code-line-diff-add-symbol-color);
+}
+
+.vp-doc div[class*='language-'].line-numbers-mode {
+  /*rtl:ignore*/
+  padding-left: 32px;
+}
+
+.vp-doc .line-numbers-wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  /*rtl:ignore*/
+  left: 0;
+  z-index: 3;
+  /*rtl:ignore*/
+  border-right: 1px solid var(--vp-code-block-divider-color);
+  padding-top: 20px;
+  width: 32px;
+  text-align: center;
+  font-family: var(--vp-font-family-mono);
+  line-height: var(--vp-code-line-height);
+  font-size: var(--vp-code-font-size);
+  color: var(--vp-code-line-number-color);
+  transition:
+    border-color 0.5s,
+    color 0.5s;
+}
+
+.vp-doc [class*='language-'] > button.copy {
+  /*rtl:ignore*/
+  direction: ltr;
+  position: absolute;
+  top: 12px;
+  /*rtl:ignore*/
+  right: 12px;
+  z-index: 3;
+  border: 1px solid var(--vp-code-copy-code-border-color);
+  border-radius: 4px;
+  width: 40px;
+  height: 40px;
+  background-color: var(--vp-code-copy-code-bg);
+  opacity: 0;
+  cursor: pointer;
+  background-image: var(--vp-icon-copy);
+  background-position: 50%;
+  background-size: 20px;
+  background-repeat: no-repeat;
+  transition:
+    border-color 0.25s,
+    background-color 0.25s,
+    opacity 0.25s;
+}
+
+.vp-doc [class*='language-']:hover > button.copy,
+.vp-doc [class*='language-'] > button.copy:focus {
+  opacity: 1;
+}
+
+.vp-doc [class*='language-'] > button.copy:hover,
+.vp-doc [class*='language-'] > button.copy.copied {
+  border-color: var(--vp-code-copy-code-hover-border-color);
+  background-color: var(--vp-code-copy-code-hover-bg);
+}
+
+.vp-doc [class*='language-'] > button.copy.copied,
+.vp-doc [class*='language-'] > button.copy:hover.copied {
+  /*rtl:ignore*/
+  border-radius: 0 4px 4px 0;
+  background-color: var(--vp-code-copy-code-hover-bg);
+  background-image: var(--vp-icon-copied);
+}
+
+.vp-doc [class*='language-'] > button.copy.copied::before,
+.vp-doc [class*='language-'] > button.copy:hover.copied::before {
+  position: relative;
+  top: -1px;
+  /*rtl:ignore*/
+  transform: translateX(calc(-100% - 1px));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid var(--vp-code-copy-code-hover-border-color);
+  /*rtl:ignore*/
+  border-right: 0;
+  border-radius: 4px 0 0 4px;
+  padding: 0 10px;
+  width: fit-content;
+  height: 40px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-code-copy-code-active-text);
+  background-color: var(--vp-code-copy-code-hover-bg);
+  white-space: nowrap;
+  content: var(--vp-code-copy-copied-text-content);
+}
+
+.vp-doc [class*='language-'] > span.lang {
+  position: absolute;
+  top: 2px;
+  /*rtl:ignore*/
+  right: 8px;
+  z-index: 2;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-code-lang-color);
+  transition:
+    color 0.4s,
+    opacity 0.4s;
+  
+  @apply text-gray-600;
+}
+
+.vp-doc [class*='language-']:hover > button.copy + span.lang,
+.vp-doc [class*='language-'] > button.copy:focus + span.lang {
+  opacity: 0;
+}
+
+/**
+ * Component: Team
+ * -------------------------------------------------------------------------- */
+
+.vp-doc .VPTeamMembers {
+  margin-top: 24px;
+}
+
+.vp-doc .VPTeamMembers.small.count-1 .container {
+  margin: 0 !important;
+  max-width: calc((100% - 24px) / 2) !important;
+}
+
+.vp-doc .VPTeamMembers.small.count-2 .container,
+.vp-doc .VPTeamMembers.small.count-3 .container {
+  max-width: 100% !important;
+}
+
+.vp-doc .VPTeamMembers.medium.count-1 .container {
+  margin: 0 !important;
+  max-width: calc((100% - 24px) / 2) !important;
+}
+
+/* prettier-ignore */
+:is(.vp-external-link-icon, .vp-doc a[href*='://'], .vp-doc a[target='_blank']):not(.no-icon)::after {
+  display: inline-block;
+  margin-top: -1px;
+  margin-left: 4px;
+  width: 11px;
+  height: 11px;
+  background: currentColor;
+  color: var(--vp-c-text-3);
+  flex-shrink: 0;
+  --icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");
+  -webkit-mask-image: var(--icon);
+  mask-image: var(--icon);
+}
+
+.vp-external-link-icon::after {
+  content: '';
+}
\ No newline at end of file
diff --git a/apps/www/.vitepress/theme/types/docs.ts b/apps/www/.vitepress/theme/types/docs.ts
new file mode 100644
index 00000000..e54f3bfb
--- /dev/null
+++ b/apps/www/.vitepress/theme/types/docs.ts
@@ -0,0 +1,9 @@
+export interface TableOfContentsItem {
+  title?: string
+  url?: string
+  items?: TableOfContentsItem[]
+}
+
+export interface TableOfContents {
+  items: TableOfContentsItem[]
+}
diff --git a/apps/www/index.html b/apps/www/index.html
deleted file mode 100644
index 143557b5..00000000
--- a/apps/www/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html 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 id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
diff --git a/apps/www/package.json b/apps/www/package.json
index 49dd817e..169aae71 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -23,6 +23,8 @@
     "vue": "^3.3.4"
   },
   "devDependencies": {
+    "@iconify-json/radix-icons": "^1.1.11",
+    "@iconify-json/tabler": "^1.1.89",
     "@iconify/vue": "^4.1.1",
     "@vitejs/plugin-vue": "^4.1.0",
     "autoprefixer": "^10.4.14",
@@ -30,6 +32,7 @@
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.0.2",
+    "unplugin-icons": "^0.16.6",
     "vite": "^4.3.9",
     "vue-tsc": "^1.4.2"
   }
diff --git a/apps/www/src/App.vue b/apps/www/src/App.vue
deleted file mode 100644
index 7b0960d1..00000000
--- a/apps/www/src/App.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import AccordionDemo from '@/registry/default/examples/AccordionDemo.vue'
-import PopoverDemo from '@/registry/default/examples/PopoverDemo.vue'
-import DialogDemo from '@/registry/default/examples/DialogDemo.vue'
-import AlertDialogDemo from '@/registry/default/examples/AlertDialogDemo.vue'
-import SelectDemo from '@/registry/default/examples/SelectDemo.vue'
-</script>
-
-<template>
-  <div class="p-8 grid gap-12 grid-cols-3 place-items-center">
-    <AccordionDemo class="max-w-[20rem]" />
-
-    <PopoverDemo />
-
-    <DialogDemo />
-
-    <AlertDialogDemo />
-
-    <SelectDemo />
-  </div>
-</template>
diff --git a/apps/www/src/components/Internal/Docs/Card/Card.vue b/apps/www/src/components/Internal/Docs/Card/Card.vue
deleted file mode 100644
index 4db9c47a..00000000
--- a/apps/www/src/components/Internal/Docs/Card/Card.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup>
-const props = defineProps({
-  title: String,
-})
-</script>
-
-<template>
-  <div class="flex items-center justify-center bg-white border border-neutral-200 shadow-sm rounded-xl h-[280px] overflow-hidden relative px-6">
-    <p class="text-xl font-semibold absolute left-4 top-3 rounded-lg bg-neutral-100 px-2 py-1 text-neutral-600">
-      {{ props.title }}
-    </p>
-    <div class="overflow-y-scroll flex-grow h-full max-h-full flex items-center justify-center pb-4 pt-12">
-      <slot />
-    </div>
-  </div>
-</template>
diff --git a/apps/www/src/components/Internal/Docs/Card/index.ts b/apps/www/src/components/Internal/Docs/Card/index.ts
deleted file mode 100644
index 579ebc76..00000000
--- a/apps/www/src/components/Internal/Docs/Card/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Card } from './Card.vue'
diff --git a/apps/www/src/content/docs.md b/apps/www/src/content/docs.md
new file mode 100644
index 00000000..2fee20d7
--- /dev/null
+++ b/apps/www/src/content/docs.md
@@ -0,0 +1,5 @@
+---
+layout: docs
+---
+
+docs laytou please?
\ No newline at end of file
diff --git a/apps/www/src/content/docs/components/accordion.md b/apps/www/src/content/docs/components/accordion.md
new file mode 100644
index 00000000..384c5eff
--- /dev/null
+++ b/apps/www/src/content/docs/components/accordion.md
@@ -0,0 +1,49 @@
+---
+title: Accordion
+description: A vertically stacked set of interactive headings that each reveal a section of content. 
+source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/registry/default/ui/accordion 
+primitive: https://www.radix-vue.com/components/accordion.html
+---
+
+
+<ComponentPreview name="AccordionDemo" class="[&_.accordion]:sm:max-w-[70%]">
+
+<<< ../../../lib/registry/default/examples/AccordionDemo.vue
+
+</ComponentPreview>
+
+
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add accordion
+```
+
+<ManualInstall>
+
+1. Install `radix-vue`:
+
+```bash
+npm install radix-vue
+```
+
+2. Copy and paste the component source files linked at the top of this page into your project.
+</ManualInstall>
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'
+</script>
+
+<AccordionRoot>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Is it accessible?</AccordionTrigger>
+    <AccordionContent>
+      Yes. It adheres to the WAI-ARIA design pattern.
+    </AccordionContent>
+  </AccordionItem>
+</AccordionRoot>
+```
\ No newline at end of file
diff --git a/apps/www/src/content/example/dashboard.md b/apps/www/src/content/example/dashboard.md
new file mode 100644
index 00000000..32f95c0d
--- /dev/null
+++ b/apps/www/src/content/example/dashboard.md
@@ -0,0 +1 @@
+hi
\ No newline at end of file
diff --git a/apps/www/src/content/index.md b/apps/www/src/content/index.md
index b1c72f40..bd40584d 100644
--- a/apps/www/src/content/index.md
+++ b/apps/www/src/content/index.md
@@ -2,3 +2,4 @@
 home: true
 ---
 
+this is main content
\ No newline at end of file
diff --git a/apps/www/src/content/themes.md b/apps/www/src/content/themes.md
new file mode 100644
index 00000000..e69de29b
diff --git a/apps/www/src/lib/registry/default/examples/AccordionDemo.vue b/apps/www/src/lib/registry/default/examples/AccordionDemo.vue
index 3dc961aa..7a99ad50 100644
--- a/apps/www/src/lib/registry/default/examples/AccordionDemo.vue
+++ b/apps/www/src/lib/registry/default/examples/AccordionDemo.vue
@@ -1,24 +1,12 @@
-<script setup>
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'
+<script setup lang="ts">
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'
 
 const defaultValue = 'item-1'
 
 const accordionItems = [
-  {
-    value: 'item-1',
-    title: 'Is it accessible?',
-    content: 'Yes. It adheres to the WAI-ARIA design pattern.',
-  },
-  {
-    value: 'item-2',
-    title: 'Is it unstyled?',
-    content: 'Yes. It\'s unstyled by default, giving you freedom over the look and feel.',
-  },
-  {
-    value: 'item-3',
-    title: 'Can it be animated?',
-    content: 'Yes! You can use the transition prop to configure the animation.',
-  },
+  { value: 'item-1', title: 'Is it accessible?', content: 'Yes. It adheres to the WAI-ARIA design pattern.' },
+  { value: 'item-2', title: 'Is it unstyled?', content: 'Yes. It\'s unstyled by default, giving you freedom over the look and feel.' },
+  { value: 'item-3', title: 'Can it be animated?', content: 'Yes! You can use the transition prop to configure the animation.' },
 ]
 </script>
 
diff --git a/apps/www/src/lib/registry/default/examples/index.ts b/apps/www/src/lib/registry/default/examples/index.ts
new file mode 100644
index 00000000..f414dfd1
--- /dev/null
+++ b/apps/www/src/lib/registry/default/examples/index.ts
@@ -0,0 +1 @@
+export { default as AccordionDemo } from './AccordionDemo.vue'
diff --git a/apps/www/src/lib/registry/default/ui/accordion.ts b/apps/www/src/lib/registry/default/ui/accordion.ts
deleted file mode 100644
index 052a7f43..00000000
--- a/apps/www/src/lib/registry/default/ui/accordion.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { defineComponent, h } from 'vue'
-import {
-  AccordionContent as AccordionContentPrimitive,
-  type AccordionContentProps, AccordionHeader as AccordionHeaderPrimitive,
-  type AccordionHeaderProps, AccordionItem as AccordionItemPrimitive,
-  type AccordionItemProps, AccordionRoot as AccordionRootPrimitive,
-  AccordionTrigger as AccordionTriggerPrimitive, type AccordionTriggerProps,
-} from 'radix-vue'
-import { ChevronDown } from 'lucide-vue-next'
-import { cn } from '@/utils'
-
-export const Accordion = AccordionRootPrimitive
-
-export const AccordionContent = defineComponent<AccordionContentProps>(
-  (props, { attrs, slots }) => {
-    return () => h(AccordionContentPrimitive,
-      { class: cn('overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down', attrs.class), ...props },
-      () => h('div', { class: 'pb-4 pt-0' }, slots),
-    )
-  },
-)
-
-export const AccordionTrigger = defineComponent<AccordionTriggerProps>(
-  (_props, { attrs, slots }) => {
-    return () => h(AccordionHeaderPrimitive, { class: 'flex' },
-      () => h(AccordionTriggerPrimitive,
-        { class: cn('flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180', attrs.class) },
-        () => [slots.default(), h(ChevronDown, { class: 'h-4 w-4 shrink-0 transition-transform duration-200' })],
-      ),
-    )
-  },
-)
-
-export const AccordionItem = defineComponent<AccordionItemProps>(
-  (props, { attrs, slots }) => {
-    return () => h(AccordionItemPrimitive,
-      { class: cn('border-b', attrs.class), ...props }, slots)
-  },
-)
-
-export const AccordionHeader = defineComponent<AccordionHeaderProps>(
-  (props, { attrs, slots }) => {
-    return () => h(AccordionHeaderPrimitive, { class: cn('flex', attrs.class), ...props }, slots)
-  },
-)
diff --git a/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue b/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue
new file mode 100644
index 00000000..da4a4305
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/accordion/Accordion.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import {
+  AccordionRoot,
+  type AccordionRootProps,
+} from 'radix-vue'
+
+const props = defineProps<AccordionRootProps>()
+</script>
+
+<template>
+  <AccordionRoot v-bind="props" class="accordion">
+    <slot />
+  </AccordionRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue b/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue
new file mode 100644
index 00000000..06f7adb6
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { AccordionContent, type AccordionContentProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionContentProps & { class?: string }>()
+</script>
+
+<template>
+  <AccordionContent
+    v-bind="props"
+    :class="
+      cn(
+        'overflow-hidden text-sm transition-all data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up',
+        props.class,
+      )
+    "
+  >
+    <div class="pb-4 pt-0">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue b/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue
new file mode 100644
index 00000000..067d5da0
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { AccordionItem, type AccordionItemProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionItemProps & { class?: string }>()
+</script>
+
+<template>
+  <AccordionItem
+    v-bind="props"
+    :class="cn('border-b text-foreground border-border', props.class ?? '')"
+  >
+    <slot />
+  </AccordionItem>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/accordion/AccordionTrigger.vue b/apps/www/src/lib/registry/default/ui/accordion/AccordionTrigger.vue
new file mode 100644
index 00000000..0e971519
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/accordion/AccordionTrigger.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {
+  AccordionHeader,
+  AccordionTrigger,
+  type AccordionTriggerProps,
+} from 'radix-vue'
+import { ChevronDown } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionTriggerProps & { class?: string }>()
+</script>
+
+<template>
+  <AccordionHeader class="flex" as="div">
+    <AccordionTrigger
+      v-bind="props"
+      :class="
+        cn(
+          'flex flex-1 group items-center justify-between py-4 font-medium transition-all hover:underline',
+          props.class,
+        )
+      "
+    >
+      <slot />
+      <ChevronDown
+        class="w-4 h-4 shrink-0 transition-transform duration-300 group-data-[state=open]:rotate-180"
+      />
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/accordion/index.ts b/apps/www/src/lib/registry/default/ui/accordion/index.ts
new file mode 100644
index 00000000..9340ac06
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/accordion/index.ts
@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionContent } from './AccordionContent.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog.ts b/apps/www/src/lib/registry/default/ui/alert-dialog.ts
deleted file mode 100644
index a8c4b63d..00000000
--- a/apps/www/src/lib/registry/default/ui/alert-dialog.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import { defineComponent, h } from 'vue'
-import {
-  AlertDialogAction as AlertDialogActionPrimitive, type AlertDialogActionProps,
-  AlertDialogCancel as AlertDialogCancelPrimitive, type AlertDialogCancelProps,
-  type AlertDialogContentEmits, AlertDialogContent as AlertDialogContentPrimitive, type AlertDialogContentProps,
-  AlertDialogDescription as AlertDialogDescriptionPrimitive, type AlertDialogDescriptionProps,
-  AlertDialogOverlay as AlertDialogOverlayPrimitive, type AlertDialogOverlayProps,
-  AlertDialogPortal as AlertDialogPortalPrimitive,
-  AlertDialogRoot, AlertDialogTitle as AlertDialogTitlePrimitive,
-  type AlertDialogTitleProps, AlertDialogTrigger as AlertDialogTriggerPrimitive,
-
-} from 'radix-vue'
-import type { ParseEmits } from '@/utils'
-import { cn, useEmitAsProps } from '@/utils'
-import { buttonVariants } from '@/registry/default/ui/button'
-
-export const AlertDialog = AlertDialogRoot
-export const AlertDialogTrigger = AlertDialogTriggerPrimitive
-export const AlertDialogPortal = AlertDialogPortalPrimitive
-
-export const AlertDialogOverlay = defineComponent<AlertDialogOverlayProps>(
-  (props, { attrs, slots }) => {
-    return () => h(AlertDialogOverlayPrimitive,
-      { class: cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', attrs.class), ...props },
-      slots,
-    )
-  }, { name: 'AlertDialogOverlay' },
-)
-
-export const AlertDialogContent = defineComponent<AlertDialogContentProps, ParseEmits<AlertDialogContentEmits>>(
-  (props, { emit, attrs, slots }) => {
-    const emitsAsProps = useEmitAsProps(emit)
-
-    return () => h(AlertDialogPortal, () => [
-      h(AlertDialogOverlay),
-      h(AlertDialogContentPrimitive, {
-        class: cn('fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full', attrs.class ?? ''),
-        ...props,
-        ...emitsAsProps,
-      }, slots),
-    ])
-  }, { name: 'AlertDialogContent', emits: AlertDialogContentPrimitive.emits },
-)
-
-export const AlertDialogHeader = defineComponent(
-  (_props, { attrs, slots }) => {
-    return () => h('div',
-      { class: cn('flex flex-col space-y-2 text-center sm:text-left', attrs.class) },
-      slots,
-    )
-  }, { name: 'AlertDialogHeader' },
-)
-
-export const AlertDialogFooter = defineComponent(
-  (_props, { attrs, slots }) => {
-    return () => h('div',
-      { class: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', attrs.class) },
-      slots,
-    )
-  }, { name: 'AlertDialogFooter' },
-)
-
-export const AlertDialogTitle = defineComponent<AlertDialogTitleProps>(
-  (props, { attrs, slots }) => {
-    return () => h(AlertDialogTitlePrimitive,
-      { class: cn('text-lg font-semibold', attrs.class), ...props },
-      slots,
-    )
-  }, { name: 'AlertDialogTitle' },
-)
-
-export const AlertDialogDescription = defineComponent<AlertDialogDescriptionProps>(
-  (props, { attrs, slots }) => {
-    return () => h(AlertDialogDescriptionPrimitive,
-      { class: cn('text-sm text-muted-foreground', attrs.class), ...props },
-      slots,
-    )
-  }, { name: 'AlertDialogDescription' },
-)
-
-export const AlertDialogAction = defineComponent<AlertDialogActionProps>(
-  (props, { attrs, slots }) => {
-    return () => h(AlertDialogActionPrimitive,
-      { class: cn(buttonVariants(), attrs.class), ...props },
-      slots,
-    )
-  }, { name: 'AlertDialogAction' },
-)
-
-export const AlertDialogCancel = defineComponent<AlertDialogCancelProps>(
-  (props, { attrs, slots }) => {
-    return () => h(AlertDialogCancelPrimitive,
-      { class: cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', attrs.class), ...props },
-      slots,
-    )
-  }, { name: 'AlertDialogCancel' },
-)
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialog.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialog.vue
new file mode 100644
index 00000000..aa77199c
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialog.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { type AlertDialogProps, AlertDialogRoot } from 'radix-vue'
+
+const props = defineProps<AlertDialogProps>()
+</script>
+
+<template>
+  <AlertDialogRoot :default-open="props.defaultOpen" :open="props.open">
+    <slot />
+  </AlertDialogRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogAction.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogAction.vue
new file mode 100644
index 00000000..8faa0471
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
+
+const props = defineProps<AlertDialogActionProps>()
+</script>
+
+<template>
+  <AlertDialogAction v-bind="props">
+    <slot />
+  </AlertDialogAction>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue
new file mode 100644
index 00000000..b1e91389
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
+
+const props = defineProps<AlertDialogCancelProps>()
+</script>
+
+<template>
+  <AlertDialogCancel v-bind="props">
+    <slot />
+  </AlertDialogCancel>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
new file mode 100644
index 00000000..99685897
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {
+  AlertDialogContent,
+  type AlertDialogContentProps,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AlertDialogContentProps & { class?: string }>()
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      class="fixed inset-0 z-50 bg-white/80 dark:bg-gray-950/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <AlertDialogContent
+      v-bind="props"
+      :class="
+        cn(
+          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogDescription.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogDescription.vue
new file mode 100644
index 00000000..53975a87
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogDescription.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import {
+  AlertDialogDescription,
+  type AlertDialogDescriptionProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: string }>()
+</script>
+
+<template>
+  <AlertDialogDescription
+    :class="cn('text-muted text-sm', props.class)"
+    :as-child="props.asChild"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogFooter.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogFooter.vue
new file mode 100644
index 00000000..de4af93b
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogFooter.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col space-y-2 sm:space-y-0 mt-3.5 sm:flex-row sm:justify-end sm:space-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue
new file mode 100644
index 00000000..a350b718
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTitle.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTitle.vue
new file mode 100644
index 00000000..9b6491f2
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTitle.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AlertDialogTitleProps & { class?: string }>()
+</script>
+
+<template>
+  <AlertDialogTitle
+    :as-child="props.asChild"
+    :class="cn('text-lg text-foreground font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTrigger.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTrigger.vue
new file mode 100644
index 00000000..4f5e2fd0
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/index.ts b/apps/www/src/lib/registry/default/ui/alert-dialog/index.ts
new file mode 100644
index 00000000..91d138ae
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as AlertDialog } from './AlertDialog.vue'
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
+export { default as AlertDialogContent } from './AlertDialogContent.vue'
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
+export { default as AlertDialogAction } from './AlertDialogAction.vue'
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
diff --git a/apps/www/src/lib/registry/default/ui/alert/Alert.vue b/apps/www/src/lib/registry/default/ui/alert/Alert.vue
new file mode 100644
index 00000000..641e150d
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/alert/Alert.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cva } from 'class-variance-authority'
+import { X } from 'lucide-vue-next'
+import { Button } from '../button'
+
+interface AlertProps {
+  variant?: 'primary' | 'success' | 'warning' | 'destructive' | 'info'
+  dismissible?: boolean
+  show?: boolean
+}
+
+const props = withDefaults(defineProps<AlertProps>(), {
+  variant: 'primary',
+  dismissible: false,
+  show: true,
+})
+
+const emits = defineEmits<{
+  (e: 'update:show', value: boolean): void
+  (e: 'close'): void
+}>()
+
+const alertClass = computed(() => {
+  return cva(
+    'relative w-full rounded-lg p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',
+    {
+      variants: {
+        variant: {
+          primary: 'border border-border text-foreground',
+          success:
+            'border dark:border-green-600 dark:text-green-600 text-green-500 border-green-500',
+          warning:
+            'border dark:border-yellow-600 dark:text-yellow-600 text-yellow-500 border-yellow-500',
+          destructive: 'border border-destructive text-destructive',
+          info: 'border dark:border-blue-600 dark:text-blue-600 text-blue-500 border-blue-500',
+        },
+      },
+    },
+  )({
+    variant: props.variant,
+  })
+})
+
+const show = computed({
+  get() {
+    return props.show
+  },
+  set(value) {
+    emits('update:show', value)
+  },
+})
+</script>
+
+<template>
+  <Transition
+    enter-active-class="transition ease-out duration-300"
+    enter-from-class="opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="transition ease-in duration-300"
+    leave-from-class="opacity-100"
+    leave-to-class="opacity-0"
+  >
+    <div v-if="show" :class="alertClass" role="alert">
+      <Button
+        v-if="props.dismissible"
+        variant="neutral"
+        class="absolute top-1.5 -right-0.5"
+        @click="emits('close')"
+      >
+        <X
+          class="w-4 h-4 text-muted transition-colors ease-in-out duration-300"
+        />
+      </Button>
+      <slot />
+    </div>
+  </Transition>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/alert/AlertDescription.vue b/apps/www/src/lib/registry/default/ui/alert/AlertDescription.vue
new file mode 100644
index 00000000..fe3f9670
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/alert/AlertDescription.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: String,
+})
+</script>
+
+<template>
+  <div :class="cn('text-sm text-left leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/alert/AlertTitle.vue b/apps/www/src/lib/registry/default/ui/alert/AlertTitle.vue
new file mode 100644
index 00000000..9821e45c
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/alert/AlertTitle.vue
@@ -0,0 +1,5 @@
+<template>
+  <h5 class="mb-1 font-medium leading-none tracking-tight">
+    <slot />
+  </h5>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/alert/index.ts b/apps/www/src/lib/registry/default/ui/alert/index.ts
new file mode 100644
index 00000000..2b4f31b2
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/alert/index.ts
@@ -0,0 +1,3 @@
+export { default as Alert } from './Alert.vue'
+export { default as AlertTitle } from './AlertTitle.vue'
+export { default as AlertDescription } from './AlertDescription.vue'
diff --git a/apps/www/src/lib/registry/default/ui/aspect-ratio/AspectRatio.vue b/apps/www/src/lib/registry/default/ui/aspect-ratio/AspectRatio.vue
new file mode 100644
index 00000000..65291818
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/aspect-ratio/AspectRatio.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AspectRatio, type AspectRatioProps } from 'radix-vue'
+
+const props = defineProps<AspectRatioProps>()
+</script>
+
+<template>
+  <AspectRatio v-bind="props">
+    <slot />
+  </AspectRatio>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/aspect-ratio/index.ts b/apps/www/src/lib/registry/default/ui/aspect-ratio/index.ts
new file mode 100644
index 00000000..3faf121c
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/aspect-ratio/index.ts
@@ -0,0 +1 @@
+export { default as AspectRatio } from './AspectRatio.vue'
diff --git a/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue b/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
new file mode 100644
index 00000000..f3b10881
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { AvatarRoot } from 'radix-vue'
+import { cva } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+interface AvatarProps {
+  size?: 'sm' | 'base' | 'lg'
+  shape?: 'circle' | 'square'
+  class?: string
+}
+
+const props = withDefaults(defineProps<AvatarProps>(), {
+  name: 'Anonymous',
+  size: 'base',
+  shape: 'circle',
+})
+
+const avatarClass = computed(() => {
+  return cva(
+    'inline-flex items-center justify-center font-normal text-foregorund select-none shrink-0 bg-secondary overflow-hidden',
+    {
+      variants: {
+        size: {
+          sm: 'h-10 w-10 text-xs',
+          base: 'h-16 w-16 text-2xl',
+          lg: 'h-32 w-32 text-5xl',
+        },
+        shape: {
+          circle: 'rounded-full',
+          square: 'rounded-md',
+        },
+      },
+    },
+  )({
+    size: props.size,
+    shape: props.shape,
+  })
+})
+</script>
+
+<template>
+  <AvatarRoot :class="cn(avatarClass, props.class)">
+    <slot />
+  </AvatarRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/avatar/AvatarFallback.vue b/apps/www/src/lib/registry/default/ui/avatar/AvatarFallback.vue
new file mode 100644
index 00000000..a671a219
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/avatar/AvatarFallback.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'
+
+const props = defineProps<AvatarFallbackProps>()
+</script>
+
+<template>
+  <AvatarFallback v-bind="props">
+    <slot />
+  </AvatarFallback>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/avatar/AvatarImage.vue b/apps/www/src/lib/registry/default/ui/avatar/AvatarImage.vue
new file mode 100644
index 00000000..43499fa2
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/avatar/AvatarImage.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { AvatarImage, type AvatarImageProps } from 'radix-vue'
+
+const props = defineProps<AvatarImageProps>()
+</script>
+
+<template>
+  <AvatarImage v-bind="props" class="h-full w-full object-cover" />
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/avatar/index.ts b/apps/www/src/lib/registry/default/ui/avatar/index.ts
new file mode 100644
index 00000000..49741211
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/avatar/index.ts
@@ -0,0 +1,3 @@
+export { default as Avatar } from './Avatar.vue'
+export { default as AvatarImage } from './AvatarImage.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue'
diff --git a/apps/www/src/lib/registry/default/ui/badge/Badge.vue b/apps/www/src/lib/registry/default/ui/badge/Badge.vue
new file mode 100644
index 00000000..e0ec600b
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/badge/Badge.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cva } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+interface BadgeProps {
+  variant?: 'primary' | 'secondary' | 'outline' | 'destructive'
+  as?: string
+  class?: string
+}
+
+const props = withDefaults(defineProps<BadgeProps>(), {
+  variant: 'primary',
+  as: 'span',
+})
+
+const badgeClass = computed(() => {
+  return cva(
+    'inline-flex items-center cursor-default text-xs font-semibold px-2.5 py-0.5 rounded-md transition-colors ease-in-out duration-300',
+    {
+      variants: {
+        variant: {
+          primary: 'bg-primary text-primary-foreground hover:bg-primary-hover',
+          secondary: 'bg-secondary text-foreground hover:bg-secondary-hover',
+          outline:
+            'border border-border text-foreground shadow-sm hover:bg-outline-hover',
+          destructive:
+            'bg-destructive text-destructive-foreground hover:bg-destructive-hover',
+        },
+      },
+    },
+  )({
+    variant: props.variant,
+  })
+})
+</script>
+
+<template>
+  <component :is="props.as" :class="cn(badgeClass, props.class)">
+    <slot />
+  </component>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/badge/index.ts b/apps/www/src/lib/registry/default/ui/badge/index.ts
new file mode 100644
index 00000000..1734c2d4
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/badge/index.ts
@@ -0,0 +1 @@
+export { default as Badge } from './Badge.vue'
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadCrumb.vue b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadCrumb.vue
new file mode 100644
index 00000000..0f8f3026
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadCrumb.vue
@@ -0,0 +1,5 @@
+<template>
+  <ol class="flex items-center whitespace-nowrap min-w-0">
+    <slot />
+  </ol>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadCrumbItem.vue b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadCrumbItem.vue
new file mode 100644
index 00000000..0df72ec5
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadCrumbItem.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ChevronRight } from 'lucide-vue-next'
+
+interface BreadCrumbItemProps {
+  path?: string
+  lastItem?: boolean
+  as?: string | object
+}
+
+const props = withDefaults(defineProps<BreadCrumbItemProps>(), {
+  as: 'span',
+})
+</script>
+
+<template>
+  <li class="text-sm text-muted">
+    <component
+      :is="props.as"
+      :to="props.path"
+      class="flex items-center"
+      :class="{
+        '!font-semibold !text-foreground': $route.path === props.path,
+      }"
+    >
+      <slot />
+      <ChevronRight
+        v-if="!props.lastItem"
+        class="flex-shrink-0 h-3 w-3 text-muted mx-2"
+      />
+    </component>
+  </li>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/index.ts b/apps/www/src/lib/registry/default/ui/breadcrumb/index.ts
new file mode 100644
index 00000000..61292a15
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/breadcrumb/index.ts
@@ -0,0 +1,2 @@
+export { default as BreadCrumb } from './BreadCrumb.vue'
+export { default as BreadCrumbItem } from './BreadCrumbItem.vue'
diff --git a/apps/www/src/lib/registry/default/ui/button.ts b/apps/www/src/lib/registry/default/ui/button.ts
deleted file mode 100644
index c4741cc1..00000000
--- a/apps/www/src/lib/registry/default/ui/button.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { defineComponent, h } from 'vue'
-import { type VariantProps, cva } from 'class-variance-authority'
-import { cn } from '@/utils'
-
-export const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
-
-interface ButtonProps extends VariantProps<typeof buttonVariants> {}
-
-export const Button = defineComponent<ButtonProps>(
-  (props, { attrs, slots }) => {
-    return () => h('button', { class: cn(buttonVariants(props), attrs.class ?? '') }, slots)
-  },
-  { name: 'Button', props: ['size', 'variant'] },
-)
diff --git a/apps/www/src/lib/registry/default/ui/button/Button.vue b/apps/www/src/lib/registry/default/ui/button/Button.vue
new file mode 100644
index 00000000..fc7a7176
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/button/Button.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cva } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+interface ButtonProps {
+  class?: string
+  variant?:
+  | 'primary'
+  | 'secondary'
+  | 'destructive'
+  | 'outline'
+  | 'ghost'
+  | 'link'
+  | 'neutral'
+  disabled?: boolean | undefined
+  as?: string
+}
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  variant: 'primary',
+  disabled: false,
+  as: 'button',
+})
+
+const buttonClass = computed(() => {
+  return cva(
+    'inline-flex items-center justify-center text-sm px-4 py-2.5 rounded-md font-medium transition-colors ease-in-out duration-300',
+    {
+      variants: {
+        variant: {
+          primary:
+            'bg-primary text-primary-foreground enabled:hover:bg-primary-hover',
+          secondary:
+            'bg-secondary text-secondary-foreground enabled:hover:bg-secondary-hover',
+          destructive:
+            'bg-destructive text-destructive-foreground hover:bg-destructive-hover',
+          outline:
+            'border border-border text-foreground shadow-sm hover:bg-outline-hover',
+          ghost: 'text-foreground hover:bg-outline-hover',
+          link: 'text-foreground hover:underline hover:underline-offset-4',
+          neutral: '',
+        },
+        disabled: {
+          true: '!opacity-50 !cursor-not-allowed',
+        },
+      },
+    },
+  )({
+    variant: props.variant,
+    disabled: props.disabled,
+  })
+})
+</script>
+
+<template>
+  <component
+    :is="props.as"
+    :class="cn(buttonClass, props.class)"
+    :disabled="props.disabled"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/button/index.ts b/apps/www/src/lib/registry/default/ui/button/index.ts
new file mode 100644
index 00000000..ead8085f
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/button/index.ts
@@ -0,0 +1 @@
+export { default as Button } from './Button.vue'
diff --git a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
new file mode 100644
index 00000000..07711513
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { useDark } from '@vueuse/core'
+import { Calendar } from 'v-calendar'
+import 'v-calendar/style.css'
+
+const isDark = useDark()
+</script>
+
+<template>
+  <Calendar :is-dark="isDark" borderless trim-weeks expanded />
+</template>
+
+<style>
+:root {
+  --vc-font-family: "Inter", sans-serif;
+  --vc-rounded-full: var(--radius);
+  --vc-font-bold: 500;
+  --vc-font-semibold: 600;
+  --vc-text-lg: 14px;
+}
+
+.vc-light,
+.vc-dark {
+  --vc-bg: var(--background);
+  --vc-border: var(--border);
+  --vc-focus-ring: 0 0 0 3px rgba(0, 0, 0, 0.2);
+  --vc-weekday-color: var(--muted);
+  --vc-popover-content-color: var(--muted);
+  --vc-popover-content-bg: var(--background);
+  --vc-popover-content-border: var(--border);
+
+  &.vc-attr,
+  & .vc-attr {
+    --vc-content-color: var(--primary);
+    --vc-highlight-outline-bg: var(--primary);
+    --vc-highlight-outline-border: var(--primary);
+    --vc-highlight-outline-content-color: var(--primary-foreground);
+    --vc-highlight-light-bg: var(
+      --vc-accent-200
+    ); /* Highlighted color between two dates */
+    --vc-highlight-light-content-color: var(--secondary-foreground);
+    --vc-highlight-solid-bg: var(--primary);
+    --vc-highlight-solid-content-color: var(--primary-foreground);
+    --vc-dot-bg: var(--primary);
+    --vc-bar-bg: var(--primary);
+  }
+}
+
+.vc-blue {
+  --vc-accent-200: var(--secondary);
+  --vc-accent-400: var(--primary);
+  --vc-accent-500: var(--primary);
+  --vc-accent-600: var(--primary);
+}
+
+.dark {
+  .vc-blue {
+    --vc-accent-200: var(--secondary);
+    --vc-accent-400: var(--primary);
+    --vc-accent-500: var(--secondary);
+  }
+}
+</style>
diff --git a/apps/www/src/lib/registry/default/ui/calendar/index.ts b/apps/www/src/lib/registry/default/ui/calendar/index.ts
new file mode 100644
index 00000000..50f21114
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/calendar/index.ts
@@ -0,0 +1 @@
+export { default as Calendar } from './Calendar.vue'
diff --git a/apps/www/src/lib/registry/default/ui/card/Card.vue b/apps/www/src/lib/registry/default/ui/card/Card.vue
new file mode 100644
index 00000000..399c74b5
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/card/Card.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'bg-background text-foreground border border-border rounded-xl shadow-md',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/card/CardContent.vue b/apps/www/src/lib/registry/default/ui/card/CardContent.vue
new file mode 100644
index 00000000..9dc5a661
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/card/CardContent.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/card/CardDescription.vue b/apps/www/src/lib/registry/default/ui/card/CardDescription.vue
new file mode 100644
index 00000000..9b55c53c
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/card/CardDescription.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <p :class="cn('text-muted text-sm', props.class)">
+    <slot />
+  </p>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/card/CardFooter.vue b/apps/www/src/lib/registry/default/ui/card/CardFooter.vue
new file mode 100644
index 00000000..9dc5a661
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/card/CardFooter.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/card/CardHeader.vue b/apps/www/src/lib/registry/default/ui/card/CardHeader.vue
new file mode 100644
index 00000000..7422a5ad
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/card/CardHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div :class="cn('flex flex-col space-y-1.5 p-6', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/card/CardTitle.vue b/apps/www/src/lib/registry/default/ui/card/CardTitle.vue
new file mode 100644
index 00000000..34f898d6
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/card/CardTitle.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <h3
+    :class="
+      cn('text-2xl font-semibold leading-none tracking-tighter', props.class)
+    "
+  >
+    <slot />
+  </h3>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/card/index.ts b/apps/www/src/lib/registry/default/ui/card/index.ts
new file mode 100644
index 00000000..8170483c
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/card/index.ts
@@ -0,0 +1,6 @@
+export { default as Card } from './Card.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardFooter } from './CardFooter.vue'
diff --git a/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue b/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue
new file mode 100644
index 00000000..b088c599
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import RadixIconsCheck from '~icons/radix-icons/check'
+
+interface CheckBoxProps {
+  id?: string
+  modelValue?: boolean
+  required?: boolean
+  disabled?: boolean
+  invalid?: boolean
+  checked?: boolean
+}
+
+const props = defineProps<CheckBoxProps>()
+
+const emit = defineEmits(['update:modelValue'])
+</script>
+
+<template>
+  <div class="flex items-center">
+    <input
+      :id="props.id"
+      type="checkbox"
+      :value="props.modelValue"
+      :required="props.required"
+      :disabled="props.disabled"
+      :class="{
+        'ring-destructive-light dark:ring-destructive': props.invalid,
+        '!cursor-not-allowed opacity-50': props.disabled,
+      }"
+      :checked="props.checked"
+      class="w-4 h-4 peer cursor-pointer shrink-0 relative checked:bg-primary appearance-none text-foreground border border-primary rounded"
+      @input="
+        ($event) =>
+          emit('update:modelValue', ($event.target as HTMLInputElement).checked)
+      "
+    >
+
+    <RadixIconsCheck
+      class="absolute pointer-events-none hidden peer-checked:block w-4 h-3 text-background"
+    />
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/checkbox/index.ts b/apps/www/src/lib/registry/default/ui/checkbox/index.ts
new file mode 100644
index 00000000..8c28c286
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/checkbox/index.ts
@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox.vue'
diff --git a/apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue b/apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue
new file mode 100644
index 00000000..f3b1ef78
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { CollapsibleRoot, type CollapsibleRootProps } from 'radix-vue'
+
+const props = defineProps<CollapsibleRootProps>()
+</script>
+
+<template>
+  <CollapsibleRoot v-bind="props">
+    <slot />
+  </CollapsibleRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/collapsible/CollapsibleContent.vue b/apps/www/src/lib/registry/default/ui/collapsible/CollapsibleContent.vue
new file mode 100644
index 00000000..c4827a9e
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/collapsible/CollapsibleContent.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'
+
+const props = defineProps<CollapsibleContentProps>()
+</script>
+
+<template>
+  <CollapsibleContent v-bind="props">
+    <slot />
+  </CollapsibleContent>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/collapsible/CollapsibleTrigger.vue b/apps/www/src/lib/registry/default/ui/collapsible/CollapsibleTrigger.vue
new file mode 100644
index 00000000..4a434639
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/collapsible/CollapsibleTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { CollapsibleTrigger, type CollapsibleTriggerProps } from 'radix-vue'
+
+const props = defineProps<CollapsibleTriggerProps>()
+</script>
+
+<template>
+  <CollapsibleTrigger v-bind="props">
+    <slot />
+  </CollapsibleTrigger>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/collapsible/index.ts b/apps/www/src/lib/registry/default/ui/collapsible/index.ts
new file mode 100644
index 00000000..4930f4c6
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/collapsible/index.ts
@@ -0,0 +1,3 @@
+export { default as Collapsible } from './Collapsible.vue'
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'
+export { default as CollapsibleContent } from './CollapsibleContent.vue'
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenu.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenu.vue
new file mode 100644
index 00000000..7a587b5f
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenu.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ContextMenuRoot, type ContextMenuRootProps } from 'radix-vue'
+
+const props = defineProps<ContextMenuRootProps>()
+</script>
+
+<template>
+  <ContextMenuRoot v-bind="props">
+    <slot />
+  </ContextMenuRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue
new file mode 100644
index 00000000..24b06561
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import {
+  ContextMenuCheckboxItem,
+  type ContextMenuCheckboxItemEmits,
+  type ContextMenuCheckboxItemProps,
+  ContextMenuItemIndicator,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+import RadixIconsCheck from '~icons/radix-icons/check'
+
+const props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>()
+
+const emits = defineEmits<ContextMenuCheckboxItemEmits>()
+</script>
+
+<template>
+  <ContextMenuCheckboxItem
+    v-bind="props"
+    :class="[
+      cn(
+        'flex relative items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover pl-7 py-1.5 text-sm outline-none select-none cursor-default',
+        props.class,
+      ),
+    ]"
+    @update:checked="emits('update:checked', $event)"
+  >
+    <ContextMenuItemIndicator
+      class="absolute left-1.5 inline-flex w-4 h-4 items-center justify-center"
+    >
+      <RadixIconsCheck />
+    </ContextMenuItemIndicator>
+    <slot />
+  </ContextMenuCheckboxItem>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue
new file mode 100644
index 00000000..e659c603
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import {
+  ContextMenuContent,
+  type ContextMenuContentEmits,
+  type ContextMenuContentProps,
+  ContextMenuPortal,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ContextMenuContentProps & { class?: string }>()
+
+const emits = defineEmits<ContextMenuContentEmits>()
+</script>
+
+<template>
+  <ContextMenuPortal force-mount>
+    <ContextMenuContent
+      :loop="props.loop"
+      :align-offset="props.alignOffset"
+      :as-child="props.asChild"
+      :class="[
+        cn(
+          'bg-background focus:outline-none outline-none border border-border p-1 z-50 min-w-[8rem] rounded-md shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        ),
+      ]"
+    >
+      <slot />
+    </ContextMenuContent>
+  </ContextMenuPortal>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuGroup.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuGroup.vue
new file mode 100644
index 00000000..b7458d77
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuGroup.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ContextMenuGroup, type ContextMenuGroupProps } from 'radix-vue'
+
+const props = defineProps<ContextMenuGroupProps>()
+</script>
+
+<template>
+  <ContextMenuGroup v-bind="props">
+    <slot />
+  </ContextMenuGroup>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue
new file mode 100644
index 00000000..3eac857b
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import {
+  ContextMenuItem,
+  type ContextMenuItemEmits,
+  type ContextMenuItemProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ContextMenuItemProps & { class?: string }>()
+
+const emits = defineEmits<ContextMenuItemEmits>()
+</script>
+
+<template>
+  <ContextMenuItem
+    v-bind="props"
+    :class="[
+      cn(
+        'flex items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none focus:bg-outline-hover px-2 py-1.5 text-sm outline-none select-none cursor-default',
+        props.class,
+      ),
+    ]"
+    @select="emits('select', $event)"
+  >
+    <slot />
+  </ContextMenuItem>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue
new file mode 100644
index 00000000..972088a3
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
+
+const props = defineProps<ContextMenuLabelProps>()
+</script>
+
+<template>
+  <div class="px-2 py-1.5 text-sm font-semibold">
+    <ContextMenuLabel v-bind="props">
+      <slot />
+    </ContextMenuLabel>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioGroup.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioGroup.vue
new file mode 100644
index 00000000..bb0b173d
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioGroup.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import {
+  ContextMenuRadioGroup,
+  type ContextMenuRadioGroupEmits,
+  type ContextMenuRadioGroupProps,
+} from 'radix-vue'
+
+const props = defineProps<ContextMenuRadioGroupProps>()
+
+const emits = defineEmits<ContextMenuRadioGroupEmits>()
+</script>
+
+<template>
+  <ContextMenuRadioGroup
+    v-bind="props"
+    @update:model-value="emits('update:modelValue', $event)"
+  >
+    <slot />
+  </ContextMenuRadioGroup>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue
new file mode 100644
index 00000000..0ed025cc
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import {
+  ContextMenuItemIndicator,
+  ContextMenuRadioItem,
+  type ContextMenuRadioItemEmits,
+  type ContextMenuRadioItemProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+import RiCheckboxBlankCircleFill from '~icons/ri/checkbox-blank-circle-fill'
+
+const props = defineProps<ContextMenuRadioItemProps & { class?: string }>()
+
+const emits = defineEmits<ContextMenuRadioItemEmits>()
+</script>
+
+<template>
+  <ContextMenuRadioItem
+    v-bind="props"
+    :class="[
+      cn(
+        'flex relative items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover pl-7 py-1.5 text-sm outline-none select-none cursor-default',
+        props.class,
+      ),
+    ]"
+    @select="emits('select', $event)"
+  >
+    <ContextMenuItemIndicator
+      class="absolute left-2 inline-flex w-2 h-2 items-center justify-center"
+    >
+      <RiCheckboxBlankCircleFill class="text-foreground" />
+    </ContextMenuItemIndicator>
+    <slot />
+  </ContextMenuRadioItem>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSeparator.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSeparator.vue
new file mode 100644
index 00000000..d7fe1aec
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSeparator.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import {
+  ContextMenuSeparator,
+  type ContextMenuSeparatorProps,
+} from 'radix-vue'
+
+const props = defineProps<ContextMenuSeparatorProps>()
+</script>
+
+<template>
+  <ContextMenuSeparator v-bind="props" class="-mx-1 my-1 h-px bg-secondary" />
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue
new file mode 100644
index 00000000..5be2acac
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="text-xxs ml-auto tracking-widest opacity-50">
+    <slot />
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSub.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSub.vue
new file mode 100644
index 00000000..80471807
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSub.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import {
+  ContextMenuSub,
+  type ContextMenuSubEmits,
+  type ContextMenuSubProps,
+} from 'radix-vue'
+
+const props = defineProps<ContextMenuSubProps>()
+
+const emits = defineEmits<ContextMenuSubEmits>()
+</script>
+
+<template>
+  <ContextMenuSub v-bind="props" @update:open="emits('update:open', $event)">
+    <slot />
+  </ContextMenuSub>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue
new file mode 100644
index 00000000..c7a4cdd2
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import {
+  ContextMenuPortal,
+  ContextMenuSubContent,
+  type DropdownMenuSubContentEmits,
+  type DropdownMenuSubContentProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: string }>()
+
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+</script>
+
+<template>
+  <ContextMenuPortal force-mount>
+    <ContextMenuSubContent
+      :loop="props.loop"
+      :align-offset="props.alignOffset"
+      :side="props.side"
+      :side-offset="props.sideOffset"
+      :as-child="props.asChild"
+      :class="
+        cn(
+          'bg-background focus:outline-none outline-none text-foreground border border-border p-1 z-50 min-w-[10rem] rounded-md shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </ContextMenuSubContent>
+  </ContextMenuPortal>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
new file mode 100644
index 00000000..2145acbb
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import {
+  ContextMenuSubTrigger,
+  type ContextMenuSubTriggerProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ContextMenuSubTriggerProps & { class?: string }>()
+</script>
+
+<template>
+  <ContextMenuSubTrigger
+    v-bind="props"
+    :class="[
+      cn(
+        'flex items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover px-2 py-1.5 text-sm outline-none select-none cursor-default',
+        props.class,
+      ),
+    ]"
+  >
+    <slot />
+  </ContextMenuSubTrigger>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuTrigger.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuTrigger.vue
new file mode 100644
index 00000000..9747cc1a
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ContextMenuTrigger, type ContextMenuTriggerProps } from 'radix-vue'
+
+const props = defineProps<ContextMenuTriggerProps>()
+</script>
+
+<template>
+  <ContextMenuTrigger v-bind="props">
+    <slot />
+  </ContextMenuTrigger>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/index.ts b/apps/www/src/lib/registry/default/ui/context-menu/index.ts
new file mode 100644
index 00000000..157f7b1d
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/context-menu/index.ts
@@ -0,0 +1,14 @@
+export { default as ContextMenu } from './ContextMenu.vue'
+export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'
+export { default as ContextMenuContent } from './ContextMenuContent.vue'
+export { default as ContextMenuGroup } from './ContextMenuGroup.vue'
+export { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'
+export { default as ContextMenuItem } from './ContextMenuItem.vue'
+export { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'
+export { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'
+export { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'
+export { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'
+export { default as ContextMenuLabel } from './ContextMenuLabel.vue'
+export { default as ContextMenuSub } from './ContextMenuSub.vue'
+export { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'
+export { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'
diff --git a/apps/www/src/lib/registry/default/ui/data-table/DataTable.vue b/apps/www/src/lib/registry/default/ui/data-table/DataTable.vue
new file mode 100644
index 00000000..33622dec
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/data-table/DataTable.vue
@@ -0,0 +1,327 @@
+<script setup lang="ts">
+import {
+  type ColumnDef,
+  FlexRender,
+  type SortingState,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useVueTable,
+} from '@tanstack/vue-table'
+import { computed, ref } from 'vue'
+import {
+  ArrowDownNarrowWide,
+  ArrowUpDown,
+  ArrowUpNarrowWide,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  X,
+} from 'lucide-vue-next'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableEmpty,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../table'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../dropdown-menu'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+} from '../select'
+import { Input } from '../input'
+import { Button } from '../button'
+import RadixIconsMixerHorizontal from '~icons/radix-icons/mixer-horizontal'
+
+interface tableProps {
+  data: any[]
+  columns: ColumnDef<any>[]
+}
+
+const props = defineProps<tableProps>()
+
+const sorting = ref<SortingState>([])
+const globalFilter = ref('')
+const columnVisibility = ref({})
+const rowSelection = ref({})
+const pageSizes = computed(() => [10, 20, 30, 40, 50])
+
+const table = useVueTable({
+  data: props.data,
+  columns: props.columns,
+  state: {
+    get sorting() {
+      return sorting.value
+    },
+    get globalFilter() {
+      return globalFilter.value
+    },
+    get columnVisibility() {
+      return columnVisibility.value
+    },
+    get rowSelection() {
+      return rowSelection.value
+    },
+  },
+  onSortingChange: (updaterOrValue) => {
+    sorting.value
+      = typeof updaterOrValue === 'function'
+        ? updaterOrValue(sorting.value)
+        : updaterOrValue
+  },
+  onGlobalFilterChange: (updaterOrValue) => {
+    globalFilter.value
+      = typeof updaterOrValue === 'function'
+        ? updaterOrValue(globalFilter.value)
+        : updaterOrValue
+  },
+  onRowSelectionChange: (updaterOrValue) => {
+    rowSelection.value
+      = typeof updaterOrValue === 'function'
+        ? updaterOrValue(rowSelection.value)
+        : updaterOrValue
+  },
+  getCoreRowModel: getCoreRowModel(),
+  getSortedRowModel: getSortedRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+  getFilteredRowModel: getFilteredRowModel(),
+})
+
+function toggleColumnVisibility(column: any) {
+  columnVisibility.value = {
+    ...columnVisibility.value,
+    [column.id]: !column.getIsVisible(),
+  }
+}
+
+const pageSize = computed({
+  get() {
+    return table.getState().pagination.pageSize.toString()
+  },
+  set(value) {
+    table.setPageSize(Number(value))
+  },
+})
+</script>
+
+<template>
+  <div class="flex items-center justify-between">
+    <div class="flex flex-1 items-center space-x-2">
+      <div class="w-full max-w-[18rem]">
+        <Input
+          v-model:value="globalFilter"
+          placeholder="Filter tasks..."
+          class="h-8"
+        />
+      </div>
+      <Button
+        v-if="globalFilter"
+        variant="ghost"
+        class="h-8"
+        @click="globalFilter = ''"
+      >
+        <span class="text-xs">Reset</span>
+        <X class="w-4 h-4 ml-1" />
+      </Button>
+    </div>
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Button variant="outline" class="h-8">
+          <RadixIconsMixerHorizontal class="w-3.5 h-3.5 mr-2" />
+          <span class="text-xs">View</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" class="w-40">
+        <DropdownMenuLabel> Toggle Columns </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuCheckboxItem
+            v-for="column in table
+              .getAllColumns()
+              .filter((column) => !column.getCanHide())"
+            :key="column.id"
+            :checked="column.getIsVisible()"
+            @update:checked="toggleColumnVisibility(column)"
+          >
+            <span class="text-sm">{{ column.columnDef.header }}</span>
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+
+  <Table class="mt-4 rounded-md border border-border">
+    <TableHeader>
+      <TableRow
+        v-for="headerGroup in table.getHeaderGroups()"
+        :key="headerGroup.id"
+      >
+        <TableHead
+          v-for="header in headerGroup.headers"
+          :key="header.id"
+          class="h-10 px-2.5"
+          :col-span="header.colSpan"
+        >
+          <template v-if="!header.isPlaceholder">
+            <div class="flex items-center space-x-2">
+              <Button
+                v-if="header.column.getCanSort()"
+                variant="ghost"
+                class="h-8 -translate-x-3"
+                @click="header.column.getToggleSortingHandler()?.($event)"
+              >
+                <FlexRender
+                  :render="header.column.columnDef.header"
+                  :props="header.getContext()"
+                />
+                <ArrowUpDown
+                  v-if="
+                    header.column.getCanSort() && !header.column.getIsSorted()
+                  "
+                  class="w-3.5 h-3.5 ml-1.5 text-muted"
+                />
+                <ArrowUpNarrowWide
+                  v-if="header.column.getIsSorted() === 'asc'"
+                  class="w-3.5 h-3.5 ml-1.5 text-muted"
+                />
+                <ArrowDownNarrowWide
+                  v-if="header.column.getIsSorted() === 'desc'"
+                  class="w-3.5 h-3.5 ml-1.5 text-muted"
+                />
+              </Button>
+              <span
+                v-else
+                class="flex items-center justify-center h-8 text-foreground"
+              >
+                <FlexRender
+                  :render="header.column.columnDef.header"
+                  :props="header.getContext()"
+                />
+              </span>
+            </div>
+          </template>
+        </TableHead>
+      </TableRow>
+    </TableHeader>
+
+    <TableBody>
+      <TableRow
+        v-for="row in table.getRowModel().rows"
+        :key="row.id"
+        :class="row.getIsSelected() ? 'bg-outline-hover' : ''"
+      >
+        <TableCell
+          v-for="cell in row.getVisibleCells()"
+          :key="cell.id"
+          class="p-2.5"
+        >
+          <FlexRender
+            :render="cell.column.columnDef.cell"
+            :props="cell.getContext()"
+          />
+        </TableCell>
+      </TableRow>
+
+      <TableEmpty
+        v-if="table.getRowModel().rows.length === 0"
+        :colspan="table.getAllLeafColumns().length"
+      >
+        No data available.
+      </TableEmpty>
+    </TableBody>
+  </Table>
+
+  <div class="flex items-center justify-end px-2 my-6">
+    <div class="flex-1 text-sm text-muted">
+      <span>
+        {{ table.getFilteredSelectedRowModel().rows.length }} of {{ " " }}
+        {{ table.getFilteredRowModel().rows.length }} row(s) selected
+      </span>
+    </div>
+    <div class="flex items-center space-x-6 lg:space-x-8">
+      <div class="md:flex items-center space-x-2 hidden">
+        <p class="text-sm font-medium text-foreground">
+          Rows per page:
+        </p>
+        <Select v-model="pageSize">
+          <SelectTrigger class="h-8 w-[70px]">
+            {{ table.getState().pagination.pageSize }}
+          </SelectTrigger>
+          <SelectContent side="top" align="start">
+            <SelectGroup>
+              <SelectItem
+                v-for="pageSize in pageSizes"
+                :key="pageSize"
+                :value="`${pageSize}`"
+              >
+                {{ pageSize }}
+              </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div
+        class="flex text-foreground items-center justify-center text-sm font-medium"
+      >
+        Page {{ table.getState().pagination.pageIndex + 1 }} of
+        {{ table.getPageCount() }}
+      </div>
+
+      <div class="flex items-center space-x-2">
+        <Button
+          variant="outline"
+          title="First page"
+          class="h-8 w-8 p-0"
+          :disabled="!table.getCanPreviousPage()"
+          @click="table.setPageIndex(0)"
+        >
+          <ChevronsLeft class="w-4 h-4" />
+        </Button>
+        <Button
+          variant="outline"
+          title="Previous page"
+          class="h-8 w-8 p-0"
+          :disabled="!table.getCanPreviousPage()"
+          @click="table.previousPage()"
+        >
+          <ChevronLeft class="w-4 h-4" />
+        </Button>
+        <Button
+          variant="outline"
+          title="Next page"
+          class="h-8 w-8 p-0"
+          :disabled="!table.getCanNextPage()"
+          @click="table.nextPage()"
+        >
+          <ChevronRight class="w-4 h-4" />
+        </Button>
+        <Button
+          variant="outline"
+          title="Last page"
+          class="h-8 w-8 p-0"
+          :disabled="!table.getCanNextPage()"
+          @click="table.setPageIndex(table.getPageCount() - 1)"
+        >
+          <ChevronsRight class="w-4 h-4" />
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/data-table/index.ts b/apps/www/src/lib/registry/default/ui/data-table/index.ts
new file mode 100644
index 00000000..4336ee8b
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/data-table/index.ts
@@ -0,0 +1 @@
+export { default as DataTable } from './DataTable.vue'
diff --git a/apps/www/src/lib/registry/default/ui/date-picker/DatePicker.vue b/apps/www/src/lib/registry/default/ui/date-picker/DatePicker.vue
new file mode 100644
index 00000000..b83b3837
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/date-picker/DatePicker.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { useDark } from '@vueuse/core'
+import { DatePicker } from 'v-calendar'
+import 'v-calendar/style.css'
+
+const isDark = useDark()
+</script>
+
+<template>
+  <DatePicker :is-dark="isDark" borderless trim-weeks expanded />
+</template>
+
+<style>
+:root {
+  --vc-font-family: "Inter", sans-serif;
+  --vc-rounded-full: var(--radius);
+  --vc-font-bold: 500;
+  --vc-font-semibold: 600;
+  --vc-text-lg: 14px;
+}
+
+.vc-light,
+.vc-dark {
+  --vc-bg: var(--background);
+  --vc-border: var(--border);
+  --vc-focus-ring: 0 0 0 3px rgba(0, 0, 0, 0.2);
+  --vc-weekday-color: var(--muted);
+  --vc-popover-content-color: var(--muted);
+  --vc-popover-content-bg: var(--background);
+  --vc-popover-content-border: var(--border);
+
+  &.vc-attr,
+  & .vc-attr {
+    --vc-content-color: var(--primary);
+    --vc-highlight-outline-bg: var(--primary);
+    --vc-highlight-outline-border: var(--primary);
+    --vc-highlight-outline-content-color: var(--primary-foreground);
+    --vc-highlight-light-bg: var(
+      --vc-accent-200
+    ); /* Highlighted color between two dates */
+    --vc-highlight-light-content-color: var(--secondary-foreground);
+    --vc-highlight-solid-bg: var(--primary);
+    --vc-highlight-solid-content-color: var(--primary-foreground);
+    --vc-dot-bg: var(--primary);
+    --vc-bar-bg: var(--primary);
+  }
+}
+
+.vc-blue {
+  --vc-accent-200: var(--secondary);
+  --vc-accent-400: var(--primary);
+  --vc-accent-500: var(--primary);
+  --vc-accent-600: var(--primary);
+}
+
+.dark {
+  .vc-blue {
+    --vc-accent-200: var(--secondary);
+    --vc-accent-400: var(--primary);
+    --vc-accent-500: var(--secondary);
+  }
+}
+</style>
diff --git a/apps/www/src/lib/registry/default/ui/date-picker/index.ts b/apps/www/src/lib/registry/default/ui/date-picker/index.ts
new file mode 100644
index 00000000..82ac2dc4
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/date-picker/index.ts
@@ -0,0 +1 @@
+export { default as DatePicker } from './DatePicker.vue'
diff --git a/apps/www/src/lib/registry/default/ui/dialog.ts b/apps/www/src/lib/registry/default/ui/dialog.ts
deleted file mode 100644
index 35ee5ad3..00000000
--- a/apps/www/src/lib/registry/default/ui/dialog.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { defineComponent, h } from 'vue'
-import {
-  DialogClose, type DialogContentEmits, DialogContent as DialogContentPrimitive, type DialogContentProps,
-  DialogDescription as DialogDescriptionPrimitive, type DialogDescriptionProps,
-  DialogOverlay as DialogOverlayPrimitive, type DialogOverlayProps,
-  DialogPortal as DialogPortalPrimitive, DialogRoot,
-  DialogTitle as DialogTitlePrimitive, type DialogTitleProps,
-  DialogTrigger as DialogTriggerPrimitive,
-} from 'radix-vue'
-import { X } from 'lucide-vue-next'
-import type { ParseEmits } from '@/utils'
-import { cn, useEmitAsProps } from '@/utils'
-
-export const Dialog = DialogRoot
-export const DialogTrigger = DialogTriggerPrimitive
-export const DialogPortal = DialogPortalPrimitive
-
-export const DialogOverlay = defineComponent<DialogOverlayProps>(
-  (props, { attrs, slots }) => {
-    return () => h(DialogOverlayPrimitive,
-      { class: cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', attrs.class), ...props },
-      slots,
-    )
-  }, { name: 'DialogOverlay' },
-)
-
-export const DialogContent = defineComponent<DialogContentProps, ParseEmits<DialogContentEmits>>(
-  (props, { emit, attrs, slots }) => {
-    const emitsAsProps = useEmitAsProps(emit)
-
-    return () => h(DialogPortal, () => [
-      h(DialogOverlay),
-      h(DialogContentPrimitive, {
-        class: cn('fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full', attrs.class ?? ''),
-        ...props,
-        ...emitsAsProps,
-      }, () => [
-        slots.default(),
-        h(DialogClose,
-          { class: 'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground' },
-          () => [h(X, { class: 'h-4 w-4' }), h('span', { class: 'sr-only' }, 'Close')],
-        ),
-      ]),
-    ])
-  }, { name: 'DialogContent', emits: DialogContentPrimitive.emits },
-)
-
-export const DialogHeader = defineComponent(
-  (_props, { attrs, slots }) => {
-    return () => h('div',
-      { class: cn('flex flex-col space-y-1.5 text-center sm:text-left', attrs.class) },
-      slots,
-    )
-  }, { name: 'DialogHeader' },
-)
-
-export const DialogFooter = defineComponent(
-  (_props, { attrs, slots }) => {
-    return () => h('div',
-      { class: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', attrs.class) },
-      slots,
-    )
-  }, { name: 'DialogFooter' },
-)
-
-export const DialogTitle = defineComponent<DialogTitleProps>(
-  (props, { attrs, slots }) => {
-    return () => h(DialogTitlePrimitive,
-      { class: cn('text-lg font-semibold leading-none tracking-tight', attrs.class), ...props },
-      slots,
-    )
-  }, { name: 'DialogTitle' },
-)
-
-export const DialogDescription = defineComponent<DialogDescriptionProps>(
-  (props, { attrs, slots }) => {
-    return () => h(DialogDescriptionPrimitive,
-      { class: cn('text-lg font-semibold leading-none tracking-tight', attrs.class), ...props },
-      slots,
-    )
-  }, { name: 'DialogDescription' },
-)
diff --git a/apps/www/src/lib/registry/default/ui/dialog/Dialog.vue b/apps/www/src/lib/registry/default/ui/dialog/Dialog.vue
new file mode 100644
index 00000000..65d92c86
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dialog/Dialog.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { DialogRoot } from 'radix-vue'
+</script>
+
+<template>
+  <DialogRoot>
+    <slot />
+  </DialogRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
new file mode 100644
index 00000000..74372fba
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+} from 'radix-vue'
+import { X } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogContentProps & { class?: string }>()
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-white/80 dark:bg-gray-950/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      :as-child="props.asChild"
+      :class="
+        cn(
+          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+          props.class,
+        )
+      "
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+      >
+        <X class="w-4 h-4 text-muted" />
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogDescription.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogDescription.vue
new file mode 100644
index 00000000..6bf85cfa
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogDescription.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogDescriptionProps & { class?: string }>()
+</script>
+
+<template>
+  <DialogDescription
+    v-bind="props"
+    :class="cn('text-muted text-sm', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogFooter.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogFooter.vue
new file mode 100644
index 00000000..734623f2
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogFooter.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface DialogFooterProps {
+  class?: string
+}
+
+const props = defineProps<DialogFooterProps>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col space-y-2 sm:space-y-0 mt-1.5 sm:flex-row sm:justify-end sm:space-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue
new file mode 100644
index 00000000..ad3340bd
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface DialogHeaderProps {
+  class?: string
+}
+
+const props = defineProps<DialogHeaderProps>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogTitle.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogTitle.vue
new file mode 100644
index 00000000..5e748aae
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogTitle.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { DialogTitle, type DialogTitleProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogTitleProps & { class?: string }>()
+</script>
+
+<template>
+  <DialogTitle
+    v-bind="props"
+    :class="
+      cn(
+        'text-lg text-foreground font-semibold leading-none tracking-tight',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogTrigger.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogTrigger.vue
new file mode 100644
index 00000000..ee0c12ff
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from 'radix-vue'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dialog/index.ts b/apps/www/src/lib/registry/default/ui/dialog/index.ts
new file mode 100644
index 00000000..5cffe9e9
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dialog/index.ts
@@ -0,0 +1,7 @@
+export { default as Dialog } from './Dialog.vue'
+export { default as DialogTrigger } from './DialogTrigger.vue'
+export { default as DialogHeader } from './DialogHeader.vue'
+export { default as DialogTitle } from './DialogTitle.vue'
+export { default as DialogDescription } from './DialogDescription.vue'
+export { default as DialogContent } from './DialogContent.vue'
+export { default as DialogFooter } from './DialogFooter.vue'
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenu.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenu.vue
new file mode 100644
index 00000000..b2b57f0e
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenu.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DropdownMenuRoot, type DropdownMenuRootProps } from 'radix-vue'
+
+const props = defineProps<DropdownMenuRootProps>()
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="props">
+    <slot />
+  </DropdownMenuRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
new file mode 100644
index 00000000..55fb1f76
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import {
+  DropdownMenuCheckboxItem,
+  type DropdownMenuCheckboxItemEmits,
+  type DropdownMenuCheckboxItemProps,
+  DropdownMenuItemIndicator,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+import RadixIconsCheck from '~icons/radix-icons/check'
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()
+
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    v-bind="props"
+    :class="[
+      cn(
+        'flex relative items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover pl-7 py-1.5 text-sm outline-none select-none cursor-default',
+        props.class,
+      ),
+    ]"
+    @update:checked="emits('update:checked', $event)"
+    @select="emits('select', $event)"
+  >
+    <DropdownMenuItemIndicator
+      class="absolute left-1.5 inline-flex w-4 h-4 items-center justify-center"
+    >
+      <RadixIconsCheck />
+    </DropdownMenuItemIndicator>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
new file mode 100644
index 00000000..fb2e5941
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import {
+  DropdownMenuContent,
+  type DropdownMenuContentProps,
+  DropdownMenuPortal,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: string }>(),
+  {
+    sideOffset: 6,
+  },
+)
+</script>
+
+<template>
+  <DropdownMenuPortal force-mount>
+    <DropdownMenuContent
+      :loop="props.loop"
+      :as-child="props.asChild"
+      :side-offset="props.sideOffset"
+      :side="props.side"
+      :align="props.align"
+      :align-offset="props.alignOffset"
+      :class="[
+        cn(
+          'bg-background focus:outline-none outline-none border border-border p-1 z-50 min-w-[8rem] rounded-md shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        ),
+      ]"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuGroup.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuGroup.vue
new file mode 100644
index 00000000..3f201352
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue'
+
+const props = defineProps<DropdownMenuGroupProps>()
+</script>
+
+<template>
+  <DropdownMenuGroup v-bind="props">
+    <slot />
+  </DropdownMenuGroup>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
new file mode 100644
index 00000000..ed2a845b
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { DropdownMenuItem, type DropdownMenuItemProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DropdownMenuItemProps & { class?: string }>()
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="props"
+    :class="[
+      cn(
+        'flex items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none focus:bg-outline-hover px-2 py-1.5 text-sm outline-none select-none cursor-default',
+        props.class,
+      ),
+    ]"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
new file mode 100644
index 00000000..e176e081
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { DropdownMenuLabel, type DropdownMenuLabelProps } from 'radix-vue'
+
+const props = defineProps<DropdownMenuLabelProps>()
+</script>
+
+<template>
+  <div class="px-2 py-1.5 text-sm font-semibold">
+    <DropdownMenuLabel v-bind="props">
+      <slot />
+    </DropdownMenuLabel>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue
new file mode 100644
index 00000000..5bdc41f7
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import {
+  DropdownMenuRadioGroup,
+  type DropdownMenuRadioGroupEmits,
+  type DropdownMenuRadioGroupProps,
+} from 'radix-vue'
+
+const props = defineProps<DropdownMenuRadioGroupProps>()
+
+const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+</script>
+
+<template>
+  <DropdownMenuRadioGroup
+    v-bind="props"
+    @update:model-value="emits('update:modelValue', $event)"
+  >
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
new file mode 100644
index 00000000..41e5ae3c
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+  type DropdownMenuRadioItemEmits,
+  type DropdownMenuRadioItemProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+import RiCheckboxBlankCircleFill from '~icons/ri/checkbox-blank-circle-fill'
+
+const props = defineProps<DropdownMenuRadioItemProps & { class?: string }>()
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>()
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    v-bind="props"
+    :class="[
+      cn(
+        'flex relative items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover pl-7 py-1.5 text-sm outline-none select-none cursor-default',
+        props.class,
+      ),
+    ]"
+    @select="emits('select', $event)"
+  >
+    <DropdownMenuItemIndicator
+      class="absolute left-2 inline-flex w-2 h-2 items-center justify-center"
+    >
+      <RiCheckboxBlankCircleFill class="text-foreground" />
+    </DropdownMenuItemIndicator>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue
new file mode 100644
index 00000000..73829446
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import {
+  DropdownMenuSeparator,
+  type DropdownMenuSeparatorProps,
+} from 'radix-vue'
+
+const props = defineProps<DropdownMenuSeparatorProps>()
+</script>
+
+<template>
+  <DropdownMenuSeparator v-bind="props" class="-mx-1 my-1 h-px bg-secondary" />
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue
new file mode 100644
index 00000000..5be2acac
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="text-xxs ml-auto tracking-widest opacity-50">
+    <slot />
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSub.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSub.vue
new file mode 100644
index 00000000..7589389f
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSub.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import {
+  DropdownMenuSub,
+  type DropdownMenuSubEmits,
+  type DropdownMenuSubProps,
+} from 'radix-vue'
+
+const props = defineProps<DropdownMenuSubProps>()
+
+const emits = defineEmits<DropdownMenuSubEmits>()
+</script>
+
+<template>
+  <DropdownMenuSub v-bind="props" @update:open="emits('update:open', $event)">
+    <slot />
+  </DropdownMenuSub>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
new file mode 100644
index 00000000..cac40f96
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import {
+  DropdownMenuPortal,
+  DropdownMenuSubContent,
+  type DropdownMenuSubContentEmits,
+  type DropdownMenuSubContentProps,
+} from 'radix-vue'
+
+const props = defineProps<DropdownMenuSubContentProps>()
+
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+</script>
+
+<template>
+  <DropdownMenuPortal force-mount>
+    <DropdownMenuSubContent
+      :loop="props.loop"
+      :as-child="props.asChild"
+      :side-offset="props.sideOffset"
+      :side="props.side"
+      :align="props.align"
+      :align-offset="props.alignOffset"
+      class="bg-background focus:outline-none outline-none text-foreground border border-border p-1 z-50 min-w-[10rem] rounded-md shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+    >
+      <slot />
+    </DropdownMenuSubContent>
+  </DropdownMenuPortal>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
new file mode 100644
index 00000000..7679296d
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import {
+  DropdownMenuSubTrigger,
+  type DropdownMenuSubTriggerProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    v-bind="props"
+    :class="[
+      cn(
+        'flex items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover px-2 py-1.5 text-sm outline-none select-none cursor-default',
+        props.class,
+      ),
+    ]"
+  >
+    <slot />
+  </DropdownMenuSubTrigger>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue
new file mode 100644
index 00000000..73d88670
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DropdownMenuTrigger, type DropdownMenuTriggerProps } from 'radix-vue'
+
+const props = defineProps<DropdownMenuTriggerProps>()
+</script>
+
+<template>
+  <DropdownMenuTrigger class="outline-none" v-bind="props">
+    <slot />
+  </DropdownMenuTrigger>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/index.ts b/apps/www/src/lib/registry/default/ui/dropdown-menu/index.ts
new file mode 100644
index 00000000..b069c39b
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/index.ts
@@ -0,0 +1,14 @@
+export { default as DropdownMenu } from './DropdownMenu.vue'
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
diff --git a/apps/www/src/lib/registry/default/ui/hover-card/HoverCard.vue b/apps/www/src/lib/registry/default/ui/hover-card/HoverCard.vue
new file mode 100644
index 00000000..00fb9c04
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/hover-card/HoverCard.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { HoverCardRoot, type HoverCardRootProps } from 'radix-vue'
+
+const props = defineProps<HoverCardRootProps>()
+</script>
+
+<template>
+  <HoverCardRoot v-bind="props">
+    <slot />
+  </HoverCardRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/hover-card/HoverCardContent.vue b/apps/www/src/lib/registry/default/ui/hover-card/HoverCardContent.vue
new file mode 100644
index 00000000..eef7d526
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/hover-card/HoverCardContent.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import {
+  HoverCardContent,
+  type HoverCardContentProps,
+  HoverCardPortal,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<HoverCardContentProps & { class?: string }>(),
+  {
+    sideOffset: 4,
+  },
+)
+</script>
+
+<template>
+  <HoverCardPortal>
+    <HoverCardContent
+      v-bind="props"
+      :class="
+        cn(
+          'z-50 w-64 rounded-md bg-background border border-border p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </HoverCardContent>
+  </HoverCardPortal>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/hover-card/HoverCardTrigger.vue b/apps/www/src/lib/registry/default/ui/hover-card/HoverCardTrigger.vue
new file mode 100644
index 00000000..3e300b95
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/hover-card/HoverCardTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { HoverCardTrigger, type HoverCardTriggerProps } from 'radix-vue'
+
+const props = defineProps<HoverCardTriggerProps>()
+</script>
+
+<template>
+  <HoverCardTrigger v-bind="props">
+    <slot />
+  </HoverCardTrigger>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/hover-card/index.ts b/apps/www/src/lib/registry/default/ui/hover-card/index.ts
new file mode 100644
index 00000000..c7bfd32d
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/hover-card/index.ts
@@ -0,0 +1,3 @@
+export { default as HoverCard } from './HoverCard.vue'
+export { default as HoverCardTrigger } from './HoverCardTrigger.vue'
+export { default as HoverCardContent } from './HoverCardContent.vue'
diff --git a/apps/www/src/lib/registry/default/ui/input.ts b/apps/www/src/lib/registry/default/ui/input.ts
deleted file mode 100644
index 9f3b58dc..00000000
--- a/apps/www/src/lib/registry/default/ui/input.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { defineComponent, h } from 'vue'
-import { cn } from '@/utils'
-
-export const Input = defineComponent(
-  (_props, { attrs, slots }) => {
-    return () => h('input',
-      { class: cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', attrs.class ?? '') },
-      slots)
-  },
-  { name: 'Input' },
-)
diff --git a/apps/www/src/lib/registry/default/ui/input/Input.vue b/apps/www/src/lib/registry/default/ui/input/Input.vue
new file mode 100644
index 00000000..f0e2b0f7
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/input/Input.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { AlertTriangle } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+interface InputProps {
+  id?: string
+  value?: string
+  type?: string
+  placeholder?: string
+  required?: boolean
+  disabled?: boolean
+  invalid?: boolean
+  helperText?: string
+  class?: string
+}
+
+const props = withDefaults(defineProps<InputProps>(), {
+  id: '',
+  value: '',
+  type: 'text',
+  placeholder: '',
+  required: false,
+  disabled: false,
+  invalid: false,
+  helperText: '',
+})
+
+const emit = defineEmits(['update:value'])
+
+function handleInput(event: Event) {
+  emit('update:value', (event.target as HTMLInputElement).value)
+}
+</script>
+
+<template>
+  <div :class="cn('relative', props.class)">
+    <input
+      :id="props.id"
+      :value="props.value"
+      :type="props.type"
+      :required="props.required"
+      :placeholder="props.placeholder"
+      :disabled="props.disabled"
+      :class="[
+        props.invalid
+          ? '!ring-destructive ring-2 placeholder:!text-destructive'
+          : '',
+        props.disabled ? 'cursor-not-allowed opacity-50' : '',
+        cn(
+          'px-3 h-9 bg-transparent block w-full outline-none focus:ring-2 focus:ring-accent ring-secondary placeholder:text-muted rounded-md text-sm ring-1 text-foreground',
+          props.class,
+        ),
+      ]"
+      @input="handleInput"
+    >
+    <div
+      class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"
+    >
+      <AlertTriangle v-if="props.invalid" class="w-4 h-4 text-destructive" />
+    </div>
+  </div>
+  <p
+    v-if="props.helperText && !props.invalid"
+    class="gap-1 leading-5 text-[13px] text-muted"
+  >
+    {{ props.helperText }}
+  </p>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/input/index.ts b/apps/www/src/lib/registry/default/ui/input/index.ts
new file mode 100644
index 00000000..a691dd6c
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/input/index.ts
@@ -0,0 +1 @@
+export { default as Input } from './Input.vue'
diff --git a/apps/www/src/lib/registry/default/ui/kbd/Kbd.vue b/apps/www/src/lib/registry/default/ui/kbd/Kbd.vue
new file mode 100644
index 00000000..856e8529
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/kbd/Kbd.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { cva } from 'class-variance-authority'
+import { computed } from 'vue'
+
+interface KbdProps {
+  as?: string
+  size?: 'xs' | 'sm' | 'md'
+}
+
+const props = withDefaults(defineProps<KbdProps>(), {
+  as: 'kbd',
+  size: 'sm',
+})
+
+const kbdClass = computed(() => {
+  return cva(
+    'inline-flex items-center font-sans justify-center text-foreground rounded font-semibold bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
+    {
+      variants: {
+        size: {
+          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',
+        },
+      },
+    },
+  )({
+    size: props.size,
+  })
+})
+</script>
+
+<template>
+  <component :is="props.as" :class="kbdClass">
+    <slot />
+  </component>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/kbd/index.ts b/apps/www/src/lib/registry/default/ui/kbd/index.ts
new file mode 100644
index 00000000..0a7d6d2a
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/kbd/index.ts
@@ -0,0 +1 @@
+export { default as Kbd } from './Kbd.vue'
diff --git a/apps/www/src/lib/registry/default/ui/label.ts b/apps/www/src/lib/registry/default/ui/label.ts
deleted file mode 100644
index 8df77c27..00000000
--- a/apps/www/src/lib/registry/default/ui/label.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { defineComponent, h } from 'vue'
-import { type VariantProps, cva } from 'class-variance-authority'
-import { type LabelProps } from 'radix-vue'
-import { cn } from '@/utils'
-
-export const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-)
-
-interface Props extends LabelProps, VariantProps<typeof labelVariants> {}
-
-export const Label = defineComponent<Props>(
-  (props, { attrs, slots }) => {
-    return () => h('label', { class: cn(labelVariants(), attrs.class ?? ''), ...props }, slots)
-  },
-  { name: 'Label' },
-)
diff --git a/apps/www/src/lib/registry/default/ui/label/Label.vue b/apps/www/src/lib/registry/default/ui/label/Label.vue
new file mode 100644
index 00000000..e44d139e
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/label/Label.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { Label, type LabelProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<LabelProps & { class?: string }>()
+</script>
+
+<template>
+  <Label
+    v-bind="props"
+    :class="
+      cn(
+        'block text-sm tracking-tight font-medium text-foreground text-left',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/label/index.ts b/apps/www/src/lib/registry/default/ui/label/index.ts
new file mode 100644
index 00000000..572c2f01
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/label/index.ts
@@ -0,0 +1 @@
+export { default as Label } from './Label.vue'
diff --git a/apps/www/src/lib/registry/default/ui/menubar/Menubar.vue b/apps/www/src/lib/registry/default/ui/menubar/Menubar.vue
new file mode 100644
index 00000000..fec5208e
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/menubar/Menubar.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import {
+  MenubarRoot,
+  type MenubarRootEmits,
+  type MenubarRootProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarRootProps & { class?: string }>()
+
+const emits = defineEmits<MenubarRootEmits>()
+</script>
+
+<template>
+  <MenubarRoot
+    v-bind="props"
+    :class="
+      cn(
+        'flex h-10 items-center space-x-1 rounded-md border border-border p-1',
+        props.class,
+      )
+    "
+    @update:model-value="emits('update:modelValue', $event)"
+  >
+    <slot />
+  </MenubarRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
new file mode 100644
index 00000000..55a0e27e
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import {
+  MenubarCheckboxItem,
+  type MenubarCheckboxItemEmits,
+  type MenubarCheckboxItemProps,
+  MenubarItemIndicator,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+import RadixIconsCheck from '~icons/radix-icons/check'
+
+const props = defineProps<MenubarCheckboxItemProps & { class?: string }>()
+
+const emit = defineEmits<MenubarCheckboxItemEmits>()
+</script>
+
+<template>
+  <MenubarCheckboxItem
+    v-bind="props"
+    :class="[
+      cn(
+        'flex relative items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover pl-7 py-1.5 text-sm outline-none select-none cursor-default',
+        props.class,
+      ),
+    ]"
+    @update:checked="emit('update:checked', $event)"
+    @select="emit('select', $event)"
+  >
+    <MenubarItemIndicator
+      class="absolute left-2 inline-flex w-3.5 h-3.5 items-center justify-center"
+    >
+      <RadixIconsCheck class="text-foreground" />
+    </MenubarItemIndicator>
+    <slot />
+  </MenubarCheckboxItem>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue
new file mode 100644
index 00000000..add8ae13
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import {
+  MenubarContent,
+  type MenubarContentProps,
+  MenubarPortal,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<MenubarContentProps & { class?: string }>(),
+  {
+    align: 'start',
+    alignOffset: -4,
+    sideOffset: 4,
+  },
+)
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarContent
+      :loop="props.loop"
+      :as-child="props.asChild"
+      :side-offset="props.sideOffset"
+      :side="props.side"
+      :align="props.align"
+      :align-offset="props.alignOffset"
+      :class="
+        cn(
+          'bg-background text-foreground mt-1.5 border border-border p-1 z-50 min-w-[12rem] rounded-md shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </MenubarContent>
+  </MenubarPortal>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarGroup.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarGroup.vue
new file mode 100644
index 00000000..853976b5
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarGroup.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { MenubarGroup, type MenubarGroupProps } from 'radix-vue'
+
+const props = defineProps<MenubarGroupProps>()
+</script>
+
+<template>
+  <MenubarGroup v-bind="props">
+    <slot />
+  </MenubarGroup>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue
new file mode 100644
index 00000000..8b1b93fd
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import {
+  MenubarItem,
+  type MenubarItemEmits,
+  type MenubarItemProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarItemProps & { class?: string }>()
+
+const emits = defineEmits<MenubarItemEmits>()
+</script>
+
+<template>
+  <MenubarItem
+    v-bind="props"
+    :class="[
+      cn(
+        'flex items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none focus:bg-outline-hover px-2 py-1.5 text-sm outline-none select-none cursor-default',
+        props.class,
+      ),
+    ]"
+    @select="emits('select', $event)"
+  >
+    <slot />
+  </MenubarItem>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue
new file mode 100644
index 00000000..3a234c1a
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { MenubarLabel, type MenubarLabelProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarLabelProps & { class?: string }>()
+</script>
+
+<template>
+  <div :class="cn('px-2 py-1.5 text-sm font-semibold', props.class)">
+    <MenubarLabel>
+      <slot />
+    </MenubarLabel>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarMenu.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarMenu.vue
new file mode 100644
index 00000000..fec5ee55
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarMenu.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { MenubarMenu, type MenubarMenuProps } from 'radix-vue'
+
+const props = defineProps<MenubarMenuProps>()
+</script>
+
+<template>
+  <MenubarMenu v-bind="props">
+    <slot />
+  </MenubarMenu>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioGroup.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioGroup.vue
new file mode 100644
index 00000000..29ec574a
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioGroup.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import {
+  MenubarRadioGroup,
+  type MenubarRadioGroupEmits,
+  type MenubarRadioGroupProps,
+} from 'radix-vue'
+
+const props = defineProps<MenubarRadioGroupProps>()
+
+const emits = defineEmits<MenubarRadioGroupEmits>()
+</script>
+
+<template>
+  <MenubarRadioGroup
+    v-bind="props"
+    @update:model-value="emits('update:modelValue', $event)"
+  >
+    <slot />
+  </MenubarRadioGroup>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue
new file mode 100644
index 00000000..7c58baed
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import {
+  MenubarItemIndicator,
+  MenubarRadioItem,
+  type MenubarRadioItemEmits,
+  type MenubarRadioItemProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+import RiCheckboxBlankCircleFill from '~icons/ri/checkbox-blank-circle-fill'
+
+const props = defineProps<MenubarRadioItemProps & { class?: string }>()
+
+const emits = defineEmits<MenubarRadioItemEmits>()
+</script>
+
+<template>
+  <MenubarRadioItem
+    v-bind="props"
+    :class="[
+      cn(
+        'flex items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none focus:bg-outline-hover px-2 py-1.5 text-sm outline-none select-none cursor-default',
+        props.class,
+      ),
+    ]"
+    @select="emits('select', $event)"
+  >
+    <MenubarItemIndicator
+      class="absolute left-3.5 inline-flex w-2 h-2 items-center justify-center"
+    >
+      <RiCheckboxBlankCircleFill class="text-foreground" />
+    </MenubarItemIndicator>
+    <span class="pl-6">
+      <slot />
+    </span>
+  </MenubarRadioItem>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarSeparator.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarSeparator.vue
new file mode 100644
index 00000000..7646448e
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarSeparator.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { MenubarSeparator, type MenubarSeparatorProps } from 'radix-vue'
+
+const props = defineProps<MenubarSeparatorProps>()
+</script>
+
+<template>
+  <MenubarSeparator class="-mx-1 my-1 h-px bg-secondary" v-bind="props" />
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarShortcut.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarShortcut.vue
new file mode 100644
index 00000000..5be2acac
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarShortcut.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="text-xxs ml-auto tracking-widest opacity-50">
+    <slot />
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarSub.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarSub.vue
new file mode 100644
index 00000000..4adcc356
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarSub.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import {
+  MenubarSub,
+  type MenubarSubEmits,
+} from 'radix-vue'
+
+interface MenubarSubRootProps {
+  defaultOpen?: boolean
+  open?: boolean
+}
+
+const props = defineProps<MenubarSubRootProps>()
+
+const emits = defineEmits<MenubarSubEmits>()
+</script>
+
+<template>
+  <MenubarSub v-bind="props" @update:open="emits('update:open', $event)">
+    <slot />
+  </MenubarSub>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue
new file mode 100644
index 00000000..a2d11ad1
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import {
+  MenubarPortal,
+  MenubarSubContent,
+  type MenubarSubContentEmits,
+  type MenubarSubContentProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<MenubarSubContentProps & { class?: string }>(),
+  {
+    sideOffset: 2,
+    alignOffset: 0,
+  },
+)
+
+const emits = defineEmits<MenubarSubContentEmits>()
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarSubContent
+      :loop="props.loop"
+      :as-child="props.asChild"
+      :side-offset="props.sideOffset"
+      :side="props.side"
+      :align="props.align"
+      :align-offset="props.alignOffset"
+      :class="
+        cn(
+          'bg-background text-foreground border border-border p-1 z-50 min-w-[10rem] rounded-md shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </MenubarSubContent>
+  </MenubarPortal>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
new file mode 100644
index 00000000..42c0391e
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarSubTriggerProps & { class?: string }>()
+</script>
+
+<template>
+  <MenubarSubTrigger
+    v-bind="props"
+    :class="[
+      cn(
+        'flex items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none focus:bg-outline-hover px-2 py-1.5 text-sm outline-none select-none cursor-default',
+        props.class,
+      ),
+    ]"
+  >
+    <slot />
+  </MenubarSubTrigger>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarTrigger.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarTrigger.vue
new file mode 100644
index 00000000..25c6d1a6
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarTrigger.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { MenubarTrigger, type MenubarTriggerProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarTriggerProps & { class?: string }>()
+</script>
+
+<template>
+  <MenubarTrigger
+    v-bind="props"
+    :class="
+      cn(
+        'flex cursor-default select-none items-center rounded px-3 py-1.5 text-sm font-medium outline-none data-[highlighted]:bg-outline-hover focus:bg-outline-hover text-foreground',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </MenubarTrigger>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/index.ts b/apps/www/src/lib/registry/default/ui/menubar/index.ts
new file mode 100644
index 00000000..808ec4d3
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/menubar/index.ts
@@ -0,0 +1,15 @@
+export { default as Menubar } from './Menubar.vue'
+export { default as MenubarItem } from './MenubarItem.vue'
+export { default as MenubarContent } from './MenubarContent.vue'
+export { default as MenubarGroup } from './MenubarGroup.vue'
+export { default as MenubarMenu } from './MenubarMenu.vue'
+export { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'
+export { default as MenubarRadioItem } from './MenubarRadioItem.vue'
+export { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'
+export { default as MenubarSeparator } from './MenubarSeparator.vue'
+export { default as MenubarSub } from './MenubarSub.vue'
+export { default as MenubarSubContent } from './MenubarSubContent.vue'
+export { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'
+export { default as MenubarTrigger } from './MenubarTrigger.vue'
+export { default as MenubarShortcut } from './MenubarShortcut.vue'
+export { default as MenubarLabel } from './MenubarLabel.vue'
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenu.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenu.vue
new file mode 100644
index 00000000..74a65c7a
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenu.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import {
+  NavigationMenuRoot,
+  type NavigationMenuRootEmits,
+  type NavigationMenuRootProps,
+  NavigationMenuViewport,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NavigationMenuRootProps & { class?: string }>()
+
+const emits = defineEmits<NavigationMenuRootEmits>()
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-bind="props"
+    :class="cn('relative z-10 flex w-full justify-center', props.class)"
+    @update:model-value="emits('update:modelValue', $event)"
+  >
+    <slot />
+    <div class="absolute top-full left-0 flex w-full justify-center">
+      <NavigationMenuViewport
+        :class="
+          cn(
+            'data-[state=open]:animate-scaleIn data-[state=closed]:animate-scaleOut relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden bg-background rounded-lg border border-border shadow-md transition-[width,_height] duration-300 sm:w-[var(--radix-navigation-menu-viewport-width)]',
+            props.class,
+          )
+        "
+      />
+    </div>
+  </NavigationMenuRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuContent.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuContent.vue
new file mode 100644
index 00000000..e2a48c49
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuContent.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {
+  NavigationMenuContent,
+  type NavigationMenuContentEmits,
+  type NavigationMenuContentProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NavigationMenuContentProps & { class?: string }>()
+
+const emits = defineEmits<NavigationMenuContentEmits>()
+</script>
+
+<template>
+  <NavigationMenuContent
+    v-bind="props"
+    :class="
+      cn(
+        'data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute top-0 left-0 w-full sm:w-auto',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuContent>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuItem.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuItem.vue
new file mode 100644
index 00000000..50e1565f
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuItem.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { NavigationMenuItem, type NavigationMenuItemProps } from 'radix-vue'
+
+const props = defineProps<NavigationMenuItemProps>()
+</script>
+
+<template>
+  <NavigationMenuItem v-bind="props">
+    <slot />
+  </NavigationMenuItem>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuLink.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuLink.vue
new file mode 100644
index 00000000..19e5812e
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuLink.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import {
+  NavigationMenuLink,
+  type NavigationMenuLinkEmits,
+  type NavigationMenuLinkProps,
+} from 'radix-vue'
+
+const props = defineProps<NavigationMenuLinkProps>()
+
+const emits = defineEmits<NavigationMenuLinkEmits>()
+</script>
+
+<template>
+  <NavigationMenuLink v-bind="props" @select="emits('select', $event)">
+    <slot />
+  </NavigationMenuLink>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuList.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuList.vue
new file mode 100644
index 00000000..c30dcde3
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuList.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { NavigationMenuList, type NavigationMenuListProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NavigationMenuListProps & { class?: string }>()
+</script>
+
+<template>
+  <NavigationMenuList
+    v-bind="props"
+    :class="
+      cn(
+        'group flex flex-1 list-none items-center justify-center space-x-1',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuList>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuListItem.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuListItem.vue
new file mode 100644
index 00000000..356aaaa9
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuListItem.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { NavigationMenuLink } from 'radix-vue'
+
+const props = defineProps({
+  title: String,
+  href: String,
+})
+</script>
+
+<template>
+  <li>
+    <NavigationMenuLink as-child>
+      <a
+        :href="props.href"
+        v-bind="$attrs"
+        class="focus:shadow-sm hover:bg-outline-hover block select-none rounded-sm p-3 text-sm leading-none no-underline outline-none transition-colors"
+      >
+        <div class="text-foreground mb-1 font-medium leading-4">
+          {{ props.title }}
+        </div>
+        <p class="text-muted my-0 leading-5">
+          <slot />
+        </p>
+      </a>
+    </NavigationMenuLink>
+  </li>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue
new file mode 100644
index 00000000..3a7f514c
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import {
+  NavigationMenuTrigger,
+  type NavigationMenuTriggerProps,
+} from 'radix-vue'
+import { cva } from 'class-variance-authority'
+import { ChevronDown } from 'lucide-vue-next'
+import { computed } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NavigationMenuTriggerProps & { class?: string }>()
+
+const navigationMenuTriggerStyle = computed(() => {
+  return cva(
+    'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-outline-hover hover:text-foreground focus:bg-outline-hover focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-outline-hover data-[state=open]:bg-outline-hover',
+  )
+})
+</script>
+
+<template>
+  <NavigationMenuTrigger
+    :class="cn(navigationMenuTriggerStyle(), props.class)"
+    v-bind="props"
+  >
+    <slot />
+    {{ " " }}
+    <ChevronDown
+      class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuTrigger>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/index.ts b/apps/www/src/lib/registry/default/ui/navigation-menu/index.ts
new file mode 100644
index 00000000..38f20da2
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/index.ts
@@ -0,0 +1,7 @@
+export { default as NavigationMenu } from './NavigationMenu.vue'
+export { default as NavigationMenuList } from './NavigationMenuList.vue'
+export { default as NavigationMenuItem } from './NavigationMenuItem.vue'
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
+export { default as NavigationMenuContent } from './NavigationMenuContent.vue'
+export { default as NavigationMenuLink } from './NavigationMenuLink.vue'
+export { default as NavigationMenuListItem } from './NavigationMenuListItem.vue'
diff --git a/apps/www/src/lib/registry/default/ui/popover.ts b/apps/www/src/lib/registry/default/ui/popover.ts
deleted file mode 100644
index 14eb19fc..00000000
--- a/apps/www/src/lib/registry/default/ui/popover.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { defineComponent, h } from 'vue'
-import {
-  type PopoverContentEmits, PopoverContent as PopoverContentPrimitive, type PopoverContentProps,
-  PopoverPortal,
-  PopoverRoot,
-  PopoverTrigger as PopoverTriggerPrimitive,
-} from 'radix-vue'
-import { type ParseEmits, cn } from '@/utils'
-
-export const Popover = PopoverRoot
-export const PopoverTrigger = PopoverTriggerPrimitive
-
-export const PopoverContent = defineComponent<PopoverContentProps, ParseEmits<PopoverContentEmits>>(
-  (props, { attrs, slots }) => {
-    return () => h(PopoverPortal,
-      () => h(PopoverContentPrimitive,
-        {
-          align: 'center',
-          sideOffset: 20, // set default value
-
-          ...attrs,
-          ...props,
-          class: cn('z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', attrs.class),
-        }, slots),
-    )
-  }, {
-    name: 'PopoverContent',
-  },
-)
diff --git a/apps/www/src/lib/registry/default/ui/popover/Popover.vue b/apps/www/src/lib/registry/default/ui/popover/Popover.vue
new file mode 100644
index 00000000..76b0071f
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/popover/Popover.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { PopoverRoot, type PopoverRootProps } from 'radix-vue'
+
+const props = defineProps<PopoverRootProps>()
+</script>
+
+<template>
+  <PopoverRoot v-bind="props">
+    <slot />
+  </PopoverRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/popover/PopoverContent.vue b/apps/www/src/lib/registry/default/ui/popover/PopoverContent.vue
new file mode 100644
index 00000000..3b5a2cd0
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/popover/PopoverContent.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import {
+  PopoverContent,
+  type PopoverContentProps,
+  PopoverPortal,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: string }>(),
+  {
+    sideOffset: 4,
+  },
+)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="props"
+      :class="
+        cn(
+          'z-50 w-[var(--radix-popover-trigger-width)] rounded-md border border-border bg-background shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/popover/PopoverTrigger.vue b/apps/www/src/lib/registry/default/ui/popover/PopoverTrigger.vue
new file mode 100644
index 00000000..22f4772a
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/popover/PopoverTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue'
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger v-bind="props">
+    <slot />
+  </PopoverTrigger>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/popover/index.ts b/apps/www/src/lib/registry/default/ui/popover/index.ts
new file mode 100644
index 00000000..495d55a8
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/popover/index.ts
@@ -0,0 +1,3 @@
+export { default as Popover } from './Popover.vue'
+export { default as PopoverTrigger } from './PopoverTrigger.vue'
+export { default as PopoverContent } from './PopoverContent.vue'
diff --git a/apps/www/src/lib/registry/default/ui/progress/Progress.vue b/apps/www/src/lib/registry/default/ui/progress/Progress.vue
new file mode 100644
index 00000000..37df7e6c
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/progress/Progress.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import {
+  ProgressIndicator,
+  ProgressRoot,
+  type ProgressRootProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: string }>(),
+  {
+    class: '',
+    modelValue: 0,
+  },
+)
+</script>
+
+<template>
+  <ProgressRoot
+    :class="
+      cn(
+        'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
+        props.class,
+      )
+    "
+    v-bind="props"
+  >
+    <ProgressIndicator
+      :class="
+        cn(
+          'h-full w-full flex-1 duration-300 bg-foreground transition-all',
+          props.class,
+        )
+      "
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/progress/index.ts b/apps/www/src/lib/registry/default/ui/progress/index.ts
new file mode 100644
index 00000000..eace9893
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/progress/index.ts
@@ -0,0 +1 @@
+export { default as Progress } from './Progress.vue'
diff --git a/apps/www/src/lib/registry/default/ui/radio-group/RadioGroup.vue b/apps/www/src/lib/registry/default/ui/radio-group/RadioGroup.vue
new file mode 100644
index 00000000..1eff3f58
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/radio-group/RadioGroup.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { RadioGroupRoot, type RadioGroupRootProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<RadioGroupRootProps & { class?: string }>()
+</script>
+
+<template>
+  <RadioGroupRoot :class="cn('grid gap-2', props.class)">
+    <slot />
+  </RadioGroupRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/radio-group/RadioGroupItem.vue b/apps/www/src/lib/registry/default/ui/radio-group/RadioGroupItem.vue
new file mode 100644
index 00000000..6d74489d
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/radio-group/RadioGroupItem.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import {
+  RadioGroupIndicator,
+  RadioGroupItem,
+  type RadioGroupItemProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+import RiCheckboxBlankCircleFill from '~icons/ri/checkbox-blank-circle-fill'
+
+const props = defineProps<RadioGroupItemProps & { class?: string }>()
+</script>
+
+<template>
+  <RadioGroupItem
+    v-bind="props"
+    :class="
+      cn(
+        'aspect-square h-4 w-4 rounded-full cursor-pointer flex justify-center items-center border border-primary disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator
+      :class="cn('flex items-center justify-center', props.class)"
+    >
+      <RiCheckboxBlankCircleFill class="w-2.5 h-2.5 text-foreground" />
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/radio-group/index.ts b/apps/www/src/lib/registry/default/ui/radio-group/index.ts
new file mode 100644
index 00000000..fa1da9c2
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/radio-group/index.ts
@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './RadioGroup.vue'
+export { default as RadioGroupItem } from './RadioGroupItem.vue'
diff --git a/apps/www/src/lib/registry/default/ui/scroll-area/ScrollArea.vue b/apps/www/src/lib/registry/default/ui/scroll-area/ScrollArea.vue
new file mode 100644
index 00000000..f0c7fc61
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/scroll-area/ScrollArea.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import {
+  ScrollAreaRoot,
+  type ScrollAreaRootProps,
+  ScrollAreaScrollbar,
+  type ScrollAreaScrollbarProps,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<
+    ScrollAreaRootProps & ScrollAreaScrollbarProps & { class?: string }
+  >(),
+  {
+    class: '',
+    orientation: 'vertical',
+  },
+)
+</script>
+
+<template>
+  <ScrollAreaRoot :type="type" :class="cn('relative overflow-hidden', props.class)">
+    <ScrollAreaViewport class="h-full w-full rounded">
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollAreaScrollbar
+      :orientation="orientation"
+      class="flex touch-none select-none transition-colors"
+      :class="[
+        props.orientation === 'vertical'
+          ? 'h-full w-2.5 border-l border-l-transparent p-[1px]'
+          : 'h-2.5 border-t border-t-transparent p-[1px]',
+      ]"
+    >
+      <ScrollAreaThumb class="relative flex-1 rounded-full bg-secondary" />
+    </ScrollAreaScrollbar>
+  </ScrollAreaRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/scroll-area/index.ts b/apps/www/src/lib/registry/default/ui/scroll-area/index.ts
new file mode 100644
index 00000000..82a7ce7d
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/scroll-area/index.ts
@@ -0,0 +1 @@
+export { default as ScrollArea } from './ScrollArea.vue'
diff --git a/apps/www/src/lib/registry/default/ui/select.tsx b/apps/www/src/lib/registry/default/ui/select.tsx
deleted file mode 100644
index 7f4534ce..00000000
--- a/apps/www/src/lib/registry/default/ui/select.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { defineComponent } from 'vue'
-import {
-  type SelectContentEmits, SelectContent as SelectContentPrimitive, type SelectContentProps,
-  SelectGroup as SelectGroupPrimitive,
-  SelectIcon, SelectItemIndicator,
-  SelectItem as SelectItemPrimitive, type SelectItemProps,
-  SelectItemText,
-  SelectLabel as SelectLabelPrimitive, type SelectLabelProps,
-  SelectPortal, SelectRoot,
-  SelectSeparator as SelectSeparatorPrimitive, type SelectSeparatorProps,
-  SelectTrigger as SelectTriggerPrimitive, type SelectTriggerProps,
-  SelectValue as SelectValuePrimitive, SelectViewport,
-} from 'radix-vue'
-import { Check, ChevronDown } from 'lucide-vue-next'
-import type { ParseEmits } from '@/utils'
-import { cn, convertToComponent, useEmitAsProps } from '@/utils'
-
-export const Select = SelectRoot
-export const SelectGroup = SelectGroupPrimitive
-export const SelectValue = SelectValuePrimitive
-
-// Convert Functional component to valid VNode to be use in JSX
-const IChevrondown = convertToComponent(ChevronDown)
-const ICheck = convertToComponent(Check)
-
-export const SelectTrigger = defineComponent<SelectTriggerProps>(
-  (props, { attrs, slots }) => {
-    return () => (
-     <SelectTriggerPrimitive {...props} class={cn('flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', attrs.class ?? '')}>
-        { slots.default?.() }
-
-        <SelectIcon asChild>
-          <IChevrondown class={'h-4 w-4 opacity-50'} />
-        </SelectIcon>
-     </SelectTriggerPrimitive>
-    )
-  }, {
-    name: 'SelectTrigger',
-  },
-)
-
-export const SelectContent = defineComponent<SelectContentProps, ParseEmits<SelectContentEmits>>(
-  (props, { emit, attrs, slots }) => {
-    const position = props.position ?? 'popper'
-    const emitsAsProps = useEmitAsProps(emit)
-    return () => (
-      <SelectPortal>
-        <SelectContentPrimitive
-          class={cn(
-            'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-            position === 'popper'
-              && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-            attrs.class ?? '',
-          )}
-          position='popper'
-          {...props}
-          {...emitsAsProps}
-        >
-          <SelectViewport class={cn(
-            'p-1',
-            position === 'popper'
-              && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
-          )}
-          >
-            { slots.default?.()}
-          </SelectViewport>
-        </SelectContentPrimitive>
-      </SelectPortal>
-    )
-  }, { name: 'SelectContent', emits: SelectContentPrimitive.emits },
-)
-
-export const SelectLabel = defineComponent<SelectLabelProps>(
-  (props, { attrs, slots }) => {
-    return () => (
-      <SelectLabelPrimitive class={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', attrs.class)} {...props}>
-        { slots.default?.() }
-      </SelectLabelPrimitive>
-    )
-  }, { name: 'SelectLabel' },
-)
-
-export const SelectItem = defineComponent<SelectItemProps>(
-  (props, { attrs, slots }) => {
-    return () => (
-      <SelectItemPrimitive
-        class={cn('relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', attrs.class)}
-        {...props}
-      >
-        <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-          <SelectItemIndicator>
-            <ICheck class={'w-4 h-4'}></ICheck>
-          </SelectItemIndicator>
-        </span>
-
-        <SelectItemText>
-          { slots.default?.() }
-        </SelectItemText>
-      </SelectItemPrimitive>
-    )
-  }, { name: 'SelectItem' },
-)
-
-export const SelectSeparator = defineComponent<SelectSeparatorProps>(
-  (props, { attrs, slots }) => {
-    return () => (
-      <SelectSeparatorPrimitive class={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', attrs.class)} {...props}>
-        { slots.default?.() }
-      </SelectSeparatorPrimitive>
-    )
-  }, { name: 'SelectSeparator' },
-)
diff --git a/apps/www/src/lib/registry/default/ui/select/Select.vue b/apps/www/src/lib/registry/default/ui/select/Select.vue
new file mode 100644
index 00000000..4c8d371a
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/select/Select.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { SelectRoot } from 'radix-vue'
+</script>
+
+<template>
+  <SelectRoot>
+    <slot />
+  </SelectRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectContent.vue b/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
new file mode 100644
index 00000000..a5b0e342
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import {
+  SelectContent,
+  type SelectContentProps,
+  SelectPortal,
+  SelectViewport,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: string }>(),
+  {
+    position: 'popper',
+    sideOffset: 4,
+  },
+)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="props"
+      :class="
+        cn(
+          'relative z-50 min-w-[10rem] overflow-hidden rounded-md bg-background border border-border text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <SelectViewport
+        class="h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+      >
+        <slot />
+      </SelectViewport>
+    </SelectContent>
+  </SelectPortal>
+</template>
+
+<style>
+[data-radix-popper-content-wrapper] {
+  z-index: 9999 !important;
+}
+</style>
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectGroup.vue b/apps/www/src/lib/registry/default/ui/select/SelectGroup.vue
new file mode 100644
index 00000000..e31301c7
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/select/SelectGroup.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { SelectGroup, type SelectGroupProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectGroupProps & { class?: string }>()
+</script>
+
+<template>
+  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="props">
+    <slot />
+  </SelectGroup>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectItem.vue b/apps/www/src/lib/registry/default/ui/select/SelectItem.vue
new file mode 100644
index 00000000..9504f962
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/select/SelectItem.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import {
+  SelectItem,
+  SelectItemIndicator,
+  type SelectItemProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+import RadixIconsCheck from '~icons/radix-icons/check'
+
+const props = defineProps<SelectItemProps & { class?: string }>()
+</script>
+
+<template>
+  <div class="flex justify-between items-center">
+    <SelectItem
+      v-bind="props"
+      :class="
+        cn(
+          'flex w-full relative cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none focus:bg-outline-hover focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+          props.class,
+        )
+      "
+    >
+      <div class="h-4 absolute right-2 w-4 items-center justify-center">
+        <SelectItemIndicator>
+          <RadixIconsCheck />
+        </SelectItemIndicator>
+      </div>
+      <slot />
+    </SelectItem>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectItemText.vue b/apps/www/src/lib/registry/default/ui/select/SelectItemText.vue
new file mode 100644
index 00000000..a0bb5c24
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/select/SelectItemText.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectItemText, type SelectItemTextProps } from 'radix-vue'
+
+const props = defineProps<SelectItemTextProps>()
+</script>
+
+<template>
+  <SelectItemText v-bind="props">
+    <slot />
+  </SelectItemText>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectLabel.vue b/apps/www/src/lib/registry/default/ui/select/SelectLabel.vue
new file mode 100644
index 00000000..d917d1ec
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/select/SelectLabel.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { SelectLabel, type SelectLabelProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectLabelProps & { class?: string }>()
+</script>
+
+<template>
+  <div class="px-2 py-1">
+    <SelectLabel :class="cn('text-[13px] text-muted font-medium', props.class)">
+      <slot />
+    </SelectLabel>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectSeparator.vue b/apps/www/src/lib/registry/default/ui/select/SelectSeparator.vue
new file mode 100644
index 00000000..81bb86c7
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/select/SelectSeparator.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectSeparatorProps & { class?: string }>()
+</script>
+
+<template>
+  <SelectSeparator :class="cn('-mx-1 my-1 h-px bg-secondary', props.class)" />
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectTrigger.vue b/apps/www/src/lib/registry/default/ui/select/SelectTrigger.vue
new file mode 100644
index 00000000..607e9010
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/select/SelectTrigger.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { SelectTrigger, type SelectTriggerProps } from 'radix-vue'
+import { ChevronDown } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),
+  {
+    class: '',
+    invalid: false,
+  },
+)
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="props"
+    :class="[
+      cn(
+        'flex h-9 w-full text-foreground hover:bg-outline-hover transition-colors ease-in-out duration-300 items-center justify-between rounded-md border shadow-sm border-border bg-transparent px-3 py-2 text-sm placeholder:text-muted focus:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      ),
+      props.invalid
+        ? '!ring-destructive ring-2 placeholder:!text-destructive'
+        : '',
+    ]"
+  >
+    <slot />
+    <ChevronDown class="w-4 h-4 opacity-50" />
+  </SelectTrigger>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectValue.vue b/apps/www/src/lib/registry/default/ui/select/SelectValue.vue
new file mode 100644
index 00000000..4bc37dd8
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/select/SelectValue.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectValue, type SelectValueProps } from 'radix-vue'
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue v-bind="props">
+    <slot />
+  </SelectValue>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/select/index.ts b/apps/www/src/lib/registry/default/ui/select/index.ts
new file mode 100644
index 00000000..f188cc49
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/select/index.ts
@@ -0,0 +1,9 @@
+export { default as Select } from './Select.vue'
+export { default as SelectValue } from './SelectValue.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectItemText } from './SelectItemText.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
diff --git a/apps/www/src/lib/registry/default/ui/separator/Separator.vue b/apps/www/src/lib/registry/default/ui/separator/Separator.vue
new file mode 100644
index 00000000..1e6b3f3f
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/separator/Separator.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { Separator, type SeparatorProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SeparatorProps & { class?: string }>()
+</script>
+
+<template>
+  <Separator
+    :class="[
+      cn('shrink-0 bg-secondary', props.class),
+      props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
+    ]"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/separator/index.ts b/apps/www/src/lib/registry/default/ui/separator/index.ts
new file mode 100644
index 00000000..2287bcb9
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/separator/index.ts
@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue'
diff --git a/apps/www/src/lib/registry/default/ui/skeleton/Skeleton.vue b/apps/www/src/lib/registry/default/ui/skeleton/Skeleton.vue
new file mode 100644
index 00000000..bf3b943a
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/skeleton/Skeleton.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface SkeletonProps {
+  class?: string
+}
+
+const props = defineProps<SkeletonProps>()
+</script>
+
+<template>
+  <div :class="cn('animate-pulse rounded-md bg-secondary', props.class)" />
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/skeleton/index.ts b/apps/www/src/lib/registry/default/ui/skeleton/index.ts
new file mode 100644
index 00000000..be21fad3
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/skeleton/index.ts
@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton.vue'
diff --git a/apps/www/src/lib/registry/default/ui/slider/Slider.vue b/apps/www/src/lib/registry/default/ui/slider/Slider.vue
new file mode 100644
index 00000000..4888201e
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/slider/Slider.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface SliderProps {
+  modelValue: number
+  class?: string
+  step?: number | string
+  disabled?: boolean
+  min?: number
+  max?: number
+}
+
+const props = withDefaults(defineProps<SliderProps>(), {
+  step: 1,
+  disabled: false,
+  min: 0,
+  max: 100,
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const progressStyle = computed(() => {
+  const { modelValue, min, max } = props
+  const clampedValue = Math.max(min, Math.min(modelValue, max))
+  const relativeValue = (clampedValue - min) / (max - min)
+  return {
+    width: `${relativeValue * 100}%`,
+  }
+})
+</script>
+
+<template>
+  <div :class="cn('w-full', props.class)">
+    <div class="relative w-full flex items-center h-2">
+      <input
+        type="range"
+        :step="props.step"
+        :disabled="props.disabled"
+        :min="props.min"
+        :max="props.max"
+        class="w-full absolute appearance-none cursor-default disabled:cursor-not-allowed disabled:bg-opacity-50 focus:outline-none peer group bg-transparent rounded-lg focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-950 h-4 [&::-webkit-slider-thumb]:relative [&::-moz-range-thumb]:relative [&::-webkit-slider-thumb]:active:cursor-grabbing [&::-webkit-slider-thumb]:z-[1] [&::-webkit-slider-thumb]:cursor-grab [&::-moz-range-thumb]:cursor-grab [&::-moz-range-thumb]:active:cursor-grabbing [&::-moz-range-thumb]:z-[1] [&::-webkit-slider-thumb]:appearance-none [&::-moz-range-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 text-foreground [&::-webkit-slider-thumb]:ring-2 [&::-webkit-slider-thumb]:ring-primary [&::-webkit-slider-thumb]:bg-background [&::-moz-range-thumb]:bg-current [&::-webkit-slider-thumb]:h-3 [&::-moz-range-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-moz-range-thumb]:w-3 [&::-webkit-slider-thumb]:-mt-[3px] [&::-moz-range-thumb]:-mt-[3px] [&::-webkit-slider-runnable-track]:group-disabled:bg-opacity-50 [&::-moz-slider-runnable-track]:group-disabled:bg-opacity-50 [&::-webkit-slider-runnable-track]:bg-secondary [&::-moz-slider-runnable-track]:bg-secondary [&::-webkit-slider-runnable-track]:rounded-lg [&::-moz-slider-runnable-track]:rounded-lg [&::-webkit-slider-runnable-track]:h-1.5 [&::-moz-slider-runnable-track]:h-1.5"
+        :value="props.modelValue"
+        @input="
+          ($event) =>
+            emit(
+              'update:modelValue',
+              ($event.target as HTMLInputElement).valueAsNumber,
+            )
+        "
+      >
+      <span
+        class="absolute pointer-events-none peer-disabled:bg-opacity-50 rounded-s-lg bg-primary h-2"
+        :style="progressStyle"
+      />
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/slider/index.ts b/apps/www/src/lib/registry/default/ui/slider/index.ts
new file mode 100644
index 00000000..1c945deb
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/slider/index.ts
@@ -0,0 +1 @@
+export { default as Slider } from './Slider.vue'
diff --git a/apps/www/src/lib/registry/default/ui/switch/Switch.vue b/apps/www/src/lib/registry/default/ui/switch/Switch.vue
new file mode 100644
index 00000000..7983d1ae
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/switch/Switch.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import {
+  SwitchRoot,
+  type SwitchRootEmits,
+  type SwitchRootProps,
+  SwitchThumb,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SwitchRootProps & { class?: string }>()
+
+const emits = defineEmits<SwitchRootEmits>()
+</script>
+
+<template>
+  <SwitchRoot
+    v-bind="props"
+    :class="
+      cn(
+        'peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent data-[disabled]:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-secondary',
+        props.class,
+      )
+    "
+    @update:checked="emits('update:checked', $event)"
+  >
+    <SwitchThumb
+      :class="
+        cn(
+          'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 ease-in-out duration-200',
+          props.class,
+        )
+      "
+    />
+  </SwitchRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/switch/index.ts b/apps/www/src/lib/registry/default/ui/switch/index.ts
new file mode 100644
index 00000000..87b4b17d
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/switch/index.ts
@@ -0,0 +1 @@
+export { default as Switch } from './Switch.vue'
diff --git a/apps/www/src/lib/registry/default/ui/table/Table.vue b/apps/www/src/lib/registry/default/ui/table/Table.vue
new file mode 100644
index 00000000..cf275445
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/table/Table.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: String,
+})
+</script>
+
+<template>
+  <div :class="cn('w-full overflow-auto', props.class)">
+    <table class="w-full caption-bottom">
+      <slot />
+    </table>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/table/TableBody.vue b/apps/www/src/lib/registry/default/ui/table/TableBody.vue
new file mode 100644
index 00000000..09d61910
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/table/TableBody.vue
@@ -0,0 +1,5 @@
+<template>
+  <tbody>
+    <slot />
+  </tbody>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/table/TableCaption.vue b/apps/www/src/lib/registry/default/ui/table/TableCaption.vue
new file mode 100644
index 00000000..315514af
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/table/TableCaption.vue
@@ -0,0 +1,5 @@
+<template>
+  <caption class="text-sm mt-4 text-muted">
+    <slot />
+  </caption>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/table/TableCell.vue b/apps/www/src/lib/registry/default/ui/table/TableCell.vue
new file mode 100644
index 00000000..c7d8eb34
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/table/TableCell.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: String,
+})
+</script>
+
+<template>
+  <td
+    :class="
+      cn(
+        'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </td>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/table/TableEmpty.vue b/apps/www/src/lib/registry/default/ui/table/TableEmpty.vue
new file mode 100644
index 00000000..7e60756f
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/table/TableEmpty.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import TableRow from './TableRow.vue'
+import TableCell from './TableCell.vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+  colspan?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  class: '',
+  colspan: 1,
+})
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :class="
+        cn(
+          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          props.class,
+        )
+      "
+      :colspan="props.colspan"
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/table/TableHead.vue b/apps/www/src/lib/registry/default/ui/table/TableHead.vue
new file mode 100644
index 00000000..86515076
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/table/TableHead.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: String,
+})
+</script>
+
+<template>
+  <th
+    :class="
+      cn(
+        'px-4 h-12 text-left font-medium text-sm whitespace-nowrap text-muted',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </th>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/table/TableHeader.vue b/apps/www/src/lib/registry/default/ui/table/TableHeader.vue
new file mode 100644
index 00000000..5051e7de
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/table/TableHeader.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: String,
+})
+</script>
+
+<template>
+  <thead :class="cn('border-b border-border', props.class)">
+    <slot />
+  </thead>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/table/TableRow.vue b/apps/www/src/lib/registry/default/ui/table/TableRow.vue
new file mode 100644
index 00000000..b4bc54a6
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/table/TableRow.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: String,
+})
+</script>
+
+<template>
+  <tr :class="cn('border-b border-border last:border-none', props.class)">
+    <slot />
+  </tr>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/table/index.ts b/apps/www/src/lib/registry/default/ui/table/index.ts
new file mode 100644
index 00000000..44582d35
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/table/index.ts
@@ -0,0 +1,8 @@
+export { default as Table } from './Table.vue'
+export { default as TableBody } from './TableBody.vue'
+export { default as TableCell } from './TableCell.vue'
+export { default as TableHead } from './TableHead.vue'
+export { default as TableHeader } from './TableHeader.vue'
+export { default as TableRow } from './TableRow.vue'
+export { default as TableCaption } from './TableCaption.vue'
+export { default as TableEmpty } from './TableEmpty.vue'
diff --git a/apps/www/src/lib/registry/default/ui/tabs/Tabs.vue b/apps/www/src/lib/registry/default/ui/tabs/Tabs.vue
new file mode 100644
index 00000000..808fe019
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/tabs/Tabs.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TabsRoot, type TabsRootProps } from 'radix-vue'
+
+const props = defineProps<TabsRootProps>()
+</script>
+
+<template>
+  <TabsRoot v-bind="props">
+    <slot />
+  </TabsRoot>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/tabs/TabsContent.vue b/apps/www/src/lib/registry/default/ui/tabs/TabsContent.vue
new file mode 100644
index 00000000..223ac760
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/tabs/TabsContent.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { TabsContent, type TabsContentProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsContentProps & { class?: string }>()
+</script>
+
+<template>
+  <TabsContent
+    :class="cn('mt-2 focus-visible:outline-none', props.class)"
+    v-bind="props"
+  >
+    <slot />
+  </TabsContent>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/tabs/TabsList.vue b/apps/www/src/lib/registry/default/ui/tabs/TabsList.vue
new file mode 100644
index 00000000..e0b479d9
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/tabs/TabsList.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { TabsList, type TabsListProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsListProps & { class?: string }>()
+</script>
+
+<template>
+  <TabsList
+    v-bind="props"
+    :class="
+      cn(
+        'inline-flex h-10 items-center justify-center rounded-md bg-outline-hover p-1 text-muted',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </TabsList>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/tabs/TabsTrigger.vue b/apps/www/src/lib/registry/default/ui/tabs/TabsTrigger.vue
new file mode 100644
index 00000000..84a9d66f
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/tabs/TabsTrigger.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { TabsTrigger, type TabsTriggerProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsTriggerProps & { class?: string }>()
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="props"
+    :class="
+      cn(
+        'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none disabled:cursor-default disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </TabsTrigger>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/tabs/index.ts b/apps/www/src/lib/registry/default/ui/tabs/index.ts
new file mode 100644
index 00000000..fbea0c68
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/tabs/index.ts
@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsContent } from './TabsContent.vue'
diff --git a/apps/www/src/lib/registry/default/ui/textarea/Input.vue b/apps/www/src/lib/registry/default/ui/textarea/Input.vue
new file mode 100644
index 00000000..f0e2b0f7
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/textarea/Input.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { AlertTriangle } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+interface InputProps {
+  id?: string
+  value?: string
+  type?: string
+  placeholder?: string
+  required?: boolean
+  disabled?: boolean
+  invalid?: boolean
+  helperText?: string
+  class?: string
+}
+
+const props = withDefaults(defineProps<InputProps>(), {
+  id: '',
+  value: '',
+  type: 'text',
+  placeholder: '',
+  required: false,
+  disabled: false,
+  invalid: false,
+  helperText: '',
+})
+
+const emit = defineEmits(['update:value'])
+
+function handleInput(event: Event) {
+  emit('update:value', (event.target as HTMLInputElement).value)
+}
+</script>
+
+<template>
+  <div :class="cn('relative', props.class)">
+    <input
+      :id="props.id"
+      :value="props.value"
+      :type="props.type"
+      :required="props.required"
+      :placeholder="props.placeholder"
+      :disabled="props.disabled"
+      :class="[
+        props.invalid
+          ? '!ring-destructive ring-2 placeholder:!text-destructive'
+          : '',
+        props.disabled ? 'cursor-not-allowed opacity-50' : '',
+        cn(
+          'px-3 h-9 bg-transparent block w-full outline-none focus:ring-2 focus:ring-accent ring-secondary placeholder:text-muted rounded-md text-sm ring-1 text-foreground',
+          props.class,
+        ),
+      ]"
+      @input="handleInput"
+    >
+    <div
+      class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"
+    >
+      <AlertTriangle v-if="props.invalid" class="w-4 h-4 text-destructive" />
+    </div>
+  </div>
+  <p
+    v-if="props.helperText && !props.invalid"
+    class="gap-1 leading-5 text-[13px] text-muted"
+  >
+    {{ props.helperText }}
+  </p>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/textarea/Textarea.vue b/apps/www/src/lib/registry/default/ui/textarea/Textarea.vue
new file mode 100644
index 00000000..79a7718d
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/textarea/Textarea.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { AlertTriangle } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+interface InputProps {
+  id?: string
+  value?: string
+  placeholder?: string
+  rows?: number
+  required?: boolean
+  disabled?: boolean
+  invalid?: boolean
+  helperText?: string
+  class?: string
+}
+
+const props = withDefaults(defineProps<InputProps>(), {
+  id: '',
+  value: '',
+  rows: 3,
+  placeholder: '',
+  required: false,
+  disabled: false,
+  invalid: false,
+  helperText: '',
+})
+
+const emit = defineEmits(['update:value'])
+
+function handleInput(event: Event) {
+  emit('update:value', (event.target as HTMLInputElement).value)
+}
+</script>
+
+<template>
+  <div :class="cn('relative', props.class)">
+    <textarea
+      :id="props.id"
+      :value="props.value"
+      :rows="props.rows"
+      :required="props.required"
+      :placeholder="props.placeholder"
+      :disabled="props.disabled"
+      :class="[
+        props.invalid
+          ? '!ring-destructive ring-2 placeholder:!text-destructive'
+          : '',
+        cn(
+          'py-3 px-4 block bg-transparent outline-none focus:ring-2 focus:ring-accent w-full ring-1 ring-secondary placeholder:text-muted rounded-md text-sm text-foreground',
+          props.class,
+        ),
+      ]"
+      @input="handleInput"
+    />
+    <div
+      class="absolute inset-y-0 right-0 bottom-6 flex items-center pr-3 pointer-events-none"
+    >
+      <AlertTriangle v-if="props.invalid" class="w-4 h-4 text-destructive" />
+    </div>
+  </div>
+  <p
+    v-if="props.helperText && !props.invalid"
+    class="gap-1 leading-5 text-[13px] text-muted"
+  >
+    {{ props.helperText }}
+  </p>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/textarea/index.ts b/apps/www/src/lib/registry/default/ui/textarea/index.ts
new file mode 100644
index 00000000..6a7ab2a7
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/textarea/index.ts
@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.vue'
diff --git a/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue b/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue
new file mode 100644
index 00000000..fb4bdd64
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { Toggle } from 'radix-vue'
+import { computed } from 'vue'
+import { cva } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+interface ToggleProps {
+  variant?: 'default' | 'outline'
+  size?: 'default' | 'sm' | 'lg'
+  class?: string
+}
+
+const props = withDefaults(defineProps<ToggleProps>(), {
+  variant: 'default',
+  size: 'default',
+})
+
+const toggleClass = computed(() => {
+  return cva(
+    'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-outline-hover hover:text-muted focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-foreground',
+    {
+      variants: {
+        variant: {
+          default: 'bg-transparent',
+          outline:
+            'bg-transparent border border-border hover:bg-outline-hover hover:text-muted',
+        },
+        size: {
+          default: 'h-10 px-3',
+          sm: 'h-9 px-2.5',
+          lg: 'h-11 px-5',
+        },
+      },
+    },
+  )({
+    variant: props.variant,
+    size: props.size,
+  })
+})
+</script>
+
+<template>
+  <Toggle :class="cn(toggleClass, props.class)">
+    <slot />
+  </Toggle>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/toggle/index.ts b/apps/www/src/lib/registry/default/ui/toggle/index.ts
new file mode 100644
index 00000000..6bfe49c1
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/toggle/index.ts
@@ -0,0 +1 @@
+export { default as Toggle } from './Toggle.vue'
diff --git a/apps/www/src/main.ts b/apps/www/src/main.ts
deleted file mode 100644
index 2425c0f7..00000000
--- a/apps/www/src/main.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { createApp } from 'vue'
-import './style.css'
-import App from './App.vue'
-
-createApp(App).mount('#app')
diff --git a/apps/www/src/style.css b/apps/www/src/style.css
deleted file mode 100644
index 92b44093..00000000
--- a/apps/www/src/style.css
+++ /dev/null
@@ -1,82 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 215 20.2% 65.1%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
-
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
-
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
-
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
-
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
-
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
-
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 216 34% 17%;
-
-    --radius: 0.5rem;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
-  }
-}
-
diff --git a/apps/www/tailwind.config.js b/apps/www/tailwind.config.js
index 034358cb..68075402 100644
--- a/apps/www/tailwind.config.js
+++ b/apps/www/tailwind.config.js
@@ -2,8 +2,8 @@ import tailwindcssAnimate from 'tailwindcss-animate'
 
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: ['class'],
-  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx,md}', './vitepress/**/*.{vue,js,ts,jsx,tsx}'],
+  darkMode: 'class',
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx,md}', './.vitepress/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     container: {
       center: true,
@@ -68,8 +68,8 @@ export default {
         },
       },
       animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
+        'accordion-down': 'accordion-down 0.2s ease-in-out',
+        'accordion-up': 'accordion-up 0.2s ease-in-out',
       },
     },
   },
diff --git a/apps/www/tsconfig.json b/apps/www/tsconfig.json
index 2b4d6e1e..879c6bc0 100644
--- a/apps/www/tsconfig.json
+++ b/apps/www/tsconfig.json
@@ -13,6 +13,10 @@
     "lib": ["esnext", "dom"],
     "baseUrl": ".",
     "skipLibCheck": true,
-    "outDir": "dist"
+    "outDir": "dist",
+    "types": ["unplugin-icons/types/vue", "node"],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2ef2bcc9..93d4b568 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -72,6 +72,12 @@ importers:
         specifier: ^3.3.4
         version: 3.3.4
     devDependencies:
+      '@iconify-json/radix-icons':
+        specifier: ^1.1.11
+        version: 1.1.11
+      '@iconify-json/tabler':
+        specifier: ^1.1.89
+        version: 1.1.89
       '@iconify/vue':
         specifier: ^4.1.1
         version: 4.1.1(vue@3.3.4)
@@ -93,6 +99,9 @@ importers:
       typescript:
         specifier: ^5.0.2
         version: 5.0.2
+      unplugin-icons:
+        specifier: ^0.16.6
+        version: 0.16.6
       vite:
         specifier: ^4.3.9
         version: 4.3.9(@types/node@20.4.7)
@@ -440,11 +449,22 @@ packages:
       - typescript
     dev: true
 
+  /@antfu/install-pkg@0.1.1:
+    resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}
+    dependencies:
+      execa: 5.1.1
+      find-up: 5.0.0
+    dev: true
+
   /@antfu/ni@0.21.6:
     resolution: {integrity: sha512-Hj0BKIOspbo+OsPT5mjONeqpuVb4bxp9jdJ4p/b5GxgYNIqJjBcJdp0DEON7CJflKoWuHf7I52wO5kOJJ4DveQ==}
     hasBin: true
     dev: false
 
+  /@antfu/utils@0.7.6:
+    resolution: {integrity: sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==}
+    dev: true
+
   /@babel/code-frame@7.22.10:
     resolution: {integrity: sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==}
     engines: {node: '>=6.9.0'}
@@ -1511,10 +1531,35 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
+  /@iconify-json/radix-icons@1.1.11:
+    resolution: {integrity: sha512-0FkllP6ghJakWHC0oQb+Jwg4W52mCDkV3JvVrXoyCPjG4kxX4wNhl8Ilk1dfT1EM+YvEXxrR2Mv63ySzVeYr9w==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
+  /@iconify-json/tabler@1.1.89:
+    resolution: {integrity: sha512-G2NFjRcmAeMO08I+6uJh05NmMrL74kU+tbbd4DSmlAfnkcCZg9ugojOPCRkT33IBlPSr7pXAO2EXHJwrAKP2lg==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify/types@2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
     dev: true
 
+  /@iconify/utils@2.1.9:
+    resolution: {integrity: sha512-mo+A4n3MwLlWlg1SoSO+Dt6pOPWKElk9sSJ6ZpuzbB9OcjxN8RUWxU3ulPwB1nglErWKRam2x4BAohbYF7FiFA==}
+    dependencies:
+      '@antfu/install-pkg': 0.1.1
+      '@antfu/utils': 0.7.6
+      '@iconify/types': 2.0.0
+      debug: 4.3.4
+      kolorist: 1.8.0
+      local-pkg: 0.4.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@iconify/vue@4.1.1(vue@3.3.4):
     resolution: {integrity: sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==}
     peerDependencies:
@@ -2823,7 +2868,7 @@ packages:
     dev: true
 
   /concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
 
   /consola@3.2.3:
     resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
@@ -4524,6 +4569,10 @@ packages:
     resolution: {integrity: sha512-dWl0Dbjm6Xm+kDxhPQJsCBTxrJzuGl0aP9rhr+TG8D3l+GL90N8O8lYUi7dTSAN2uuDqCtNgb6aEuQH5wsiV8Q==}
     dev: false
 
+  /kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+    dev: true
+
   /levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -6349,6 +6398,37 @@ packages:
     resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
     engines: {node: '>= 10.0.0'}
 
+  /unplugin-icons@0.16.6:
+    resolution: {integrity: sha512-jL70sAC7twp4hI/MTfm+vyvTRtHqiEIzf3XOjJz7yzhMEEQnk5Ey5YIXRAU03Mc4BF99ITvvnBzfyRZee86OeA==}
+    peerDependencies:
+      '@svgr/core': '>=7.0.0'
+      '@svgx/core': ^1.0.1
+      '@vue/compiler-sfc': ^3.0.2 || ^2.7.0
+      vue-template-compiler: ^2.6.12
+      vue-template-es2015-compiler: ^1.9.0
+    peerDependenciesMeta:
+      '@svgr/core':
+        optional: true
+      '@svgx/core':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      vue-template-compiler:
+        optional: true
+      vue-template-es2015-compiler:
+        optional: true
+    dependencies:
+      '@antfu/install-pkg': 0.1.1
+      '@antfu/utils': 0.7.6
+      '@iconify/utils': 2.1.9
+      debug: 4.3.4
+      kolorist: 1.8.0
+      local-pkg: 0.4.3
+      unplugin: 1.4.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /unplugin@1.4.0:
     resolution: {integrity: sha512-5x4eIEL6WgbzqGtF9UV8VEC/ehKptPXDS6L2b0mv4FRMkJxRtjaJfOWDd6a8+kYbqsjklix7yWP0N3SUepjXcg==}
     dependencies:
@@ -6356,7 +6436,6 @@ packages:
       chokidar: 3.5.3
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.5.0
-    dev: false
 
   /untyped@1.4.0:
     resolution: {integrity: sha512-Egkr/s4zcMTEuulcIb7dgURS6QpN7DyqQYdf+jBtiaJvQ+eRsrtWUoX84SbvQWuLkXsOjM+8sJC9u6KoMK/U7Q==}
@@ -6690,11 +6769,9 @@ packages:
   /webpack-sources@3.2.3:
     resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
     engines: {node: '>=10.13.0'}
-    dev: false
 
   /webpack-virtual-modules@0.5.0:
     resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==}
-    dev: false
 
   /whatwg-url@7.1.0:
     resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}