diff --git a/apps/www/.vitepress/theme/components/APITable.vue b/apps/www/.vitepress/theme/components/APITable.vue
new file mode 100644
index 00000000..c128797d
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/APITable.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { capitalize } from 'vue'
+
+defineProps<{
+  type: 'prop' | 'emit' | 'slot' | 'method'
+  data: { name: string, description: string, type: string, required: boolean }[]
+}>()
+</script>
+
+<template>
+  <div>
+    <h3>{{ capitalize(type) }}</h3>
+
+    <div v-for="(item, index) in data" :key="index" class="py-4 border-b text-sm">
+      <div class="flex items-center gap-2 flex-wrap">
+        <h5 class="text-sm">
+          <code>{{ item.name }}</code>
+        </h5>
+        <code>{{ item.type }}</code>
+        <span v-if="item.required" class="font-normal text-red-500 text-xs">Required*</span>
+      </div>
+
+      <div class="[&_p]:!my-2 ml-1" v-html="item.description" />
+    </div>
+  </div>
+</template>
diff --git a/apps/www/.vitepress/theme/components/MobileNav.vue b/apps/www/.vitepress/theme/components/MobileNav.vue
index 8de06dd2..1d1c1819 100644
--- a/apps/www/.vitepress/theme/components/MobileNav.vue
+++ b/apps/www/.vitepress/theme/components/MobileNav.vue
@@ -5,6 +5,7 @@ import Logo from './Logo.vue'
 import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
 import { Button } from '@/lib/registry/default/ui/button'
 import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
+import { Badge } from '@/lib/registry/new-york/ui/badge'
 
 const open = ref(false)
 </script>
@@ -63,17 +64,26 @@ const open = ref(false)
         </div>
         <div class="flex flex-col space-y-2">
           <div v-for="(items, index) in docsConfig.sidebarNav" :key="index" class="flex flex-col space-y-3 pt-6">
-            <h4 class="font-medium">
-              {{ items.title }}
-            </h4>
+            <div class="flex items-center">
+              <h4 class="font-medium">
+                {{ items.title }}
+              </h4>
+              <Badge v-if="items.label" class="ml-2">
+                {{ items.label }}
+              </Badge>
+            </div>
 
             <a
               v-for="item in items.items" :key="item.href"
               :href="item.href"
-              class="text-muted-foreground"
+              class="text-muted-foreground inline-flex items-center"
               @click="open = false"
             >
               {{ item.title }}
+
+              <Badge v-if="item.label" class="ml-2">
+                {{ item.label }}
+              </Badge>
             </a>
           </div>
         </div>
diff --git a/apps/www/.vitepress/theme/components/ThemePopover.vue b/apps/www/.vitepress/theme/components/ThemePopover.vue
new file mode 100644
index 00000000..d862ec98
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/ThemePopover.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { Paintbrush } from 'lucide-vue-next'
+import { onMounted, watch } from 'vue'
+import { allColors } from './theming/utils/data'
+import ThemeCustomizer from './ThemeCustomizer.vue'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
+import { useConfigStore } from '@/stores/config'
+
+const { theme, radius } = useConfigStore()
+
+// Whenever the component is mounted, update the document class list
+onMounted(() => {
+  document.documentElement.style.setProperty('--radius', `${radius.value}rem`)
+  document.documentElement.classList.add(`theme-${theme.value}`)
+})
+
+// Whenever the theme value changes, update the document class list
+watch(theme, (theme) => {
+  document.documentElement.classList.remove(
+    ...allColors.map(color => `theme-${color}`),
+  )
+  document.documentElement.classList.add(`theme-${theme}`)
+})
+
+// Whenever the radius value changes, update the document style
+watch(radius, (radius) => {
+  document.documentElement.style.setProperty('--radius', `${radius}rem`)
+})
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button
+        class="w-9 h-9"
+        :variant="'ghost'"
+        :size="'icon'"
+      >
+        <Paintbrush class="w-4 h-4" />
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent :side-offset="8" align="end" class="w-96">
+      <ThemeCustomizer :all-colors="allColors" />
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/apps/www/.vitepress/theme/components/index.ts b/apps/www/.vitepress/theme/components/index.ts
index 8e6df429..ec426bc3 100644
--- a/apps/www/.vitepress/theme/components/index.ts
+++ b/apps/www/.vitepress/theme/components/index.ts
@@ -1,5 +1,6 @@
 export { default as CodeWrapper } from './CodeWrapper'
 export { default as ComponentPreview } from './ComponentPreview.vue'
+export { default as APITable } from './APITable.vue'
 export { default as TabPreview } from './TabPreview.vue'
 export { default as TabMarkdown } from './TabMarkdown.vue'
 export { default as TabsMarkdown } from './TabsMarkdown.vue'
diff --git a/apps/www/.vitepress/theme/components/theming/Theming.vue b/apps/www/.vitepress/theme/components/theming/Theming.vue
index bf3b949e..e4d36786 100644
--- a/apps/www/.vitepress/theme/components/theming/Theming.vue
+++ b/apps/www/.vitepress/theme/components/theming/Theming.vue
@@ -18,9 +18,7 @@ import Metric from '@/lib/registry/new-york/example/Cards/Metric.vue'
 import DataTable from '@/lib/registry/new-york/example/Cards/DataTable.vue'
 import CardStats from '@/lib/registry/new-york/example/CardStats.vue'
 
-import {
-  Card,
-} from '@/lib/registry/new-york/ui/card'
+import { Card } from '@/lib/registry/new-york/ui/card'
 import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
 
 const now = today(getLocalTimeZone())
diff --git a/apps/www/.vitepress/theme/components/theming/utils/data.ts b/apps/www/.vitepress/theme/components/theming/utils/data.ts
index 3da4424d..1ef53ce0 100644
--- a/apps/www/.vitepress/theme/components/theming/utils/data.ts
+++ b/apps/www/.vitepress/theme/components/theming/utils/data.ts
@@ -2,6 +2,36 @@ import { CreditCard } from 'lucide-vue-next'
 import RiAppleFill from '~icons/ri/apple-fill'
 import RiPaypalFill from '~icons/ri/paypal-fill'
 
+type Color =
+  | 'zinc'
+  | 'slate'
+  | 'stone'
+  | 'gray'
+  | 'neutral'
+  | 'red'
+  | 'rose'
+  | 'orange'
+  | 'green'
+  | 'blue'
+  | 'yellow'
+  | 'violet'
+
+// Create an array of color values
+export const allColors: Color[] = [
+  'zinc',
+  'rose',
+  'blue',
+  'green',
+  'orange',
+  'red',
+  'slate',
+  'stone',
+  'gray',
+  'neutral',
+  'yellow',
+  'violet',
+]
+
 interface Payment {
   status: string
   email: string
diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts
index e0907468..1f211383 100644
--- a/apps/www/.vitepress/theme/config/docs.ts
+++ b/apps/www/.vitepress/theme/config/docs.ts
@@ -12,7 +12,7 @@ export type SidebarNavItem = NavItem & {
 }
 
 export type NavItemWithChildren = NavItem & {
-  items: NavItemWithChildren[]
+  items?: NavItemWithChildren[]
 }
 
 interface DocsConfig {
@@ -55,22 +55,18 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Introduction',
           href: '/docs/introduction',
-          items: [],
         },
         {
           title: 'Installation',
           href: '/docs/installation',
-          items: [],
         },
         {
           title: 'components.json',
           href: '/docs/components-json',
-          items: [],
         },
         {
           title: 'Theming',
           href: '/docs/theming',
-          items: [],
         },
         {
           title: 'Dark Mode',
@@ -80,27 +76,22 @@ export const docsConfig: DocsConfig = {
         {
           title: 'CLI',
           href: '/docs/cli',
-          items: [],
         },
         {
           title: 'Typography',
           href: '/docs/typography',
-          items: [],
         },
         {
           title: 'Figma',
           href: '/docs/figma',
-          items: [],
         },
         {
           title: 'Changelog',
           href: '/docs/changelog',
-          items: [],
         },
         {
           title: 'About',
           href: '/docs/about',
-          items: [],
         },
         {
           title: 'Contribution',
@@ -115,22 +106,18 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Vite',
           href: '/docs/installation/vite',
-          items: [],
         },
         {
           title: 'Nuxt',
           href: '/docs/installation/nuxt',
-          items: [],
         },
         {
           title: 'Astro',
           href: '/docs/installation/astro',
-          items: [],
         },
         {
           title: 'Laravel',
           href: '/docs/installation/laravel',
-          items: [],
         },
       ],
     },
@@ -142,6 +129,12 @@ export const docsConfig: DocsConfig = {
           href: '/docs/components/auto-form',
           items: [],
         },
+        {
+          title: 'Charts',
+          href: '/docs/charts',
+          label: 'Alpha',
+          items: [],
+        },
       ],
     },
     {
@@ -150,32 +143,26 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Accordion',
           href: '/docs/components/accordion',
-          items: [],
         },
         {
           title: 'Alert',
           href: '/docs/components/alert',
-          items: [],
         },
         {
           title: 'Alert Dialog',
           href: '/docs/components/alert-dialog',
-          items: [],
         },
         {
           title: 'Aspect Ratio',
           href: '/docs/components/aspect-ratio',
-          items: [],
         },
         {
           title: 'Avatar',
           href: '/docs/components/avatar',
-          items: [],
         },
         {
           title: 'Badge',
           href: '/docs/components/badge',
-          items: [],
         },
         {
           title: 'Breadcrumb',
@@ -185,7 +172,6 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Button',
           href: '/docs/components/button',
-          items: [],
         },
         {
           title: 'Calendar',
@@ -196,7 +182,6 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Card',
           href: '/docs/components/card',
-          items: [],
         },
         {
           title: 'Carousel',
@@ -206,32 +191,26 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Checkbox',
           href: '/docs/components/checkbox',
-          items: [],
         },
         {
           title: 'Collapsible',
           href: '/docs/components/collapsible',
-          items: [],
         },
         {
           title: 'Combobox',
           href: '/docs/components/combobox',
-          items: [],
         },
         {
           title: 'Command',
           href: '/docs/components/command',
-          items: [],
         },
         {
           title: 'Context Menu',
           href: '/docs/components/context-menu',
-          items: [],
         },
         {
           title: 'Data Table',
           href: '/docs/components/data-table',
-          items: [],
         },
         {
           title: 'Date Picker',
@@ -242,7 +221,6 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Dialog',
           href: '/docs/components/dialog',
-          items: [],
         },
         {
           title: 'Drawer',
@@ -252,42 +230,34 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Dropdown Menu',
           href: '/docs/components/dropdown-menu',
-          items: [],
         },
         {
           title: 'Form',
           href: '/docs/components/form',
-          items: [],
         },
         {
           title: 'Hover Card',
           href: '/docs/components/hover-card',
-          items: [],
         },
         {
           title: 'Input',
           href: '/docs/components/input',
-          items: [],
         },
         {
           title: 'Label',
           href: '/docs/components/label',
-          items: [],
         },
         {
           title: 'Menubar',
           href: '/docs/components/menubar',
-          items: [],
         },
         {
           title: 'Navigation Menu',
           href: '/docs/components/navigation-menu',
-          items: [],
         },
         {
           title: 'Pagination',
           href: '/docs/components/pagination',
-          items: [],
         },
         {
           title: 'Pin Input',
@@ -297,17 +267,14 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Popover',
           href: '/docs/components/popover',
-          items: [],
         },
         {
           title: 'Progress',
           href: '/docs/components/progress',
-          items: [],
         },
         {
           title: 'Radio Group',
           href: '/docs/components/radio-group',
-          items: [],
         },
         {
           title: 'Range Calendar',
@@ -323,32 +290,26 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Scroll Area',
           href: '/docs/components/scroll-area',
-          items: [],
         },
         {
           title: 'Select',
           href: '/docs/components/select',
-          items: [],
         },
         {
           title: 'Separator',
           href: '/docs/components/separator',
-          items: [],
         },
         {
           title: 'Sheet',
           href: '/docs/components/sheet',
-          items: [],
         },
         {
           title: 'Skeleton',
           href: '/docs/components/skeleton',
-          items: [],
         },
         {
           title: 'Slider',
           href: '/docs/components/slider',
-          items: [],
         },
         {
           title: 'Sonner',
@@ -358,17 +319,14 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Switch',
           href: '/docs/components/switch',
-          items: [],
         },
         {
           title: 'Table',
           href: '/docs/components/table',
-          items: [],
         },
         {
           title: 'Tabs',
           href: '/docs/components/tabs',
-          items: [],
         },
         {
           title: 'Tags Input',
@@ -378,27 +336,22 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Textarea',
           href: '/docs/components/textarea',
-          items: [],
         },
         {
           title: 'Toast',
           href: '/docs/components/toast',
-          items: [],
         },
         {
           title: 'Toggle',
           href: '/docs/components/toggle',
-          items: [],
         },
         {
           title: 'Toggle Group',
           href: '/docs/components/toggle-group',
-          items: [],
         },
         {
           title: 'Tooltip',
           href: '/docs/components/tooltip',
-          items: [],
         },
       ],
     },
diff --git a/apps/www/.vitepress/theme/layout/DocsLayout.vue b/apps/www/.vitepress/theme/layout/DocsLayout.vue
index b0c0b559..195c5db7 100644
--- a/apps/www/.vitepress/theme/layout/DocsLayout.vue
+++ b/apps/www/.vitepress/theme/layout/DocsLayout.vue
@@ -27,6 +27,10 @@ const sourceLink = 'https://github.com/radix-vue/shadcn-vue/tree/dev/'
                 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold"
               >
                 {{ docsGroup.title }}
+
+                <span v-if="docsGroup.label" class="ml-2 font-normal rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
+                  {{ docsGroup.label }}
+                </span>
               </h4>
 
               <div
@@ -72,9 +76,14 @@ const sourceLink = 'https://github.com/radix-vue/shadcn-vue/tree/dev/'
           </div>
 
           <div class="space-y-2">
-            <h1 class="scroll-m-20 text-4xl font-bold tracking-tight">
-              {{ frontmatter.title }}
-            </h1>
+            <div class="flex items-center space-x-4">
+              <h1 class="scroll-m-20 text-4xl font-bold tracking-tight">
+                {{ frontmatter.title }}
+              </h1>
+              <span v-if="frontmatter.label" class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
+                {{ frontmatter.label }}
+              </span>
+            </div>
             <p class="text-lg text-muted-foreground">
               {{ frontmatter.description }}
             </p>
diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index 4f21004b..13ebeaf7 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -8,6 +8,7 @@ import MobileNav from '../components/MobileNav.vue'
 import CodeConfigCustomizer from '../components/CodeConfigCustomizer.vue'
 
 import Kbd from '../components/Kbd.vue'
+import ThemePopover from '../components/ThemePopover.vue'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/lib/registry/default/ui/command'
 
 import { Button } from '@/lib/registry/default/ui/button'
@@ -133,6 +134,8 @@ watch(() => $route.path, (n) => {
             </div>
 
             <nav class="flex items-center">
+              <ThemePopover />
+
               <CodeConfigCustomizer />
 
               <Button
diff --git a/apps/www/.vitepress/theme/style.css b/apps/www/.vitepress/theme/style.css
index c8d4c4e6..9c4ed1c4 100644
--- a/apps/www/.vitepress/theme/style.css
+++ b/apps/www/.vitepress/theme/style.css
@@ -27,6 +27,21 @@
 		--input: 240 5.9% 90%;
 		--ring: 240 5% 64.9%;
 		--radius: 0.5rem;
+
+		--vis-primary-color: var(--primary);
+    --vis-secondary-color: 160 81% 40%;
+    --vis-text-color: var(--muted-foreground);
+
+
+		--vis-font-family: inherit !important;
+		--vis-area-stroke-width: 2px !important;
+		--vis-donut-central-label-text-color: hsl(var(--muted-foreground)) !important;
+		--vis-tooltip-background-color: none !important;
+    --vis-tooltip-border-color: none !important;
+    --vis-tooltip-text-color: none !important;
+    --vis-tooltip-shadow-color: none !important;
+    --vis-tooltip-backdrop-filter: none !important;
+    --vis-tooltip-padding: none !important;
   }
 
   .dark {
@@ -142,7 +157,7 @@
 }
 
 div[class^="language-"] {
-	@apply mb-4 mt-6 max-h-[650px] overflow-x-auto md:rounded-lg border !bg-zinc-950 dark:!bg-zinc-900
+	@apply mb-4 mt-6 max-h-[650px] overflow-x-auto md:rounded-lg border !bg-secondary-foreground dark:!bg-secondary
 }
 pre {
 	@apply py-4;
diff --git a/apps/www/.vitepress/theme/styles/vp-doc.css b/apps/www/.vitepress/theme/styles/vp-doc.css
index db40cba3..d088d325 100644
--- a/apps/www/.vitepress/theme/styles/vp-doc.css
+++ b/apps/www/.vitepress/theme/styles/vp-doc.css
@@ -345,14 +345,14 @@
 }
 
 .vp-doc [class*='language-'] code .highlighted {
-  background-color: hsl(240 3.7% 15.9%);
   transition: background-color 0.5s;
   /* margin: 0 -24px;
   padding: 0 24px; */
   width: calc(100% + 2 * 24px);
   display: inline-block;
+  @apply bg-[hsl(var(--foreground))] dark:bg-[hsl(var(--background)_/_50%)]
 }
-
+hsl(var(--foreground) / 50%)
 .vp-doc [class*='language-'] code .highlighted.error {
   background-color: var(--vp-code-line-error-color);
 }
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 6218dbe5..5597865c 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -31,6 +31,27 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/AlertDialogDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/AlertDialogDemo.vue"],
     },
+    "AreaChartCustomTooltip": {
+      name: "AreaChartCustomTooltip",
+      type: "components:example",
+      registryDependencies: ["chart-area"],
+      component: () => import("../src/lib/registry/default/example/AreaChartCustomTooltip.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/AreaChartCustomTooltip.vue"],
+    },
+    "AreaChartDemo": {
+      name: "AreaChartDemo",
+      type: "components:example",
+      registryDependencies: ["chart-area"],
+      component: () => import("../src/lib/registry/default/example/AreaChartDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/AreaChartDemo.vue"],
+    },
+    "AreaChartSparkline": {
+      name: "AreaChartSparkline",
+      type: "components:example",
+      registryDependencies: ["chart-area"],
+      component: () => import("../src/lib/registry/default/example/AreaChartSparkline.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/AreaChartSparkline.vue"],
+    },
     "AspectRatioDemo": {
       name: "AspectRatioDemo",
       type: "components:example",
@@ -129,6 +150,34 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/BadgeSecondaryDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/BadgeSecondaryDemo.vue"],
     },
+    "BarChartCustomTooltip": {
+      name: "BarChartCustomTooltip",
+      type: "components:example",
+      registryDependencies: ["chart-bar"],
+      component: () => import("../src/lib/registry/default/example/BarChartCustomTooltip.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/BarChartCustomTooltip.vue"],
+    },
+    "BarChartDemo": {
+      name: "BarChartDemo",
+      type: "components:example",
+      registryDependencies: ["chart-bar"],
+      component: () => import("../src/lib/registry/default/example/BarChartDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/BarChartDemo.vue"],
+    },
+    "BarChartRounded": {
+      name: "BarChartRounded",
+      type: "components:example",
+      registryDependencies: ["chart-bar"],
+      component: () => import("../src/lib/registry/default/example/BarChartRounded.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/BarChartRounded.vue"],
+    },
+    "BarChartStacked": {
+      name: "BarChartStacked",
+      type: "components:example",
+      registryDependencies: ["chart-bar"],
+      component: () => import("../src/lib/registry/default/example/BarChartStacked.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/BarChartStacked.vue"],
+    },
     "BreadcrumbDemo": {
       name: "BreadcrumbDemo",
       type: "components:example",
@@ -444,6 +493,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/ContextMenuDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/ContextMenuDemo.vue"],
     },
+    "CustomChartTooltip": {
+      name: "CustomChartTooltip",
+      type: "components:example",
+      registryDependencies: ["card"],
+      component: () => import("../src/lib/registry/default/example/CustomChartTooltip.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/CustomChartTooltip.vue"],
+    },
     "DataTableColumnPinningDemo": {
       name: "DataTableColumnPinningDemo",
       type: "components:example",
@@ -528,6 +584,34 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/DialogScrollOverlayDemo.vue"],
     },
+    "DonutChartColor": {
+      name: "DonutChartColor",
+      type: "components:example",
+      registryDependencies: ["chart-donut"],
+      component: () => import("../src/lib/registry/default/example/DonutChartColor.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/DonutChartColor.vue"],
+    },
+    "DonutChartCustomTooltip": {
+      name: "DonutChartCustomTooltip",
+      type: "components:example",
+      registryDependencies: ["chart-donut"],
+      component: () => import("../src/lib/registry/default/example/DonutChartCustomTooltip.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/DonutChartCustomTooltip.vue"],
+    },
+    "DonutChartDemo": {
+      name: "DonutChartDemo",
+      type: "components:example",
+      registryDependencies: ["chart-donut"],
+      component: () => import("../src/lib/registry/default/example/DonutChartDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/DonutChartDemo.vue"],
+    },
+    "DonutChartPie": {
+      name: "DonutChartPie",
+      type: "components:example",
+      registryDependencies: ["chart-donut"],
+      component: () => import("../src/lib/registry/default/example/DonutChartPie.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/DonutChartPie.vue"],
+    },
     "DrawerDemo": {
       name: "DrawerDemo",
       type: "components:example",
@@ -633,6 +717,27 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/LabelDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/LabelDemo.vue"],
     },
+    "LineChartCustomTooltip": {
+      name: "LineChartCustomTooltip",
+      type: "components:example",
+      registryDependencies: ["chart-line"],
+      component: () => import("../src/lib/registry/default/example/LineChartCustomTooltip.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/LineChartCustomTooltip.vue"],
+    },
+    "LineChartDemo": {
+      name: "LineChartDemo",
+      type: "components:example",
+      registryDependencies: ["chart-line"],
+      component: () => import("../src/lib/registry/default/example/LineChartDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/LineChartDemo.vue"],
+    },
+    "LineChartSparkline": {
+      name: "LineChartSparkline",
+      type: "components:example",
+      registryDependencies: ["chart-line"],
+      component: () => import("../src/lib/registry/default/example/LineChartSparkline.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/LineChartSparkline.vue"],
+    },
     "MenubarDemo": {
       name: "MenubarDemo",
       type: "components:example",
@@ -1327,6 +1432,27 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/AlertDialogDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/AlertDialogDemo.vue"],
     },
+    "AreaChartCustomTooltip": {
+      name: "AreaChartCustomTooltip",
+      type: "components:example",
+      registryDependencies: ["chart-area"],
+      component: () => import("../src/lib/registry/new-york/example/AreaChartCustomTooltip.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/AreaChartCustomTooltip.vue"],
+    },
+    "AreaChartDemo": {
+      name: "AreaChartDemo",
+      type: "components:example",
+      registryDependencies: ["chart-area"],
+      component: () => import("../src/lib/registry/new-york/example/AreaChartDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/AreaChartDemo.vue"],
+    },
+    "AreaChartSparkline": {
+      name: "AreaChartSparkline",
+      type: "components:example",
+      registryDependencies: ["chart-area"],
+      component: () => import("../src/lib/registry/new-york/example/AreaChartSparkline.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/AreaChartSparkline.vue"],
+    },
     "AspectRatioDemo": {
       name: "AspectRatioDemo",
       type: "components:example",
@@ -1425,6 +1551,34 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/BadgeSecondaryDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/BadgeSecondaryDemo.vue"],
     },
+    "BarChartCustomTooltip": {
+      name: "BarChartCustomTooltip",
+      type: "components:example",
+      registryDependencies: ["chart-bar"],
+      component: () => import("../src/lib/registry/new-york/example/BarChartCustomTooltip.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/BarChartCustomTooltip.vue"],
+    },
+    "BarChartDemo": {
+      name: "BarChartDemo",
+      type: "components:example",
+      registryDependencies: ["chart-bar"],
+      component: () => import("../src/lib/registry/new-york/example/BarChartDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/BarChartDemo.vue"],
+    },
+    "BarChartRounded": {
+      name: "BarChartRounded",
+      type: "components:example",
+      registryDependencies: ["chart-bar"],
+      component: () => import("../src/lib/registry/new-york/example/BarChartRounded.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/BarChartRounded.vue"],
+    },
+    "BarChartStacked": {
+      name: "BarChartStacked",
+      type: "components:example",
+      registryDependencies: ["chart-bar"],
+      component: () => import("../src/lib/registry/new-york/example/BarChartStacked.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/BarChartStacked.vue"],
+    },
     "BreadcrumbDemo": {
       name: "BreadcrumbDemo",
       type: "components:example",
@@ -1740,6 +1894,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/ContextMenuDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/ContextMenuDemo.vue"],
     },
+    "CustomChartTooltip": {
+      name: "CustomChartTooltip",
+      type: "components:example",
+      registryDependencies: ["card"],
+      component: () => import("../src/lib/registry/new-york/example/CustomChartTooltip.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/CustomChartTooltip.vue"],
+    },
     "DataTableColumnPinningDemo": {
       name: "DataTableColumnPinningDemo",
       type: "components:example",
@@ -1824,6 +1985,34 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/DialogScrollOverlayDemo.vue"],
     },
+    "DonutChartColor": {
+      name: "DonutChartColor",
+      type: "components:example",
+      registryDependencies: ["chart-donut"],
+      component: () => import("../src/lib/registry/new-york/example/DonutChartColor.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/DonutChartColor.vue"],
+    },
+    "DonutChartCustomTooltip": {
+      name: "DonutChartCustomTooltip",
+      type: "components:example",
+      registryDependencies: ["chart-donut"],
+      component: () => import("../src/lib/registry/new-york/example/DonutChartCustomTooltip.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/DonutChartCustomTooltip.vue"],
+    },
+    "DonutChartDemo": {
+      name: "DonutChartDemo",
+      type: "components:example",
+      registryDependencies: ["chart-donut"],
+      component: () => import("../src/lib/registry/new-york/example/DonutChartDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/DonutChartDemo.vue"],
+    },
+    "DonutChartPie": {
+      name: "DonutChartPie",
+      type: "components:example",
+      registryDependencies: ["chart-donut"],
+      component: () => import("../src/lib/registry/new-york/example/DonutChartPie.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/DonutChartPie.vue"],
+    },
     "DrawerDemo": {
       name: "DrawerDemo",
       type: "components:example",
@@ -1929,6 +2118,27 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/LabelDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/LabelDemo.vue"],
     },
