diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 61fbc8ca..06a346cd 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -16,6 +16,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/AlertDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/AlertDemo.vue'],
     },
+    AlertDestructiveDemo: {
+      name: 'AlertDestructiveDemo',
+      type: 'components:example',
+      registryDependencies: ['alert'],
+      component: () => import('../src/lib/registry/default/example/AlertDestructiveDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/AlertDestructiveDemo.vue'],
+    },
     AlertDialogDemo: {
       name: 'AlertDialogDemo',
       type: 'components:example',
@@ -44,6 +51,27 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/BadgeDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/BadgeDemo.vue'],
     },
+    BadgeSecondaryDemo: {
+      name: 'BadgeSecondaryDemo',
+      type: 'components:example',
+      registryDependencies: ['badge'],
+      component: () => import('../src/lib/registry/default/example/BadgeSecondaryDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/BadgeSecondaryDemo.vue'],
+    },
+    BadgeOutlineDemo: {
+      name: 'BadgeOutlineDemo',
+      type: 'components:example',
+      registryDependencies: ['badge'],
+      component: () => import('../src/lib/registry/default/example/BadgeOutlineDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/BadgeOutlineDemo.vue'],
+    },
+    BadgeDestructiveDemo: {
+      name: 'BadgeDestructiveDemo',
+      type: 'components:example',
+      registryDependencies: ['badge'],
+      component: () => import('../src/lib/registry/default/example/BadgeDestructiveDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/BadgeDestructiveDemo.vue'],
+    },
     ButtonDemo: {
       name: 'ButtonDemo',
       type: 'components:example',
@@ -51,6 +79,69 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/ButtonDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/ButtonDemo.vue'],
     },
+    ButtonSecondaryDemo: {
+      name: 'ButtonSecondaryDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonSecondaryDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonSecondaryDemo.vue'],
+    },
+    ButtonDestructiveDemo: {
+      name: 'ButtonDestructiveDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonDestructiveDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonDestructiveDemo.vue'],
+    },
+    ButtonOutlineDemo: {
+      name: 'ButtonOutlineDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonOutlineDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonOutlineDemo.vue'],
+    },
+    ButtonGhostDemo: {
+      name: 'ButtonGhostDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonGhostDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonGhostDemo.vue'],
+    },
+    ButtonLinkDemo: {
+      name: 'ButtonLinkDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonLinkDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonLinkDemo.vue'],
+    },
+    ButtonIconDemo: {
+      name: 'ButtonIconDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonIconDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonIconDemo.vue'],
+    },
+    ButtonWithIconDemo: {
+      name: 'ButtonWithIconDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonWithIconDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonWithIconDemo.vue'],
+    },
+    ButtonLoadingDemo: {
+      name: 'ButtonLoadingDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonLoadingDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonLoadingDemo.vue'],
+    },
+    ButtonAsChildDemo: {
+      name: 'ButtonAsChildDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonAsChildDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonAsChildDemo.vue'],
+    },
     CalendarDemo: {
       name: 'CalendarDemo',
       type: 'components:example',
@@ -72,6 +163,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/CardDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/CardDemo.vue'],
     },
+    CardFormDemo: {
+      name: 'CardFormDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'card', 'switch', 'utils'],
+      component: () => import('../src/lib/registry/default/example/CardFormDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CardFormDemo.vue'],
+    },
     CardStats: {
       name: 'CardStats',
       type: 'components:example',
@@ -163,6 +261,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/CommandDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/CommandDemo.vue'],
     },
+    CommandDialogDemo: {
+      name: 'CommandDialogDemo',
+      type: 'components:example',
+      registryDependencies: ['command'],
+      component: () => import('../src/lib/registry/default/example/CommandDialogDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CommandDialogDemo.vue'],
+    },
     ContextMenuDemo: {
       name: 'ContextMenuDemo',
       type: 'components:example',
@@ -219,6 +324,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/DialogDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/DialogDemo.vue'],
     },
+    DialogCustomCloseButton: {
+      name: 'DialogCustomCloseButton',
+      type: 'components:example',
+      registryDependencies: ['button', 'dialog', 'input', 'label'],
+      component: () => import('../src/lib/registry/default/example/DialogCustomCloseButton.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/DialogCustomCloseButton.vue'],
+    },
     DropdownMenuDemo: {
       name: 'DropdownMenuDemo',
       type: 'components:example',
@@ -352,6 +464,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/ScrollAreaDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/ScrollAreaDemo.vue'],
     },
+    ScrollAreaHorizontalDemo: {
+      name: 'ScrollAreaHorizontalDemo',
+      type: 'components:example',
+      registryDependencies: ['scroll-area', 'separator'],
+      component: () => import('../src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue'],
+    },
     SelectDemo: {
       name: 'SelectDemo',
       type: 'components:example',
@@ -380,6 +499,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/SheetDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/SheetDemo.vue'],
     },
+    SheetSideDemo: {
+      name: 'SheetSideDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'input', 'label', 'sheet'],
+      component: () => import('../src/lib/registry/default/example/SheetSideDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/SheetSideDemo.vue'],
+    },
     SkeletonDemo: {
       name: 'SkeletonDemo',
       type: 'components:example',
@@ -506,6 +632,41 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/ToggleDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/ToggleDemo.vue'],
     },