+    "LineChartCustomTooltip": {
+      name: "LineChartCustomTooltip",
+      type: "components:example",
+      registryDependencies: ["chart-line"],
+      component: () => import("../src/lib/registry/new-york/example/LineChartCustomTooltip.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/LineChartCustomTooltip.vue"],
+    },
+    "LineChartDemo": {
+      name: "LineChartDemo",
+      type: "components:example",
+      registryDependencies: ["chart-line"],
+      component: () => import("../src/lib/registry/new-york/example/LineChartDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/LineChartDemo.vue"],
+    },
+    "LineChartSparkline": {
+      name: "LineChartSparkline",
+      type: "components:example",
+      registryDependencies: ["chart-line"],
+      component: () => import("../src/lib/registry/new-york/example/LineChartSparkline.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/LineChartSparkline.vue"],
+    },
     "MenubarDemo": {
       name: "MenubarDemo",
       type: "components:example",
diff --git a/apps/www/package.json b/apps/www/package.json
index 49224f5e..d4b4b5ab 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -12,7 +12,8 @@
     "typecheck": "vue-tsc",
     "typecheck:registry": "vue-tsc -p tsconfig.registry.json",
     "build:registry": "tsx ./scripts/build-registry.ts",
-    "build:registry-strict": "pnpm typecheck:registry && tsx ./scripts/build-registry.ts"
+    "build:registry-strict": "pnpm typecheck:registry && tsx ./scripts/build-registry.ts",
+    "docs:gen": "tsx ./scripts/autogen.ts"
   },
   "dependencies": {
     "@formkit/auto-animate": "^0.8.2",
@@ -44,9 +45,12 @@
     "zod": "^3.23.3"
   },
   "devDependencies": {
+    "@babel/traverse": "^7.24.1",
+    "@iconify-json/gravity-ui": "^1.1.2",
     "@iconify-json/lucide": "^1.1.180",
     "@iconify-json/ph": "^1.1.12",
     "@iconify-json/radix-icons": "^1.1.14",
+    "@iconify-json/ri": "^1.1.18",
     "@iconify-json/simple-icons": "^1.1.94",
     "@iconify-json/tabler": "^1.1.106",
     "@iconify/vue": "^4.1.2",
@@ -60,7 +64,9 @@
     "@vue/compiler-dom": "^3.4.24",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.19",
+    "fast-glob": "^3.3.2",
     "lodash-es": "^4.17.21",
+    "markdown-it": "^14.1.0",
     "pathe": "^1.1.2",
     "rimraf": "^5.0.5",
     "shiki": "^1.3.0",
@@ -70,6 +76,7 @@
     "typescript": "^5.4.5",
     "unplugin-icons": "^0.18.5",
     "vitepress": "^1.1.3",
+    "vue-component-meta": "^2.0.13",
     "vue-tsc": "^2.0.14"
   }
 }
diff --git a/apps/www/scripts/autogen.ts b/apps/www/scripts/autogen.ts
new file mode 100644
index 00000000..6fc10009
--- /dev/null
+++ b/apps/www/scripts/autogen.ts
@@ -0,0 +1,150 @@
+import { join, parse, resolve } from 'node:path'
+import { existsSync, mkdirSync, writeFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import fg from 'fast-glob'
+import MarkdownIt from 'markdown-it'
+import type { ComponentMeta, MetaCheckerOptions, PropertyMeta, PropertyMetaSchema } from 'vue-component-meta'
+import { createComponentMetaChecker } from 'vue-component-meta'
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url))
+
+const md = new MarkdownIt()
+
+const ROOTPATH = '../'
+const OUTPUTPATH = '../src/content/meta'
+
+const checkerOptions: MetaCheckerOptions = {
+  forceUseTs: true,
+  printer: { newLine: 1 },
+}
+
+const tsconfigChecker = createComponentMetaChecker(
+  resolve(__dirname, ROOTPATH, 'tsconfig.registry.json'),
+  checkerOptions,
+)
+
+const components = fg.sync(['chart/**/*.vue', 'chart*/**/*.vue'], {
+  cwd: resolve(__dirname, ROOTPATH, 'src/lib/registry/default/ui/'),
+  absolute: true,
+})
+
+components.forEach((componentPath) => {
+  try {
+    const componentName = parse(componentPath).name
+    const meta = parseMeta(tsconfigChecker.getComponentMeta(componentPath))
+
+    const metaDirPath = resolve(__dirname, OUTPUTPATH)
+    // if meta dir doesn't exist create
+    if (!existsSync(metaDirPath))
+      mkdirSync(metaDirPath)
+
+    const metaMdFilePath = join(metaDirPath, `${componentName}.md`)
+
+    let parsedString = '<!-- This file was automatic generated. Do not edit it manually -->\n\n'
+    if (meta.props.length)
+      parsedString += `<APITable :type="'prop'" :data="${JSON.stringify(meta.props, null, 2).replace(/"/g, '\'')}" />\n`
+
+    if (meta.events.length)
+      parsedString += `\n<APITable :type="'emit'" :data="${JSON.stringify(meta.events, null, 2).replace(/"/g, '\'')}" />\n`
+
+    if (meta.slots.length)
+      parsedString += `\n<APITable :type="'slot'" :data="${JSON.stringify(meta.slots, null, 2).replace(/"/g, '\'')}" />\n`
+
+    if (meta.methods.length)
+      parsedString += `\n<APITable :type="'method'" :data="${JSON.stringify(meta.methods, null, 2).replace(/"/g, '\'')}" />\n`
+
+    writeFileSync(metaMdFilePath, parsedString)
+  }
+  catch (err) {
+    console.log(err)
+  }
+})
+
+function parseTypeFromSchema(schema: PropertyMetaSchema): string {
+  if (typeof schema === 'object' && (schema.kind === 'enum' || schema.kind === 'array')) {
+    const isFlatEnum = schema.schema?.every(val => typeof val === 'string')
+    const enumValue = schema?.schema?.filter(i => i !== 'undefined') ?? []
+
+    if (isFlatEnum && /^[A-Z]/.test(schema.type))
+      return enumValue.join(' | ')
+    else if (typeof schema.schema?.[0] === 'object' && schema.schema?.[0].kind === 'enum')
+      return schema.schema.map((s: PropertyMetaSchema) => parseTypeFromSchema(s)).join(' | ')
+    else
+      return schema.type
+  }
+  else if (typeof schema === 'object' && schema.kind === 'object') {
+    return schema.type
+  }
+  else if (typeof schema === 'string') {
+    return schema
+  }
+  else {
+    return ''
+  }
+}
+
+// Utilities
+function parseMeta(meta: ComponentMeta) {
+  const props = meta.props
+  // Exclude global props
+    .filter(prop => !prop.global)
+    .map((prop) => {
+      let defaultValue = prop.default
+      const { name, description, required } = prop
+
+      if (name === 'as')
+        defaultValue = defaultValue ?? '"div"'
+
+      if (defaultValue === 'undefined')
+        defaultValue = undefined
+
+      return ({
+        name,
+        description: md.render(description),
+        type: prop.type.replace(/\s*\|\s*undefined/g, ''),
+        required,
+        default: defaultValue ?? undefined,
+      })
+    })
+
+  const events = meta.events
+    .map((event) => {
+      const { name, type } = event
+      return ({
+        name,
+        type: type.replace(/\s*\|\s*undefined/g, ''),
+      })
+    })
+
+  const defaultSlot = meta.slots?.[0]
+  const slots: { name: string, description: string, type: string }[] = []
+
+  if (defaultSlot && defaultSlot.type !== '{}') {
+    const schema = defaultSlot.schema
+    if (typeof schema === 'object' && schema.schema) {
+      Object.values(schema.schema).forEach((childMeta: PropertyMeta) => {
+        slots.push({
+          name: childMeta.name,
+          description: md.render(childMeta.description),
+          type: parseTypeFromSchema(childMeta.schema),
+        })
+      })
+    }
+  }
+
+  // exposed method
+  const methods = meta.exposed
+    .filter(expose => typeof expose.schema === 'object' && expose.schema.kind === 'event')
+    .map(expose => ({
+      name: expose.name,
+      description: md.render(expose.description),
+      type: expose.type,
+    }))
+
+  return {
+    props,
+    events,
+    slots,
+    methods,
+  }
+}
diff --git a/apps/www/src/content/docs/charts.md b/apps/www/src/content/docs/charts.md
new file mode 100644
index 00000000..06a55176
--- /dev/null
+++ b/apps/www/src/content/docs/charts.md
@@ -0,0 +1,107 @@
+---
+title: Charts
+description: Versatile visualization tool, allowing users to represent data using various types of charts for effective analysis.
+label: Alpha
+---
+
+<script setup>
+import Area from '~icons/gravity-ui/chart-area-stacked'
+import Bar from '~icons/gravity-ui/chart-column'
+import Line from '~icons/gravity-ui/chart-line'
+import Pie from '~icons/gravity-ui/chart-pie'
+</script>
+
+<Callout>
+  Only works with Vue >3.3
+</Callout>
+
+`Charts` components were built on top of [Unovis](https://unovis.dev/) (a modular data visualization framework), and inspired by [tremor](https://www.tremor.so).
+
+## Chart type
+
+<div class="grid gap-4 mt-8 sm:grid-cols-2 sm:gap-6 not-docs">
+  <LinkedCard href="/docs/charts/area">
+    <Area class="text-foreground/80 w-11 h-11" />
+    <p class="mt-2 font-medium">Area</p>
+  </LinkedCard>
+
+  <LinkedCard href="/docs/charts/line">
+    <Line class="text-foreground/80 w-11 h-11" />
+    <p class="mt-2 font-medium">Line</p>
+  </LinkedCard>
+
+  <LinkedCard href="/docs/charts/bar">
+    <Bar class="text-foreground/80 w-11 h-11" />
+    <p class="mt-2 font-medium">Bar</p>
+  </LinkedCard>
+
+  <LinkedCard href="/docs/charts/donut">
+    <Pie class="text-foreground/80 w-11 h-11" />
+    <p class="mt-2 font-medium">Donut</p>
+  </LinkedCard>
+</div>
+
+## Installation
+
+<Steps>
+
+### Update `css`
+
+Add the following tooltip styling to your `tailwind.css` file:
+
+```css
+@layer base {
+  :root {
+    /* ... */
+    --vis-tooltip-background-color: none !important;
+    --vis-tooltip-border-color: none !important;
+    --vis-tooltip-text-color: none !important;
+    --vis-tooltip-shadow-color: none !important;
+    --vis-tooltip-backdrop-filter: none !important;
+    --vis-tooltip-padding: none !important;
+
+    --vis-primary-color: var(--primary);
+    /* change to any hsl value you want */
+    --vis-secondary-color: 160 81% 40%;
+    --vis-text-color: var(--muted-foreground);
+  }
+```
+
+If you are not using `css-variables` for your component, you need to update the `--vis-primary-color` and `--vis-text-color` to your desired hsl value.
+
+You may use [this tool](https://redpixelthemes.com/blog/tailwindcss-colors-different-formats/) to help you find the hsl value for your primary color and text color. Be sure to provide `dark` mode styling as well.
+
+</Steps>
+
+## Colors
+
+By default, we construct the primary theme color, and secondary (`--vis-secondary-color`) color with different opacity for the graph.
+
+However, you can always pass in the desired `color` into each chart.
+
+```vue
+<template>
+  <AreaChart
+    :data="data"
+    :colors="['blue', 'pink', 'orange', 'red']"
+  />
+</template>
+```
+
+## Custom tooltip
+
+If you want to customize the `Tooltip` for the chart, you can pass `customTooltip` prop with a custom Vue component.
+The custom component would receive `title` and `data` props, check out [ChartTooltip.vue component](https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/lib/registry/default/ui/chart/ChartTooltip.vue) for example.
+
+The expected prop definition would be:
+
+```ts
+defineProps<{
+  title?: string
+  data: {
+    name: string
+    color: string
+    value: any
+  }[]
+}>()
+```
diff --git a/apps/www/src/content/docs/charts/area.md b/apps/www/src/content/docs/charts/area.md
new file mode 100644
index 00000000..da04b680
--- /dev/null
+++ b/apps/www/src/content/docs/charts/area.md
@@ -0,0 +1,46 @@
+---
+title: Area
+description: An area chart visually represents data over time, displaying trends and patterns through filled-in areas under a line graph.
+source: apps/www/src/lib/registry/default/ui/chart-area
+label: Alpha
+---
+
+<ComponentPreview name="AreaChartDemo"  />
+
+## Installation
+
+<Callout>
+  Only works with Vue >3.3
+</Callout>
+
+<Steps>
+
+### Run the following command
+
+```bash
+npx shadcn-vue@latest add chart-area
+```
+
+### Setup
+
+Follow the [guide](/docs/charts.html#installation) to complete the setup.
+
+</Steps>
+
+## API
+
+<!-- @include: @/content/meta/AreaChart.md -->
+
+## Example
+
+### Sparkline
+
+We can turn the chart into sparkline chart by hiding axis, gridline and legends.
+
+<ComponentPreview name="AreaChartSparkline"  />
+
+### Custom Tooltip
+
+If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](/docs/charts.html#custom-tooltip).
+
+<ComponentPreview name="AreaChartCustomTooltip"  />
diff --git a/apps/www/src/content/docs/charts/bar.md b/apps/www/src/content/docs/charts/bar.md
new file mode 100644
index 00000000..fa0f8029
--- /dev/null
+++ b/apps/www/src/content/docs/charts/bar.md
@@ -0,0 +1,50 @@
+---
+title: Bar
+description: An line chart visually represents data using rectangular bars of varying lengths to compare quantities across different categories or groups.
+source: apps/www/src/lib/registry/default/ui/chart-bar
+label: Alpha
+---
+
+<ComponentPreview name="BarChartDemo"  />
+
+## Installation
+
+<Callout>
+  Only works with Vue >3.3
+</Callout>
+
+<Steps>
+
+### Run the following command
+
+```bash
+npx shadcn-vue@latest add chart-bar
+```
+
+### Setup
+
+Follow the [guide](/docs/charts.html#installation) to complete the setup.
+
+</Steps>
+
+## API
+
+<!-- @include: @/content/meta/BarChart.md -->
+
+## Example
+
+### Stacked
+
+You can stack the bar chart by settings prop `type` to `stacked`.
+
+<ComponentPreview name="BarChartStacked"  />
+
+### Rounded
+
+<ComponentPreview name="BarChartRounded"  />
+
+### Custom Tooltip
+
+If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](/docs/charts.html#custom-tooltip).
+
+<ComponentPreview name="BarChartCustomTooltip"  />
diff --git a/apps/www/src/content/docs/charts/donut.md b/apps/www/src/content/docs/charts/donut.md
new file mode 100644
index 00000000..2ed86267
--- /dev/null
+++ b/apps/www/src/content/docs/charts/donut.md
@@ -0,0 +1,52 @@
+---
+title: Donut
+description: An line chart visually represents data in a circular form, similar to a pie chart but with a central void, emphasizing proportions within categories.
+source: apps/www/src/lib/registry/default/ui/chart-donut
+label: Alpha
+---
+
+<ComponentPreview name="DonutChartDemo"  />
+
+## Installation
+
+<Callout>
+Only works with Vue >3.3
+</Callout>
+
+<Steps>
+
+### Run the following command
+
+```bash
+npx shadcn-vue@latest add chart-donut
+```
+
+### Setup
+
+Follow the [guide](/docs/charts.html#installation) to complete the setup.
+
+</Steps>
+
+## API
+
+<!-- @include: @/content/meta/DonutChart.md -->
+
+## Example
+
+### Pie Chart
+
+If you want to render pie chart instead, pass `type` as `pie`.
+
+<ComponentPreview name="DonutChartPie"  />
+
+### Color
+
+We generate colors automatically based on the primary and secondary color and assigned them accordingly. Feel free to pass in your own array of colors.
+
+<ComponentPreview name="DonutChartColor"  />
+
+### Custom Tooltip
+
+If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](/docs/charts.html#custom-tooltip).
+
+<ComponentPreview name="DonutChartCustomTooltip"  />
diff --git a/apps/www/src/content/docs/charts/line.md b/apps/www/src/content/docs/charts/line.md
new file mode 100644
index 00000000..39cf6f3a
--- /dev/null
+++ b/apps/www/src/content/docs/charts/line.md
@@ -0,0 +1,46 @@
+---
+title: Line
+description: An line chart  visually displays data points connected by straight lines, illustrating trends or relationships over a continuous axis.
+source: apps/www/src/lib/registry/default/ui/chart-line
+label: Alpha
+---
+
+<ComponentPreview name="LineChartDemo"  />
+
+## Installation
+
+<Callout>
+  Only works with Vue >3.3
+</Callout>
+
+<Steps>
+
+### Run the following command
+
+```bash
+npx shadcn-vue@latest add chart-line
+```
+
+### Setup
+
+Follow the [guide](/docs/charts.html#installation) to complete the setup.
+
+</Steps>
+
+## API
+
+<!-- @include: @/content/meta/LineChart.md -->
+
+## Example
+
+### Sparkline
+
+We can turn the chart into sparkline chart by hiding axis, gridline and legends.
+
+<ComponentPreview name="LineChartSparkline"  />
+
+### Custom Tooltip
+
+If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](/docs/charts.html#custom-tooltip).
+
+<ComponentPreview name="LineChartCustomTooltip"  />
diff --git a/apps/www/src/content/docs/components/toast.md b/apps/www/src/content/docs/components/toast.md
index 032fd006..8811e760 100644
--- a/apps/www/src/content/docs/components/toast.md
+++ b/apps/www/src/content/docs/components/toast.md
@@ -45,7 +45,7 @@ import { useToast } from '@/components/ui/toast/use-toast'
 <script setup lang="ts">
 import { Button } from '@/components/ui/button'
 import { useToast } from '@/components/ui/toast/use-toast'
-import { Toaster } from "@/components/ui/toast"
+import { Toaster } from '@/components/ui/toast'
 
 const { toast } = useToast()
 </script>
diff --git a/apps/www/src/content/meta/AreaChart.md b/apps/www/src/content/meta/AreaChart.md
new file mode 100644
index 00000000..16b4c056
--- /dev/null
+++ b/apps/www/src/content/meta/AreaChart.md
@@ -0,0 +1,116 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<APITable :type="'prop'" :data="[
+  {
+    'name': 'data',
+    'description': '<p>The source data, in which each entry is a dictionary.</p>\n',
+    'type': 'Record<string, any>[]',
+    'required': true
+  },
+  {
+    'name': 'categories',
+    'description': '<p>Select the categories from your data. Used to populate the legend and toolip.</p>\n',
+    'type': 'string[]',
+    'required': true
+  },
+  {
+    'name': 'index',
+    'description': '<p>Sets the key to map the data to the axis.</p>\n',
+    'type': 'string',
+    'required': true
+  },
+  {
+    'name': 'colors',
+    'description': '<p>Change the default colors.</p>\n',
+    'type': 'string[]',
+    'required': false
+  },
+  {
+    'name': 'margin',
+    'description': '<p>Margin of each the container</p>\n',
+    'type': 'Spacing',
+    'required': false,
+    'default': '{ top: 0, bottom: 0, left: 0, right: 0 }'
+  },
+  {
+    'name': 'filterOpacity',
+    'description': '<p>Change the opacity of the non-selected field</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '0.2'
+  },
+  {
+    'name': 'xFormatter',
+    'description': '<p>Function to format X label</p>\n',
+    'type': '((tick: number | Date, i: number, ticks: number[] | Date[]) => string)',
+    'required': false
+  },
+  {
+    'name': 'yFormatter',
+    'description': '<p>Function to format Y label</p>\n',
+    'type': '((tick: number | Date, i: number, ticks: number[] | Date[]) => string)',
+    'required': false
+  },
+  {
+    'name': 'showXAxis',
+    'description': '<p>Controls the visibility of the X axis.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'showYAxis',
+    'description': '<p>Controls the visibility of the Y axis.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'showTooltip',
+    'description': '<p>Controls the visibility of tooltip.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'showLegend',
+    'description': '<p>Controls the visibility of legend.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'showGridLine',
+    'description': '<p>Controls the visibility of gridline.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'customTooltip',
+    'description': '<p>Render custom tooltip component.</p>\n',
+    'type': 'Component',
+    'required': false
+  },
+  {
+    'name': 'curveType',
+    'description': '<p>Type of curve</p>\n',
+    'type': 'CurveType',
+    'required': false,
+    'default': 'CurveType.MonotoneX'
+  },
+  {
+    'name': 'showGradiant',
+    'description': '<p>Controls the visibility of gradient.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  }
+]" />
+
+<APITable :type="'emit'" :data="[
+  {
+    'name': 'legendItemClick',
+    'type': '[d: BulletLegendItemInterface, i: number]'
+  }
+]" />
diff --git a/apps/www/src/content/meta/BarChart.md b/apps/www/src/content/meta/BarChart.md
new file mode 100644
index 00000000..4b7f07f3
--- /dev/null
+++ b/apps/www/src/content/meta/BarChart.md
@@ -0,0 +1,116 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<APITable :type="'prop'" :data="[
+  {
+    'name': 'data',
+    'description': '<p>The source data, in which each entry is a dictionary.</p>\n',
+    'type': 'Record<string, any>[]',
+    'required': true
+  },
+  {
+    'name': 'categories',
+    'description': '<p>Select the categories from your data. Used to populate the legend and toolip.</p>\n',
+    'type': 'string[]',
+    'required': true
+  },
+  {
+    'name': 'index',
+    'description': '<p>Sets the key to map the data to the axis.</p>\n',
+    'type': 'string',
+    'required': true
+  },
+  {
+    'name': 'colors',
+    'description': '<p>Change the default colors.</p>\n',
+    'type': 'string[]',
+    'required': false
+  },
+  {
+    'name': 'margin',
+    'description': '<p>Margin of each the container</p>\n',
+    'type': 'Spacing',
+    'required': false,
+    'default': '{ top: 0, bottom: 0, left: 0, right: 0 }'
+  },
+  {
+    'name': 'filterOpacity',
+    'description': '<p>Change the opacity of the non-selected field</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '0.2'
+  },
+  {
+    'name': 'xFormatter',
+    'description': '<p>Function to format X label</p>\n',
+    'type': '((tick: number | Date, i: number, ticks: number[] | Date[]) => string)',
+    'required': false
+  },
+  {
+    'name': 'yFormatter',
+    'description': '<p>Function to format Y label</p>\n',
+    'type': '((tick: number | Date, i: number, ticks: number[] | Date[]) => string)',
+    'required': false
+  },
+  {
+    'name': 'showXAxis',
+    'description': '<p>Controls the visibility of the X axis.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'showYAxis',
+    'description': '<p>Controls the visibility of the Y axis.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'showTooltip',
+    'description': '<p>Controls the visibility of tooltip.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'showLegend',
+    'description': '<p>Controls the visibility of legend.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'showGridLine',
+    'description': '<p>Controls the visibility of gridline.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'customTooltip',
+    'description': '<p>Render custom tooltip component.</p>\n',
+    'type': 'Component',
+    'required': false
+  },
+  {
+    'name': 'type',
+    'description': '<p>Change the type of the chart</p>\n',
+    'type': '\'stacked\' | \'grouped\'',
+    'required': false,
+    'default': '\'grouped\''
+  },
+  {
+    'name': 'roundedCorners',
+    'description': '<p>Rounded bar corners</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '0'
+  }
+]" />
+
+<APITable :type="'emit'" :data="[
+  {
+    'name': 'legendItemClick',
+    'type': '[d: BulletLegendItemInterface, i: number]'
+  }
+]" />
diff --git a/apps/www/src/content/meta/ChartCrosshair.md b/apps/www/src/content/meta/ChartCrosshair.md
new file mode 100644
index 00000000..edc995b4
--- /dev/null
+++ b/apps/www/src/content/meta/ChartCrosshair.md
@@ -0,0 +1,29 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<APITable :type="'prop'" :data="[
+  {
+    'name': 'colors',
+    'description': '',
+    'type': 'string[]',
+    'required': false,
+    'default': '[]'
+  },
+  {
+    'name': 'index',
+    'description': '',
+    'type': 'string',
+    'required': true
+  },
+  {
+    'name': 'items',
+    'description': '',
+    'type': 'BulletLegendItemInterface[]',
+    'required': true
+  },
+  {
+    'name': 'customTooltip',
+    'description': '',
+    'type': 'Component',
+    'required': false
+  }
+]" />
diff --git a/apps/www/src/content/meta/ChartLegend.md b/apps/www/src/content/meta/ChartLegend.md
new file mode 100644
index 00000000..e6c0ed87
--- /dev/null
+++ b/apps/www/src/content/meta/ChartLegend.md
@@ -0,0 +1,22 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<APITable :type="'prop'" :data="[
+  {
+    'name': 'items',
+    'description': '',
+    'type': 'BulletLegendItemInterface[]',
+    'required': false,
+    'default': '[]'
+  }
+]" />
+
+<APITable :type="'emit'" :data="[
+  {
+    'name': 'legendItemClick',
+    'type': '[d: BulletLegendItemInterface, i: number]'
+  },
+  {
+    'name': 'update:items',
+    'type': '[payload: BulletLegendItemInterface[]]'
+  }
+]" />
diff --git a/apps/www/src/content/meta/ChartSingleTooltip.md b/apps/www/src/content/meta/ChartSingleTooltip.md
new file mode 100644
index 00000000..bbde0052
--- /dev/null
+++ b/apps/www/src/content/meta/ChartSingleTooltip.md
@@ -0,0 +1,43 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<APITable :type="'prop'" :data="[
+  {
+    'name': 'valueFormatter',
+    'description': '',
+    'type': '((tick: number, i?: number, ticks?: number[]) => string)',
+    'required': false,
+    'default': '`${tick}`'
+  },
+  {
+    'name': 'index',
+    'description': '',
+    'type': 'string',
+    'required': true
+  },
+  {
+    'name': 'items',
+    'description': '',
+    'type': 'BulletLegendItemInterface[]',
+    'required': false
+  },
+  {
+    'name': 'customTooltip',
+    'description': '',
+    'type': 'Component',
+    'required': false
+  },
+  {
+    'name': 'selector',
+    'description': '',
+    'type': 'string',
+    'required': true
+  }
+]" />
+
+<APITable :type="'method'" :data="[
+  {
+    'name': 'valueFormatter',
+    'description': '',
+    'type': '(tick: number, i?: number | undefined, ticks?: number[] | undefined) => string'
+  }
+]" />
diff --git a/apps/www/src/content/meta/ChartTooltip.md b/apps/www/src/content/meta/ChartTooltip.md
new file mode 100644
index 00000000..9f796d8a
--- /dev/null
+++ b/apps/www/src/content/meta/ChartTooltip.md
@@ -0,0 +1,16 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<APITable :type="'prop'" :data="[
+  {
+    'name': 'title',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'data',
+    'description': '',
+    'type': '{ name: string; color: string; value: any; }[]',
+    'required': true
+  }
+]" />
diff --git a/apps/www/src/content/meta/DonutChart.md b/apps/www/src/content/meta/DonutChart.md
new file mode 100644
index 00000000..73068a30
--- /dev/null
+++ b/apps/www/src/content/meta/DonutChart.md
@@ -0,0 +1,82 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<APITable :type="'prop'" :data="[
+  {
+    'name': 'colors',
+    'description': '<p>Change the default colors.</p>\n',
+    'type': 'string[]',
+    'required': false
+  },
+  {
+    'name': 'index',
+    'description': '<p>Sets the key to map the data to the axis.</p>\n',
+    'type': 'string',
+    'required': true
+  },
+  {
+    'name': 'data',
+    'description': '<p>The source data, in which each entry is a dictionary.</p>\n',
+    'type': 'Record<string, any>[]',
+    'required': true
+  },
+  {
+    'name': 'margin',
+    'description': '<p>Margin of each the container</p>\n',
+    'type': 'Spacing',
+    'required': false,
+    'default': '{ top: 0, bottom: 0, left: 0, right: 0 }'
+  },
+  {
+    'name': 'filterOpacity',
+    'description': '<p>Change the opacity of the non-selected field</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '0.2'
+  },
+  {
+    'name': 'showTooltip',
+    'description': '<p>Controls the visibility of tooltip.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'showLegend',
+    'description': '<p>Controls the visibility of legend.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'category',
+    'description': '<p>Sets the name of the key containing the quantitative chart values.</p>\n',
+    'type': 'string',
+    'required': true
+  },
+  {
+    'name': 'type',
+    'description': '<p>Change the type of the chart</p>\n',
+    'type': '\'donut\' | \'pie\'',
+    'required': false,
+    'default': '\'donut\''
+  },
+  {
+    'name': 'sortFunction',
+    'description': '<p>Function to sort the segment</p>\n',
+    'type': '((a: any, b: any) => number)',
+    'required': false
+  },
+  {
+    'name': 'valueFormatter',
+    'description': '<p>Controls the formatting for the label.</p>\n',
+    'type': '((tick: number, i?: number, ticks?: number[]) => string)',
+    'required': false,
+    'default': '`${tick}`'
+  },
+  {
+    'name': 'customTooltip',
+    'description': '<p>Render custom tooltip component.</p>\n',
+    'type': 'Component',
+    'required': false
+  }
+]" />
diff --git a/apps/www/src/content/meta/LineChart.md b/apps/www/src/content/meta/LineChart.md
new file mode 100644
index 00000000..7492b007
--- /dev/null
+++ b/apps/www/src/content/meta/LineChart.md
@@ -0,0 +1,109 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<APITable :type="'prop'" :data="[
+  {
+    'name': 'data',
+    'description': '<p>The source data, in which each entry is a dictionary.</p>\n',
+    'type': 'Record<string, any>[]',
+    'required': true
+  },
+  {
+    'name': 'categories',
+    'description': '<p>Select the categories from your data. Used to populate the legend and toolip.</p>\n',
+    'type': 'string[]',
+    'required': true
+  },
+  {
+    'name': 'index',
+    'description': '<p>Sets the key to map the data to the axis.</p>\n',
+    'type': 'string',
+    'required': true
+  },
+  {
+    'name': 'colors',
+    'description': '<p>Change the default colors.</p>\n',
+    'type': 'string[]',
+    'required': false
+  },
+  {
+    'name': 'margin',
+    'description': '<p>Margin of each the container</p>\n',
+    'type': 'Spacing',
+    'required': false,
+    'default': '{ top: 0, bottom: 0, left: 0, right: 0 }'
+  },
+  {
+    'name': 'filterOpacity',
+    'description': '<p>Change the opacity of the non-selected field</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '0.2'
+  },
+  {
+    'name': 'xFormatter',
+    'description': '<p>Function to format X label</p>\n',
+    'type': '((tick: number | Date, i: number, ticks: number[] | Date[]) => string)',
+    'required': false
+  },
+  {
+    'name': 'yFormatter',
+    'description': '<p>Function to format Y label</p>\n',
+    'type': '((tick: number | Date, i: number, ticks: number[] | Date[]) => string)',
+    'required': false
+  },
+  {
+    'name': 'showXAxis',
+    'description': '<p>Controls the visibility of the X axis.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'showYAxis',
+    'description': '<p>Controls the visibility of the Y axis.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'showTooltip',
+    'description': '<p>Controls the visibility of tooltip.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'showLegend',
+    'description': '<p>Controls the visibility of legend.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'showGridLine',
+    'description': '<p>Controls the visibility of gridline.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'customTooltip',
+    'description': '<p>Render custom tooltip component.</p>\n',
+    'type': 'Component',
+    'required': false
+  },
+  {
+    'name': 'curveType',
+    'description': '<p>Type of curve</p>\n',
+    'type': 'CurveType',
+    'required': false,
+    'default': 'CurveType.MonotoneX'
+  }
+]" />
+
+<APITable :type="'emit'" :data="[
+  {
+    'name': 'legendItemClick',
+    'type': '[d: BulletLegendItemInterface, i: number]'
+  }
+]" />
diff --git a/apps/www/src/examples/dashboard/components/Overview.vue b/apps/www/src/examples/dashboard/components/Overview.vue
index 98fb6c77..0e932772 100644
--- a/apps/www/src/examples/dashboard/components/Overview.vue
+++ b/apps/www/src/examples/dashboard/components/Overview.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { VisAxis, VisStackedBar, VisXYContainer } from '@unovis/vue'
+import { BarChart } from '@/lib/registry/new-york/ui/chart-bar'
 