+    ToggleItalicDemo: {
+      name: 'ToggleItalicDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/default/example/ToggleItalicDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleItalicDemo.vue'],
+    },
+    ToggleItalicWithTextDemo: {
+      name: 'ToggleItalicWithTextDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/default/example/ToggleItalicWithTextDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleItalicWithTextDemo.vue'],
+    },
+    ToggleSmallDemo: {
+      name: 'ToggleSmallDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/default/example/ToggleSmallDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleSmallDemo.vue'],
+    },
+    ToggleLargeDemo: {
+      name: 'ToggleLargeDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/default/example/ToggleLargeDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleLargeDemo.vue'],
+    },
+    ToggleDisabledDemo: {
+      name: 'ToggleDisabledDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/default/example/ToggleDisabledDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleDisabledDemo.vue'],
+    },
     TooltipDemo: {
       name: 'TooltipDemo',
       type: 'components:example',
diff --git a/apps/www/src/content/docs/components/alert.md b/apps/www/src/content/docs/components/alert.md
index aeda3888..13d9d609 100644
--- a/apps/www/src/content/docs/components/alert.md
+++ b/apps/www/src/content/docs/components/alert.md
@@ -28,4 +28,17 @@ import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
     </AlertDescription>
   </Alert>
 </template>
-```
\ No newline at end of file
+```
+
+## Examples
+
+### Default
+
+<ComponentPreview name="AlertDemo"  /> 
+
+
+### Destructive
+
+<ComponentPreview name="AlertDestructiveDemo"  /> 
+
+
diff --git a/apps/www/src/content/docs/components/badge.md b/apps/www/src/content/docs/components/badge.md
index adb588cc..08b8b030 100644
--- a/apps/www/src/content/docs/components/badge.md
+++ b/apps/www/src/content/docs/components/badge.md
@@ -78,4 +78,24 @@ import { Badge } from '@/components/ui/badge'
 <template>
   <Badge>Badge</Badge>
 </template>
-```
\ No newline at end of file
+```
+
+
+## Examples
+
+### Default
+
+<ComponentPreview name="BadgeDemo"  /> 
+
+
+### Secondary
+
+<ComponentPreview name="BadgeSecondaryDemo" />
+
+### Outline
+
+<ComponentPreview name="BadgeOutlineDemo" />
+
+### Destructive
+
+<ComponentPreview name="BadgeDestructiveDemo" />
\ No newline at end of file
diff --git a/apps/www/src/content/docs/components/button.md b/apps/www/src/content/docs/components/button.md
index 3644921c..3fb5d55e 100644
--- a/apps/www/src/content/docs/components/button.md
+++ b/apps/www/src/content/docs/components/button.md
@@ -92,4 +92,50 @@ import { Button } from '@/components/ui/button'
 <template>
   <Button>Button</Button>
 </template>
-```
\ No newline at end of file
+```
+
+
+## Examples
+
+### Primary
+
+<ComponentPreview name="ButtonDemo"  /> 
+
+
+### Secondary
+
+<ComponentPreview name="ButtonSecondaryDemo" />
+
+
+### Destructive
+
+<ComponentPreview name="ButtonDestructiveDemo" />
+
+
+### Outline
+
+<ComponentPreview name="ButtonOutlineDemo" />
+
+### Ghost
+
+<ComponentPreview name="ButtonGhostDemo" />
+
+### Link
+
+<ComponentPreview name="ButtonLinkDemo" />
+
+### Icon
+
+<ComponentPreview name="ButtonIconDemo" />
+
+### With Icon
+
+<ComponentPreview name="ButtonWithIconDemo" />
+
+### Loading
+
+<ComponentPreview name="ButtonLoadingDemo" />
+
+### As Child
+
+<ComponentPreview name="ButtonAsChildDemo" />
\ No newline at end of file
diff --git a/apps/www/src/content/docs/components/calendar.md b/apps/www/src/content/docs/components/calendar.md
index 130f63f3..82301a24 100644
--- a/apps/www/src/content/docs/components/calendar.md
+++ b/apps/www/src/content/docs/components/calendar.md
@@ -52,4 +52,7 @@ import { Calendar } from '@/components/ui/calendar'
 <template>
   <Calendar />
 </template>
-```
\ No newline at end of file
+```
+
+See the [VCalendar](https://vcalendar.io/getting-started/installation.html) documentation for more information.
+
diff --git a/apps/www/src/content/docs/components/card.md b/apps/www/src/content/docs/components/card.md
index 87c970da..512d1761 100644
--- a/apps/www/src/content/docs/components/card.md
+++ b/apps/www/src/content/docs/components/card.md
@@ -4,7 +4,7 @@ description: Displays a card with header, content, and footer.
 ---
 
 
-<ComponentPreview name="CardDemo"  /> 
+<ComponentPreview name="CardFormDemo"  /> 
 
 ## Installation
 
@@ -42,4 +42,8 @@ import {
     </CardFooter>
   </Card>
 </template>
-```
\ No newline at end of file
+```
+
+## Examples
+
+<ComponentPreview name="CardDemo"  /> 
\ No newline at end of file
diff --git a/apps/www/src/content/docs/components/command.md b/apps/www/src/content/docs/components/command.md
index 9a8d9780..77ac9045 100644
--- a/apps/www/src/content/docs/components/command.md
+++ b/apps/www/src/content/docs/components/command.md
@@ -39,16 +39,105 @@ import {
     <CommandList>
       <CommandEmpty>No results found.</CommandEmpty>
       <CommandGroup heading="Suggestions">
-        <CommandItem>Calendar</CommandItem>
-        <CommandItem>Search Emoji</CommandItem>
-        <CommandItem>Calculator</CommandItem>
+        <CommandItem value="calendar">
+          Calendar
+        </CommandItem>
+        <CommandItem value="search-emoji">
+          Search Emoji
+        </CommandItem>
+        <CommandItem value="calculator">
+          Calculator
+        </CommandItem>
       </CommandGroup>
       <CommandSeparator />
       <CommandGroup heading="Settings">
-        <CommandItem>Profile</CommandItem>
-        <CommandItem>Billing</CommandItem>
-        <CommandItem>Settings</CommandItem>
+        <CommandItem value="profile">
+          Profile
+        </CommandItem>
+        <CommandItem value="billing">
+          Billing
+        </CommandItem>
+        <CommandItem value="settings">
+          Settings
+        </CommandItem>
       </CommandGroup>
     </CommandList>
   </Command>
-</template>```
\ No newline at end of file
+</template>
+```
+
+## Examples 
+
+### Dialog 
+
+<ComponentPreview name="CommandDialogDemo" />
+
+To show the command menu in a dialog, use the `<CommandDialog />` component.
+
+```vue
+<script setup lang="ts">
+import { useMagicKeys } from '@vueuse/core'
+
+import { ref, watch } from 'vue'
+
+const open = ref(false)
+
+const keys = useMagicKeys()
+const CmdJ = keys['Cmd+J']
+
+function handleOpenChange() {
+  open.value = !open.value
+}
+
+watch(CmdJ, (v) => {
+  if (v)
+    handleOpenChange()
+})
+</script>
+
+<template>
+  <div>
+    <p class="text-sm text-muted-foreground">
+      Press
+      <kbd
+        class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
+      >
+        <span class="text-xs">⌘</span>J
+      </kbd>
+    </p>
+    <CommandDialog :open="open" :on-open-change="handleOpenChange">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem value="calendar">
+            Calendar
+          </CommandItem>
+          <CommandItem value="search-emoji">
+            Search Emoji
+          </CommandItem>
+          <CommandItem value="calculator">
+            Calculator
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem value="profile">
+            Profile
+          </CommandItem>
+          <CommandItem value="billing">
+            Billing
+          </CommandItem>
+          <CommandItem value="settings">
+            Settings
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  </div>
+</template>
+```
+
+### Combobox
+
+You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.
\ No newline at end of file
diff --git a/apps/www/src/content/docs/components/dialog.md b/apps/www/src/content/docs/components/dialog.md
index 4346daf1..05abcbef 100644
--- a/apps/www/src/content/docs/components/dialog.md
+++ b/apps/www/src/content/docs/components/dialog.md
@@ -47,4 +47,44 @@ import {
     </DialogContent>
   </Dialog>
 </template>
+```
+
+## Examples 
+
+### Custom close button
+
+<ComponentPreview name="DialogCustomCloseButton" /> 
+
+## Notes
+
+To activate the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or `Dropdown Menu` component in the `Dialog` component. For more information, refer to the linked issue [here](https://github.com/radix-ui/primitives/issues/1836).
+
+
+```js:line-numbers showLineNumber{14-25}
+<Dialog>
+  <ContextMenu>
+    <ContextMenuTrigger>Right click</ContextMenuTrigger>
+    <ContextMenuContent>
+      <ContextMenuItem>Open</ContextMenuItem>
+      <ContextMenuItem>Download</ContextMenuItem>
+      <DialogTrigger asChild>
+        <ContextMenuItem>
+          <span>Delete</span>
+        </ContextMenuItem>
+      </DialogTrigger>
+    </ContextMenuContent>
+  </ContextMenu>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you sure absolutely sure?</DialogTitle>
+      <DialogDescription>
+        This action cannot be undone. Are you sure you want to permanently
+        delete this file from our servers?
+      </DialogDescription>
+    </DialogHeader>
+    <DialogFooter>
+      <Button type="submit">Confirm</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
 ```
\ No newline at end of file
diff --git a/apps/www/src/content/docs/components/dropdown-menu.md b/apps/www/src/content/docs/components/dropdown-menu.md
index 503461e4..86e0d245 100644
--- a/apps/www/src/content/docs/components/dropdown-menu.md
+++ b/apps/www/src/content/docs/components/dropdown-menu.md
@@ -40,4 +40,9 @@ import {
     </DropdownMenuContent>
   </DropdownMenu>
 </template>
-```
\ No newline at end of file
+```
+
+## Examples
+
+### Checkboxes
+
diff --git a/apps/www/src/content/docs/components/navigation-menu.md b/apps/www/src/content/docs/components/navigation-menu.md
index 03043b05..16669984 100644
--- a/apps/www/src/content/docs/components/navigation-menu.md
+++ b/apps/www/src/content/docs/components/navigation-menu.md
@@ -41,4 +41,27 @@ import {
     </NavigationMenuList>
   </NavigationMenu>
 </template>
-```
\ No newline at end of file
+```
+
+## Examples 
+
+### Link Component
+
+When using the Nuxt.js <NuxtLink /> component, you can use `navigationMenuTriggerStyle()` to apply the correct styles to the trigger.
+
+```ts
+import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu'
+```
+
+```vue
+<template>
+  <NavigationMenuItem>
+    <NuxtLink to="/docs">
+      <NavigationMenuLink :class="navigationMenuTriggerStyle()">
+        Documentation
+      </NavigationMenuLink>
+    </NuxtLink>
+  </NavigationMenuItem>
+</template>
+```
+
diff --git a/apps/www/src/content/docs/components/scroll-area.md b/apps/www/src/content/docs/components/scroll-area.md
index 1f7a4023..edac7a4c 100644
--- a/apps/www/src/content/docs/components/scroll-area.md
+++ b/apps/www/src/content/docs/components/scroll-area.md
@@ -30,4 +30,11 @@ import { ScrollArea } from '@/components/ui/scroll-area'
     started laughing, they couldn't stop.
   </ScrollArea>
 </template>
-```
\ No newline at end of file
+```
+
+## Examples
+
+### Horizontal Scrolling
+
+<ComponentPreview name="ScrollAreaHorizontalDemo" />
+
diff --git a/apps/www/src/content/docs/components/sheet.md b/apps/www/src/content/docs/components/sheet.md
index caa3ee91..22158144 100644
--- a/apps/www/src/content/docs/components/sheet.md
+++ b/apps/www/src/content/docs/components/sheet.md
@@ -42,4 +42,34 @@ import {
     </SheetContent>
   </Sheet>
 </template>
+```
+
+## Examples
+
+### Side
+
+Use the `side` property to `<SheetContent />` to indicate the edge of the screen where the component will appear. The values can be `top`, `right`, `bottom` or `left`.
+
+<ComponentPreview name="SheetSideDemo" /> 
+
+
+### Size
+
+You can adjust the size of the sheet using CSS classes:
+
+```vue:showLineNumbers{4}
+<template>
+  <Sheet>
+    <SheetTrigger>Open</SheetTrigger>
+    <SheetContent class="w-[400px] sm:w-[540px]">
+      <SheetHeader>
+        <SheetTitle>Are you sure absolutely sure?</SheetTitle>
+        <SheetDescription>
+          This action cannot be undone. This will permanently delete your account
+          and remove your data from our servers.
+        </SheetDescription>
+      </SheetHeader>
+    </SheetContent>
+  </Sheet>
+</template>
 ```
\ No newline at end of file
diff --git a/apps/www/src/content/docs/components/table.md b/apps/www/src/content/docs/components/table.md
index e56d20c6..e0701b58 100644
--- a/apps/www/src/content/docs/components/table.md
+++ b/apps/www/src/content/docs/components/table.md
@@ -56,4 +56,12 @@ import {
     </TableBody>
   </Table>
 </template>
-```
\ No newline at end of file
+```
+
+## Data Table
+
+You can use the `<Table />` component to build more complex data tables. Combine it with [@tanstack/vue-table](https://tanstack.com/table/v8) to create tables with sorting, filtering and pagination.
+
+See the [Data Table](/docs/components/data-table) documentation for more information.
+
+You can also see an example of a data table in the [Tasks](/examples/tasks) demo.
\ No newline at end of file
diff --git a/apps/www/src/content/docs/components/toggle.md b/apps/www/src/content/docs/components/toggle.md
index 45f70104..c720bb3e 100644
--- a/apps/www/src/content/docs/components/toggle.md
+++ b/apps/www/src/content/docs/components/toggle.md
@@ -48,4 +48,38 @@ import { Toggle } from '@/components/ui/toggle'
 <template>
   <Toggle>Toggle</Toggle>
 </template>
-```
\ No newline at end of file
+```
+
+## Examples
+
+### Default 
+
+<ComponentPreview name="ToggleDemo" /> 
+
+
+### Outline
+
+<ComponentPreview name="ToggleItalicDemo" /> 
+
+
+### With Text
+
+<ComponentPreview name="ToggleItalicWithTextDemo" />
+
+
+### Small
+
+<ComponentPreview name="ToggleSmallDemo" />
+
+
+### Large
+
+<ComponentPreview name="ToggleLargeDemo" />
+
+
+### Disabled
+
+<ComponentPreview name="ToggleDisabledDemo" />
+
+
+
diff --git a/apps/www/src/lib/registry/default/example/AlertDestructiveDemo.vue b/apps/www/src/lib/registry/default/example/AlertDestructiveDemo.vue
new file mode 100644
index 00000000..06a4ae19
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/AlertDestructiveDemo.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { AlertCircle } from 'lucide-vue-next'
+import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/new-york/ui/alert'
+</script>
+
+<template>
+  <Alert variant="destructive">
+    <AlertCircle class="w-4 h-4" />
+    <AlertTitle>Error</AlertTitle>
+    <AlertDescription>
+      Your session has expired. Please log in again.
+    </AlertDescription>
+  </Alert>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/BadgeDestructiveDemo.vue b/apps/www/src/lib/registry/default/example/BadgeDestructiveDemo.vue
new file mode 100644
index 00000000..fa34886b
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/BadgeDestructiveDemo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Badge } from '@/lib/registry/default/ui/badge'
+</script>
+
+<template>
+  <Badge variant="destructive">
+    Destructive
+  </Badge>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/BadgeOutlineDemo.vue b/apps/www/src/lib/registry/default/example/BadgeOutlineDemo.vue
new file mode 100644
index 00000000..134e82c8
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/BadgeOutlineDemo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Badge } from '@/lib/registry/default/ui/badge'
+</script>
+
+<template>
+  <Badge variant="outline">
+    Outline
+  </Badge>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/BadgeSecondaryDemo.vue b/apps/www/src/lib/registry/default/example/BadgeSecondaryDemo.vue
new file mode 100644
index 00000000..9c6be8e9
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/BadgeSecondaryDemo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Badge } from '@/lib/registry/default/ui/badge'
+</script>
+
+<template>
+  <Badge variant="secondary">
+    Secondary
+  </Badge>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/ButtonAsChildDemo.vue b/apps/www/src/lib/registry/default/example/ButtonAsChildDemo.vue
new file mode 100644
index 00000000..0dfe5516
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/ButtonAsChildDemo.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button as-child>
+    <NuxtLink to="/login">
+      Login
+    </NuxtLink>
+  </Button>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/ButtonDestructiveDemo.vue b/apps/www/src/lib/registry/default/example/ButtonDestructiveDemo.vue
new file mode 100644
index 00000000..e926c87a
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/ButtonDestructiveDemo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button variant="destructive">
+    Destructive
+  </Button>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/ButtonGhostDemo.vue b/apps/www/src/lib/registry/default/example/ButtonGhostDemo.vue
new file mode 100644
index 00000000..a1d45498
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/ButtonGhostDemo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button variant="ghost">
+    Ghost
+  </Button>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/ButtonIconDemo.vue b/apps/www/src/lib/registry/default/example/ButtonIconDemo.vue
new file mode 100644
index 00000000..2b4ce9a3
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/ButtonIconDemo.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { ChevronRight } from 'lucide-vue-next'
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button variant="outline" size="icon">
+    <ChevronRight class="w-4 h-4" />
+  </Button>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/ButtonLinkDemo.vue b/apps/www/src/lib/registry/default/example/ButtonLinkDemo.vue
new file mode 100644
index 00000000..a805bf50
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/ButtonLinkDemo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button variant="link">
+    Link
+  </Button>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/ButtonLoadingDemo.vue b/apps/www/src/lib/registry/default/example/ButtonLoadingDemo.vue
new file mode 100644
index 00000000..221e1403
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/ButtonLoadingDemo.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Loader2 } from 'lucide-vue-next'
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button disabled>
+    <Loader2 class="w-4 h-4 mr-2 animate-spin" />
+    Please wait
+  </Button>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/ButtonOutlineDemo.vue b/apps/www/src/lib/registry/default/example/ButtonOutlineDemo.vue
new file mode 100644
index 00000000..bf4e6752
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/ButtonOutlineDemo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button variant="outline">
+    Outline
+  </Button>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/ButtonSecondaryDemo.vue b/apps/www/src/lib/registry/default/example/ButtonSecondaryDemo.vue
new file mode 100644
index 00000000..7510dace
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/ButtonSecondaryDemo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button variant="secondary">
+    Secondary
+  </Button>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/ButtonWithIconDemo.vue b/apps/www/src/lib/registry/default/example/ButtonWithIconDemo.vue
new file mode 100644
index 00000000..801e4ebe
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/ButtonWithIconDemo.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { Mail } from 'lucide-vue-next'
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button>
+    <Mail class="w-4 h-4 mr-2" /> Login with Email
+  </Button>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/CardFormDemo.vue b/apps/www/src/lib/registry/default/example/CardFormDemo.vue
new file mode 100644
index 00000000..a176e8a3
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/CardFormDemo.vue
@@ -0,0 +1,60 @@
+<script setup lang='ts'>
+import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/default/ui/select'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Card class="w-[350px]">
+    <CardHeader>
+      <CardTitle>Create project</CardTitle>
+      <CardDescription>Deploy your new project in one-click.</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <form>
+        <div class="grid items-center w-full gap-4">
+          <div class="flex flex-col space-y-1.5">
+            <Label html-for="name">Name</Label>
+            <Input id="name" placeholder="Name of your project" />
+          </div>
+          <div class="flex flex-col space-y-1.5">
+            <Label html-for="framework">Framework</Label>
+            <Select>
+              <SelectTrigger id="framework">
+                <SelectValue placeholder="Select" />
+              </SelectTrigger>
+              <SelectContent position="popper">
+                <SelectItem value="nuxt">
+                  Nuxt.js
+                </SelectItem>
+                <SelectItem value="next">
+                  Next.js
+                </SelectItem>
+                <SelectItem value="sveltekit">
+                  SvelteKit
+                </SelectItem>
+                <SelectItem value="astro">
+                  Astro
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </form>
+    </CardContent>
+    <CardFooter class="flex justify-between px-6 pb-6">
+      <Button variant="outline">
+        Cancel
+      </Button>
+      <Button>Deploy</Button>
+    </CardFooter>
+  </Card>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/CommandDialogDemo.vue b/apps/www/src/lib/registry/default/example/CommandDialogDemo.vue
new file mode 100644
index 00000000..9f18c79a
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/CommandDialogDemo.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { useMagicKeys } from '@vueuse/core'
+
+import { ref, watch } from 'vue'
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/lib/registry/default/ui/command'
+
+const open = ref(false)
+
+const keys = useMagicKeys()
+const CmdJ = keys['Cmd+J']
+
+function handleOpenChange() {
+  open.value = !open.value
+}
+
+watch(CmdJ, (v) => {
+  if (v)
+    handleOpenChange()
+})
+</script>
+
+<template>
+  <div>
+    <p class="text-sm text-muted-foreground">
+      Press
+      <kbd
+        class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
+      >
+        <span class="text-xs">⌘</span>J
+      </kbd>
+    </p>
+    <CommandDialog :open="open" :on-open-change="handleOpenChange">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem value="calendar">
+            Calendar
+          </CommandItem>
+          <CommandItem value="search-emoji">
+            Search Emoji
+          </CommandItem>
+          <CommandItem value="calculator">
+            Calculator
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem value="profile">
+            Profile
+          </CommandItem>
+          <CommandItem value="billing">
+            Billing
+          </CommandItem>
+          <CommandItem value="settings">
+            Settings
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/DialogCustomCloseButton.vue b/apps/www/src/lib/registry/default/example/DialogCustomCloseButton.vue
new file mode 100644
index 00000000..7ef4eef2
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/DialogCustomCloseButton.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { Copy } from 'lucide-vue-next'
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/lib/registry/default/ui/dialog'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+</script>
+
+<template>
+  <Dialog>
+    <DialogTrigger as-child>
+      <Button variant="outline">
+        Share
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="sm:max-w-md">
+      <DialogHeader>
+        <DialogTitle>Share link</DialogTitle>
+        <DialogDescription>
+          Anyone who has this link will be able to view this.
+        </DialogDescription>
+      </DialogHeader>
+      <div class="flex items-center space-x-2">
+        <div class="grid flex-1 gap-2">
+          <Label html-for="link" class="sr-only">
+            Link
+          </Label>
+          <Input
+            id="link"
+            default-value="https://shadcn-vue.com/docs/installation"
+            read-only
+          />
+        </div>
+        <Button type="submit" size="sm" class="px-3">
+          <span class="sr-only">Copy</span>
+          <Copy class="w-4 h-4" />
+        </Button>
+      </div>
+      <DialogFooter class="sm:justify-start">
+        <DialogClose as-child>
+          <Button type="button" variant="secondary">
+            Close
+          </Button>
+        </DialogClose>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/RadioGroupForm.vue b/apps/www/src/lib/registry/default/example/RadioGroupForm.vue
index adc5f273..fca75855 100644
--- a/apps/www/src/lib/registry/default/example/RadioGroupForm.vue
+++ b/apps/www/src/lib/registry/default/example/RadioGroupForm.vue
@@ -34,7 +34,7 @@ const onSubmit = handleSubmit((values) => {
 </script>
 
 <template>
-  <form className="w-2/3 space-y-6" @submit="onSubmit">
+  <form class="w-2/3 space-y-6" @submit="onSubmit">
     <FormField v-slot="{ componentField }" name="type">
       <FormItem class="space-y-3">
         <FormLabel>Notify me about...</FormLabel>
@@ -44,7 +44,7 @@ const onSubmit = handleSubmit((values) => {
             class="flex flex-col space-y-1"
             v-bind="componentField"
           >
-            <FormItem class="flex items-center gap-x-3 space-y-0">
+            <FormItem class="flex items-center space-y-0 gap-x-3">
               <FormControl>
                 <RadioGroupItem value="all" />
               </FormControl>
@@ -52,7 +52,7 @@ const onSubmit = handleSubmit((values) => {
                 All new messages
               </FormLabel>
             </FormItem>
-            <FormItem class="flex items-center gap-x-3 space-y-0">
+            <FormItem class="flex items-center space-y-0 gap-x-3">
               <FormControl>
                 <RadioGroupItem value="mentions" />
               </FormControl>
@@ -60,7 +60,7 @@ const onSubmit = handleSubmit((values) => {
                 Direct messages and mentions
               </FormLabel>
             </FormItem>
-            <FormItem class="flex items-center gap-x-3 space-y-0">
+            <FormItem class="flex items-center space-y-0 gap-x-3">
               <FormControl>
                 <RadioGroupItem value="none" />
               </FormControl>
diff --git a/apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue b/apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue
new file mode 100644
index 00000000..ee875e5c
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ScrollArea, ScrollBar } from '@/lib/registry/default/ui/scroll-area'
+
+interface Artwork {
+  artist: string
+  art: string
+}
+
+const works: Artwork[] = [
+  {
+    artist: 'Ornella Binni',
+    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',
+  },
+  {
+    artist: 'Tom Byrom',
+    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',
+  },
+  {
+    artist: 'Vladimir Malyavko',
+    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',
+  },
+]
+</script>
+
+<template>
+  <ScrollArea class="border rounded-md w-96 whitespace-nowrap">
+    <div class="flex p-4 space-x-4 w-max">
+      <div v-for="artwork in works" :key="artwork.id">
+        <figure class="shrink-0">
+          <div class="overflow-hidden rounded-md">
+            <img
+              :src="artwork.art"
+              :alt="`Photo by ${artwork.name}`"
+              class="aspect-[3/4] w-36 h-56 object-cover"
+            >
+          </div>
+          <figcaption class="pt-2 text-xs text-muted-foreground">
+            Photo by
+            <span class="font-semibold text-foreground">
+              {{ artwork.artist }}
+            </span>
+          </figcaption>
+        </figure>
+      </div>
+    </div>
+    <ScrollBar orientation="horizontal" />
+  </ScrollArea>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/SelectForm.vue b/apps/www/src/lib/registry/default/example/SelectForm.vue
index a46653ab..5ec2c98e 100644
--- a/apps/www/src/lib/registry/default/example/SelectForm.vue
+++ b/apps/www/src/lib/registry/default/example/SelectForm.vue
@@ -44,7 +44,7 @@ const onSubmit = handleSubmit((values) => {
 </script>
 
 <template>
-  <form className="w-2/3 space-y-6" @submit="onSubmit">
+  <form class="w-2/3 space-y-6" @submit="onSubmit">
     <FormField v-slot="{ componentField }" name="email">
       <FormItem>
         <FormLabel>Email</FormLabel>
diff --git a/apps/www/src/lib/registry/default/example/SheetSideDemo.vue b/apps/www/src/lib/registry/default/example/SheetSideDemo.vue
new file mode 100644
index 00000000..076a96b4
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/SheetSideDemo.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Button } from '@/lib/registry/default/ui/button'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/lib/registry/default/ui/sheet'
+
+const SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const
+
+const username = ref('')
+</script>
+
+<template>
+  <div class="grid grid-cols-2 gap-2">
+    <Sheet v-for="side in SHEET_SIDES" :key="side">
+      <SheetTrigger v-slot="{ isOpen }" @click="isOpen = !isOpen">
+        <Button variant="outline">
+          {{ side }}
+        </Button>
+      </SheetTrigger>
+      <SheetContent :side="side">
+        <SheetHeader>
+          <SheetTitle>Edit profile</SheetTitle>
+          <SheetDescription>
+            Make changes to your profile here. Click save when you're done.
+          </SheetDescription>
+        </SheetHeader>
+        <div class="grid gap-4 py-4">
+          <div class="grid items-center grid-cols-4 gap-4">
+            <Label for="name" class="text-right">Name</Label>
+            <Input id="name" v-model="name" class="col-span-3" />
+          </div>
+          <div class="grid items-center grid-cols-4 gap-4">
+            <Label for="username" class="text-right">Username</Label>
+            <Input id="username" v-model="username" class="col-span-3" />
+          </div>
+        </div>
+        <SheetFooter>
+          <SheetClose v-slot="{ close }">
+            <Button @click="close">
+              Save changes
+            </Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/TextareaWithText.vue b/apps/www/src/lib/registry/default/example/TextareaWithText.vue
index 9f1e65cd..2996519e 100644
--- a/apps/www/src/lib/registry/default/example/TextareaWithText.vue
+++ b/apps/www/src/lib/registry/default/example/TextareaWithText.vue
@@ -7,7 +7,7 @@ import { Label } from '@/lib/registry/default/ui/label'
   <div class="grid w-full gap-1.5">
     <Label for="message-2">Your message</Label>
     <Textarea id="message-2" placeholder="Type your message here." />
-    <p className="text-sm text-muted-foreground">
+    <p class="text-sm text-muted-foreground">
       Your message will be copied to the support team.
     </p>
   </div>
diff --git a/apps/www/src/lib/registry/default/example/ToggleDisabledDemo.vue b/apps/www/src/lib/registry/default/example/ToggleDisabledDemo.vue
new file mode 100644
index 00000000..32930170
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/ToggleDisabledDemo.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Underline } from 'lucide-vue-next'
+
+import { Toggle } from '@/lib/registry/default/ui/toggle'
+</script>
+
+<template>
+  <Toggle aria-label="Toggle italic" disabled>
+    <Underline class="w-4 h-4" />
+  </Toggle>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/ToggleItalicDemo.vue b/apps/www/src/lib/registry/default/example/ToggleItalicDemo.vue
new file mode 100644
index 00000000..de682c2a
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/ToggleItalicDemo.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Italic } from 'lucide-vue-next'
+
+import { Toggle } from '@/lib/registry/default/ui/toggle'
+</script>
+
+<template>
+  <Toggle variant="outline" aria-label="Toggle italic">
+    <Italic class="w-4 h-4" />
+  </Toggle>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/ToggleItalicWithTextDemo.vue b/apps/www/src/lib/registry/default/example/ToggleItalicWithTextDemo.vue
new file mode 100644
index 00000000..c888989c
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/ToggleItalicWithTextDemo.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { Italic } from 'lucide-vue-next'
+
+import { Toggle } from '@/lib/registry/default/ui/toggle'
+</script>
+
+<template>
+  <Toggle aria-label="Toggle italic">
+    <Italic class="w-4 h-4 mr-2" />
+    Italic
+  </Toggle>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/ToggleLargeDemo.vue b/apps/www/src/lib/registry/default/example/ToggleLargeDemo.vue
new file mode 100644
index 00000000..f464b49d
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/ToggleLargeDemo.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Italic } from 'lucide-vue-next'
+
+import { Toggle } from '@/lib/registry/default/ui/toggle'
+</script>
+
+<template>
+  <Toggle size="lg" aria-label="Toggle italic">
+    <Italic class="w-4 h-4" />
+  </Toggle>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/ToggleSmallDemo.vue b/apps/www/src/lib/registry/default/example/ToggleSmallDemo.vue
new file mode 100644
index 00000000..17b66c8e
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/ToggleSmallDemo.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Italic } from 'lucide-vue-next'
+
+import { Toggle } from '@/lib/registry/default/ui/toggle'
+</script>
+
+<template>
+  <Toggle size="sm" aria-label="Toggle italic">
+    <Italic class="w-4 h-4" />
+  </Toggle>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue b/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue
index b20ccb62..3797d38a 100644
--- a/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue
+++ b/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue
@@ -11,16 +11,18 @@ interface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}
 interface Props extends ToggleProps {
   variant?: ToggleVariantProps['variant']
   size?: ToggleVariantProps['size']
+  disabled?: boolean
 }
 const props = withDefaults(defineProps<Props>(), {
   variant: 'default',
   size: 'default',
+  disabled: false,
 })
 const emits = defineEmits<ToggleEmits>()
 
 const toggleProps = computed(() => {
   // eslint-disable-next-line unused-imports/no-unused-vars
-  const { variant, size, ...otherProps } = props
+  const { variant, size, disabled, ...otherProps } = props
   return otherProps
 })
 
@@ -31,6 +33,7 @@ const forwarded = useForwardPropsEmits(toggleProps, emits)
   <Toggle
     v-bind="forwarded"
     :class="cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))"
+    :disabled="props.disabled"
   >
     <slot />
   </Toggle>
diff --git a/apps/www/src/lib/registry/new-york/example/RadioGroupForm.vue b/apps/www/src/lib/registry/new-york/example/RadioGroupForm.vue
index e5066f94..a0e797e1 100644
--- a/apps/www/src/lib/registry/new-york/example/RadioGroupForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/RadioGroupForm.vue
@@ -34,7 +34,7 @@ const onSubmit = handleSubmit((values) => {
 </script>
 
 <template>
-  <form className="w-2/3 space-y-6" @submit="onSubmit">
+  <form class="w-2/3 space-y-6" @submit="onSubmit">
     <FormField v-slot="{ componentField }" name="type">
       <FormItem class="space-y-3">
         <FormLabel>Notify me about...</FormLabel>
@@ -44,7 +44,7 @@ const onSubmit = handleSubmit((values) => {
             class="flex flex-col space-y-1"
             v-bind="componentField"
           >
-            <FormItem class="flex items-center gap-x-3 space-y-0">
+            <FormItem class="flex items-center space-y-0 gap-x-3">
               <FormControl>
                 <RadioGroupItem value="all" />
               </FormControl>
@@ -52,7 +52,7 @@ const onSubmit = handleSubmit((values) => {
                 All new messages
               </FormLabel>
             </FormItem>
-            <FormItem class="flex items-center gap-x-3 space-y-0">
+            <FormItem class="flex items-center space-y-0 gap-x-3">
               <FormControl>
                 <RadioGroupItem value="mentions" />
               </FormControl>
@@ -60,7 +60,7 @@ const onSubmit = handleSubmit((values) => {
                 Direct messages and mentions
               </FormLabel>
             </FormItem>
-            <FormItem class="flex items-center gap-x-3 space-y-0">
+            <FormItem class="flex items-center space-y-0 gap-x-3">
               <FormControl>
                 <RadioGroupItem value="none" />
               </FormControl>
diff --git a/apps/www/src/lib/registry/new-york/example/SelectForm.vue b/apps/www/src/lib/registry/new-york/example/SelectForm.vue
index 1e486310..f318fe82 100644
--- a/apps/www/src/lib/registry/new-york/example/SelectForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/SelectForm.vue
@@ -44,7 +44,7 @@ const onSubmit = handleSubmit((values) => {
 </script>
 
 <template>
-  <form className="w-2/3 space-y-6" @submit="onSubmit">
+  <form class="w-2/3 space-y-6" @submit="onSubmit">
     <FormField v-slot="{ componentField }" name="email">
       <FormItem>
         <FormLabel>Email</FormLabel>
diff --git a/apps/www/src/lib/registry/new-york/example/TextareaWithText.vue b/apps/www/src/lib/registry/new-york/example/TextareaWithText.vue
index c724dffa..915a37f9 100644
--- a/apps/www/src/lib/registry/new-york/example/TextareaWithText.vue
+++ b/apps/www/src/lib/registry/new-york/example/TextareaWithText.vue
@@ -7,7 +7,7 @@ import { Label } from '@/lib/registry/new-york/ui/label'
   <div class="grid w-full gap-1.5">
     <Label for="message-2">Your message</Label>
     <Textarea id="message-2" placeholder="Type your message here." />
-    <p className="text-sm text-muted-foreground">
+    <p class="text-sm text-muted-foreground">
       Your message will be copied to the support team.
     </p>
   </div>