-type Data = typeof data[number]
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 5000) + 1000 },
   { name: 'Feb', total: Math.floor(Math.random() * 5000) + 1000 },
@@ -19,28 +18,5 @@ const data = [
 </script>
 
 <template>
-  <VisXYContainer height="350px" :margin="{ left: 20, right: 20 }" :data="data">
-    <VisStackedBar
-      :x="(d: Data, i: number) => i"
-      :y="(d: Data) => d.total"
-      color="#41b883"
-      :rounded-corners="4"
-      :bar-padding="0.15"
-    />
-    <VisAxis
-      type="x"
-      :num-ticks="data.length"
-      :tick-format="(index: number) => data[index]?.name"
-      :grid-line="false"
-      :tick-line="false" color="#888888"
-    />
-    <VisAxis
-      type="y"
-      :num-ticks="data.length"
-      :tick-format="(index: number) => data[index]?.name"
-      :grid-line="false"
-      :tick-line="false"
-      :domain-line="false" color="#888888"
-    />
-  </VisXYContainer>
+  <BarChart :data="data" :categories="['total']" :index="'name'" :rounded-corners="4" />
 </template>
diff --git a/apps/www/src/lib/registry/default/example/AreaChartCustomTooltip.vue b/apps/www/src/lib/registry/default/example/AreaChartCustomTooltip.vue
new file mode 100644
index 00000000..8c4da5e3
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/AreaChartCustomTooltip.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import CustomChartTooltip from './CustomChartTooltip.vue'
+import { AreaChart } from '@/lib/registry/default/ui/chart-area'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <AreaChart
+    index="name"
+    :data="data"
+    :categories="['total', 'predicted']"
+    :custom-tooltip="CustomChartTooltip"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/AreaChartDemo.vue b/apps/www/src/lib/registry/default/example/AreaChartDemo.vue
new file mode 100644
index 00000000..2b37bd5a
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/AreaChartDemo.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { AreaChart } from '@/lib/registry/default/ui/chart-area'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <AreaChart :data="data" index="name" :categories="['total', 'predicted']" />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/AreaChartSparkline.vue b/apps/www/src/lib/registry/default/example/AreaChartSparkline.vue
new file mode 100644
index 00000000..37cb2b65
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/AreaChartSparkline.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { CurveType } from '@unovis/ts'
+import { AreaChart } from '@/lib/registry/default/ui/chart-area'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Aug', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Sep', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Oct', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Nov', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Dec', total: Math.floor(Math.random() * 2000) + 1000 },
+]
+</script>
+
+<template>
+  <AreaChart
+    class="h-[100px] w-[400px]"
+    index="name"
+    :data="data"
+    :categories="['total']"
+    :show-grid-line="false"
+    :show-legend="false"
+    :show-x-axis="false"
+    :show-y-axis="false"
+    :curve-type="CurveType.Linear"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/BarChartCustomTooltip.vue b/apps/www/src/lib/registry/default/example/BarChartCustomTooltip.vue
new file mode 100644
index 00000000..c450772b
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/BarChartCustomTooltip.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import CustomChartTooltip from './CustomChartTooltip.vue'
+import { BarChart } from '@/lib/registry/default/ui/chart-bar'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <BarChart
+    :data="data"
+    index="name"
+    :categories="['total', 'predicted']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+    :custom-tooltip="CustomChartTooltip"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/BarChartDemo.vue b/apps/www/src/lib/registry/default/example/BarChartDemo.vue
new file mode 100644
index 00000000..7fae02ac
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/BarChartDemo.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { BarChart } from '@/lib/registry/default/ui/chart-bar'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <BarChart
+    :data="data"
+    index="name"
+    :categories="['total', 'predicted']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/BarChartRounded.vue b/apps/www/src/lib/registry/default/example/BarChartRounded.vue
new file mode 100644
index 00000000..cb3d6226
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/BarChartRounded.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { BarChart } from '@/lib/registry/default/ui/chart-bar'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <BarChart
+    index="name"
+    :data="data"
+    :categories="['total', 'predicted']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+    :rounded-corners="4"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/BarChartStacked.vue b/apps/www/src/lib/registry/default/example/BarChartStacked.vue
new file mode 100644
index 00000000..b2e7d185
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/BarChartStacked.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { BarChart } from '@/lib/registry/default/ui/chart-bar'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <BarChart
+    index="name"
+    :data="data"
+    :categories="['total', 'predicted']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+    :type="'stacked'"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/CardStats.vue b/apps/www/src/lib/registry/default/example/CardStats.vue
index b1d043dd..2e0e49cd 100644
--- a/apps/www/src/lib/registry/default/example/CardStats.vue
+++ b/apps/www/src/lib/registry/default/example/CardStats.vue
@@ -52,14 +52,9 @@ const lineY = (d: Data) => d.revenue
               left: 10,
               bottom: 0,
             }"
-            :style="{
-              '--theme-primary': `hsl(${
-                theme?.cssVars[isDark ? 'dark' : 'light'].primary
-              })`,
-            }"
           >
-            <VisLine :x="lineX" :y="lineY" color="var(--theme-primary)" />
-            <VisScatter :x="lineX" :y="lineY" :size="6" stroke-color="var(--theme-primary)" :stroke-width="2" color="white" />
+            <VisLine :x="lineX" :y="lineY" color="hsl(var(--primary))" />
+            <VisScatter :x="lineX" :y="lineY" :size="6" stroke-color="hsl(var(--primary))" :stroke-width="2" color="white" />
           </VisXYContainer>
         </div>
       </CardContent>
@@ -91,7 +86,7 @@ const lineY = (d: Data) => d.revenue
               :x="lineX"
               :y="(d: Data) => d.subscription"
               :bar-padding="0.1"
-              :rounded-corners="0" color="var(--theme-primary)"
+              :rounded-corners="0" color="hsl(var(--primary))"
             />
           </VisXYContainer>
         </div>
diff --git a/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue b/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
index f2445fa8..40a994c7 100644
--- a/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
+++ b/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
@@ -16,10 +16,6 @@ import {
 import { themes } from '@/lib/registry/themes'
 import { useConfigStore } from '@/stores/config'
 
-const { isDark } = useData()
-const cfg = useConfigStore()
-const theme = computed(() => themes.find(theme => theme.name === cfg.config.value.theme))
-
 const goal = ref(350)
 
 type Data = typeof data[number]
@@ -84,16 +80,13 @@ const data = [
           :data="data"
           height="60px"
           :style="{
-            'opacity': 0.2,
-            '--theme-primary': `hsl(${
-              theme?.cssVars[isDark ? 'dark' : 'light'].primary
-            })`,
+            opacity: 0.2,
           }"
         >
           <VisStackedBar
             :x="(d: Data, i :number) => i"
             :y="(d: Data) => d.goal"
-            color="var(--theme-primary)"
+            color="hsl(var(--primary))"
             :bar-padding="0.1"
             :rounded-corners="0"
           />
diff --git a/apps/www/src/lib/registry/default/example/Cards/Metric.vue b/apps/www/src/lib/registry/default/example/Cards/Metric.vue
index c734edb2..457a2a26 100644
--- a/apps/www/src/lib/registry/default/example/Cards/Metric.vue
+++ b/apps/www/src/lib/registry/default/example/Cards/Metric.vue
@@ -10,8 +10,6 @@ import {
 } from '@/lib/registry/default/ui/card'
 import { useConfigStore } from '@/stores/config'
 
-const { themePrimary } = useConfigStore()
-
 type Data = typeof data[number]
 const data = [
   { average: 400, today: 240 },
@@ -74,15 +72,14 @@ function computeLineOpacity(val: any, index: number) {
             bottom: 0,
           }"
           :style="{
-            '--theme-primary': themePrimary,
             '--vis-tooltip-padding': '0px',
             '--vis-tooltip-background-color': 'transparent',
             '--vis-tooltip-border-color': 'transparent',
           }"
         >
           <VisTooltip />
-          <VisLine :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :stroke-width="2" color="var(--theme-primary)" :attributes="{ [Line.selectors.linePath]: { opacity: computeLineOpacity } }" />
-          <VisScatter :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :size="6" :stroke-width="2" stroke-color="var(--theme-primary)" color="white" />
+          <VisLine :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :stroke-width="2" color="hsl(var(--primary))" :attributes="{ [Line.selectors.linePath]: { opacity: computeLineOpacity } }" />
+          <VisScatter :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :size="6" :stroke-width="2" stroke-color="hsl(var(--primary))" color="white" />
           <VisCrosshair :template="template" />
         </VisXYContainer>
       </div>
diff --git a/apps/www/src/lib/registry/default/example/CustomChartTooltip.vue b/apps/www/src/lib/registry/default/example/CustomChartTooltip.vue
new file mode 100644
index 00000000..86f72173
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/CustomChartTooltip.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Card, CardContent } from '@/lib/registry/default/ui/card'
+
+defineProps<{
+  title?: string
+  data: {
+    name: string
+    color: string
+    value: any
+  }[]
+}>()
+</script>
+
+<template>
+  <Card class="text-sm">
+    <CardContent class="p-3 min-w-[180px] flex flex-col gap-2">
+      <div v-for="(item, key) in data" :key="key" class="flex justify-between items-center">
+        <div class="flex items-center">
+          <span class="w-1 h-7 mr-4 rounded-full" :style="{ background: item.color }" />
+          <span>{{ item.name }}</span>
+        </div>
+        <span class="font-semibold ml-4">{{ item.value }}</span>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/DonutChartColor.vue b/apps/www/src/lib/registry/default/example/DonutChartColor.vue
new file mode 100644
index 00000000..0ae5b157
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/DonutChartColor.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { DonutChart } from '@/lib/registry/new-york/ui/chart-donut'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+
+const valueFormatter = (tick: number | Date) => typeof tick === 'number' ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}` : ''
+</script>
+
+<template>
+  <DonutChart
+    index="name"
+    :category="'total'"
+    :data="data"
+    :value-formatter="valueFormatter"
+    :colors="['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/DonutChartCustomTooltip.vue b/apps/www/src/lib/registry/default/example/DonutChartCustomTooltip.vue
new file mode 100644
index 00000000..2e927858
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/DonutChartCustomTooltip.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import CustomChartTooltip from './CustomChartTooltip.vue'
+import { DonutChart } from '@/lib/registry/default/ui/chart-donut'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <DonutChart
+    index="name"
+    :category="'total'"
+    :data="data"
+    :custom-tooltip="CustomChartTooltip"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/DonutChartDemo.vue b/apps/www/src/lib/registry/default/example/DonutChartDemo.vue
new file mode 100644
index 00000000..ad8b9844
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/DonutChartDemo.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { DonutChart } from '@/lib/registry/default/ui/chart-donut'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <DonutChart
+    index="name"
+    :category="'total'"
+    :data="data"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/DonutChartPie.vue b/apps/www/src/lib/registry/default/example/DonutChartPie.vue
new file mode 100644
index 00000000..cf3de170
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/DonutChartPie.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { DonutChart } from '@/lib/registry/default/ui/chart-donut'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <DonutChart
+    index="name"
+    :category="'total'"
+    :data="data"
+    :type="'pie'"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/LineChartCustomTooltip.vue b/apps/www/src/lib/registry/default/example/LineChartCustomTooltip.vue
new file mode 100644
index 00000000..fbd20dfa
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/LineChartCustomTooltip.vue
@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import CustomChartTooltip from './CustomChartTooltip.vue'
+import { LineChart } from '@/lib/registry/default/ui/chart-line'
+
+const data = [
+  {
+    'year': 1970,
+    'Export Growth Rate': 2.04,
+    'Import Growth Rate': 1.53,
+  },
+  {
+    'year': 1971,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.58,
+  },
+  {
+    'year': 1972,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1973,
+    'Export Growth Rate': 1.93,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1974,
+    'Export Growth Rate': 1.88,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1975,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.64,
+  },
+  {
+    'year': 1976,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.62,
+  },
+  {
+    'year': 1977,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.69,
+  },
+  {
+    'year': 1978,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1979,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1980,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1981,
+    'Export Growth Rate': 1.81,
+    'Import Growth Rate': 1.72,
+  },
+  {
+    'year': 1982,
+    'Export Growth Rate': 1.84,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1983,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1984,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.78,
+  },
+  {
+    'year': 1985,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.81,
+  },
+  {
+    'year': 1986,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.89,
+  },
+  {
+    'year': 1987,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.91,
+  },
+  {
+    'year': 1988,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1989,
+    'Export Growth Rate': 1.76,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1990,
+    'Export Growth Rate': 1.75,
+    'Import Growth Rate': 1.97,
+  },
+  {
+    'year': 1991,
+    'Export Growth Rate': 1.62,
+    'Import Growth Rate': 1.99,
+  },
+  {
+    'year': 1992,
+    'Export Growth Rate': 1.56,
+    'Import Growth Rate': 2.12,
+  },
+  {
+    'year': 1993,
+    'Export Growth Rate': 1.5,
+    'Import Growth Rate': 2.13,
+  },
+  {
+    'year': 1994,
+    'Export Growth Rate': 1.46,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1995,
+    'Export Growth Rate': 1.43,
+    'Import Growth Rate': 2.17,
+  },
+  {
+    'year': 1996,
+    'Export Growth Rate': 1.4,
+    'Import Growth Rate': 2.2,
+  },
+  {
+    'year': 1997,
+    'Export Growth Rate': 1.37,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1998,
+    'Export Growth Rate': 1.34,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 1999,
+    'Export Growth Rate': 1.32,
+    'Import Growth Rate': 2.05,
+  },
+  {
+    'year': 2000,
+    'Export Growth Rate': 1.33,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 2001,
+    'Export Growth Rate': 1.31,
+    'Import Growth Rate': 2.08,
+  },
+  {
+    'year': 2002,
+    'Export Growth Rate': 1.29,
+    'Import Growth Rate': 2.1,
+  },
+  {
+    'year': 2003,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 2004,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.21,
+  },
+  {
+    'year': 2005,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.23,
+  },
+  {
+    'year': 2006,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.29,
+  },
+  {
+    'year': 2007,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2008,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2009,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2010,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2011,
+    'Export Growth Rate': 1.24,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2012,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2013,
+    'Export Growth Rate': 1.22,
+    'Import Growth Rate': 2.3,
+  },
+  {
+    'year': 2014,
+    'Export Growth Rate': 1.2,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2015,
+    'Export Growth Rate': 1.17,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2016,
+    'Export Growth Rate': 1.16,
+    'Import Growth Rate': 2.41,
+  },
+  {
+    'year': 2017,
+    'Export Growth Rate': 1.13,
+    'Import Growth Rate': 2.44,
+  },
+  {
+    'year': 2018,
+    'Export Growth Rate': 1.07,
+    'Import Growth Rate': 2.45,
+  },
+  {
+    'year': 2019,
+    'Export Growth Rate': 1.03,
+    'Import Growth Rate': 2.47,
+  },
+  {
+    'year': 2020,
+    'Export Growth Rate': 0.92,
+    'Import Growth Rate': 2.48,
+  },
+  {
+    'year': 2021,
+    'Export Growth Rate': 0.82,
+    'Import Growth Rate': 2.51,
+  },
+]
+</script>
+
+<template>
+  <LineChart
+    :data="data"
+    index="year"
+    :categories="['Export Growth Rate', 'Import Growth Rate']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+    :custom-tooltip="CustomChartTooltip"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/LineChartDemo.vue b/apps/www/src/lib/registry/default/example/LineChartDemo.vue
new file mode 100644
index 00000000..f5a2714b
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/LineChartDemo.vue
@@ -0,0 +1,279 @@
+<script setup lang="ts">
+import { LineChart } from '@/lib/registry/default/ui/chart-line'
+
+const data = [
+  {
+    'year': 1970,
+    'Export Growth Rate': 2.04,
+    'Import Growth Rate': 1.53,
+  },
+  {
+    'year': 1971,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.58,
+  },
+  {
+    'year': 1972,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1973,
+    'Export Growth Rate': 1.93,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1974,
+    'Export Growth Rate': 1.88,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1975,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.64,
+  },
+  {
+    'year': 1976,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.62,
+  },
+  {
+    'year': 1977,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.69,
+  },
+  {
+    'year': 1978,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1979,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1980,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1981,
+    'Export Growth Rate': 1.81,
+    'Import Growth Rate': 1.72,
+  },
+  {
+    'year': 1982,
+    'Export Growth Rate': 1.84,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1983,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1984,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.78,
+  },
+  {
+    'year': 1985,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.81,
+  },
+  {
+    'year': 1986,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.89,
+  },
+  {
+    'year': 1987,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.91,
+  },
+  {
+    'year': 1988,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1989,
+    'Export Growth Rate': 1.76,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1990,
+    'Export Growth Rate': 1.75,
+    'Import Growth Rate': 1.97,
+  },
+  {
+    'year': 1991,
+    'Export Growth Rate': 1.62,
+    'Import Growth Rate': 1.99,
+  },
+  {
+    'year': 1992,
+    'Export Growth Rate': 1.56,
+    'Import Growth Rate': 2.12,
+  },
+  {
+    'year': 1993,
+    'Export Growth Rate': 1.5,
+    'Import Growth Rate': 2.13,
+  },
+  {
+    'year': 1994,
+    'Export Growth Rate': 1.46,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1995,
+    'Export Growth Rate': 1.43,
+    'Import Growth Rate': 2.17,
+  },
+  {
+    'year': 1996,
+    'Export Growth Rate': 1.4,
+    'Import Growth Rate': 2.2,
+  },
+  {
+    'year': 1997,
+    'Export Growth Rate': 1.37,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1998,
+    'Export Growth Rate': 1.34,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 1999,
+    'Export Growth Rate': 1.32,
+    'Import Growth Rate': 2.05,
+  },
+  {
+    'year': 2000,
+    'Export Growth Rate': 1.33,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 2001,
+    'Export Growth Rate': 1.31,
+    'Import Growth Rate': 2.08,
+  },
+  {
+    'year': 2002,
+    'Export Growth Rate': 1.29,
+    'Import Growth Rate': 2.1,
+  },
+  {
+    'year': 2003,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 2004,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.21,
+  },
+  {
+    'year': 2005,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.23,
+  },
+  {
+    'year': 2006,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.29,
+  },
+  {
+    'year': 2007,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2008,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2009,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2010,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2011,
+    'Export Growth Rate': 1.24,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2012,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2013,
+    'Export Growth Rate': 1.22,
+    'Import Growth Rate': 2.3,
+  },
+  {
+    'year': 2014,
+    'Export Growth Rate': 1.2,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2015,
+    'Export Growth Rate': 1.17,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2016,
+    'Export Growth Rate': 1.16,
+    'Import Growth Rate': 2.41,
+  },
+  {
+    'year': 2017,
+    'Export Growth Rate': 1.13,
+    'Import Growth Rate': 2.44,
+  },
+  {
+    'year': 2018,
+    'Export Growth Rate': 1.07,
+    'Import Growth Rate': 2.45,
+  },
+  {
+    'year': 2019,
+    'Export Growth Rate': 1.03,
+    'Import Growth Rate': 2.47,
+  },
+  {
+    'year': 2020,
+    'Export Growth Rate': 0.92,
+    'Import Growth Rate': 2.48,
+  },
+  {
+    'year': 2021,
+    'Export Growth Rate': 0.82,
+    'Import Growth Rate': 2.51,
+  },
+]
+</script>
+
+<template>
+  <LineChart
+    :data="data"
+    index="year"
+    :categories="['Export Growth Rate', 'Import Growth Rate']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/LineChartSparkline.vue b/apps/www/src/lib/registry/default/example/LineChartSparkline.vue
new file mode 100644
index 00000000..6aa2ef6c
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/LineChartSparkline.vue
@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import { LineChart } from '@/lib/registry/default/ui/chart-line'
+
+const data = [
+  {
+    'year': 1970,
+    'Export Growth Rate': 2.04,
+    'Import Growth Rate': 1.53,
+  },
+  {
+    'year': 1971,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.58,
+  },
+  {
+    'year': 1972,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1973,
+    'Export Growth Rate': 1.93,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1974,
+    'Export Growth Rate': 1.88,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1975,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.64,
+  },
+  {
+    'year': 1976,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.62,
+  },
+  {
+    'year': 1977,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.69,
+  },
+  {
+    'year': 1978,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1979,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1980,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1981,
+    'Export Growth Rate': 1.81,
+    'Import Growth Rate': 1.72,
+  },
+  {
+    'year': 1982,
+    'Export Growth Rate': 1.84,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1983,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1984,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.78,
+  },
+  {
+    'year': 1985,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.81,
+  },
+  {
+    'year': 1986,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.89,
+  },
+  {
+    'year': 1987,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.91,
+  },
+  {
+    'year': 1988,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1989,
+    'Export Growth Rate': 1.76,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1990,
+    'Export Growth Rate': 1.75,
+    'Import Growth Rate': 1.97,
+  },
+  {
+    'year': 1991,
+    'Export Growth Rate': 1.62,
+    'Import Growth Rate': 1.99,
+  },
+  {
+    'year': 1992,
+    'Export Growth Rate': 1.56,
+    'Import Growth Rate': 2.12,
+  },
+  {
+    'year': 1993,
+    'Export Growth Rate': 1.5,
+    'Import Growth Rate': 2.13,
+  },
+  {
+    'year': 1994,
+    'Export Growth Rate': 1.46,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1995,
+    'Export Growth Rate': 1.43,
+    'Import Growth Rate': 2.17,
+  },
+  {
+    'year': 1996,
+    'Export Growth Rate': 1.4,
+    'Import Growth Rate': 2.2,
+  },
+  {
+    'year': 1997,
+    'Export Growth Rate': 1.37,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1998,
+    'Export Growth Rate': 1.34,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 1999,
+    'Export Growth Rate': 1.32,
+    'Import Growth Rate': 2.05,
+  },
+  {
+    'year': 2000,
+    'Export Growth Rate': 1.33,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 2001,
+    'Export Growth Rate': 1.31,
+    'Import Growth Rate': 2.08,
+  },
+  {
+    'year': 2002,
+    'Export Growth Rate': 1.29,
+    'Import Growth Rate': 2.1,
+  },
+  {
+    'year': 2003,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 2004,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.21,
+  },
+  {
+    'year': 2005,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.23,
+  },
+  {
+    'year': 2006,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.29,
+  },
+  {
+    'year': 2007,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2008,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2009,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2010,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2011,
+    'Export Growth Rate': 1.24,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2012,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2013,
+    'Export Growth Rate': 1.22,
+    'Import Growth Rate': 2.3,
+  },
+  {
+    'year': 2014,
+    'Export Growth Rate': 1.2,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2015,
+    'Export Growth Rate': 1.17,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2016,
+    'Export Growth Rate': 1.16,
+    'Import Growth Rate': 2.41,
+  },
+  {
+    'year': 2017,
+    'Export Growth Rate': 1.13,
+    'Import Growth Rate': 2.44,
+  },
+  {
+    'year': 2018,
+    'Export Growth Rate': 1.07,
+    'Import Growth Rate': 2.45,
+  },
+  {
+    'year': 2019,
+    'Export Growth Rate': 1.03,
+    'Import Growth Rate': 2.47,
+  },
+  {
+    'year': 2020,
+    'Export Growth Rate': 0.92,
+    'Import Growth Rate': 2.48,
+  },
+  {
+    'year': 2021,
+    'Export Growth Rate': 0.82,
+    'Import Growth Rate': 2.51,
+  },
+]
+</script>
+
+<template>
+  <LineChart
+    index="year"
+    class="h-[100px] w-[400px]"
+    :data="data"
+    :categories="['Export Growth Rate']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+    :show-tooltip="false"
+    :show-grid-line="false"
+    :show-legend="false"
+    :show-x-axis="false"
+    :show-y-axis="false"
+  />
+</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
index e18f26bb..1b00c326 100644
--- a/apps/www/src/lib/registry/default/ui/button/index.ts
+++ b/apps/www/src/lib/registry/default/ui/button/index.ts
@@ -19,6 +19,7 @@ export const buttonVariants = cva(
       },
       size: {
         default: 'h-10 px-4 py-2',
+        xs: 'h-7 rounded px-2',
         sm: 'h-9 rounded-md px-3',
         lg: 'h-11 rounded-md px-8',
         icon: 'h-10 w-10',
diff --git a/apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue b/apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue
new file mode 100644
index 00000000..5d3bf2ae
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { type BulletLegendItemInterface, CurveType } from '@unovis/ts'
+import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
+import { Area, Axis, Line } from '@unovis/ts'
+import { type Component, computed, ref } from 'vue'
+import { useMounted } from '@vueuse/core'
+import { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<BaseChartProps<T> & {
+  /**
+   * Render custom tooltip component.
+   */
+  customTooltip?: Component
+  /**
+   * Type of curve
+   */
+  curveType?: CurveType
+  /**
+   * Controls the visibility of gradient.
+   * @default true
+   */
+  showGradiant?: boolean
+}>(), {
+  curveType: CurveType.MonotoneX,
+  filterOpacity: 0.2,
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+  showXAxis: true,
+  showYAxis: true,
+  showTooltip: true,
+  showLegend: true,
+  showGridLine: true,
+  showGradiant: true,
+})
+
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
+type KeyOfT = Extract<keyof T, string>
+type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
+const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
+
+const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
+  name: category,
+  color: colors.value[i],
+  inactive: false,
+})))
+
+const isMounted = useMounted()
+
+function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
+  emits('legendItemClick', d, i)
+}
+</script>
+
+<template>
+  <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
+    <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
+
+    <VisXYContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data">
+      <svg width="0" height="0">
+        <defs>
+          <linearGradient v-for="(color, i) in colors" :id="`color-${i}`" :key="i" x1="0" y1="0" x2="0" y2="1">
+            <template v-if="showGradiant">
+              <stop offset="5%" :stop-color="color" stop-opacity="0.4" />
+              <stop offset="95%" :stop-color="color" stop-opacity="0" />
+            </template>
+            <template v-else>
+              <stop offset="0%" :stop-color="color" />
+            </template>
+          </linearGradient>
+        </defs>
+      </svg>
+
+      <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" :custom-tooltip="customTooltip" />
+
+      <template v-for="(category, i) in categories" :key="category">
+        <VisArea
+          :x="(d: Data, i: number) => i"
+          :y="(d: Data) => d[category]"
+          color="auto"
+          :curve-type="curveType"
+          :attributes="{
+            [Area.selectors.area]: {
+              fill: `url(#color-${i})`,
+            },
+          }"
+          :opacity="legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1"
+        />
+      </template>
+
+      <template v-for="(category, i) in categories" :key="category">
+        <VisLine
+          :x="(d: Data, i: number) => i"
+          :y="(d: Data) => d[category]"
+          :color="colors[i]"
+          :curve-type="curveType"
+          :attributes="{
+            [Line.selectors.line]: {
+              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,
+            },
+          }"
+        />
+      </template>
+
+      <VisAxis
+        v-if="showXAxis"
+        type="x"
+        :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
+        :grid-line="false"
+        :tick-line="false"
+        tick-text-color="hsl(var(--vis-text-color))"
+      />
+      <VisAxis
+        v-if="showYAxis"
+        type="y"
+        :tick-line="false"
+        :tick-format="yFormatter"
+        :domain-line="false"
+        :grid-line="showGridLine"
+        :attributes="{
+          [Axis.selectors.grid]: {
+            class: 'text-muted',
+          },
+        }"
+        tick-text-color="hsl(var(--vis-text-color))"
+      />
+
+      <slot />
+    </VisXYContainer>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/chart-area/index.ts b/apps/www/src/lib/registry/default/ui/chart-area/index.ts
new file mode 100644
index 00000000..81345fd8
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/chart-area/index.ts
@@ -0,0 +1 @@
+export { default as AreaChart } from './AreaChart.vue'
diff --git a/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue b/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue
new file mode 100644
index 00000000..31cd512f
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import type { BulletLegendItemInterface, Spacing } from '@unovis/ts'
+import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'
+import { Axis, GroupedBar, StackedBar } from '@unovis/ts'
+import { type Component, computed, ref } from 'vue'
+import { useMounted } from '@vueuse/core'
+import { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<BaseChartProps<T> & {
+  /**
+   * Render custom tooltip component.
+   */
+  customTooltip?: Component
+  /**
+   * Change the type of the chart
+   * @default "grouped"
+   */
+  type?: 'stacked' | 'grouped'
+  /**
+   * Rounded bar corners
+   * @default 0
+   */
+  roundedCorners?: number
+}>(), {
+  type: 'grouped',
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+  filterOpacity: 0.2,
+  roundedCorners: 0,
+  showXAxis: true,
+  showYAxis: true,
+  showTooltip: true,
+  showLegend: true,
+  showGridLine: true,
+})
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
+type KeyOfT = Extract<keyof T, string>
+type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
+const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
+const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
+  name: category,
+  color: colors.value[i],
+  inactive: false,
+})))
+
+const isMounted = useMounted()
+
+function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
+  emits('legendItemClick', d, i)
+}
+
+const VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)
+const selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)
+</script>
+
+<template>
+  <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
+    <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
+
+    <VisXYContainer
+      :data="data"
+      :style="{ height: isMounted ? '100%' : 'auto' }"
+      :margin="margin"
+    >
+      <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :custom-tooltip="customTooltip" :index="index" />
+
+      <VisBarComponent
+        :x="(d: Data, i: number) => i"
+        :y="categories.map(category => (d: Data) => d[category]) "
+        :color="colors"
+        :rounded-corners="roundedCorners"
+        :bar-padding="0.05"
+        :attributes="{
+          [selectorsBar]: {
+            opacity: (d: Data, i:number) => {
+              const pos = i % categories.length
+              return legendItems[pos]?.inactive ? filterOpacity : 1
+            },
+          },
+        }"
+      />
+
+      <VisAxis
+        v-if="showXAxis"
+        type="x"
+        :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
+        :grid-line="false"
+        :tick-line="false"
+        tick-text-color="hsl(var(--vis-text-color))"
+      />
+      <VisAxis
+        v-if="showYAxis"
+        type="y"
+        :tick-line="false"
+        :tick-format="yFormatter"
+        :domain-line="false"
+        :grid-line="showGridLine"
+        :attributes="{
+          [Axis.selectors.grid]: {
+            class: 'text-muted',
+          },
+        }"
+        tick-text-color="hsl(var(--vis-text-color))"
+      />
+
+      <slot />
+    </VisXYContainer>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/chart-bar/index.ts b/apps/www/src/lib/registry/default/ui/chart-bar/index.ts
new file mode 100644
index 00000000..805149a5
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/chart-bar/index.ts
@@ -0,0 +1 @@
+export { default as BarChart } from './BarChart.vue'
diff --git a/apps/www/src/lib/registry/default/ui/chart-donut/DonutChart.vue b/apps/www/src/lib/registry/default/ui/chart-donut/DonutChart.vue
new file mode 100644
index 00000000..9ab5f652
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/chart-donut/DonutChart.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { VisDonut, VisSingleContainer } from '@unovis/vue'
+import { Donut } from '@unovis/ts'
+import { type Component, computed, ref } from 'vue'
+import { useMounted } from '@vueuse/core'
+import { type BaseChartProps, ChartSingleTooltip, defaultColors } from '@/lib/registry/default/ui/chart'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {
+  /**
+   * Sets the name of the key containing the quantitative chart values.
+   */
+  category: KeyOfT
+  /**
+   * Change the type of the chart
+   * @default "donut"
+   */
+  type?: 'donut' | 'pie'
+  /**
+   * Function to sort the segment
+   */
+  sortFunction?: (a: any, b: any) => number | undefined
+  /**
+   * Controls the formatting for the label.
+   */
+  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string
+  /**
+   * Render custom tooltip component.
+   */
+  customTooltip?: Component
+}>(), {
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+  sortFunction: () => undefined,
+  valueFormatter: (tick: number) => `${tick}`,
+  type: 'donut',
+  filterOpacity: 0.2,
+  showTooltip: true,
+  showLegend: true,
+})
+
+type KeyOfT = Extract<keyof T, string>
+type Data = typeof props.data[number]
+
+const category = computed(() => props.category as KeyOfT)
+const index = computed(() => props.index as KeyOfT)
+
+const isMounted = useMounted()
+const activeSegmentKey = ref<string>()
+const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))
+const legendItems = computed(() => props.data.map((item, i) => ({
+  name: item[props.index],
+  color: colors.value[i],
+  inactive: false,
+})))
+
+const totalValue = computed(() => props.data.reduce((prev, curr) => {
+  return prev + curr[props.category]
+}, 0))
+</script>
+
+<template>
+  <div :class="cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')">
+    <VisSingleContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data">
+      <ChartSingleTooltip
+        :selector="Donut.selectors.segment"
+        :index="category"
+        :items="legendItems"
+        :value-formatter="valueFormatter"
+        :custom-tooltip="customTooltip"
+      />
+
+      <VisDonut
+        :value="(d: Data) => d[category]"
+        :sort-function="sortFunction"
+        :color="colors"
+        :arc-width="type === 'donut' ? 20 : 0"
+        :show-background="false"
+        :central-label="type === 'donut' ? valueFormatter(totalValue) : ''"
+        :events="{
+          [Donut.selectors.segment]: {
+            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {
+              if (d?.data?.[index] === activeSegmentKey) {
+                activeSegmentKey = undefined
+                elements.forEach(el => el.style.opacity = '1')
+              }
+              else {
+                activeSegmentKey = d?.data?.[index]
+                elements.forEach(el => el.style.opacity = `${filterOpacity}`)
+                elements[i].style.opacity = '1'
+              }
+            },
+          },
+        }"
+      />
+
+      <slot />
+    </VisSingleContainer>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/chart-donut/index.ts b/apps/www/src/lib/registry/default/ui/chart-donut/index.ts
new file mode 100644
index 00000000..b42413a0
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/chart-donut/index.ts
@@ -0,0 +1 @@
+export { default as DonutChart } from './DonutChart.vue'
diff --git a/apps/www/src/lib/registry/default/ui/chart-line/LineChart.vue b/apps/www/src/lib/registry/default/ui/chart-line/LineChart.vue
new file mode 100644
index 00000000..05025f49
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/chart-line/LineChart.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { type BulletLegendItemInterface, CurveType } from '@unovis/ts'
+import { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
+import { Axis, Line } from '@unovis/ts'
+import { type Component, computed, ref } from 'vue'
+import { useMounted } from '@vueuse/core'
+import { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<BaseChartProps<T> & {
+  /**
+   * Render custom tooltip component.
+   */
+  customTooltip?: Component
+  /**
+   * Type of curve
+   */
+  curveType?: CurveType
+}>(), {
+  curveType: CurveType.MonotoneX,
+  filterOpacity: 0.2,
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+  showXAxis: true,
+  showYAxis: true,
+  showTooltip: true,
+  showLegend: true,
+  showGridLine: true,
+})
+
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
+type KeyOfT = Extract<keyof T, string>
+type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
+const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
+
+const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
+  name: category,
+  color: colors.value[i],
+  inactive: false,
+})))
+
+const isMounted = useMounted()
+
+function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
+  emits('legendItemClick', d, i)
+}
+</script>
+
+<template>
+  <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
+    <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
+
+    <VisXYContainer
+      :margin="{ left: 20, right: 20 }"
+      :data="data"
+      :style="{ height: isMounted ? '100%' : 'auto' }"
+    >
+      <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" :custom-tooltip="customTooltip" />
+
+      <template v-for="(category, i) in categories" :key="category">
+        <VisLine
+          :x="(d: Data, i: number) => i"
+          :y="(d: Data) => d[category]"
+          :curve-type="curveType"
+          :color="colors[i]"
+          :attributes="{
+            [Line.selectors.line]: {
+              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,
+            },
+          }"
+        />
+      </template>
+
+      <VisAxis
+        v-if="showXAxis"
+        type="x"
+        :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
+        :grid-line="false"
+        :tick-line="false"
+        tick-text-color="hsl(var(--vis-text-color))"
+      />
+      <VisAxis
+        v-if="showYAxis"
+        type="y"
+        :tick-line="false"
+        :tick-format="yFormatter"
+        :domain-line="false"
+        :grid-line="showGridLine"
+        :attributes="{
+          [Axis.selectors.grid]: {
+            class: 'text-muted',
+          },
+        }"
+        tick-text-color="hsl(var(--vis-text-color))"
+      />
+
+      <slot />
+    </VisXYContainer>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/chart-line/index.ts b/apps/www/src/lib/registry/default/ui/chart-line/index.ts
new file mode 100644
index 00000000..5d827c88
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/chart-line/index.ts
@@ -0,0 +1 @@
+export { default as LineChart } from './LineChart.vue'
diff --git a/apps/www/src/lib/registry/default/ui/chart/ChartCrosshair.vue b/apps/www/src/lib/registry/default/ui/chart/ChartCrosshair.vue
new file mode 100644
index 00000000..4440c5ee
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/chart/ChartCrosshair.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { VisCrosshair, VisTooltip } from '@unovis/vue'
+import type { BulletLegendItemInterface } from '@unovis/ts'
+import { omit } from '@unovis/ts'
+import { type Component, createApp } from 'vue'
+import { ChartTooltip } from '@/lib/registry/default/ui/chart'
+
+const props = withDefaults(defineProps<{
+  colors: string[]
+  index: string
+  items: BulletLegendItemInterface[]
+  customTooltip?: Component
+}>(), {
+  colors: () => [],
+})
+
+// Use weakmap to store reference to each datapoint for Tooltip
+const wm = new WeakMap()
+function template(d: any) {
+  if (wm.has(d)) {
+    return wm.get(d)
+  }
+  else {
+    const componentDiv = document.createElement('div')
+    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
+      const legendReference = props.items.find(i => i.name === key)
+      return { ...legendReference, value }
+    })
+    const TooltipComponent = props.customTooltip ?? ChartTooltip
+    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)
+    wm.set(d, componentDiv.innerHTML)
+    return componentDiv.innerHTML
+  }
+}
+
+function color(d: unknown, i: number) {
+  return props.colors[i] ?? 'transparent'
+}
+</script>
+
+<template>
+  <VisTooltip :horizontal-shift="20" :vertical-shift="20" />
+  <VisCrosshair :template="template" :color="color" />
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/chart/ChartLegend.vue b/apps/www/src/lib/registry/default/ui/chart/ChartLegend.vue
new file mode 100644
index 00000000..9a959b56
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/chart/ChartLegend.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { VisBulletLegend } from '@unovis/vue'
+import type { BulletLegendItemInterface } from '@unovis/ts'
+import { BulletLegend } from '@unovis/ts'
+import { nextTick, onMounted, ref } from 'vue'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+
+const props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {
+  items: () => [],
+})
+
+const emits = defineEmits<{
+  'legendItemClick': [d: BulletLegendItemInterface, i: number]
+  'update:items': [payload: BulletLegendItemInterface[]]
+}>()
+
+const elRef = ref<HTMLElement>()
+
+onMounted(() => {
+  const selector = `.${BulletLegend.selectors.item}`
+  nextTick(() => {
+    const elements = elRef.value?.querySelectorAll(selector)
+    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')
+    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))
+  })
+})
+
+function onLegendItemClick(d: BulletLegendItemInterface, i: number) {
+  emits('legendItemClick', d, i)
+  const isBulletActive = !props.items[i].inactive
+  const isFilterApplied = props.items.some(i => i.inactive)
+  if (isFilterApplied && isBulletActive) {
+    // reset filter
+    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))
+  }
+  else {
+    // apply selection, set other item as inactive
+    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))
+  }
+}
+</script>
+
+<template>
+  <div ref="elRef" class="w-max">
+    <VisBulletLegend
+      :items="items"
+      :on-legend-item-click="onLegendItemClick"
+    />
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/chart/ChartSingleTooltip.vue b/apps/www/src/lib/registry/default/ui/chart/ChartSingleTooltip.vue
new file mode 100644
index 00000000..23ce7a70
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/chart/ChartSingleTooltip.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { VisTooltip } from '@unovis/vue'
+import type { BulletLegendItemInterface } from '@unovis/ts'
+import { omit } from '@unovis/ts'
+import { type Component, createApp } from 'vue'
+import { ChartTooltip } from '@/lib/registry/default/ui/chart'
+
+const props = withDefaults(defineProps<{
+  selector: string
+  index: string
+  items?: BulletLegendItemInterface[]
+  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string
+  customTooltip?: Component
+}>(), {
+  valueFormatter: (tick: number) => `${tick}`,
+})
+
+// Use weakmap to store reference to each datapoint for Tooltip
+const wm = new WeakMap()
+function template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {
+  if (props.index in d) {
+    if (wm.has(d)) {
+      return wm.get(d)
+    }
+    else {
+      const componentDiv = document.createElement('div')
+      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
+        const legendReference = props.items?.find(i => i.name === key)
+        return { ...legendReference, value: props.valueFormatter(value) }
+      })
+      const TooltipComponent = props.customTooltip ?? ChartTooltip
+      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)
+      wm.set(d, componentDiv.innerHTML)
+      return componentDiv.innerHTML
+    }
+  }
+
+  else {
+    const data = d.data
+
+    if (wm.has(data)) {
+      return wm.get(data)
+    }
+    else {
+      const style = getComputedStyle(elements[i])
+      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]
+      const componentDiv = document.createElement('div')
+      const TooltipComponent = props.customTooltip ?? ChartTooltip
+      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)
+      wm.set(d, componentDiv.innerHTML)
+      return componentDiv.innerHTML
+    }
+  }
+}
+</script>
+
+<template>
+  <VisTooltip
+    :horizontal-shift="20" :vertical-shift="20" :triggers="{
+      [selector]: template,
+    }"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/chart/ChartTooltip.vue b/apps/www/src/lib/registry/default/ui/chart/ChartTooltip.vue
new file mode 100644
index 00000000..8f2be084
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/chart/ChartTooltip.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
+
+defineProps<{
+  title?: string
+  data: {
+    name: string
+    color: string
+    value: any
+  }[]
+}>()
+</script>
+
+<template>
+  <Card class="text-sm">
+    <CardHeader v-if="title" class="p-3 border-b">
+      <CardTitle>
+        {{ title }}
+      </CardTitle>
+    </CardHeader>
+    <CardContent class="p-3 min-w-[180px] flex flex-col gap-1">
+      <div v-for="(item, key) in data" :key="key" class="flex justify-between">
+        <div class="flex items-center">
+          <span class="w-2.5 h-2.5 mr-2">
+            <svg width="100%" height="100%" viewBox="0 0 30 30">
+              <path
+                d=" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0"
+                :stroke="item.color"
+                :fill="item.color"
+                stroke-width="1"
+              />
+            </svg>
+          </span>
+          <span>{{ item.name }}</span>
+        </div>
+        <span class="font-semibold ml-4">{{ item.value }}</span>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/chart/index.ts b/apps/www/src/lib/registry/default/ui/chart/index.ts
new file mode 100644
index 00000000..e2d64c17
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/chart/index.ts
@@ -0,0 +1,18 @@
+export { default as ChartTooltip } from './ChartTooltip.vue'
+export { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'
+export { default as ChartLegend } from './ChartLegend.vue'
+export { default as ChartCrosshair } from './ChartCrosshair.vue'
+
+export function defaultColors(count: number = 3) {
+  const quotient = Math.floor(count / 2)
+  const remainder = count % 2
+
+  const primaryCount = quotient + remainder
+  const secondaryCount = quotient
+  return [
+    ...Array.from(Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),
+    ...Array.from(Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),
+  ]
+}
+
+export * from './interface'
diff --git a/apps/www/src/lib/registry/default/ui/chart/interface.ts b/apps/www/src/lib/registry/default/ui/chart/interface.ts
new file mode 100644
index 00000000..c3838afc
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/chart/interface.ts
@@ -0,0 +1,64 @@
+import type { Spacing } from '@unovis/ts'
+
+type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
+
+export interface BaseChartProps<T extends Record<string, any>> {
+  /**
+   * The source data, in which each entry is a dictionary.
+   */
+  data: T[]
+  /**
+   * Select the categories from your data. Used to populate the legend and toolip.
+   */
+  categories: KeyOf<T>[]
+  /**
+   * Sets the key to map the data to the axis.
+   */
+  index: KeyOf<T>
+  /**
+   * Change the default colors.
+   */
+  colors?: string[]
+  /**
+   * Margin of each the container
+   */
+  margin?: Spacing
+  /**
+   * Change the opacity of the non-selected field
+   * @default 0.2
+   */
+  filterOpacity?: number
+  /**
+   * Function to format X label
+   */
+  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Function to format Y label
+   */
+  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Controls the visibility of the X axis.
+   * @default true
+   */
+  showXAxis?: boolean
+  /**
+   * Controls the visibility of the Y axis.
+   * @default true
+   */
+  showYAxis?: boolean
+  /**
+   * Controls the visibility of tooltip.
+   * @default true
+   */
+  showTooltip?: boolean
+  /**
+   * Controls the visibility of legend.
+   * @default true
+   */
+  showLegend?: boolean
+  /**
+   * Controls the visibility of gridline.
+   * @default true
+   */
+  showGridLine?: boolean
+}
diff --git a/apps/www/src/lib/registry/new-york/example/AreaChartCustomTooltip.vue b/apps/www/src/lib/registry/new-york/example/AreaChartCustomTooltip.vue
new file mode 100644
index 00000000..80e76039
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/AreaChartCustomTooltip.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import CustomChartTooltip from './CustomChartTooltip.vue'
+import { AreaChart } from '@/lib/registry/new-york/ui/chart-area'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <AreaChart
+    index="name"
+    :data="data"
+    :categories="['total', 'predicted']"
+    :custom-tooltip="CustomChartTooltip"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/AreaChartDemo.vue b/apps/www/src/lib/registry/new-york/example/AreaChartDemo.vue
new file mode 100644
index 00000000..105be1cb
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/AreaChartDemo.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { AreaChart } from '@/lib/registry/new-york/ui/chart-area'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <AreaChart :data="data" index="name" :categories="['total', 'predicted']" />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/AreaChartSparkline.vue b/apps/www/src/lib/registry/new-york/example/AreaChartSparkline.vue
new file mode 100644
index 00000000..96e557db
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/AreaChartSparkline.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { CurveType } from '@unovis/ts'
+import { AreaChart } from '@/lib/registry/new-york/ui/chart-area'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Aug', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Sep', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Oct', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Nov', total: Math.floor(Math.random() * 2000) + 1000 },
+  { name: 'Dec', total: Math.floor(Math.random() * 2000) + 1000 },
+]
+</script>
+
+<template>
+  <AreaChart
+    class="h-[100px] w-[400px]"
+    index="name"
+    :data="data"
+    :categories="['total']"
+    :show-grid-line="false"
+    :show-legend="false"
+    :show-x-axis="false"
+    :show-y-axis="false"
+    :curve-type="CurveType.Linear"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/BarChartCustomTooltip.vue b/apps/www/src/lib/registry/new-york/example/BarChartCustomTooltip.vue
new file mode 100644
index 00000000..0e514127
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/BarChartCustomTooltip.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import CustomChartTooltip from './CustomChartTooltip.vue'
+import { BarChart } from '@/lib/registry/new-york/ui/chart-bar'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <BarChart
+    :data="data"
+    index="name"
+    :categories="['total', 'predicted']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+    :custom-tooltip="CustomChartTooltip"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/BarChartDemo.vue b/apps/www/src/lib/registry/new-york/example/BarChartDemo.vue
new file mode 100644
index 00000000..0d68f9b3
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/BarChartDemo.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { BarChart } from '@/lib/registry/new-york/ui/chart-bar'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <BarChart
+    :data="data"
+    index="name"
+    :categories="['total', 'predicted']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/BarChartRounded.vue b/apps/www/src/lib/registry/new-york/example/BarChartRounded.vue
new file mode 100644
index 00000000..e5e4280d
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/BarChartRounded.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { BarChart } from '@/lib/registry/new-york/ui/chart-bar'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <BarChart
+    index="name"
+    :data="data"
+    :categories="['total', 'predicted']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+    :rounded-corners="4"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/BarChartStacked.vue b/apps/www/src/lib/registry/new-york/example/BarChartStacked.vue
new file mode 100644
index 00000000..c139d47c
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/BarChartStacked.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { BarChart } from '@/lib/registry/new-york/ui/chart-bar'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <BarChart
+    index="name"
+    :data="data"
+    :categories="['total', 'predicted']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+    :type="'stacked'"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/CardStats.vue b/apps/www/src/lib/registry/new-york/example/CardStats.vue
index e95ebb2c..cfb00c9f 100644
--- a/apps/www/src/lib/registry/new-york/example/CardStats.vue
+++ b/apps/www/src/lib/registry/new-york/example/CardStats.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'
-import { computed } from 'vue'
-import { useData } from 'vitepress'
+import { VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'
 import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
-import { useConfigStore } from '@/stores/config'
-import { themes } from '@/lib/registry/themes'
+import { LineChart } from '@/lib/registry/new-york/ui/chart-line'
+import { BarChart } from '@/lib/registry/new-york/ui/chart-bar'
 
 type Data = typeof data[number]
 const data = [
@@ -17,14 +15,6 @@ const data = [
   { revenue: 11244, subscription: 278 },
   { revenue: 26475, subscription: 189 },
 ]
-
-const cfg = useConfigStore()
-
-const { isDark } = useData()
-const theme = computed(() => themes.find(theme => theme.name === cfg.config.value.theme))
-
-const lineX = (d: Data, i: number) => i
-const lineY = (d: Data) => d.revenue
 </script>
 
 <template>
@@ -44,23 +34,27 @@ const lineY = (d: Data) => d.revenue
         </p>
 
         <div class="h-20">
-          <VisXYContainer
-            height="80px"
-            :data="data" :margin="{
-              top: 5,
-              right: 10,
-              left: 10,
-              bottom: 0,
-            }"
-            :style="{
-              '--theme-primary': `hsl(${
-                theme?.cssVars[isDark ? 'dark' : 'light'].primary
-              })`,
-            }"
+          <LineChart
+            class="h-[80px]"
+            :data="data"
+            :margin="{ top: 5, right: 10, left: 10, bottom: 0 }"
+            :categories="['revenue']"
+            :index="'revenue'"
+            :show-grid-line="false"
+            :show-legend="false"
+            :show-tooltip="false"
+            :show-x-axis="false"
+            :show-y-axis="false"
           >
-            <VisLine :x="lineX" :y="lineY" color="var(--theme-primary)" />
-            <VisScatter :x="lineX" :y="lineY" :size="6" stroke-color="var(--theme-primary)" :stroke-width="2" color="white" />
-          </VisXYContainer>
+            <VisScatter
+              color="white"
+              stroke-color="hsl(var(--primary))"
+              :x="(d: Data, i: number) => i"
+              :y="(d: Data) => d.revenue"
+              :size="6"
+              :stroke-width="2"
+            />
+          </LineChart>
         </div>
       </CardContent>
     </Card>
@@ -80,20 +74,27 @@ const lineY = (d: Data) => d.revenue
         </p>
 
         <div class="mt-4 h-20">
-          <VisXYContainer
-            height="80px" :data="data" :style="{
-              '--theme-primary': `hsl(${
-                theme?.cssVars[isDark ? 'dark' : 'light'].primary
-              })`,
-            }"
+          <BarChart
+            class="h-[80px]"
+            :data="data"
+            :categories="['subscription']"
+            :index="'subscription'"
+            :show-grid-line="false"
+            :show-legend="false"
+            :show-x-axis="false"
+            :show-y-axis="false"
+            :show-tooltip="false"
+          />
+          <!-- <VisXYContainer
+            height="80px" :data="data"
           >
             <VisStackedBar
-              :x="lineX"
+              :x="(d: Data, i:number) => i"
               :y="(d: Data) => d.subscription"
               :bar-padding="0.1"
-              :rounded-corners="0" color="var(--theme-primary)"
+              :rounded-corners="0" color="hsl(var(--primary))"
             />
-          </VisXYContainer>
+          </VisXYContainer> -->
         </div>
       </CardContent>
     </Card>
diff --git a/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue b/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
index 85aba6f3..f82cbc9c 100644
--- a/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
+++ b/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
@@ -12,9 +12,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/lib/registry/new-york/ui/card'
-import { useConfigStore } from '@/stores/config'
-
-const { themePrimary } = useConfigStore()
 
 const goal = ref(350)
 
@@ -80,14 +77,13 @@ const data = [
           :data="data"
           height="60px"
           :style="{
-            'opacity': 0.2,
-            '--theme-primary': themePrimary,
+            opacity: 0.2,
           }"
         >
           <VisStackedBar
             :x="(d: Data, i :number) => i"
             :y="(d: Data) => d.goal"
-            color="var(--theme-primary)"
+            color="hsl(var(--primary))"
             :bar-padding="0.1"
             :rounded-corners="0"
           />
diff --git a/apps/www/src/lib/registry/new-york/example/Cards/Metric.vue b/apps/www/src/lib/registry/new-york/example/Cards/Metric.vue
index 6b513287..18fc688b 100644
--- a/apps/www/src/lib/registry/new-york/example/Cards/Metric.vue
+++ b/apps/www/src/lib/registry/new-york/example/Cards/Metric.vue
@@ -10,8 +10,6 @@ import {
 } from '@/lib/registry/new-york/ui/card'
 import { useConfigStore } from '@/stores/config'
 
-const { themePrimary } = useConfigStore()
-
 type Data = typeof data[number]
 const data = [
   { average: 400, today: 240 },
@@ -74,15 +72,14 @@ function computeLineOpacity(val: any, index: number) {
             bottom: 0,
           }"
           :style="{
-            '--theme-primary': themePrimary,
             '--vis-tooltip-padding': '0px',
             '--vis-tooltip-background-color': 'transparent',
             '--vis-tooltip-border-color': 'transparent',
           }"
         >
           <VisTooltip />
-          <VisLine :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :stroke-width="2" color="var(--theme-primary)" :attributes="{ [Line.selectors.linePath]: { opacity: computeLineOpacity } }" />
-          <VisScatter :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :size="6" :stroke-width="2" stroke-color="var(--theme-primary)" color="white" />
+          <VisLine :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :stroke-width="2" color="hsl(var(--primary))" :attributes="{ [Line.selectors.linePath]: { opacity: computeLineOpacity } }" />
+          <VisScatter :x="x" :y="[(d: Data) => d.average, (d: Data) => d.today]" :size="6" :stroke-width="2" stroke-color="hsl(var(--primary))" color="white" />
           <VisCrosshair :template="template" />
         </VisXYContainer>
       </div>
diff --git a/apps/www/src/lib/registry/new-york/example/CustomChartTooltip.vue b/apps/www/src/lib/registry/new-york/example/CustomChartTooltip.vue
new file mode 100644
index 00000000..86f72173
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/CustomChartTooltip.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Card, CardContent } from '@/lib/registry/default/ui/card'
+
+defineProps<{
+  title?: string
+  data: {
+    name: string
+    color: string
+    value: any
+  }[]
+}>()
+</script>
+
+<template>
+  <Card class="text-sm">
+    <CardContent class="p-3 min-w-[180px] flex flex-col gap-2">
+      <div v-for="(item, key) in data" :key="key" class="flex justify-between items-center">
+        <div class="flex items-center">
+          <span class="w-1 h-7 mr-4 rounded-full" :style="{ background: item.color }" />
+          <span>{{ item.name }}</span>
+        </div>
+        <span class="font-semibold ml-4">{{ item.value }}</span>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/DonutChartColor.vue b/apps/www/src/lib/registry/new-york/example/DonutChartColor.vue
new file mode 100644
index 00000000..0ae5b157
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/DonutChartColor.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { DonutChart } from '@/lib/registry/new-york/ui/chart-donut'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+
+const valueFormatter = (tick: number | Date) => typeof tick === 'number' ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}` : ''
+</script>
+
+<template>
+  <DonutChart
+    index="name"
+    :category="'total'"
+    :data="data"
+    :value-formatter="valueFormatter"
+    :colors="['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/DonutChartCustomTooltip.vue b/apps/www/src/lib/registry/new-york/example/DonutChartCustomTooltip.vue
new file mode 100644
index 00000000..06bca323
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/DonutChartCustomTooltip.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import CustomChartTooltip from './CustomChartTooltip.vue'
+import { DonutChart } from '@/lib/registry/new-york/ui/chart-donut'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <DonutChart
+    index="name"
+    :category="'total'"
+    :data="data"
+    :custom-tooltip="CustomChartTooltip"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/DonutChartDemo.vue b/apps/www/src/lib/registry/new-york/example/DonutChartDemo.vue
new file mode 100644
index 00000000..cf0e3753
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/DonutChartDemo.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { DonutChart } from '@/lib/registry/new-york/ui/chart-donut'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+
+const valueFormatter = (tick: number | Date) => typeof tick === 'number' ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}` : ''
+</script>
+
+<template>
+  <DonutChart
+    index="name"
+    :category="'total'"
+    :data="data"
+    :value-formatter="valueFormatter"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/DonutChartPie.vue b/apps/www/src/lib/registry/new-york/example/DonutChartPie.vue
new file mode 100644
index 00000000..9f29aea4
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/DonutChartPie.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { DonutChart } from '@/lib/registry/new-york/ui/chart-donut'
+
+const data = [
+  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
+]
+</script>
+
+<template>
+  <DonutChart
+    index="name"
+    :category="'total'"
+    :data="data"
+    :type="'pie'"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/LineChartCustomTooltip.vue b/apps/www/src/lib/registry/new-york/example/LineChartCustomTooltip.vue
new file mode 100644
index 00000000..5fd45957
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/LineChartCustomTooltip.vue
@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import CustomChartTooltip from './CustomChartTooltip.vue'
+import { LineChart } from '@/lib/registry/new-york/ui/chart-line'
+
+const data = [
+  {
+    'year': 1970,
+    'Export Growth Rate': 2.04,
+    'Import Growth Rate': 1.53,
+  },
+  {
+    'year': 1971,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.58,
+  },
+  {
+    'year': 1972,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1973,
+    'Export Growth Rate': 1.93,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1974,
+    'Export Growth Rate': 1.88,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1975,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.64,
+  },
+  {
+    'year': 1976,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.62,
+  },
+  {
+    'year': 1977,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.69,
+  },
+  {
+    'year': 1978,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1979,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1980,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1981,
+    'Export Growth Rate': 1.81,
+    'Import Growth Rate': 1.72,
+  },
+  {
+    'year': 1982,
+    'Export Growth Rate': 1.84,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1983,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1984,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.78,
+  },
+  {
+    'year': 1985,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.81,
+  },
+  {
+    'year': 1986,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.89,
+  },
+  {
+    'year': 1987,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.91,
+  },
+  {
+    'year': 1988,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1989,
+    'Export Growth Rate': 1.76,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1990,
+    'Export Growth Rate': 1.75,
+    'Import Growth Rate': 1.97,
+  },
+  {
+    'year': 1991,
+    'Export Growth Rate': 1.62,
+    'Import Growth Rate': 1.99,
+  },
+  {
+    'year': 1992,
+    'Export Growth Rate': 1.56,
+    'Import Growth Rate': 2.12,
+  },
+  {
+    'year': 1993,
+    'Export Growth Rate': 1.5,
+    'Import Growth Rate': 2.13,
+  },
+  {
+    'year': 1994,
+    'Export Growth Rate': 1.46,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1995,
+    'Export Growth Rate': 1.43,
+    'Import Growth Rate': 2.17,
+  },
+  {
+    'year': 1996,
+    'Export Growth Rate': 1.4,
+    'Import Growth Rate': 2.2,
+  },
+  {
+    'year': 1997,
+    'Export Growth Rate': 1.37,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1998,
+    'Export Growth Rate': 1.34,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 1999,
+    'Export Growth Rate': 1.32,
+    'Import Growth Rate': 2.05,
+  },
+  {
+    'year': 2000,
+    'Export Growth Rate': 1.33,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 2001,
+    'Export Growth Rate': 1.31,
+    'Import Growth Rate': 2.08,
+  },
+  {
+    'year': 2002,
+    'Export Growth Rate': 1.29,
+    'Import Growth Rate': 2.1,
+  },
+  {
+    'year': 2003,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 2004,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.21,
+  },
+  {
+    'year': 2005,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.23,
+  },
+  {
+    'year': 2006,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.29,
+  },
+  {
+    'year': 2007,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2008,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2009,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2010,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2011,
+    'Export Growth Rate': 1.24,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2012,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2013,
+    'Export Growth Rate': 1.22,
+    'Import Growth Rate': 2.3,
+  },
+  {
+    'year': 2014,
+    'Export Growth Rate': 1.2,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2015,
+    'Export Growth Rate': 1.17,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2016,
+    'Export Growth Rate': 1.16,
+    'Import Growth Rate': 2.41,
+  },
+  {
+    'year': 2017,
+    'Export Growth Rate': 1.13,
+    'Import Growth Rate': 2.44,
+  },
+  {
+    'year': 2018,
+    'Export Growth Rate': 1.07,
+    'Import Growth Rate': 2.45,
+  },
+  {
+    'year': 2019,
+    'Export Growth Rate': 1.03,
+    'Import Growth Rate': 2.47,
+  },
+  {
+    'year': 2020,
+    'Export Growth Rate': 0.92,
+    'Import Growth Rate': 2.48,
+  },
+  {
+    'year': 2021,
+    'Export Growth Rate': 0.82,
+    'Import Growth Rate': 2.51,
+  },
+]
+</script>
+
+<template>
+  <LineChart
+    :data="data"
+    index="year"
+    :categories="['Export Growth Rate', 'Import Growth Rate']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+    :custom-tooltip="CustomChartTooltip"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/LineChartDemo.vue b/apps/www/src/lib/registry/new-york/example/LineChartDemo.vue
new file mode 100644
index 00000000..ec6fe7a7
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/LineChartDemo.vue
@@ -0,0 +1,279 @@
+<script setup lang="ts">
+import { LineChart } from '@/lib/registry/new-york/ui/chart-line'
+
+const data = [
+  {
+    'year': 1970,
+    'Export Growth Rate': 2.04,
+    'Import Growth Rate': 1.53,
+  },
+  {
+    'year': 1971,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.58,
+  },
+  {
+    'year': 1972,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1973,
+    'Export Growth Rate': 1.93,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1974,
+    'Export Growth Rate': 1.88,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1975,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.64,
+  },
+  {
+    'year': 1976,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.62,
+  },
+  {
+    'year': 1977,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.69,
+  },
+  {
+    'year': 1978,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1979,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1980,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1981,
+    'Export Growth Rate': 1.81,
+    'Import Growth Rate': 1.72,
+  },
+  {
+    'year': 1982,
+    'Export Growth Rate': 1.84,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1983,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1984,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.78,
+  },
+  {
+    'year': 1985,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.81,
+  },
+  {
+    'year': 1986,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.89,
+  },
+  {
+    'year': 1987,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.91,
+  },
+  {
+    'year': 1988,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1989,
+    'Export Growth Rate': 1.76,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1990,
+    'Export Growth Rate': 1.75,
+    'Import Growth Rate': 1.97,
+  },
+  {
+    'year': 1991,
+    'Export Growth Rate': 1.62,
+    'Import Growth Rate': 1.99,
+  },
+  {
+    'year': 1992,
+    'Export Growth Rate': 1.56,
+    'Import Growth Rate': 2.12,
+  },
+  {
+    'year': 1993,
+    'Export Growth Rate': 1.5,
+    'Import Growth Rate': 2.13,
+  },
+  {
+    'year': 1994,
+    'Export Growth Rate': 1.46,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1995,
+    'Export Growth Rate': 1.43,
+    'Import Growth Rate': 2.17,
+  },
+  {
+    'year': 1996,
+    'Export Growth Rate': 1.4,
+    'Import Growth Rate': 2.2,
+  },
+  {
+    'year': 1997,
+    'Export Growth Rate': 1.37,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1998,
+    'Export Growth Rate': 1.34,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 1999,
+    'Export Growth Rate': 1.32,
+    'Import Growth Rate': 2.05,
+  },
+  {
+    'year': 2000,
+    'Export Growth Rate': 1.33,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 2001,
+    'Export Growth Rate': 1.31,
+    'Import Growth Rate': 2.08,
+  },
+  {
+    'year': 2002,
+    'Export Growth Rate': 1.29,
+    'Import Growth Rate': 2.1,
+  },
+  {
+    'year': 2003,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 2004,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.21,
+  },
+  {
+    'year': 2005,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.23,
+  },
+  {
+    'year': 2006,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.29,
+  },
+  {
+    'year': 2007,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2008,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2009,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2010,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2011,
+    'Export Growth Rate': 1.24,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2012,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2013,
+    'Export Growth Rate': 1.22,
+    'Import Growth Rate': 2.3,
+  },
+  {
+    'year': 2014,
+    'Export Growth Rate': 1.2,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2015,
+    'Export Growth Rate': 1.17,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2016,
+    'Export Growth Rate': 1.16,
+    'Import Growth Rate': 2.41,
+  },
+  {
+    'year': 2017,
+    'Export Growth Rate': 1.13,
+    'Import Growth Rate': 2.44,
+  },
+  {
+    'year': 2018,
+    'Export Growth Rate': 1.07,
+    'Import Growth Rate': 2.45,
+  },
+  {
+    'year': 2019,
+    'Export Growth Rate': 1.03,
+    'Import Growth Rate': 2.47,
+  },
+  {
+    'year': 2020,
+    'Export Growth Rate': 0.92,
+    'Import Growth Rate': 2.48,
+  },
+  {
+    'year': 2021,
+    'Export Growth Rate': 0.82,
+    'Import Growth Rate': 2.51,
+  },
+]
+</script>
+
+<template>
+  <LineChart
+    :data="data"
+    index="year"
+    :categories="['Export Growth Rate', 'Import Growth Rate']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/LineChartSparkline.vue b/apps/www/src/lib/registry/new-york/example/LineChartSparkline.vue
new file mode 100644
index 00000000..86f074ae
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/LineChartSparkline.vue
@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import { LineChart } from '@/lib/registry/new-york/ui/chart-line'
+
+const data = [
+  {
+    'year': 1970,
+    'Export Growth Rate': 2.04,
+    'Import Growth Rate': 1.53,
+  },
+  {
+    'year': 1971,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.58,
+  },
+  {
+    'year': 1972,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1973,
+    'Export Growth Rate': 1.93,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1974,
+    'Export Growth Rate': 1.88,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1975,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.64,
+  },
+  {
+    'year': 1976,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.62,
+  },
+  {
+    'year': 1977,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.69,
+  },
+  {
+    'year': 1978,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1979,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1980,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1981,
+    'Export Growth Rate': 1.81,
+    'Import Growth Rate': 1.72,
+  },
+  {
+    'year': 1982,
+    'Export Growth Rate': 1.84,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1983,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1984,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.78,
+  },
+  {
+    'year': 1985,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.81,
+  },
+  {
+    'year': 1986,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.89,
+  },
+  {
+    'year': 1987,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.91,
+  },
+  {
+    'year': 1988,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1989,
+    'Export Growth Rate': 1.76,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1990,
+    'Export Growth Rate': 1.75,
+    'Import Growth Rate': 1.97,
+  },
+  {
+    'year': 1991,
+    'Export Growth Rate': 1.62,
+    'Import Growth Rate': 1.99,
+  },
+  {
+    'year': 1992,
+    'Export Growth Rate': 1.56,
+    'Import Growth Rate': 2.12,
+  },
+  {
+    'year': 1993,
+    'Export Growth Rate': 1.5,
+    'Import Growth Rate': 2.13,
+  },
+  {
+    'year': 1994,
+    'Export Growth Rate': 1.46,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1995,
+    'Export Growth Rate': 1.43,
+    'Import Growth Rate': 2.17,
+  },
+  {
+    'year': 1996,
+    'Export Growth Rate': 1.4,
+    'Import Growth Rate': 2.2,
+  },
+  {
+    'year': 1997,
+    'Export Growth Rate': 1.37,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1998,
+    'Export Growth Rate': 1.34,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 1999,
+    'Export Growth Rate': 1.32,
+    'Import Growth Rate': 2.05,
+  },
+  {
+    'year': 2000,
+    'Export Growth Rate': 1.33,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 2001,
+    'Export Growth Rate': 1.31,
+    'Import Growth Rate': 2.08,
+  },
+  {
+    'year': 2002,
+    'Export Growth Rate': 1.29,
+    'Import Growth Rate': 2.1,
+  },
+  {
+    'year': 2003,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 2004,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.21,
+  },
+  {
+    'year': 2005,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.23,
+  },
+  {
+    'year': 2006,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.29,
+  },
+  {
+    'year': 2007,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2008,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2009,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2010,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2011,
+    'Export Growth Rate': 1.24,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2012,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2013,
+    'Export Growth Rate': 1.22,
+    'Import Growth Rate': 2.3,
+  },
+  {
+    'year': 2014,
+    'Export Growth Rate': 1.2,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2015,
+    'Export Growth Rate': 1.17,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2016,
+    'Export Growth Rate': 1.16,
+    'Import Growth Rate': 2.41,
+  },
+  {
+    'year': 2017,
+    'Export Growth Rate': 1.13,
+    'Import Growth Rate': 2.44,
+  },
+  {
+    'year': 2018,
+    'Export Growth Rate': 1.07,
+    'Import Growth Rate': 2.45,
+  },
+  {
+    'year': 2019,
+    'Export Growth Rate': 1.03,
+    'Import Growth Rate': 2.47,
+  },
+  {
+    'year': 2020,
+    'Export Growth Rate': 0.92,
+    'Import Growth Rate': 2.48,
+  },
+  {
+    'year': 2021,
+    'Export Growth Rate': 0.82,
+    'Import Growth Rate': 2.51,
+  },
+]
+</script>
+
+<template>
+  <LineChart
+    index="year"
+    class="h-[100px] w-[400px]"
+    :data="data"
+    :categories="['Export Growth Rate']"
+    :y-formatter="(tick, i) => {
+      return typeof tick === 'number'
+        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
+        : ''
+    }"
+    :show-tooltip="false"
+    :show-grid-line="false"
+    :show-legend="false"
+    :show-x-axis="false"
+    :show-y-axis="false"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/button/index.ts b/apps/www/src/lib/registry/new-york/ui/button/index.ts
index 4bb4bdb9..89f21fea 100644
--- a/apps/www/src/lib/registry/new-york/ui/button/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/button/index.ts
@@ -19,6 +19,7 @@ export const buttonVariants = cva(
       },
       size: {
         default: 'h-9 px-4 py-2',
+        xs: 'h-7 rounded px-2',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
         icon: 'h-9 w-9',
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue b/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue
new file mode 100644
index 00000000..2f45162f
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { type BulletLegendItemInterface, CurveType } from '@unovis/ts'
+import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
+import { Area, Axis, Line } from '@unovis/ts'
+import { type Component, computed, ref } from 'vue'
+import { useMounted } from '@vueuse/core'
+import { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<BaseChartProps<T> & {
+  /**
+   * Render custom tooltip component.
+   */
+  customTooltip?: Component
+  /**
+   * Type of curve
+   */
+  curveType?: CurveType
+  /**
+   * Controls the visibility of gradient.
+   * @default true
+   */
+  showGradiant?: boolean
+}>(), {
+  curveType: CurveType.MonotoneX,
+  filterOpacity: 0.2,
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+  showXAxis: true,
+  showYAxis: true,
+  showTooltip: true,
+  showLegend: true,
+  showGridLine: true,
+  showGradiant: true,
+})
+
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
+type KeyOfT = Extract<keyof T, string>
+type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
+const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
+
+const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
+  name: category,
+  color: colors.value[i],
+  inactive: false,
+})))
+
+const isMounted = useMounted()
+
+function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
+  emits('legendItemClick', d, i)
+}
+</script>
+
+<template>
+  <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
+    <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
+
+    <VisXYContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data">
+      <svg width="0" height="0">
+        <defs>
+          <linearGradient v-for="(color, i) in colors" :id="`color-${i}`" :key="i" x1="0" y1="0" x2="0" y2="1">
+            <template v-if="showGradiant">
+              <stop offset="5%" :stop-color="color" stop-opacity="0.4" />
+              <stop offset="95%" :stop-color="color" stop-opacity="0" />
+            </template>
+            <template v-else>
+              <stop offset="0%" :stop-color="color" />
+            </template>
+          </linearGradient>
+        </defs>
+      </svg>
+
+      <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" :custom-tooltip="customTooltip" />
+
+      <template v-for="(category, i) in categories" :key="category">
+        <VisArea
+          :x="(d: Data, i: number) => i"
+          :y="(d: Data) => d[category]"
+          color="auto"
+          :curve-type="curveType"
+          :attributes="{
+            [Area.selectors.area]: {
+              fill: `url(#color-${i})`,
+            },
+          }"
+          :opacity="legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1"
+        />
+      </template>
+
+      <template v-for="(category, i) in categories" :key="category">
+        <VisLine
+          :x="(d: Data, i: number) => i"
+          :y="(d: Data) => d[category]"
+          :color="colors[i]"
+          :curve-type="curveType"
+          :attributes="{
+            [Line.selectors.line]: {
+              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,
+            },
+          }"
+        />
+      </template>
+
+      <VisAxis
+        v-if="showXAxis"
+        type="x"
+        :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
+        :grid-line="false"
+        :tick-line="false"
+        tick-text-color="hsl(var(--vis-text-color))"
+      />
+      <VisAxis
+        v-if="showYAxis"
+        type="y"
+        :tick-line="false"
+        :tick-format="yFormatter"
+        :domain-line="false"
+        :grid-line="showGridLine"
+        :attributes="{
+          [Axis.selectors.grid]: {
+            class: 'text-muted',
+          },
+        }"
+        tick-text-color="hsl(var(--vis-text-color))"
+      />
+
+      <slot />
+    </VisXYContainer>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-area/index.ts b/apps/www/src/lib/registry/new-york/ui/chart-area/index.ts
new file mode 100644
index 00000000..81345fd8
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/chart-area/index.ts
@@ -0,0 +1 @@
+export { default as AreaChart } from './AreaChart.vue'
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue b/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue
new file mode 100644
index 00000000..516e8b47
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import type { BulletLegendItemInterface, Spacing } from '@unovis/ts'
+import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'
+import { Axis, GroupedBar, StackedBar } from '@unovis/ts'
+import { type Component, computed, ref } from 'vue'
+import { useMounted } from '@vueuse/core'
+import { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<BaseChartProps<T> & {
+  /**
+   * Render custom tooltip component.
+   */
+  customTooltip?: Component
+  /**
+   * Change the type of the chart
+   * @default "grouped"
+   */
+  type?: 'stacked' | 'grouped'
+  /**
+   * Rounded bar corners
+   * @default 0
+   */
+  roundedCorners?: number
+}>(), {
+  type: 'grouped',
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+  filterOpacity: 0.2,
+  roundedCorners: 0,
+  showXAxis: true,
+  showYAxis: true,
+  showTooltip: true,
+  showLegend: true,
+  showGridLine: true,
+})
+
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
+type KeyOfT = Extract<keyof T, string>
+type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
+const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
+const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
+  name: category,
+  color: colors.value[i],
+  inactive: false,
+})))
+
+const isMounted = useMounted()
+
+function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
+  emits('legendItemClick', d, i)
+}
+
+const VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)
+const selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)
+</script>
+
+<template>
+  <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
+    <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
+
+    <VisXYContainer
+      :data="data"
+      :style="{ height: isMounted ? '100%' : 'auto' }"
+      :margin="margin"
+    >
+      <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :custom-tooltip="customTooltip" :index="index" />
+
+      <VisBarComponent
+        :x="(d: Data, i: number) => i"
+        :y="categories.map(category => (d: Data) => d[category]) "
+        :color="colors"
+        :rounded-corners="roundedCorners"
+        :bar-padding="0.05"
+        :attributes="{
+          [selectorsBar]: {
+            opacity: (d: Data, i:number) => {
+              const pos = i % categories.length
+              return legendItems[pos]?.inactive ? filterOpacity : 1
+            },
+          },
+        }"
+      />
+
+      <VisAxis
+        v-if="showXAxis"
+        type="x"
+        :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
+        :grid-line="false"
+        :tick-line="false"
+        tick-text-color="hsl(var(--vis-text-color))"
+      />
+      <VisAxis
+        v-if="showYAxis"
+        type="y"
+        :tick-line="false"
+        :tick-format="yFormatter"
+        :domain-line="false"
+        :grid-line="showGridLine"
+        :attributes="{
+          [Axis.selectors.grid]: {
+            class: 'text-muted',
+          },
+        }"
+        tick-text-color="hsl(var(--vis-text-color))"
+      />
+
+      <slot />
+    </VisXYContainer>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-bar/index.ts b/apps/www/src/lib/registry/new-york/ui/chart-bar/index.ts
new file mode 100644
index 00000000..805149a5
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/chart-bar/index.ts
@@ -0,0 +1 @@
+export { default as BarChart } from './BarChart.vue'
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-donut/DonutChart.vue b/apps/www/src/lib/registry/new-york/ui/chart-donut/DonutChart.vue
new file mode 100644
index 00000000..21f399b5
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/chart-donut/DonutChart.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { VisDonut, VisSingleContainer } from '@unovis/vue'
+import { Donut } from '@unovis/ts'
+import { type Component, computed, ref } from 'vue'
+import { useMounted } from '@vueuse/core'
+import { type BaseChartProps, ChartSingleTooltip, defaultColors } from '@/lib/registry/new-york/ui/chart'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {
+  /**
+   * Sets the name of the key containing the quantitative chart values.
+   */
+  category: KeyOfT
+  /**
+   * Change the type of the chart
+   * @default "donut"
+   */
+  type?: 'donut' | 'pie'
+  /**
+   * Function to sort the segment
+   */
+  sortFunction?: (a: any, b: any) => number | undefined
+  /**
+   * Controls the formatting for the label.
+   */
+  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string
+  /**
+   * Render custom tooltip component.
+   */
+  customTooltip?: Component
+}>(), {
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+  sortFunction: () => undefined,
+  valueFormatter: (tick: number) => `${tick}`,
+  type: 'donut',
+  filterOpacity: 0.2,
+  showTooltip: true,
+  showLegend: true,
+})
+
+type KeyOfT = Extract<keyof T, string>
+type Data = typeof props.data[number]
+
+const category = computed(() => props.category as KeyOfT)
+const index = computed(() => props.index as KeyOfT)
+
+const isMounted = useMounted()
+const activeSegmentKey = ref<string>()
+const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))
+const legendItems = computed(() => props.data.map((item, i) => ({
+  name: item[props.index],
+  color: colors.value[i],
+  inactive: false,
+})))
+
+const totalValue = computed(() => props.data.reduce((prev, curr) => {
+  return prev + curr[props.category]
+}, 0))
+</script>
+
+<template>
+  <div :class="cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')">
+    <VisSingleContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data">
+      <ChartSingleTooltip
+        :selector="Donut.selectors.segment"
+        :index="category"
+        :items="legendItems"
+        :value-formatter="valueFormatter"
+        :custom-tooltip="customTooltip"
+      />
+
+      <VisDonut
+        :value="(d: Data) => d[category]"
+        :sort-function="sortFunction"
+        :color="colors"
+        :arc-width="type === 'donut' ? 20 : 0"
+        :show-background="false"
+        :central-label="type === 'donut' ? valueFormatter(totalValue) : ''"
+        :events="{
+          [Donut.selectors.segment]: {
+            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {
+              if (d?.data?.[index] === activeSegmentKey) {
+                activeSegmentKey = undefined
+                elements.forEach(el => el.style.opacity = '1')
+              }
+              else {
+                activeSegmentKey = d?.data?.[index]
+                elements.forEach(el => el.style.opacity = `${filterOpacity}`)
+                elements[i].style.opacity = '1'
+              }
+            },
+          },
+        }"
+      />
+
+      <slot />
+    </VisSingleContainer>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-donut/index.ts b/apps/www/src/lib/registry/new-york/ui/chart-donut/index.ts
new file mode 100644
index 00000000..b42413a0
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/chart-donut/index.ts
@@ -0,0 +1 @@
+export { default as DonutChart } from './DonutChart.vue'
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-line/LineChart.vue b/apps/www/src/lib/registry/new-york/ui/chart-line/LineChart.vue
new file mode 100644
index 00000000..e342fd3c
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/chart-line/LineChart.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { type BulletLegendItemInterface, CurveType } from '@unovis/ts'
+import { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
+import { Axis, Line } from '@unovis/ts'
+import { type Component, computed, ref } from 'vue'
+import { useMounted } from '@vueuse/core'
+import { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<BaseChartProps<T> & {
+  /**
+   * Render custom tooltip component.
+   */
+  customTooltip?: Component
+  /**
+   * Type of curve
+   */
+  curveType?: CurveType
+}>(), {
+  curveType: CurveType.MonotoneX,
+  filterOpacity: 0.2,
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+  showXAxis: true,
+  showYAxis: true,
+  showTooltip: true,
+  showLegend: true,
+  showGridLine: true,
+})
+
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
+type KeyOfT = Extract<keyof T, string>
+type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
+const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
+
+const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
+  name: category,
+  color: colors.value[i],
+  inactive: false,
+})))
+
+const isMounted = useMounted()
+
+function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
+  emits('legendItemClick', d, i)
+}
+</script>
+
+<template>
+  <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
+    <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
+
+    <VisXYContainer
+      :margin="{ left: 20, right: 20 }"
+      :data="data"
+      :style="{ height: isMounted ? '100%' : 'auto' }"
+    >
+      <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" :custom-tooltip="customTooltip" />
+
+      <template v-for="(category, i) in categories" :key="category">
+        <VisLine
+          :x="(d: Data, i: number) => i"
+          :y="(d: Data) => d[category]"
+          :curve-type="curveType"
+          :color="colors[i]"
+          :attributes="{
+            [Line.selectors.line]: {
+              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,
+            },
+          }"
+        />
+      </template>
+
+      <VisAxis
+        v-if="showXAxis"
+        type="x"
+        :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
+        :grid-line="false"
+        :tick-line="false"
+        tick-text-color="hsl(var(--vis-text-color))"
+      />
+      <VisAxis
+        v-if="showYAxis"
+        type="y"
+        :tick-line="false"
+        :tick-format="yFormatter"
+        :domain-line="false"
+        :grid-line="showGridLine"
+        :attributes="{
+          [Axis.selectors.grid]: {
+            class: 'text-muted',
+          },
+        }"
+        tick-text-color="hsl(var(--vis-text-color))"
+      />
+
+      <slot />
+    </VisXYContainer>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-line/index.ts b/apps/www/src/lib/registry/new-york/ui/chart-line/index.ts
new file mode 100644
index 00000000..5d827c88
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/chart-line/index.ts
@@ -0,0 +1 @@
+export { default as LineChart } from './LineChart.vue'
diff --git a/apps/www/src/lib/registry/new-york/ui/chart/ChartCrosshair.vue b/apps/www/src/lib/registry/new-york/ui/chart/ChartCrosshair.vue
new file mode 100644
index 00000000..46e5e62b
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/chart/ChartCrosshair.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { VisCrosshair, VisTooltip } from '@unovis/vue'
+import type { BulletLegendItemInterface } from '@unovis/ts'
+import { omit } from '@unovis/ts'
+import { type Component, createApp } from 'vue'
+import { ChartTooltip } from '@/lib/registry/new-york/ui/chart'
+
+const props = withDefaults(defineProps<{
+  colors: string[]
+  index: string
+  items: BulletLegendItemInterface[]
+  customTooltip?: Component
+}>(), {
+  colors: () => [],
+})
+
+// Use weakmap to store reference to each datapoint for Tooltip
+const wm = new WeakMap()
+function template(d: any) {
+  if (wm.has(d)) {
+    return wm.get(d)
+  }
+  else {
+    const componentDiv = document.createElement('div')
+    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
+      const legendReference = props.items.find(i => i.name === key)
+      return { ...legendReference, value }
+    })
+    const TooltipComponent = props.customTooltip ?? ChartTooltip
+    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)
+    wm.set(d, componentDiv.innerHTML)
+    return componentDiv.innerHTML
+  }
+}
+
+function color(d: unknown, i: number) {
+  return props.colors[i] ?? 'transparent'
+}
+</script>
+
+<template>
+  <VisTooltip :horizontal-shift="20" :vertical-shift="20" />
+  <VisCrosshair :template="template" :color="color" />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/chart/ChartLegend.vue b/apps/www/src/lib/registry/new-york/ui/chart/ChartLegend.vue
new file mode 100644
index 00000000..255abb2e
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/chart/ChartLegend.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { VisBulletLegend } from '@unovis/vue'
+import type { BulletLegendItemInterface } from '@unovis/ts'
+import { BulletLegend } from '@unovis/ts'
+import { nextTick, onMounted, ref } from 'vue'
+import { buttonVariants } from '@/lib/registry/new-york/ui/button'
+
+const props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {
+  items: () => [],
+})
+
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+  'update:items': [payload: BulletLegendItemInterface[]]
+}>()
+
+const elRef = ref<HTMLElement>()
+
+onMounted(() => {
+  const selector = `.${BulletLegend.selectors.item}`
+  nextTick(() => {
+    const elements = elRef.value?.querySelectorAll(selector)
+    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')
+
+    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))
+  })
+})
+
+function onLegendItemClick(d: BulletLegendItemInterface, i: number) {
+  emits('legendItemClick', d, i)
+  const isBulletActive = !props.items[i].inactive
+  const isFilterApplied = props.items.some(i => i.inactive)
+  if (isFilterApplied && isBulletActive) {
+    // reset filter
+    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))
+  }
+  else {
+    // apply selection, set other item as inactive
+    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))
+  }
+}
+</script>
+
+<template>
+  <div ref="elRef" class="w-max">
+    <VisBulletLegend
+      :items="items"
+      :on-legend-item-click="onLegendItemClick"
+    />
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/chart/ChartSingleTooltip.vue b/apps/www/src/lib/registry/new-york/ui/chart/ChartSingleTooltip.vue
new file mode 100644
index 00000000..412ac0c1
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/chart/ChartSingleTooltip.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { VisTooltip } from '@unovis/vue'
+import type { BulletLegendItemInterface } from '@unovis/ts'
+import { omit } from '@unovis/ts'
+import { type Component, createApp } from 'vue'
+import { ChartTooltip } from '@/lib/registry/new-york/ui/chart'
+
+const props = withDefaults(defineProps<{
+  selector: string
+  index: string
+  items?: BulletLegendItemInterface[]
+  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string
+  customTooltip?: Component
+}>(), {
+  valueFormatter: (tick: number) => `${tick}`,
+})
+
+// Use weakmap to store reference to each datapoint for Tooltip
+const wm = new WeakMap()
+function template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {
+  if (props.index in d) {
+    if (wm.has(d)) {
+      return wm.get(d)
+    }
+    else {
+      const componentDiv = document.createElement('div')
+      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
+        const legendReference = props.items?.find(i => i.name === key)
+        return { ...legendReference, value: props.valueFormatter(value) }
+      })
+      const TooltipComponent = props.customTooltip ?? ChartTooltip
+      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)
+      wm.set(d, componentDiv.innerHTML)
+      return componentDiv.innerHTML
+    }
+  }
+
+  else {
+    const data = d.data
+
+    if (wm.has(data)) {
+      return wm.get(data)
+    }
+    else {
+      const style = getComputedStyle(elements[i])
+      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]
+      const componentDiv = document.createElement('div')
+      const TooltipComponent = props.customTooltip ?? ChartTooltip
+      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)
+      wm.set(d, componentDiv.innerHTML)
+      return componentDiv.innerHTML
+    }
+  }
+}
+</script>
+
+<template>
+  <VisTooltip
+    :horizontal-shift="20" :vertical-shift="20" :triggers="{
+      [selector]: template,
+    }"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/chart/ChartTooltip.vue b/apps/www/src/lib/registry/new-york/ui/chart/ChartTooltip.vue
new file mode 100644
index 00000000..1f8e6e98
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/chart/ChartTooltip.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
+
+defineProps<{
+  title?: string
+  data: {
+    name: string
+    color: string
+    value: any
+  }[]
+}>()
+</script>
+
+<template>
+  <Card class="text-sm">
+    <CardHeader v-if="title" class="p-3 border-b">
+      <CardTitle>
+        {{ title }}
+      </CardTitle>
+    </CardHeader>
+    <CardContent class="p-3 min-w-[180px] flex flex-col gap-1">
+      <div v-for="(item, key) in data" :key="key" class="flex justify-between">
+        <div class="flex items-center">
+          <span class="w-2.5 h-2.5 mr-2">
+            <svg width="100%" height="100%" viewBox="0 0 30 30">
+              <path
+                d=" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0"
+                :stroke="item.color"
+                :fill="item.color"
+                stroke-width="1"
+              />
+            </svg>
+          </span>
+          <span>{{ item.name }}</span>
+        </div>
+        <span class="font-semibold ml-4">{{ item.value }}</span>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/chart/index.ts b/apps/www/src/lib/registry/new-york/ui/chart/index.ts
new file mode 100644
index 00000000..e2d64c17
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/chart/index.ts
@@ -0,0 +1,18 @@
+export { default as ChartTooltip } from './ChartTooltip.vue'
+export { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'
+export { default as ChartLegend } from './ChartLegend.vue'
+export { default as ChartCrosshair } from './ChartCrosshair.vue'
+
+export function defaultColors(count: number = 3) {
+  const quotient = Math.floor(count / 2)
+  const remainder = count % 2
+
+  const primaryCount = quotient + remainder
+  const secondaryCount = quotient
+  return [
+    ...Array.from(Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),
+    ...Array.from(Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),
+  ]
+}
+
+export * from './interface'
diff --git a/apps/www/src/lib/registry/new-york/ui/chart/interface.ts b/apps/www/src/lib/registry/new-york/ui/chart/interface.ts
new file mode 100644
index 00000000..c3838afc
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/chart/interface.ts
@@ -0,0 +1,64 @@
+import type { Spacing } from '@unovis/ts'
+
+type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
+
+export interface BaseChartProps<T extends Record<string, any>> {
+  /**
+   * The source data, in which each entry is a dictionary.
+   */
+  data: T[]
+  /**
+   * Select the categories from your data. Used to populate the legend and toolip.
+   */
+  categories: KeyOf<T>[]
+  /**
+   * Sets the key to map the data to the axis.
+   */
+  index: KeyOf<T>
+  /**
+   * Change the default colors.
+   */
+  colors?: string[]
+  /**
+   * Margin of each the container
+   */
+  margin?: Spacing
+  /**
+   * Change the opacity of the non-selected field
+   * @default 0.2
+   */
+  filterOpacity?: number
+  /**
+   * Function to format X label
+   */
+  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Function to format Y label
+   */
+  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Controls the visibility of the X axis.
+   * @default true
+   */
+  showXAxis?: boolean
+  /**
+   * Controls the visibility of the Y axis.
+   * @default true
+   */
+  showYAxis?: boolean
+  /**
+   * Controls the visibility of tooltip.
+   * @default true
+   */
+  showTooltip?: boolean
+  /**
+   * Controls the visibility of legend.
+   * @default true
+   */
+  showLegend?: boolean
+  /**
+   * Controls the visibility of gridline.
+   * @default true
+   */
+  showGridLine?: boolean
+}
diff --git a/apps/www/src/lib/registry/registry.ts b/apps/www/src/lib/registry/registry.ts
index cd758c25..cbe19276 100644
--- a/apps/www/src/lib/registry/registry.ts
+++ b/apps/www/src/lib/registry/registry.ts
@@ -11,6 +11,7 @@ const DEPENDENCIES = new Map<string, string[]>([
   ['vaul-vue', []],
   ['v-calendar', []],
   ['@tanstack/vue-table', []],
+  ['@unovis/vue', ['@unovis/ts']],
   ['embla-carousel-vue', ['embla-carousel']],
   ['vee-validate', ['@vee-validate/zod', 'zod']],
 ])
diff --git a/apps/www/src/public/registry/colors/gray.json b/apps/www/src/public/registry/colors/gray.json
index 8a1d9438..1f5c04f6 100644
--- a/apps/www/src/public/registry/colors/gray.json
+++ b/apps/www/src/public/registry/colors/gray.json
@@ -89,4 +89,4 @@
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 224 71.4% 4.1%;\n \n    --muted: 220 14.3% 95.9%;\n    --muted-foreground: 220 8.9% 46.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 224 71.4% 4.1%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 224 71.4% 4.1%;\n \n    --border: 220 13% 91%;\n    --input: 220 13% 91%;\n \n    --primary: 220.9 39.3% 11%;\n    --primary-foreground: 210 20% 98%;\n \n    --secondary: 220 14.3% 95.9%;\n    --secondary-foreground: 220.9 39.3% 11%;\n \n    --accent: 220 14.3% 95.9%;\n    --accent-foreground: 220.9 39.3% 11%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 20% 98%;\n \n    --ring: 224 71.4% 4.1%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 224 71.4% 4.1%;\n    --foreground: 210 20% 98%;\n \n    --muted: 215 27.9% 16.9%;\n    --muted-foreground: 217.9 10.6% 64.9%;\n \n    --popover: 224 71.4% 4.1%;\n    --popover-foreground: 210 20% 98%;\n \n    --card: 224 71.4% 4.1%;\n    --card-foreground: 210 20% 98%;\n \n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n \n    --primary: 210 20% 98%;\n    --primary-foreground: 220.9 39.3% 11%;\n \n    --secondary: 215 27.9% 16.9%;\n    --secondary-foreground: 210 20% 98%;\n \n    --accent: 215 27.9% 16.9%;\n    --accent-foreground: 210 20% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 20% 98%;\n \n    --ring: 216 12.2% 83.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/colors/index.json b/apps/www/src/public/registry/colors/index.json
index c25158ef..6b70773e 100644
--- a/apps/www/src/public/registry/colors/index.json
+++ b/apps/www/src/public/registry/colors/index.json
@@ -1996,4 +1996,4 @@
       "hslChannel": "343.1 87.7% 15.9%"
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/colors/lime.json b/apps/www/src/public/registry/colors/lime.json
index e36faf45..cec9a36d 100644
--- a/apps/www/src/public/registry/colors/lime.json
+++ b/apps/www/src/public/registry/colors/lime.json
@@ -89,4 +89,4 @@
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 89.3 80.4% 10%;\n \n    --muted: 79.6 89.1% 89.2%;\n    --muted-foreground: 83.7 80.5% 44.3%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 89.3 80.4% 10%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 89.3 80.4% 10%;\n \n    --border: 80.9 88.5% 79.6%;\n    --input: 80.9 88.5% 79.6%;\n \n    --primary: 87.6 61.2% 20.2%;\n    --primary-foreground: 78.3 92% 95.1%;\n \n    --secondary: 79.6 89.1% 89.2%;\n    --secondary-foreground: 87.6 61.2% 20.2%;\n \n    --accent: 79.6 89.1% 89.2%;\n    --accent-foreground: 87.6 61.2% 20.2%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 78.3 92% 95.1%;\n \n    --ring: 89.3 80.4% 10%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 89.3 80.4% 10%;\n    --foreground: 78.3 92% 95.1%;\n \n    --muted: 86.3 69% 22.7%;\n    --muted-foreground: 82.7 78% 55.5%;\n \n    --popover: 89.3 80.4% 10%;\n    --popover-foreground: 78.3 92% 95.1%;\n \n    --card: 89.3 80.4% 10%;\n    --card-foreground: 78.3 92% 95.1%;\n \n    --border: 86.3 69% 22.7%;\n    --input: 86.3 69% 22.7%;\n \n    --primary: 78.3 92% 95.1%;\n    --primary-foreground: 87.6 61.2% 20.2%;\n \n    --secondary: 86.3 69% 22.7%;\n    --secondary-foreground: 78.3 92% 95.1%;\n \n    --accent: 86.3 69% 22.7%;\n    --accent-foreground: 78.3 92% 95.1%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 78.3 92% 95.1%;\n \n    --ring: 82 84.5% 67.1%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/colors/neutral.json b/apps/www/src/public/registry/colors/neutral.json
index 3deb3deb..0a65056e 100644
--- a/apps/www/src/public/registry/colors/neutral.json
+++ b/apps/www/src/public/registry/colors/neutral.json
@@ -89,4 +89,4 @@
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 0 0% 3.9%;\n \n    --muted: 0 0% 96.1%;\n    --muted-foreground: 0 0% 45.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 0 0% 3.9%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 0 0% 3.9%;\n \n    --border: 0 0% 89.8%;\n    --input: 0 0% 89.8%;\n \n    --primary: 0 0% 9%;\n    --primary-foreground: 0 0% 98%;\n \n    --secondary: 0 0% 96.1%;\n    --secondary-foreground: 0 0% 9%;\n \n    --accent: 0 0% 96.1%;\n    --accent-foreground: 0 0% 9%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 0 0% 3.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 0 0% 3.9%;\n    --foreground: 0 0% 98%;\n \n    --muted: 0 0% 14.9%;\n    --muted-foreground: 0 0% 63.9%;\n \n    --popover: 0 0% 3.9%;\n    --popover-foreground: 0 0% 98%;\n \n    --card: 0 0% 3.9%;\n    --card-foreground: 0 0% 98%;\n \n    --border: 0 0% 14.9%;\n    --input: 0 0% 14.9%;\n \n    --primary: 0 0% 98%;\n    --primary-foreground: 0 0% 9%;\n \n    --secondary: 0 0% 14.9%;\n    --secondary-foreground: 0 0% 98%;\n \n    --accent: 0 0% 14.9%;\n    --accent-foreground: 0 0% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 0 0% 83.1%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/colors/slate.json b/apps/www/src/public/registry/colors/slate.json
index 19a86b72..bf5be7ff 100644
--- a/apps/www/src/public/registry/colors/slate.json
+++ b/apps/www/src/public/registry/colors/slate.json
@@ -89,4 +89,4 @@
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n \n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n \n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n \n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n \n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n \n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n \n    --ring: 222.2 84% 4.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n \n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n \n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n \n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n \n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n \n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n \n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n \n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n \n    --ring: 212.7 26.8% 83.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/colors/stone.json b/apps/www/src/public/registry/colors/stone.json
index bd31d945..d31a29ae 100644
--- a/apps/www/src/public/registry/colors/stone.json
+++ b/apps/www/src/public/registry/colors/stone.json
@@ -89,4 +89,4 @@
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 20 14.3% 4.1%;\n \n    --muted: 60 4.8% 95.9%;\n    --muted-foreground: 25 5.3% 44.7%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 20 14.3% 4.1%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 20 14.3% 4.1%;\n \n    --border: 20 5.9% 90%;\n    --input: 20 5.9% 90%;\n \n    --primary: 24 9.8% 10%;\n    --primary-foreground: 60 9.1% 97.8%;\n \n    --secondary: 60 4.8% 95.9%;\n    --secondary-foreground: 24 9.8% 10%;\n \n    --accent: 60 4.8% 95.9%;\n    --accent-foreground: 24 9.8% 10%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 60 9.1% 97.8%;\n \n    --ring: 20 14.3% 4.1%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 20 14.3% 4.1%;\n    --foreground: 60 9.1% 97.8%;\n \n    --muted: 12 6.5% 15.1%;\n    --muted-foreground: 24 5.4% 63.9%;\n \n    --popover: 20 14.3% 4.1%;\n    --popover-foreground: 60 9.1% 97.8%;\n \n    --card: 20 14.3% 4.1%;\n    --card-foreground: 60 9.1% 97.8%;\n \n    --border: 12 6.5% 15.1%;\n    --input: 12 6.5% 15.1%;\n \n    --primary: 60 9.1% 97.8%;\n    --primary-foreground: 24 9.8% 10%;\n \n    --secondary: 12 6.5% 15.1%;\n    --secondary-foreground: 60 9.1% 97.8%;\n \n    --accent: 12 6.5% 15.1%;\n    --accent-foreground: 60 9.1% 97.8%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 60 9.1% 97.8%;\n \n    --ring: 24 5.7% 82.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/colors/zinc.json b/apps/www/src/public/registry/colors/zinc.json
index 72484fec..9fcf1311 100644
--- a/apps/www/src/public/registry/colors/zinc.json
+++ b/apps/www/src/public/registry/colors/zinc.json
@@ -89,4 +89,4 @@
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 240 10% 3.9%;\n \n    --muted: 240 4.8% 95.9%;\n    --muted-foreground: 240 3.8% 46.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 240 10% 3.9%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 240 10% 3.9%;\n \n    --border: 240 5.9% 90%;\n    --input: 240 5.9% 90%;\n \n    --primary: 240 5.9% 10%;\n    --primary-foreground: 0 0% 98%;\n \n    --secondary: 240 4.8% 95.9%;\n    --secondary-foreground: 240 5.9% 10%;\n \n    --accent: 240 4.8% 95.9%;\n    --accent-foreground: 240 5.9% 10%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 240 10% 3.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 240 10% 3.9%;\n    --foreground: 0 0% 98%;\n \n    --muted: 240 3.7% 15.9%;\n    --muted-foreground: 240 5% 64.9%;\n \n    --popover: 240 10% 3.9%;\n    --popover-foreground: 0 0% 98%;\n \n    --card: 240 10% 3.9%;\n    --card-foreground: 0 0% 98%;\n \n    --border: 240 3.7% 15.9%;\n    --input: 240 3.7% 15.9%;\n \n    --primary: 0 0% 98%;\n    --primary-foreground: 240 5.9% 10%;\n \n    --secondary: 240 3.7% 15.9%;\n    --secondary-foreground: 0 0% 98%;\n \n    --accent: 240 3.7% 15.9%;\n    --accent-foreground: 0 0% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 240 4.9% 83.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index d212a4bb..012240fb 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -222,6 +222,95 @@
     ],
     "type": "components:ui"
   },
+  {
+    "name": "chart",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts"
+    ],
+    "registryDependencies": [
+      "chart",
+      "button",
+      "card"
+    ],
+    "files": [
+      "ui/chart/ChartCrosshair.vue",
+      "ui/chart/ChartLegend.vue",
+      "ui/chart/ChartSingleTooltip.vue",
+      "ui/chart/ChartTooltip.vue",
+      "ui/chart/index.ts",
+      "ui/chart/interface.ts"
+    ],
+    "type": "components:ui"
+  },
+  {
+    "name": "chart-area",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "chart",
+      "utils"
+    ],
+    "files": [
+      "ui/chart-area/AreaChart.vue",
+      "ui/chart-area/index.ts"
+    ],
+    "type": "components:ui"
+  },
+  {
+    "name": "chart-bar",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "chart",
+      "utils"
+    ],
+    "files": [
+      "ui/chart-bar/BarChart.vue",
+      "ui/chart-bar/index.ts"
+    ],
+    "type": "components:ui"
+  },
+  {
+    "name": "chart-donut",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "chart",
+      "utils"
+    ],
+    "files": [
+      "ui/chart-donut/DonutChart.vue",
+      "ui/chart-donut/index.ts"
+    ],
+    "type": "components:ui"
+  },
+  {
+    "name": "chart-line",
+    "dependencies": [
+      "@unovis/vue",
+      "@unovis/ts",
+      "@vueuse/core"
+    ],
+    "registryDependencies": [
+      "chart",
+      "utils"
+    ],
+    "files": [
+      "ui/chart-line/LineChart.vue",
+      "ui/chart-line/index.ts"
+    ],
+    "type": "components:ui"
+  },
   {
     "name": "checkbox",
     "dependencies": [],
diff --git a/apps/www/src/public/registry/styles/default/accordion.json b/apps/www/src/public/registry/styles/default/accordion.json
index a9cc9e42..be4913a4 100644
--- a/apps/www/src/public/registry/styles/default/accordion.json
+++ b/apps/www/src/public/registry/styles/default/accordion.json
@@ -27,4 +27,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/alert-dialog.json b/apps/www/src/public/registry/styles/default/alert-dialog.json
index c569742a..18ef194a 100644
--- a/apps/www/src/public/registry/styles/default/alert-dialog.json
+++ b/apps/www/src/public/registry/styles/default/alert-dialog.json
@@ -48,4 +48,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/alert.json b/apps/www/src/public/registry/styles/default/alert.json
index 7bc3f44c..54bb63e9 100644
--- a/apps/www/src/public/registry/styles/default/alert.json
+++ b/apps/www/src/public/registry/styles/default/alert.json
@@ -23,4 +23,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/area-chart.json b/apps/www/src/public/registry/styles/default/area-chart.json
new file mode 100644
index 00000000..891c5dce
--- /dev/null
+++ b/apps/www/src/public/registry/styles/default/area-chart.json
@@ -0,0 +1,19 @@
+{
+  "name": "area-chart",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "AreaChart.vue",
+      "content": "<script setup lang=\"ts\">\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { Area } from '@unovis/ts'\n\ntype Data = typeof data[number]\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Feb', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Mar', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Apr', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'May', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Jun', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Jul', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Aug', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Sep', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Oct', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Nov', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Dec', total: Math.floor(Math.random() * 5000) + 1000 },\n]\n</script>\n\n<template>\n  <VisXYContainer height=\"350px\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n    <svg width=\"0\" height=\"0\">\n      <defs>\n        <linearGradient id=\"colorUv\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"5%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.6\" />\n          <stop offset=\"95%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0\" />\n        </linearGradient>\n      </defs>\n    </svg>\n\n    <VisArea\n      :x=\"(d: Data, i: number) => i\"\n      :y=\"(d: Data) => d.total\"\n      color=\"auto\"\n      :attributes=\"{\n        [Area.selectors.area]: {\n          fill: 'url(#colorUv)',\n        },\n      }\"\n      :rounded-corners=\"4\"\n      :bar-padding=\"0.15\"\n    />\n    <VisLine\n      :x=\"(d: Data, i: number) => i\"\n      :y=\"(d: Data) => d.total\"\n      color=\"hsl(var(--primary))\"\n    />\n    <VisAxis\n      type=\"x\"\n      :num-ticks=\"data.length\"\n      :tick-format=\"(index: number) => data[index]?.name\"\n      :grid-line=\"false\"\n      :tick-line=\"false\"\n      tick-text-color=\"hsl(var(--muted-foreground))\"\n    />\n    <VisAxis\n      type=\"y\"\n      :num-ticks=\"data.length\"\n      :tick-format=\"(index: number) => data[index]?.name\"\n      :grid-line=\"false\"\n      :tick-line=\"false\"\n      :domain-line=\"false\"\n      tick-text-color=\"hsl(var(--muted-foreground))\"\n    />\n  </VisXYContainer>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as AreaChart } from './AreaChart.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/aspect-ratio.json b/apps/www/src/public/registry/styles/default/aspect-ratio.json
index f8534f00..54f7608c 100644
--- a/apps/www/src/public/registry/styles/default/aspect-ratio.json
+++ b/apps/www/src/public/registry/styles/default/aspect-ratio.json
@@ -13,4 +13,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/avatar.json b/apps/www/src/public/registry/styles/default/avatar.json
index a3be030c..4a5c7da8 100644
--- a/apps/www/src/public/registry/styles/default/avatar.json
+++ b/apps/www/src/public/registry/styles/default/avatar.json
@@ -23,4 +23,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/badge.json b/apps/www/src/public/registry/styles/default/badge.json
index b964534b..2c7f9d83 100644
--- a/apps/www/src/public/registry/styles/default/badge.json
+++ b/apps/www/src/public/registry/styles/default/badge.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/breadcrumb.json b/apps/www/src/public/registry/styles/default/breadcrumb.json
index ce3008c8..d9baa9cd 100644
--- a/apps/www/src/public/registry/styles/default/breadcrumb.json
+++ b/apps/www/src/public/registry/styles/default/breadcrumb.json
@@ -39,4 +39,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/button.json b/apps/www/src/public/registry/styles/default/button.json
index 6e6f2f43..6804e1e3 100644
--- a/apps/www/src/public/registry/styles/default/button.json
+++ b/apps/www/src/public/registry/styles/default/button.json
@@ -11,8 +11,8 @@
     },
     {
       "name": "index.ts",
-      "content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap 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',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-10 px-4 py-2',\n        sm: 'h-9 rounded-md px-3',\n        lg: 'h-11 rounded-md px-8',\n        icon: 'h-10 w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n"
+      "content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap 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',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-10 px-4 py-2',\n        xs: 'h-7 rounded px-2',\n        sm: 'h-9 rounded-md px-3',\n        lg: 'h-11 rounded-md px-8',\n        icon: 'h-10 w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n"
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/card.json b/apps/www/src/public/registry/styles/default/card.json
index a9a8f43b..139bac3a 100644
--- a/apps/www/src/public/registry/styles/default/card.json
+++ b/apps/www/src/public/registry/styles/default/card.json
@@ -35,4 +35,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/carousel.json b/apps/www/src/public/registry/styles/default/carousel.json
index e74a7edc..5ca5575d 100644
--- a/apps/www/src/public/registry/styles/default/carousel.json
+++ b/apps/www/src/public/registry/styles/default/carousel.json
@@ -44,4 +44,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/chart-area.json b/apps/www/src/public/registry/styles/default/chart-area.json
new file mode 100644
index 00000000..000bdeda
--- /dev/null
+++ b/apps/www/src/public/registry/styles/default/chart-area.json
@@ -0,0 +1,23 @@
+{
+  "name": "chart-area",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "chart",
+    "utils"
+  ],
+  "files": [
+    {
+      "name": "AreaChart.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as AreaChart } from './AreaChart.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
diff --git a/apps/www/src/public/registry/styles/default/chart-bar.json b/apps/www/src/public/registry/styles/default/chart-bar.json
new file mode 100644
index 00000000..e3905d42
--- /dev/null
+++ b/apps/www/src/public/registry/styles/default/chart-bar.json
@@ -0,0 +1,23 @@
+{
+  "name": "chart-bar",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "chart",
+    "utils"
+  ],
+  "files": [
+    {
+      "name": "BarChart.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface, Spacing } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as BarChart } from './BarChart.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
diff --git a/apps/www/src/public/registry/styles/default/chart-donut.json b/apps/www/src/public/registry/styles/default/chart-donut.json
new file mode 100644
index 00000000..bf3ecd0f
--- /dev/null
+++ b/apps/www/src/public/registry/styles/default/chart-donut.json
@@ -0,0 +1,23 @@
+{
+  "name": "chart-donut",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "chart",
+    "utils"
+  ],
+  "files": [
+    {
+      "name": "DonutChart.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { Donut } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { type BaseChartProps, ChartSingleTooltip, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as DonutChart } from './DonutChart.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
diff --git a/apps/www/src/public/registry/styles/default/chart-line.json b/apps/www/src/public/registry/styles/default/chart-line.json
new file mode 100644
index 00000000..2b08ea7f
--- /dev/null
+++ b/apps/www/src/public/registry/styles/default/chart-line.json
@@ -0,0 +1,23 @@
+{
+  "name": "chart-line",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "chart",
+    "utils"
+  ],
+  "files": [
+    {
+      "name": "LineChart.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { Axis, Line } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as LineChart } from './LineChart.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
diff --git a/apps/www/src/public/registry/styles/default/chart.json b/apps/www/src/public/registry/styles/default/chart.json
new file mode 100644
index 00000000..e8094acd
--- /dev/null
+++ b/apps/www/src/public/registry/styles/default/chart.json
@@ -0,0 +1,39 @@
+{
+  "name": "chart",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts"
+  ],
+  "registryDependencies": [
+    "chart",
+    "button",
+    "card"
+  ],
+  "files": [
+    {
+      "name": "ChartCrosshair.vue",
+      "content": "<script setup lang=\"ts\">\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '@/lib/registry/default/ui/chart'\n\nconst props = withDefaults(defineProps<{\n  colors: string[]\n  index: string\n  items: BulletLegendItemInterface[]\n  customTooltip?: Component\n}>(), {\n  colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n  if (wm.has(d)) {\n    return wm.get(d)\n  }\n  else {\n    const componentDiv = document.createElement('div')\n    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n      const legendReference = props.items.find(i => i.name === key)\n      return { ...legendReference, value }\n    })\n    const TooltipComponent = props.customTooltip ?? ChartTooltip\n    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n    wm.set(d, componentDiv.innerHTML)\n    return componentDiv.innerHTML\n  }\n}\n\nfunction color(d: unknown, i: number) {\n  return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n  <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n  <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n"
+    },
+    {
+      "name": "ChartLegend.vue",
+      "content": "<script setup lang=\"ts\">\nimport { VisBulletLegend } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { BulletLegend } from '@unovis/ts'\nimport { nextTick, onMounted, ref } from 'vue'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  'legendItemClick': [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "ChartSingleTooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport { VisTooltip } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '@/lib/registry/default/ui/chart'\n\nconst props = withDefaults(defineProps<{\n  selector: string\n  index: string\n  items?: BulletLegendItemInterface[]\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  customTooltip?: Component\n}>(), {\n  valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n  if (props.index in d) {\n    if (wm.has(d)) {\n      return wm.get(d)\n    }\n    else {\n      const componentDiv = document.createElement('div')\n      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n        const legendReference = props.items?.find(i => i.name === key)\n        return { ...legendReference, value: props.valueFormatter(value) }\n      })\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n\n  else {\n    const data = d.data\n\n    if (wm.has(data)) {\n      return wm.get(data)\n    }\n    else {\n      const style = getComputedStyle(elements[i])\n      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n      const componentDiv = document.createElement('div')\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n}\n</script>\n\n<template>\n  <VisTooltip\n    :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n      [selector]: template,\n    }\"\n  />\n</template>\n"
+    },
+    {
+      "name": "ChartTooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as ChartTooltip } from './ChartTooltip.vue'\nexport { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'\nexport { default as ChartLegend } from './ChartLegend.vue'\nexport { default as ChartCrosshair } from './ChartCrosshair.vue'\n\nexport function defaultColors(count: number = 3) {\n  const quotient = Math.floor(count / 2)\n  const remainder = count % 2\n\n  const primaryCount = quotient + remainder\n  const secondaryCount = quotient\n  return [\n    ...Array.from(Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),\n    ...Array.from(Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),\n  ]\n}\n\nexport * from './interface'\n"
+    },
+    {
+      "name": "interface.ts",
+      "content": "import type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n"
+    }
+  ],
+  "type": "components:ui"
+}
diff --git a/apps/www/src/public/registry/styles/default/checkbox.json b/apps/www/src/public/registry/styles/default/checkbox.json
index 86d0a16e..2efd9229 100644
--- a/apps/www/src/public/registry/styles/default/checkbox.json
+++ b/apps/www/src/public/registry/styles/default/checkbox.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/collapsible.json b/apps/www/src/public/registry/styles/default/collapsible.json
index 39e79fca..0c8ac927 100644
--- a/apps/www/src/public/registry/styles/default/collapsible.json
+++ b/apps/www/src/public/registry/styles/default/collapsible.json
@@ -21,4 +21,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/command.json b/apps/www/src/public/registry/styles/default/command.json
index b9f15c83..a999b1a0 100644
--- a/apps/www/src/public/registry/styles/default/command.json
+++ b/apps/www/src/public/registry/styles/default/command.json
@@ -48,4 +48,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/context-menu.json b/apps/www/src/public/registry/styles/default/context-menu.json
index 51dcd6d8..4d2b2cce 100644
--- a/apps/www/src/public/registry/styles/default/context-menu.json
+++ b/apps/www/src/public/registry/styles/default/context-menu.json
@@ -71,4 +71,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/dialog.json b/apps/www/src/public/registry/styles/default/dialog.json
index c2f2df4d..754ae8e9 100644
--- a/apps/www/src/public/registry/styles/default/dialog.json
+++ b/apps/www/src/public/registry/styles/default/dialog.json
@@ -47,4 +47,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/drawer.json b/apps/www/src/public/registry/styles/default/drawer.json
index 6c60eae7..8982181d 100644
--- a/apps/www/src/public/registry/styles/default/drawer.json
+++ b/apps/www/src/public/registry/styles/default/drawer.json
@@ -41,4 +41,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/dropdown-menu.json b/apps/www/src/public/registry/styles/default/dropdown-menu.json
index 0198694c..1afc9343 100644
--- a/apps/www/src/public/registry/styles/default/dropdown-menu.json
+++ b/apps/www/src/public/registry/styles/default/dropdown-menu.json
@@ -67,4 +67,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/form.json b/apps/www/src/public/registry/styles/default/form.json
index 5e61096e..19a29433 100644
--- a/apps/www/src/public/registry/styles/default/form.json
+++ b/apps/www/src/public/registry/styles/default/form.json
@@ -40,4 +40,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/hover-card.json b/apps/www/src/public/registry/styles/default/hover-card.json
index 5883a52e..7dfb7f47 100644
--- a/apps/www/src/public/registry/styles/default/hover-card.json
+++ b/apps/www/src/public/registry/styles/default/hover-card.json
@@ -23,4 +23,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/input.json b/apps/www/src/public/registry/styles/default/input.json
index 7f500be6..249a6657 100644
--- a/apps/www/src/public/registry/styles/default/input.json
+++ b/apps/www/src/public/registry/styles/default/input.json
@@ -17,4 +17,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/label.json b/apps/www/src/public/registry/styles/default/label.json
index 0cfedee1..d827d8be 100644
--- a/apps/www/src/public/registry/styles/default/label.json
+++ b/apps/www/src/public/registry/styles/default/label.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/menubar.json b/apps/www/src/public/registry/styles/default/menubar.json
index 9c9e9c98..d3a44c54 100644
--- a/apps/www/src/public/registry/styles/default/menubar.json
+++ b/apps/www/src/public/registry/styles/default/menubar.json
@@ -71,4 +71,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/navigation-menu.json b/apps/www/src/public/registry/styles/default/navigation-menu.json
index ecda26c9..501c88c9 100644
--- a/apps/www/src/public/registry/styles/default/navigation-menu.json
+++ b/apps/www/src/public/registry/styles/default/navigation-menu.json
@@ -43,4 +43,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/pagination.json b/apps/www/src/public/registry/styles/default/pagination.json
index 6d25fc6f..77a558de 100644
--- a/apps/www/src/public/registry/styles/default/pagination.json
+++ b/apps/www/src/public/registry/styles/default/pagination.json
@@ -32,4 +32,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/pin-input.json b/apps/www/src/public/registry/styles/default/pin-input.json
index 894719f4..654672e8 100644
--- a/apps/www/src/public/registry/styles/default/pin-input.json
+++ b/apps/www/src/public/registry/styles/default/pin-input.json
@@ -27,4 +27,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/popover.json b/apps/www/src/public/registry/styles/default/popover.json
index 916e0eab..5d8069ce 100644
--- a/apps/www/src/public/registry/styles/default/popover.json
+++ b/apps/www/src/public/registry/styles/default/popover.json
@@ -23,4 +23,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/progress.json b/apps/www/src/public/registry/styles/default/progress.json
index cd2edde9..65493f42 100644
--- a/apps/www/src/public/registry/styles/default/progress.json
+++ b/apps/www/src/public/registry/styles/default/progress.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/radio-group.json b/apps/www/src/public/registry/styles/default/radio-group.json
index beae81f5..e1bf9019 100644
--- a/apps/www/src/public/registry/styles/default/radio-group.json
+++ b/apps/www/src/public/registry/styles/default/radio-group.json
@@ -19,4 +19,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/resizable.json b/apps/www/src/public/registry/styles/default/resizable.json
index 96622614..53b405a0 100644
--- a/apps/www/src/public/registry/styles/default/resizable.json
+++ b/apps/www/src/public/registry/styles/default/resizable.json
@@ -19,4 +19,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/scroll-area.json b/apps/www/src/public/registry/styles/default/scroll-area.json
index 4d7a79fa..2647bf53 100644
--- a/apps/www/src/public/registry/styles/default/scroll-area.json
+++ b/apps/www/src/public/registry/styles/default/scroll-area.json
@@ -19,4 +19,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/select.json b/apps/www/src/public/registry/styles/default/select.json
index cafc7f97..d4d4ca10 100644
--- a/apps/www/src/public/registry/styles/default/select.json
+++ b/apps/www/src/public/registry/styles/default/select.json
@@ -55,4 +55,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/separator.json b/apps/www/src/public/registry/styles/default/separator.json
index da6dd655..2d5d85df 100644
--- a/apps/www/src/public/registry/styles/default/separator.json
+++ b/apps/www/src/public/registry/styles/default/separator.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/sheet.json b/apps/www/src/public/registry/styles/default/sheet.json
index 33287e21..d347764a 100644
--- a/apps/www/src/public/registry/styles/default/sheet.json
+++ b/apps/www/src/public/registry/styles/default/sheet.json
@@ -43,4 +43,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/skeleton.json b/apps/www/src/public/registry/styles/default/skeleton.json
index 13be9875..019e0486 100644
--- a/apps/www/src/public/registry/styles/default/skeleton.json
+++ b/apps/www/src/public/registry/styles/default/skeleton.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/slider.json b/apps/www/src/public/registry/styles/default/slider.json
index ece41b77..036c32f9 100644
--- a/apps/www/src/public/registry/styles/default/slider.json
+++ b/apps/www/src/public/registry/styles/default/slider.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/sonner.json b/apps/www/src/public/registry/styles/default/sonner.json
index ae170e52..3a164849 100644
--- a/apps/www/src/public/registry/styles/default/sonner.json
+++ b/apps/www/src/public/registry/styles/default/sonner.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/switch.json b/apps/www/src/public/registry/styles/default/switch.json
index 3b09a00e..006f0b0a 100644
--- a/apps/www/src/public/registry/styles/default/switch.json
+++ b/apps/www/src/public/registry/styles/default/switch.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/table.json b/apps/www/src/public/registry/styles/default/table.json
index cd605e4f..9b2e8ab7 100644
--- a/apps/www/src/public/registry/styles/default/table.json
+++ b/apps/www/src/public/registry/styles/default/table.json
@@ -47,4 +47,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/tabs.json b/apps/www/src/public/registry/styles/default/tabs.json
index cc0e099d..c3fb9437 100644
--- a/apps/www/src/public/registry/styles/default/tabs.json
+++ b/apps/www/src/public/registry/styles/default/tabs.json
@@ -27,4 +27,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/tags-input.json b/apps/www/src/public/registry/styles/default/tags-input.json
index 01060323..ca31d56c 100644
--- a/apps/www/src/public/registry/styles/default/tags-input.json
+++ b/apps/www/src/public/registry/styles/default/tags-input.json
@@ -31,4 +31,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/textarea.json b/apps/www/src/public/registry/styles/default/textarea.json
index 4236a997..cc38a39e 100644
--- a/apps/www/src/public/registry/styles/default/textarea.json
+++ b/apps/www/src/public/registry/styles/default/textarea.json
@@ -17,4 +17,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/toast.json b/apps/www/src/public/registry/styles/default/toast.json
index 3cc32c77..d901ad1a 100644
--- a/apps/www/src/public/registry/styles/default/toast.json
+++ b/apps/www/src/public/registry/styles/default/toast.json
@@ -47,4 +47,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/toggle-group.json b/apps/www/src/public/registry/styles/default/toggle-group.json
index b0909535..71b4c12a 100644
--- a/apps/www/src/public/registry/styles/default/toggle-group.json
+++ b/apps/www/src/public/registry/styles/default/toggle-group.json
@@ -20,4 +20,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/toggle.json b/apps/www/src/public/registry/styles/default/toggle.json
index 5ae5563a..5dca88ac 100644
--- a/apps/www/src/public/registry/styles/default/toggle.json
+++ b/apps/www/src/public/registry/styles/default/toggle.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/tooltip.json b/apps/www/src/public/registry/styles/default/tooltip.json
index ab74ed0f..fbafb977 100644
--- a/apps/www/src/public/registry/styles/default/tooltip.json
+++ b/apps/www/src/public/registry/styles/default/tooltip.json
@@ -27,4 +27,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/v-calendar.json b/apps/www/src/public/registry/styles/default/v-calendar.json
index 660d94c2..e89b70ab 100644
--- a/apps/www/src/public/registry/styles/default/v-calendar.json
+++ b/apps/www/src/public/registry/styles/default/v-calendar.json
@@ -19,4 +19,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/index.json b/apps/www/src/public/registry/styles/index.json
index bbefdacf..2002ac50 100644
--- a/apps/www/src/public/registry/styles/index.json
+++ b/apps/www/src/public/registry/styles/index.json
@@ -7,4 +7,4 @@
     "name": "new-york",
     "label": "New York"
   }
-]
\ No newline at end of file
+]
diff --git a/apps/www/src/public/registry/styles/new-york/accordion.json b/apps/www/src/public/registry/styles/new-york/accordion.json
index ecf40bab..4d354d57 100644
--- a/apps/www/src/public/registry/styles/new-york/accordion.json
+++ b/apps/www/src/public/registry/styles/new-york/accordion.json
@@ -27,4 +27,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/alert-dialog.json b/apps/www/src/public/registry/styles/new-york/alert-dialog.json
index 934099ea..283c1d01 100644
--- a/apps/www/src/public/registry/styles/new-york/alert-dialog.json
+++ b/apps/www/src/public/registry/styles/new-york/alert-dialog.json
@@ -48,4 +48,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/alert.json b/apps/www/src/public/registry/styles/new-york/alert.json
index 43eaad08..72872a7a 100644
--- a/apps/www/src/public/registry/styles/new-york/alert.json
+++ b/apps/www/src/public/registry/styles/new-york/alert.json
@@ -23,4 +23,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/area-chart.json b/apps/www/src/public/registry/styles/new-york/area-chart.json
new file mode 100644
index 00000000..891c5dce
--- /dev/null
+++ b/apps/www/src/public/registry/styles/new-york/area-chart.json
@@ -0,0 +1,19 @@
+{
+  "name": "area-chart",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "AreaChart.vue",
+      "content": "<script setup lang=\"ts\">\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { Area } from '@unovis/ts'\n\ntype Data = typeof data[number]\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Feb', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Mar', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Apr', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'May', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Jun', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Jul', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Aug', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Sep', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Oct', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Nov', total: Math.floor(Math.random() * 5000) + 1000 },\n  { name: 'Dec', total: Math.floor(Math.random() * 5000) + 1000 },\n]\n</script>\n\n<template>\n  <VisXYContainer height=\"350px\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n    <svg width=\"0\" height=\"0\">\n      <defs>\n        <linearGradient id=\"colorUv\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"5%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.6\" />\n          <stop offset=\"95%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0\" />\n        </linearGradient>\n      </defs>\n    </svg>\n\n    <VisArea\n      :x=\"(d: Data, i: number) => i\"\n      :y=\"(d: Data) => d.total\"\n      color=\"auto\"\n      :attributes=\"{\n        [Area.selectors.area]: {\n          fill: 'url(#colorUv)',\n        },\n      }\"\n      :rounded-corners=\"4\"\n      :bar-padding=\"0.15\"\n    />\n    <VisLine\n      :x=\"(d: Data, i: number) => i\"\n      :y=\"(d: Data) => d.total\"\n      color=\"hsl(var(--primary))\"\n    />\n    <VisAxis\n      type=\"x\"\n      :num-ticks=\"data.length\"\n      :tick-format=\"(index: number) => data[index]?.name\"\n      :grid-line=\"false\"\n      :tick-line=\"false\"\n      tick-text-color=\"hsl(var(--muted-foreground))\"\n    />\n    <VisAxis\n      type=\"y\"\n      :num-ticks=\"data.length\"\n      :tick-format=\"(index: number) => data[index]?.name\"\n      :grid-line=\"false\"\n      :tick-line=\"false\"\n      :domain-line=\"false\"\n      tick-text-color=\"hsl(var(--muted-foreground))\"\n    />\n  </VisXYContainer>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as AreaChart } from './AreaChart.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/new-york/aspect-ratio.json b/apps/www/src/public/registry/styles/new-york/aspect-ratio.json
index f8534f00..54f7608c 100644
--- a/apps/www/src/public/registry/styles/new-york/aspect-ratio.json
+++ b/apps/www/src/public/registry/styles/new-york/aspect-ratio.json
@@ -13,4 +13,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/avatar.json b/apps/www/src/public/registry/styles/new-york/avatar.json
index a3be030c..4a5c7da8 100644
--- a/apps/www/src/public/registry/styles/new-york/avatar.json
+++ b/apps/www/src/public/registry/styles/new-york/avatar.json
@@ -23,4 +23,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/badge.json b/apps/www/src/public/registry/styles/new-york/badge.json
index 1057abff..d20934b6 100644
--- a/apps/www/src/public/registry/styles/new-york/badge.json
+++ b/apps/www/src/public/registry/styles/new-york/badge.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/breadcrumb.json b/apps/www/src/public/registry/styles/new-york/breadcrumb.json
index 7e70d173..094ff22e 100644
--- a/apps/www/src/public/registry/styles/new-york/breadcrumb.json
+++ b/apps/www/src/public/registry/styles/new-york/breadcrumb.json
@@ -39,4 +39,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/button.json b/apps/www/src/public/registry/styles/new-york/button.json
index b3526f5b..47aea8e3 100644
--- a/apps/www/src/public/registry/styles/new-york/button.json
+++ b/apps/www/src/public/registry/styles/new-york/button.json
@@ -11,8 +11,8 @@
     },
     {
       "name": "index.ts",
-      "content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n"
+      "content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        xs: 'h-7 rounded px-2',\n        sm: 'h-8 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n"
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/card.json b/apps/www/src/public/registry/styles/new-york/card.json
index b2ccbb05..8446eff0 100644
--- a/apps/www/src/public/registry/styles/new-york/card.json
+++ b/apps/www/src/public/registry/styles/new-york/card.json
@@ -35,4 +35,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/carousel.json b/apps/www/src/public/registry/styles/new-york/carousel.json
index 43543e79..e3c0edd3 100644
--- a/apps/www/src/public/registry/styles/new-york/carousel.json
+++ b/apps/www/src/public/registry/styles/new-york/carousel.json
@@ -44,4 +44,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/chart-area.json b/apps/www/src/public/registry/styles/new-york/chart-area.json
new file mode 100644
index 00000000..90920ca8
--- /dev/null
+++ b/apps/www/src/public/registry/styles/new-york/chart-area.json
@@ -0,0 +1,23 @@
+{
+  "name": "chart-area",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "chart",
+    "utils"
+  ],
+  "files": [
+    {
+      "name": "AreaChart.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n  /**\n   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n  showGradiant: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <svg width=\"0\" height=\"0\">\n        <defs>\n          <linearGradient v-for=\"(color, i) in colors\" :id=\"`color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <template v-if=\"showGradiant\">\n              <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n              <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n            </template>\n            <template v-else>\n              <stop offset=\"0%\" :stop-color=\"color\" />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\n\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as AreaChart } from './AreaChart.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
diff --git a/apps/www/src/public/registry/styles/new-york/chart-bar.json b/apps/www/src/public/registry/styles/new-york/chart-bar.json
new file mode 100644
index 00000000..8a33d773
--- /dev/null
+++ b/apps/www/src/public/registry/styles/new-york/chart-bar.json
@@ -0,0 +1,23 @@
+{
+  "name": "chart-bar",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "chart",
+    "utils"
+  ],
+  "files": [
+    {
+      "name": "BarChart.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface, Spacing } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Change the type of the chart\n   * @default \"grouped\"\n   */\n  type?: 'stacked' | 'grouped'\n  /**\n   * Rounded bar corners\n   * @default 0\n   */\n  roundedCorners?: number\n}>(), {\n  type: 'grouped',\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  filterOpacity: 0.2,\n  roundedCorners: 0,\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"margin\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :custom-tooltip=\"customTooltip\" :index=\"index\" />\n\n      <VisBarComponent\n        :x=\"(d: Data, i: number) => i\"\n        :y=\"categories.map(category => (d: Data) => d[category]) \"\n        :color=\"colors\"\n        :rounded-corners=\"roundedCorners\"\n        :bar-padding=\"0.05\"\n        :attributes=\"{\n          [selectorsBar]: {\n            opacity: (d: Data, i:number) => {\n              const pos = i % categories.length\n              return legendItems[pos]?.inactive ? filterOpacity : 1\n            },\n          },\n        }\"\n      />\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as BarChart } from './BarChart.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
diff --git a/apps/www/src/public/registry/styles/new-york/chart-donut.json b/apps/www/src/public/registry/styles/new-york/chart-donut.json
new file mode 100644
index 00000000..5482628d
--- /dev/null
+++ b/apps/www/src/public/registry/styles/new-york/chart-donut.json
@@ -0,0 +1,23 @@
+{
+  "name": "chart-donut",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "chart",
+    "utils"
+  ],
+  "files": [
+    {
+      "name": "DonutChart.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { Donut } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { type BaseChartProps, ChartSingleTooltip, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {\n  /**\n   * Sets the name of the key containing the quantitative chart values.\n   */\n  category: KeyOfT\n  /**\n   * Change the type of the chart\n   * @default \"donut\"\n   */\n  type?: 'donut' | 'pie'\n  /**\n   * Function to sort the segment\n   */\n  sortFunction?: (a: any, b: any) => number | undefined\n  /**\n   * Controls the formatting for the label.\n   */\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n}>(), {\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  sortFunction: () => undefined,\n  valueFormatter: (tick: number) => `${tick}`,\n  type: 'donut',\n  filterOpacity: 0.2,\n  showTooltip: true,\n  showLegend: true,\n})\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst category = computed(() => props.category as KeyOfT)\nconst index = computed(() => props.index as KeyOfT)\n\nconst isMounted = useMounted()\nconst activeSegmentKey = ref<string>()\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))\nconst legendItems = computed(() => props.data.map((item, i) => ({\n  name: item[props.index],\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst totalValue = computed(() => props.data.reduce((prev, curr) => {\n  return prev + curr[props.category]\n}, 0))\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')\">\n    <VisSingleContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n      <ChartSingleTooltip\n        :selector=\"Donut.selectors.segment\"\n        :index=\"category\"\n        :items=\"legendItems\"\n        :value-formatter=\"valueFormatter\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <VisDonut\n        :value=\"(d: Data) => d[category]\"\n        :sort-function=\"sortFunction\"\n        :color=\"colors\"\n        :arc-width=\"type === 'donut' ? 20 : 0\"\n        :show-background=\"false\"\n        :central-label=\"type === 'donut' ? valueFormatter(totalValue) : ''\"\n        :events=\"{\n          [Donut.selectors.segment]: {\n            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {\n              if (d?.data?.[index] === activeSegmentKey) {\n                activeSegmentKey = undefined\n                elements.forEach(el => el.style.opacity = '1')\n              }\n              else {\n                activeSegmentKey = d?.data?.[index]\n                elements.forEach(el => el.style.opacity = `${filterOpacity}`)\n                elements[i].style.opacity = '1'\n              }\n            },\n          },\n        }\"\n      />\n\n      <slot />\n    </VisSingleContainer>\n  </div>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as DonutChart } from './DonutChart.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
diff --git a/apps/www/src/public/registry/styles/new-york/chart-line.json b/apps/www/src/public/registry/styles/new-york/chart-line.json
new file mode 100644
index 00000000..fdc55a8d
--- /dev/null
+++ b/apps/www/src/public/registry/styles/new-york/chart-line.json
@@ -0,0 +1,23 @@
+{
+  "name": "chart-line",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts",
+    "@vueuse/core"
+  ],
+  "registryDependencies": [
+    "chart",
+    "utils"
+  ],
+  "files": [
+    {
+      "name": "LineChart.vue",
+      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { Axis, Line } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n  /**\n   * Render custom tooltip component.\n   */\n  customTooltip?: Component\n  /**\n   * Type of curve\n   */\n  curveType?: CurveType\n}>(), {\n  curveType: CurveType.MonotoneX,\n  filterOpacity: 0.2,\n  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n  showXAxis: true,\n  showYAxis: true,\n  showTooltip: true,\n  showLegend: true,\n  showGridLine: true,\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n  name: category,\n  color: colors.value[i],\n  inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n}\n</script>\n\n<template>\n  <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n    <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n      <template v-for=\"(category, i) in categories\" :key=\"category\">\n        <VisLine\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          :curve-type=\"curveType\"\n          :color=\"colors[i]\"\n          :attributes=\"{\n            [Line.selectors.line]: {\n              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n            },\n          }\"\n        />\n      </template>\n\n      <VisAxis\n        v-if=\"showXAxis\"\n        type=\"x\"\n        :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n        :grid-line=\"false\"\n        :tick-line=\"false\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n      <VisAxis\n        v-if=\"showYAxis\"\n        type=\"y\"\n        :tick-line=\"false\"\n        :tick-format=\"yFormatter\"\n        :domain-line=\"false\"\n        :grid-line=\"showGridLine\"\n        :attributes=\"{\n          [Axis.selectors.grid]: {\n            class: 'text-muted',\n          },\n        }\"\n        tick-text-color=\"hsl(var(--vis-text-color))\"\n      />\n\n      <slot />\n    </VisXYContainer>\n  </div>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as LineChart } from './LineChart.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
diff --git a/apps/www/src/public/registry/styles/new-york/chart.json b/apps/www/src/public/registry/styles/new-york/chart.json
new file mode 100644
index 00000000..6195cd48
--- /dev/null
+++ b/apps/www/src/public/registry/styles/new-york/chart.json
@@ -0,0 +1,39 @@
+{
+  "name": "chart",
+  "dependencies": [
+    "@unovis/vue",
+    "@unovis/ts"
+  ],
+  "registryDependencies": [
+    "chart",
+    "button",
+    "card"
+  ],
+  "files": [
+    {
+      "name": "ChartCrosshair.vue",
+      "content": "<script setup lang=\"ts\">\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '@/lib/registry/new-york/ui/chart'\n\nconst props = withDefaults(defineProps<{\n  colors: string[]\n  index: string\n  items: BulletLegendItemInterface[]\n  customTooltip?: Component\n}>(), {\n  colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n  if (wm.has(d)) {\n    return wm.get(d)\n  }\n  else {\n    const componentDiv = document.createElement('div')\n    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n      const legendReference = props.items.find(i => i.name === key)\n      return { ...legendReference, value }\n    })\n    const TooltipComponent = props.customTooltip ?? ChartTooltip\n    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n    wm.set(d, componentDiv.innerHTML)\n    return componentDiv.innerHTML\n  }\n}\n\nfunction color(d: unknown, i: number) {\n  return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n  <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n  <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n"
+    },
+    {
+      "name": "ChartLegend.vue",
+      "content": "<script setup lang=\"ts\">\nimport { VisBulletLegend } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { BulletLegend } from '@unovis/ts'\nimport { nextTick, onMounted, ref } from 'vue'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\n\nconst props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {\n  items: () => [],\n})\n\nconst emits = defineEmits<{\n  legendItemClick: [d: BulletLegendItemInterface, i: number]\n  'update:items': [payload: BulletLegendItemInterface[]]\n}>()\n\nconst elRef = ref<HTMLElement>()\n\nonMounted(() => {\n  const selector = `.${BulletLegend.selectors.item}`\n  nextTick(() => {\n    const elements = elRef.value?.querySelectorAll(selector)\n    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')\n\n    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))\n  })\n})\n\nfunction onLegendItemClick(d: BulletLegendItemInterface, i: number) {\n  emits('legendItemClick', d, i)\n  const isBulletActive = !props.items[i].inactive\n  const isFilterApplied = props.items.some(i => i.inactive)\n  if (isFilterApplied && isBulletActive) {\n    // reset filter\n    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))\n  }\n  else {\n    // apply selection, set other item as inactive\n    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))\n  }\n}\n</script>\n\n<template>\n  <div ref=\"elRef\" class=\"w-max\">\n    <VisBulletLegend\n      :items=\"items\"\n      :on-legend-item-click=\"onLegendItemClick\"\n    />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "ChartSingleTooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport { VisTooltip } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '@/lib/registry/new-york/ui/chart'\n\nconst props = withDefaults(defineProps<{\n  selector: string\n  index: string\n  items?: BulletLegendItemInterface[]\n  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n  customTooltip?: Component\n}>(), {\n  valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n  if (props.index in d) {\n    if (wm.has(d)) {\n      return wm.get(d)\n    }\n    else {\n      const componentDiv = document.createElement('div')\n      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n        const legendReference = props.items?.find(i => i.name === key)\n        return { ...legendReference, value: props.valueFormatter(value) }\n      })\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n\n  else {\n    const data = d.data\n\n    if (wm.has(data)) {\n      return wm.get(data)\n    }\n    else {\n      const style = getComputedStyle(elements[i])\n      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n      const componentDiv = document.createElement('div')\n      const TooltipComponent = props.customTooltip ?? ChartTooltip\n      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n      wm.set(d, componentDiv.innerHTML)\n      return componentDiv.innerHTML\n    }\n  }\n}\n</script>\n\n<template>\n  <VisTooltip\n    :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n      [selector]: template,\n    }\"\n  />\n</template>\n"
+    },
+    {
+      "name": "ChartTooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardHeader v-if=\"title\" class=\"p-3 border-b\">\n      <CardTitle>\n        {{ title }}\n      </CardTitle>\n    </CardHeader>\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-1\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between\">\n        <div class=\"flex items-center\">\n          <span class=\"w-2.5 h-2.5 mr-2\">\n            <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 30 30\">\n              <path\n                d=\" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0\"\n                :stroke=\"item.color\"\n                :fill=\"item.color\"\n                stroke-width=\"1\"\n              />\n            </svg>\n          </span>\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as ChartTooltip } from './ChartTooltip.vue'\nexport { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'\nexport { default as ChartLegend } from './ChartLegend.vue'\nexport { default as ChartCrosshair } from './ChartCrosshair.vue'\n\nexport function defaultColors(count: number = 3) {\n  const quotient = Math.floor(count / 2)\n  const remainder = count % 2\n\n  const primaryCount = quotient + remainder\n  const secondaryCount = quotient\n  return [\n    ...Array.from(Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),\n    ...Array.from(Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),\n  ]\n}\n\nexport * from './interface'\n"
+    },
+    {
+      "name": "interface.ts",
+      "content": "import type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n  /**\n   * The source data, in which each entry is a dictionary.\n   */\n  data: T[]\n  /**\n   * Select the categories from your data. Used to populate the legend and toolip.\n   */\n  categories: KeyOf<T>[]\n  /**\n   * Sets the key to map the data to the axis.\n   */\n  index: KeyOf<T>\n  /**\n   * Change the default colors.\n   */\n  colors?: string[]\n  /**\n   * Margin of each the container\n   */\n  margin?: Spacing\n  /**\n   * Change the opacity of the non-selected field\n   * @default 0.2\n   */\n  filterOpacity?: number\n  /**\n   * Function to format X label\n   */\n  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Function to format Y label\n   */\n  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n  /**\n   * Controls the visibility of the X axis.\n   * @default true\n   */\n  showXAxis?: boolean\n  /**\n   * Controls the visibility of the Y axis.\n   * @default true\n   */\n  showYAxis?: boolean\n  /**\n   * Controls the visibility of tooltip.\n   * @default true\n   */\n  showTooltip?: boolean\n  /**\n   * Controls the visibility of legend.\n   * @default true\n   */\n  showLegend?: boolean\n  /**\n   * Controls the visibility of gridline.\n   * @default true\n   */\n  showGridLine?: boolean\n}\n"
+    }
+  ],
+  "type": "components:ui"
+}
diff --git a/apps/www/src/public/registry/styles/new-york/checkbox.json b/apps/www/src/public/registry/styles/new-york/checkbox.json
index 35fa7f1d..dc3c2cd0 100644
--- a/apps/www/src/public/registry/styles/new-york/checkbox.json
+++ b/apps/www/src/public/registry/styles/new-york/checkbox.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/collapsible.json b/apps/www/src/public/registry/styles/new-york/collapsible.json
index 39e79fca..0c8ac927 100644
--- a/apps/www/src/public/registry/styles/new-york/collapsible.json
+++ b/apps/www/src/public/registry/styles/new-york/collapsible.json
@@ -21,4 +21,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/command.json b/apps/www/src/public/registry/styles/new-york/command.json
index 42c34759..ffcbdb03 100644
--- a/apps/www/src/public/registry/styles/new-york/command.json
+++ b/apps/www/src/public/registry/styles/new-york/command.json
@@ -48,4 +48,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/context-menu.json b/apps/www/src/public/registry/styles/new-york/context-menu.json
index f27e8dca..38d07d10 100644
--- a/apps/www/src/public/registry/styles/new-york/context-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/context-menu.json
@@ -71,4 +71,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/dialog.json b/apps/www/src/public/registry/styles/new-york/dialog.json
index fcc6ca4c..b7e8da2f 100644
--- a/apps/www/src/public/registry/styles/new-york/dialog.json
+++ b/apps/www/src/public/registry/styles/new-york/dialog.json
@@ -47,4 +47,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/drawer.json b/apps/www/src/public/registry/styles/new-york/drawer.json
index 6c60eae7..8982181d 100644
--- a/apps/www/src/public/registry/styles/new-york/drawer.json
+++ b/apps/www/src/public/registry/styles/new-york/drawer.json
@@ -41,4 +41,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/dropdown-menu.json b/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
index e834d04c..3c2ab614 100644
--- a/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
@@ -67,4 +67,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/hover-card.json b/apps/www/src/public/registry/styles/new-york/hover-card.json
index 5883a52e..7dfb7f47 100644
--- a/apps/www/src/public/registry/styles/new-york/hover-card.json
+++ b/apps/www/src/public/registry/styles/new-york/hover-card.json
@@ -23,4 +23,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/input.json b/apps/www/src/public/registry/styles/new-york/input.json
index 7b840496..a7e9c552 100644
--- a/apps/www/src/public/registry/styles/new-york/input.json
+++ b/apps/www/src/public/registry/styles/new-york/input.json
@@ -17,4 +17,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/label.json b/apps/www/src/public/registry/styles/new-york/label.json
index 0cfedee1..d827d8be 100644
--- a/apps/www/src/public/registry/styles/new-york/label.json
+++ b/apps/www/src/public/registry/styles/new-york/label.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/menubar.json b/apps/www/src/public/registry/styles/new-york/menubar.json
index 9602ca23..578ebe84 100644
--- a/apps/www/src/public/registry/styles/new-york/menubar.json
+++ b/apps/www/src/public/registry/styles/new-york/menubar.json
@@ -71,4 +71,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/navigation-menu.json b/apps/www/src/public/registry/styles/new-york/navigation-menu.json
index fa0996a5..055569f9 100644
--- a/apps/www/src/public/registry/styles/new-york/navigation-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/navigation-menu.json
@@ -43,4 +43,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/pagination.json b/apps/www/src/public/registry/styles/new-york/pagination.json
index e07f0b04..4dd33388 100644
--- a/apps/www/src/public/registry/styles/new-york/pagination.json
+++ b/apps/www/src/public/registry/styles/new-york/pagination.json
@@ -32,4 +32,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/pin-input.json b/apps/www/src/public/registry/styles/new-york/pin-input.json
index 041f1411..617f41a3 100644
--- a/apps/www/src/public/registry/styles/new-york/pin-input.json
+++ b/apps/www/src/public/registry/styles/new-york/pin-input.json
@@ -27,4 +27,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/popover.json b/apps/www/src/public/registry/styles/new-york/popover.json
index 034bb416..00f53e9c 100644
--- a/apps/www/src/public/registry/styles/new-york/popover.json
+++ b/apps/www/src/public/registry/styles/new-york/popover.json
@@ -23,4 +23,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/progress.json b/apps/www/src/public/registry/styles/new-york/progress.json
index 03f8fe71..0df36278 100644
--- a/apps/www/src/public/registry/styles/new-york/progress.json
+++ b/apps/www/src/public/registry/styles/new-york/progress.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/radio-group.json b/apps/www/src/public/registry/styles/new-york/radio-group.json
index 1a38f59a..1a415d84 100644
--- a/apps/www/src/public/registry/styles/new-york/radio-group.json
+++ b/apps/www/src/public/registry/styles/new-york/radio-group.json
@@ -19,4 +19,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/resizable.json b/apps/www/src/public/registry/styles/new-york/resizable.json
index 8d9ab3c7..eb2ccc2b 100644
--- a/apps/www/src/public/registry/styles/new-york/resizable.json
+++ b/apps/www/src/public/registry/styles/new-york/resizable.json
@@ -19,4 +19,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/scroll-area.json b/apps/www/src/public/registry/styles/new-york/scroll-area.json
index 4d7a79fa..2647bf53 100644
--- a/apps/www/src/public/registry/styles/new-york/scroll-area.json
+++ b/apps/www/src/public/registry/styles/new-york/scroll-area.json
@@ -19,4 +19,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/select.json b/apps/www/src/public/registry/styles/new-york/select.json
index 01409a08..da8076e4 100644
--- a/apps/www/src/public/registry/styles/new-york/select.json
+++ b/apps/www/src/public/registry/styles/new-york/select.json
@@ -55,4 +55,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/separator.json b/apps/www/src/public/registry/styles/new-york/separator.json
index da6dd655..2d5d85df 100644
--- a/apps/www/src/public/registry/styles/new-york/separator.json
+++ b/apps/www/src/public/registry/styles/new-york/separator.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/sheet.json b/apps/www/src/public/registry/styles/new-york/sheet.json
index 215d8f67..8fd739e1 100644
--- a/apps/www/src/public/registry/styles/new-york/sheet.json
+++ b/apps/www/src/public/registry/styles/new-york/sheet.json
@@ -43,4 +43,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/skeleton.json b/apps/www/src/public/registry/styles/new-york/skeleton.json
index 1487c9e2..ceb9997d 100644
--- a/apps/www/src/public/registry/styles/new-york/skeleton.json
+++ b/apps/www/src/public/registry/styles/new-york/skeleton.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/slider.json b/apps/www/src/public/registry/styles/new-york/slider.json
index dbe372c5..6f1c60fd 100644
--- a/apps/www/src/public/registry/styles/new-york/slider.json
+++ b/apps/www/src/public/registry/styles/new-york/slider.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/sonner.json b/apps/www/src/public/registry/styles/new-york/sonner.json
index ae170e52..3a164849 100644
--- a/apps/www/src/public/registry/styles/new-york/sonner.json
+++ b/apps/www/src/public/registry/styles/new-york/sonner.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/switch.json b/apps/www/src/public/registry/styles/new-york/switch.json
index 7cc55c5b..14e290e0 100644
--- a/apps/www/src/public/registry/styles/new-york/switch.json
+++ b/apps/www/src/public/registry/styles/new-york/switch.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/table.json b/apps/www/src/public/registry/styles/new-york/table.json
index 27805556..d7f98df7 100644
--- a/apps/www/src/public/registry/styles/new-york/table.json
+++ b/apps/www/src/public/registry/styles/new-york/table.json
@@ -47,4 +47,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/tabs.json b/apps/www/src/public/registry/styles/new-york/tabs.json
index f238ee00..8c2cef7c 100644
--- a/apps/www/src/public/registry/styles/new-york/tabs.json
+++ b/apps/www/src/public/registry/styles/new-york/tabs.json
@@ -27,4 +27,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/tags-input.json b/apps/www/src/public/registry/styles/new-york/tags-input.json
index 3eaa3f7e..247c32ce 100644
--- a/apps/www/src/public/registry/styles/new-york/tags-input.json
+++ b/apps/www/src/public/registry/styles/new-york/tags-input.json
@@ -31,4 +31,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/textarea.json b/apps/www/src/public/registry/styles/new-york/textarea.json
index 40b5b596..72d2929a 100644
--- a/apps/www/src/public/registry/styles/new-york/textarea.json
+++ b/apps/www/src/public/registry/styles/new-york/textarea.json
@@ -17,4 +17,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/toast.json b/apps/www/src/public/registry/styles/new-york/toast.json
index 99669a77..185a083e 100644
--- a/apps/www/src/public/registry/styles/new-york/toast.json
+++ b/apps/www/src/public/registry/styles/new-york/toast.json
@@ -47,4 +47,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/toggle-group.json b/apps/www/src/public/registry/styles/new-york/toggle-group.json
index c1e79760..7d1e77a8 100644
--- a/apps/www/src/public/registry/styles/new-york/toggle-group.json
+++ b/apps/www/src/public/registry/styles/new-york/toggle-group.json
@@ -20,4 +20,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/toggle.json b/apps/www/src/public/registry/styles/new-york/toggle.json
index 4ccde5ca..52151f2d 100644
--- a/apps/www/src/public/registry/styles/new-york/toggle.json
+++ b/apps/www/src/public/registry/styles/new-york/toggle.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/tooltip.json b/apps/www/src/public/registry/styles/new-york/tooltip.json
index 975435fe..5b08bfaf 100644
--- a/apps/www/src/public/registry/styles/new-york/tooltip.json
+++ b/apps/www/src/public/registry/styles/new-york/tooltip.json
@@ -27,4 +27,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/v-calendar.json b/apps/www/src/public/registry/styles/new-york/v-calendar.json
index 47ba04d0..ebe89eb5 100644
--- a/apps/www/src/public/registry/styles/new-york/v-calendar.json
+++ b/apps/www/src/public/registry/styles/new-york/v-calendar.json
@@ -19,4 +19,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/stores/config.ts b/apps/www/src/stores/config.ts
index 4285141f..c8649388 100644
--- a/apps/www/src/stores/config.ts
+++ b/apps/www/src/stores/config.ts
@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import { useSessionStorage, useStorage } from '@vueuse/core'
+import { useStorage } from '@vueuse/core'
 import { useData } from 'vitepress'
 import { type Theme, themes } from './../lib/registry/themes'
 import { type Style, styles } from '@/lib/registry/styles'
@@ -20,7 +20,8 @@ export const RADII = [0, 0.25, 0.5, 0.75, 1]
 
 export function useConfigStore() {
   const { isDark } = useData()
-  const config = useSessionStorage<Config>('config', {
+  const config = useStorage<Config>('config', {
+    theme: 'zinc',
     radius: 0.5,
     style: styles[0].name,
   })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c451da07..606864f6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -123,6 +123,12 @@ importers:
         specifier: ^3.23.3
         version: 3.23.3
     devDependencies:
+      '@babel/traverse':
+        specifier: ^7.24.1
+        version: 7.24.1
+      '@iconify-json/gravity-ui':
+        specifier: ^1.1.2
+        version: 1.1.2
       '@iconify-json/lucide':
         specifier: ^1.1.180
         version: 1.1.184
@@ -132,6 +138,9 @@ importers:
       '@iconify-json/radix-icons':
         specifier: ^1.1.14
         version: 1.1.14
+      '@iconify-json/ri':
+        specifier: ^1.1.18
+        version: 1.1.20
       '@iconify-json/simple-icons':
         specifier: ^1.1.94
         version: 1.1.100
@@ -171,9 +180,15 @@ importers:
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.19(postcss@8.4.38)
+      fast-glob:
+        specifier: ^3.3.2
+        version: 3.3.2
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
+      markdown-it:
+        specifier: ^14.1.0
+        version: 14.1.0
       pathe:
         specifier: ^1.1.2
         version: 1.1.2
@@ -201,6 +216,9 @@ importers:
       vitepress:
         specifier: ^1.1.3
         version: 1.1.3(@algolia/client-search@4.23.3)(@types/node@20.12.7)(axios@0.18.1)(postcss@8.4.38)(search-insights@2.13.0)(terser@5.30.4)(typescript@5.4.5)
+      vue-component-meta:
+        specifier: ^2.0.13
+        version: 2.0.14(typescript@5.4.5)
       vue-tsc:
         specifier: ^2.0.14
         version: 2.0.14(typescript@5.4.5)
@@ -1262,6 +1280,9 @@ packages:
     resolution: {integrity: sha512-X38nUbachlb01YMlvPFojKoiXq+LzZvuSce70KPMPdeM1Rj03k4dR7lDslhbqXn3Ang4EU3+EAmwEAsbrjHW3g==}
     engines: {node: '>=18.18'}
 
+  '@iconify-json/gravity-ui@1.1.2':
+    resolution: {integrity: sha512-1xDGuR/pxZJqQNxx7lA3a1gRxus9UwLgdBJpLHP/FNdLER1iwIPA5X5jNMYUp7Z34y6OkwHrb2ULz/bybTewuA==}
+
   '@iconify-json/lucide@1.1.184':
     resolution: {integrity: sha512-vptROqbT+ilOBZXncJzYFx5hLtbpA/jxiWGRyNdFBxJokXfJ8k09FWDIPweGvbW0V8MUQYlh0FDfV1qpyZGW3w==}
 
@@ -1271,6 +1292,9 @@ packages:
   '@iconify-json/radix-icons@1.1.14':
     resolution: {integrity: sha512-AYBOyhnJ2hXlg3aIn8Ekphrr7zHRyz1l8x6bidM3PDUuTL+aRt8r6cpCvN3GeuTHy2JOhmihbVJRF0bt2FF7Ag==}
 
+  '@iconify-json/ri@1.1.20':
+    resolution: {integrity: sha512-yScIGjLFBCJKWKskQTWRjNI2Awoq+VRDkRxEsCQvSfdz41n+xkRtFG2K6J1OVI90ClRHfjFC8VJ2+WzxxyFjTQ==}
+
   '@iconify-json/simple-icons@1.1.100':
     resolution: {integrity: sha512-PoRbJcGMv2IQ0LMotLBFIiDhSdR3LjNFo/c4T2vCJjOl24I/DMtWt4ccUWEcAA5GJCt4/LTi8zlfztAeh1Jedw==}
 
@@ -4840,6 +4864,9 @@ packages:
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
+  linkify-it@5.0.0:
+    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
+
   lint-staged@15.2.2:
     resolution: {integrity: sha512-TiTt93OPh1OZOsb5B7k96A/ATl2AjIZo+vnzFZ6oHK5FuTk63ByDtxGQpHm+kFETjEWqgkF95M8FRXKR/LEBcw==}
     engines: {node: '>=18.12.0'}
@@ -4995,6 +5022,10 @@ packages:
   mark.js@8.11.1:
     resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==}
 
+  markdown-it@14.1.0:
+    resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
+    hasBin: true
+
   mdast-util-from-markdown@0.8.5:
     resolution: {integrity: sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==}
 
@@ -5007,6 +5038,9 @@ packages:
   mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
 
+  mdurl@2.0.0:
+    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
+
   meow@12.1.1:
     resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
     engines: {node: '>=16.10'}
@@ -5911,6 +5945,10 @@ packages:
   pumpify@1.5.1:
     resolution: {integrity: sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==}
 
+  punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -6755,6 +6793,9 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  uc.micro@2.1.0:
+    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
+
   ufo@1.5.3:
     resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==}
 
@@ -7218,6 +7259,17 @@ packages:
   vue-bundle-renderer@2.0.0:
     resolution: {integrity: sha512-oYATTQyh8XVkUWe2kaKxhxKVuuzK2Qcehe+yr3bGiaQAhK3ry2kYE4FWOfL+KO3hVFwCdLmzDQTzYhTi9C+R2A==}
 
+  vue-component-meta@2.0.14:
+    resolution: {integrity: sha512-6ycN+5bkLLNsjno5pX+OFmFxrAXllJo95lk7jPD7g7cbtWsZY5F+pg+/YMXldHA36STrBHTfCu5QoklDV9Gynw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  vue-component-type-helpers@2.0.14:
+    resolution: {integrity: sha512-DInfgOyXlMyliyqAAD9frK28tTfch0+tMi4qoWJcZlRxUf+NFAtraJBnAsKLep+FOyLMiajkhfyEb3xLK08i7w==}
+
   vue-demi@0.14.7:
     resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
     engines: {node: '>=12'}
@@ -8332,6 +8384,10 @@ snapshots:
 
   '@humanwhocodes/retry@0.2.3': {}
 
+  '@iconify-json/gravity-ui@1.1.2':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/lucide@1.1.184':
     dependencies:
       '@iconify/types': 2.0.0
@@ -8344,6 +8400,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/ri@1.1.20':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/simple-icons@1.1.100':
     dependencies:
       '@iconify/types': 2.0.0
@@ -12706,6 +12766,10 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
+  linkify-it@5.0.0:
+    dependencies:
+      uc.micro: 2.1.0
+
   lint-staged@15.2.2:
     dependencies:
       chalk: 5.3.0
@@ -12931,6 +12995,15 @@ snapshots:
 
   mark.js@8.11.1: {}
 
+  markdown-it@14.1.0:
+    dependencies:
+      argparse: 2.0.1
+      entities: 4.5.0
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.1.0
+
   mdast-util-from-markdown@0.8.5:
     dependencies:
       '@types/mdast': 3.0.15
@@ -12947,6 +13020,8 @@ snapshots:
 
   mdn-data@2.0.30: {}
 
+  mdurl@2.0.0: {}
+
   meow@12.1.1: {}
 
   merge-stream@2.0.0: {}
@@ -14062,6 +14137,8 @@ snapshots:
       inherits: 2.0.4
       pump: 2.0.1
 
+  punycode.js@2.3.1: {}
+
   punycode@2.3.1: {}
 
   queue-microtask@1.2.3: {}
@@ -14947,6 +15024,8 @@ snapshots:
 
   typescript@5.4.5: {}
 
+  uc.micro@2.1.0: {}
+
   ufo@1.5.3: {}
 
   ultrahtml@1.5.3: {}
@@ -15577,6 +15656,17 @@ snapshots:
     dependencies:
       ufo: 1.5.3
 
+  vue-component-meta@2.0.14(typescript@5.4.5):
+    dependencies:
+      '@volar/typescript': 2.2.0-alpha.10
+      '@vue/language-core': 2.0.14(typescript@5.4.5)
+      path-browserify: 1.0.1
+      vue-component-type-helpers: 2.0.14
+    optionalDependencies:
+      typescript: 5.4.5
+
+  vue-component-type-helpers@2.0.14: {}
+
   vue-demi@0.14.7(vue@3.4.24(typescript@5.4.5)):
     dependencies:
       vue: 3.4.24(typescript@5.4.5)