From 7453797d5b6a9c6b6ef1a5bafb4786e6cd80990e Mon Sep 17 00:00:00 2001
From: Ahmed Mayara <99325011+ahmedmayara@users.noreply.github.com>
Date: Thu, 7 Sep 2023 14:14:16 +0100
Subject: [PATCH] feat: add new-york style demos, fix wrong icon in
 dropdown-menu and select components (#30)

---
 .../new-york/example/AccordionDemo.vue        |  22 ++
 .../registry/new-york/example/AlertDemo.vue   |  14 +
 .../new-york/example/AlertDialogDemo.vue      |  37 +++
 .../new-york/example/AspectRatioDemo.vue      |  13 +
 .../registry/new-york/example/AvatarDemo.vue  |  10 +
 .../registry/new-york/example/BadgeDemo.vue   |   7 +
 .../registry/new-york/example/ButtonDemo.vue  |   7 +
 .../new-york/example/CalendarDemo.vue         |  10 +
 .../registry/new-york/example/CardDemo.vue    |  75 ++++++
 .../new-york/example/CardWithForm.vue         |  67 +++++
 .../new-york/example/CheckboxDemo.vue         |  15 ++
 .../new-york/example/CollapsibleDemo.vue      |  43 +++
 .../new-york/example/ContextMenuDemo.vue      |  73 +++++
 .../new-york/example/DataTableDemo.vue        | 254 ++++++++++++++++++
 .../new-york/example/DataTableDemoColumn.vue  |  35 +++
 .../new-york/example/DatePickerDemo.vue       |  36 +++
 .../new-york/example/DatePickerWithRange.vue  |  51 ++++
 .../registry/new-york/example/DialogDemo.vue  |  51 ++++
 .../new-york/example/DropdownMenuDemo.vue     |  93 +++++++
 .../new-york/example/HoverCardDemo.vue        |  47 ++++
 .../registry/new-york/example/InputDemo.vue   |   7 +
 .../registry/new-york/example/LabelDemo.vue   |  13 +
 .../registry/new-york/example/MenubarDemo.vue | 123 +++++++++
 .../new-york/example/NavigationMenuDemo.vue   | 110 ++++++++
 .../example/NavigationMenuDemoItem.vue        |  27 ++
 .../registry/new-york/example/PopoverDemo.vue |  70 +++++
 .../new-york/example/ProgressDemo.vue         |  15 ++
 .../new-york/example/RadioGroupDemo.vue       |  21 ++
 .../new-york/example/ScrollAreaDemo.vue       |  25 ++
 .../registry/new-york/example/SelectDemo.vue  |  39 +++
 .../new-york/example/SeparatorDemo.vue        |  24 ++
 .../registry/new-york/example/SheetDemo.vue   |  54 ++++
 .../new-york/example/SkeletonDemo.vue         |  13 +
 .../registry/new-york/example/SliderDemo.vue  |  15 ++
 .../registry/new-york/example/SwitchDemo.vue  |  11 +
 .../registry/new-york/example/TableDemo.vue   |  86 ++++++
 .../registry/new-york/example/TabsDemo.vue    |  78 ++++++
 .../new-york/example/TextareaDemo.vue         |   7 +
 .../registry/new-york/example/ToggleDemo.vue  |  11 +
 .../registry/new-york/example/TooltipDemo.vue |  24 ++
 .../lib/registry/new-york/example/index.ts    |   1 +
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |   4 +-
 .../new-york/ui/select/SelectTrigger.vue      |   4 +-
 43 files changed, 1738 insertions(+), 4 deletions(-)
 create mode 100644 apps/www/src/lib/registry/new-york/example/AccordionDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/AlertDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/AlertDialogDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/AspectRatioDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/AvatarDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/BadgeDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/ButtonDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/CalendarDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/CardDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/CardWithForm.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/CheckboxDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/ContextMenuDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/DataTableDemoColumn.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/DialogDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/DropdownMenuDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/InputDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/LabelDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/MenubarDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/NavigationMenuDemoItem.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/PopoverDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/ProgressDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/RadioGroupDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/ScrollAreaDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/SelectDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/SeparatorDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/SheetDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/SkeletonDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/SliderDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/SwitchDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TableDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TabsDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TextareaDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/ToggleDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TooltipDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/index.ts

diff --git a/apps/www/src/lib/registry/new-york/example/AccordionDemo.vue b/apps/www/src/lib/registry/new-york/example/AccordionDemo.vue
new file mode 100644
index 00000000..1dc12ffe
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/AccordionDemo.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/new-york/ui/accordion'
+
+const defaultValue = 'item-1'
+
+const accordionItems = [
+  { value: 'item-1', title: 'Is it accessible?', content: 'Yes. It adheres to the WAI-ARIA design pattern.' },
+  { value: 'item-2', title: 'Is it unstyled?', content: 'Yes. It\'s unstyled by default, giving you freedom over the look and feel.' },
+  { value: 'item-3', title: 'Can it be animated?', content: 'Yes! You can use the transition prop to configure the animation.' },
+]
+</script>
+
+<template>
+  <Accordion type="single" class="w-full" collapsible :default-value="defaultValue">
+    <AccordionItem v-for="item in accordionItems" :key="item.value" :value="item.value">
+      <AccordionTrigger>{{ item.title }}</AccordionTrigger>
+      <AccordionContent>
+        {{ item.content }}
+      </AccordionContent>
+    </AccordionItem>
+  </Accordion>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/AlertDemo.vue b/apps/www/src/lib/registry/new-york/example/AlertDemo.vue
new file mode 100644
index 00000000..cd4a8796
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/AlertDemo.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import RadixIconsRocket from '~icons/radix-icons/rocket'
+import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/new-york/ui/alert'
+</script>
+
+<template>
+  <Alert>
+    <RadixIconsRocket class="h-4 w-4" />
+    <AlertTitle>Heads up!</AlertTitle>
+    <AlertDescription>
+      You can add components to your app using the cli.
+    </AlertDescription>
+  </Alert>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/AlertDialogDemo.vue b/apps/www/src/lib/registry/new-york/example/AlertDialogDemo.vue
new file mode 100644
index 00000000..442a9ab1
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/AlertDialogDemo.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/lib/registry/new-york/ui/alert-dialog'
+import { Button } from '@/lib/registry/new-york/ui/button'
+</script>
+
+<template>
+  <AlertDialog>
+    <AlertDialogTrigger as-child>
+      <Button variant="outline">
+        Show Dialog
+      </Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+        <AlertDialogDescription>
+          This action cannot be undone. This will permanently delete your
+          account and remove your data from our servers.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction>Continue</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/AspectRatioDemo.vue b/apps/www/src/lib/registry/new-york/example/AspectRatioDemo.vue
new file mode 100644
index 00000000..fdc51fe7
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/AspectRatioDemo.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { AspectRatio } from '@/lib/registry/new-york/ui/aspect-ratio'
+</script>
+
+<template>
+  <AspectRatio :ratio="16 / 9" class="bg-muted">
+    <img
+      src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+      alt="Photo by Drew Beamer"
+      class="rounded-md object-cover w-full h-full"
+    >
+  </AspectRatio>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/AvatarDemo.vue b/apps/www/src/lib/registry/new-york/example/AvatarDemo.vue
new file mode 100644
index 00000000..3eb25f5b
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/AvatarDemo.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/new-york/ui/avatar'
+</script>
+
+<template>
+  <Avatar>
+    <AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
+    <AvatarFallback>CN</AvatarFallback>
+  </Avatar>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/BadgeDemo.vue b/apps/www/src/lib/registry/new-york/example/BadgeDemo.vue
new file mode 100644
index 00000000..e00e92f6
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/BadgeDemo.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { Badge } from '@/lib/registry/new-york/ui/badge'
+</script>
+
+<template>
+  <Badge>Badge</Badge>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/ButtonDemo.vue b/apps/www/src/lib/registry/new-york/example/ButtonDemo.vue
new file mode 100644
index 00000000..20e0a15a
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/ButtonDemo.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+</script>
+
+<template>
+  <Button>Button</Button>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/CalendarDemo.vue b/apps/www/src/lib/registry/new-york/example/CalendarDemo.vue
new file mode 100644
index 00000000..26b8b930
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/CalendarDemo.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Calendar } from '@/lib/registry/new-york/ui/calendar'
+
+const date = ref(new Date())
+</script>
+
+<template>
+  <Calendar v-model="date" class="rounded-md border" />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/CardDemo.vue b/apps/www/src/lib/registry/new-york/example/CardDemo.vue
new file mode 100644
index 00000000..5f57edd5
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/CardDemo.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import RadixIconsBell from '~icons/radix-icons/bell'
+import RadixIconsCheck from '~icons/radix-icons/check'
+
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/new-york/ui/card'
+import { Switch } from '@/lib/registry/new-york/ui/switch'
+import { cn } from '@/lib/utils'
+
+const notifications = [
+  {
+    title: 'Your call has been confirmed.',
+    description: '1 hour ago',
+  },
+  {
+    title: 'You have a new message!',
+    description: '1 hour ago',
+  },
+  {
+    title: 'Your subscription is expiring soon!',
+    description: '2 hours ago',
+  },
+]
+</script>
+
+<template>
+  <Card :class="cn('w-[380px]', $attrs.class ?? '')">
+    <CardHeader>
+      <CardTitle>Notifications</CardTitle>
+      <CardDescription>You have 3 unread messages.</CardDescription>
+    </CardHeader>
+    <CardContent class="grid gap-4">
+      <div class=" flex items-center space-x-4 rounded-md border p-4">
+        <RadixIconsBell />
+        <div class="flex-1 space-y-1">
+          <p class="text-sm font-medium leading-none">
+            Push Notifications
+          </p>
+          <p class="text-sm text-muted-foreground">
+            Send notifications to device.
+          </p>
+        </div>
+        <Switch />
+      </div>
+      <div>
+        <div
+          v-for="(notification, index) in notifications" :key="index"
+          class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
+        >
+          <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
+          <div class="space-y-1">
+            <p class="text-sm font-medium leading-none">
+              {{ notification.title }}
+            </p>
+            <p class="text-sm text-muted-foreground">
+              {{ notification.description }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </CardContent>
+    <CardFooter>
+      <Button class="w-full">
+        <RadixIconsCheck class="mr-2 h-4 w-4" /> Mark all as read
+      </Button>
+    </CardFooter>
+  </Card>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/CardWithForm.vue b/apps/www/src/lib/registry/new-york/example/CardWithForm.vue
new file mode 100644
index 00000000..bcdb12ae
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/CardWithForm.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/new-york/ui/card'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/new-york/ui/select'
+</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 w-full items-center gap-4">
+          <div class="flex flex-col space-y-1.5">
+            <Label for="name">Name</Label>
+            <Input id="name" placeholder="Name of your project" />
+          </div>
+          <div class="flex flex-col space-y-1.5">
+            <Label for="framework">Framework</Label>
+            <Select>
+              <SelectTrigger id="framework">
+                <SelectValue placeholder="Select" />
+              </SelectTrigger>
+              <SelectContent position="popper">
+                <SelectItem value="next">
+                  Next.js
+                </SelectItem>
+                <SelectItem value="sveltekit">
+                  SvelteKit
+                </SelectItem>
+                <SelectItem value="astro">
+                  Astro
+                </SelectItem>
+                <SelectItem value="nuxt">
+                  Nuxt.js
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </form>
+    </CardContent>
+    <CardFooter class="flex justify-between">
+      <Button variant="outline">
+        Cancel
+      </Button>
+      <Button>Deploy</Button>
+    </CardFooter>
+  </Card>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/CheckboxDemo.vue b/apps/www/src/lib/registry/new-york/example/CheckboxDemo.vue
new file mode 100644
index 00000000..03dfd15b
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/CheckboxDemo.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+</script>
+
+<template>
+  <div className="flex items-center space-x-2">
+    <Checkbox id="terms" />
+    <label
+      htmlFor="terms"
+      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+    >
+      Accept terms and conditions
+    </label>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue b/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue
new file mode 100644
index 00000000..c00e2de0
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import RadixIconsCaretSort from '~icons/radix-icons/caret-sort'
+
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/lib/registry/new-york/ui/collapsible'
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <Collapsible
+    v-model:open="isOpen"
+    class="w-[350px] space-y-2"
+  >
+    <div class="flex items-center justify-between space-x-4 px-4">
+      <h4 class="text-sm font-semibold">
+        @peduarte starred 3 repositories
+      </h4>
+      <CollapsibleTrigger as-child>
+        <Button variant="ghost" size="sm" class="w-9 p-0">
+          <RadixIconsCaretSort class="h-4 w-4" />
+          <span class="sr-only">Toggle</span>
+        </Button>
+      </CollapsibleTrigger>
+    </div>
+    <div class="rounded-md border px-4 py-3 font-mono text-sm">
+      @radix-ui/primitives
+    </div>
+    <CollapsibleContent class="space-y-2">
+      <div class="rounded-md border px-4 py-3 font-mono text-sm">
+        @radix-ui/colors
+      </div>
+      <div class="rounded-md border px-4 py-3 font-mono text-sm">
+        @stitches/react
+      </div>
+    </CollapsibleContent>
+  </Collapsible>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/ContextMenuDemo.vue b/apps/www/src/lib/registry/new-york/example/ContextMenuDemo.vue
new file mode 100644
index 00000000..105e05a2
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/ContextMenuDemo.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from '@/lib/registry/new-york/ui/context-menu'
+</script>
+
+<template>
+  <ContextMenu>
+    <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+      Right click here
+    </ContextMenuTrigger>
+    <ContextMenuContent class="w-64">
+      <ContextMenuItem inset>
+        Back
+        <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+      </ContextMenuItem>
+      <ContextMenuItem inset disabled>
+        Forward
+        <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+      </ContextMenuItem>
+      <ContextMenuItem inset>
+        Reload
+        <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+      </ContextMenuItem>
+      <ContextMenuSub>
+        <ContextMenuSubTrigger inset>
+          More Tools
+        </ContextMenuSubTrigger>
+        <ContextMenuSubContent class="w-48">
+          <ContextMenuItem>
+            Save Page As...
+            <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+          <ContextMenuItem>Name Window...</ContextMenuItem>
+          <ContextMenuSeparator />
+          <ContextMenuItem>Developer Tools</ContextMenuItem>
+        </ContextMenuSubContent>
+      </ContextMenuSub>
+      <ContextMenuSeparator />
+      <ContextMenuCheckboxItem checked>
+        Show Bookmarks Bar
+        <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+      </ContextMenuCheckboxItem>
+      <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+      <ContextMenuSeparator />
+      <ContextMenuRadioGroup value="pedro">
+        <ContextMenuLabel inset>
+          People
+        </ContextMenuLabel>
+        <ContextMenuSeparator />
+        <ContextMenuRadioItem value="pedro">
+          Pedro Duarte
+        </ContextMenuRadioItem>
+        <ContextMenuRadioItem value="colm">
+          Colm Tuite
+        </ContextMenuRadioItem>
+      </ContextMenuRadioGroup>
+    </ContextMenuContent>
+  </ContextMenu>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue b/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
new file mode 100644
index 00000000..04787460
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
@@ -0,0 +1,254 @@
+<script setup lang="ts">
+import type {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+} from '@tanstack/vue-table'
+import {
+  FlexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useVueTable,
+} from '@tanstack/vue-table'
+import { h, ref } from 'vue'
+import DropdownAction from './DataTableDemoColumn.vue'
+import RadixIconsCaretSort from '~icons/radix-icons/caret-sort'
+import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
+
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/lib/registry/new-york/ui/dropdown-menu'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/lib/registry/new-york/ui/table'
+import { valueUpdater } from '@/lib/utils'
+
+export interface Payment {
+  id: string
+  amount: number
+  status: 'pending' | 'processing' | 'success' | 'failed'
+  email: string
+}
+
+const data: Payment[] = [
+  {
+    id: 'm5gr84i9',
+    amount: 316,
+    status: 'success',
+    email: 'ken99@yahoo.com',
+  },
+  {
+    id: '3u1reuv4',
+    amount: 242,
+    status: 'success',
+    email: 'Abe45@gmail.com',
+  },
+  {
+    id: 'derv1ws0',
+    amount: 837,
+    status: 'processing',
+    email: 'Monserrat44@gmail.com',
+  },
+  {
+    id: '5kma53ae',
+    amount: 874,
+    status: 'success',
+    email: 'Silas22@gmail.com',
+  },
+  {
+    id: 'bhqecj4p',
+    amount: 721,
+    status: 'failed',
+    email: 'carmella@hotmail.com',
+  },
+]
+
+const columns: ColumnDef<Payment>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => h(Checkbox, {
+      'checked': table.getIsAllPageRowsSelected(),
+      'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
+      'ariaLabel': 'Select all',
+    }),
+    cell: ({ row }) => h(Checkbox, {
+      'checked': row.getIsSelected(),
+      'onUpdate:checked': value => row.toggleSelected(!!value),
+      'ariaLabel': 'Select row',
+    }),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),
+  },
+  {
+    accessorKey: 'email',
+    header: ({ column }) => {
+      return h(Button, {
+        variant: 'ghost',
+        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
+      }, ['Email', h(RadixIconsCaretSort, { class: 'ml-2 h-4 w-4' })])
+    },
+    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
+  },
+  {
+    accessorKey: 'amount',
+    header: () => h('div', { class: 'text-right' }, 'Amount'),
+    cell: ({ row }) => {
+      const amount = Number.parseFloat(row.getValue('amount'))
+
+      // Format the amount as a dollar amount
+      const formatted = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+      }).format(amount)
+
+      return h('div', { class: 'text-right font-medium' }, formatted)
+    },
+  },
+  {
+    id: 'actions',
+    enableHiding: false,
+    cell: ({ row }) => {
+      const payment = row.original
+
+      return h(DropdownAction, {
+        payment,
+      })
+    },
+  },
+]
+
+const sorting = ref<SortingState>([])
+const columnFilters = ref<ColumnFiltersState>([])
+const columnVisibility = ref<VisibilityState>({})
+const rowSelection = ref({})
+
+const table = useVueTable({
+  data,
+  columns,
+  getCoreRowModel: getCoreRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+  getSortedRowModel: getSortedRowModel(),
+  getFilteredRowModel: getFilteredRowModel(),
+  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
+  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),
+  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
+  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),
+  state: {
+    get sorting() { return sorting.value },
+    get columnFilters() { return columnFilters.value },
+    get columnVisibility() { return columnVisibility.value },
+    get rowSelection() { return rowSelection.value },
+  },
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="flex items-center py-4">
+      <Input
+        class="max-w-sm"
+        placeholder="Filter emails..."
+        :model-value="table.getColumn('email')?.getFilterValue() as string"
+        @update:model-value=" table.getColumn('email')?.setFilterValue($event)"
+      />
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <Button variant="outline" class="ml-auto">
+            Columns <RadixIconsChevronDown class="ml-2 h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuCheckboxItem
+            v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
+            :key="column.id"
+            class="capitalize"
+            :checked="column.getIsVisible()"
+            @update:checked="(value) => {
+              column.toggleVisibility(!!value)
+            }"
+          >
+            {{ column.id }}
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+    <div class="rounded-md border">
+      <Table>
+        <TableHeader>
+          <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+            <TableHead v-for="header in headerGroup.headers" :key="header.id">
+              <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <template v-if="table.getRowModel().rows?.length">
+            <TableRow
+              v-for="row in table.getRowModel().rows"
+              :key="row.id"
+              :data-state="row.getIsSelected() && 'selected'"
+            >
+              <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
+                <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+              </TableCell>
+            </TableRow>
+          </template>
+
+          <TableRow v-else>
+            <TableCell
+              col-span="{columns.length}"
+              class="h-24 text-center"
+            >
+              No results.
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+
+    <div class="flex items-center justify-end space-x-2 py-4">
+      <div class="flex-1 text-sm text-muted-foreground">
+        {{ table.getFilteredSelectedRowModel().rows.length }} of
+        {{ table.getFilteredRowModel().rows.length }} row(s) selected.
+      </div>
+      <div class="space-x-2">
+        <Button
+          variant="outline"
+          size="sm"
+          :disabled="!table.getCanPreviousPage()"
+          @click="table.previousPage()"
+        >
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          :disabled="!table.getCanNextPage()"
+          @click="table.nextPage()"
+        >
+          >
+          Next
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/DataTableDemoColumn.vue b/apps/www/src/lib/registry/new-york/example/DataTableDemoColumn.vue
new file mode 100644
index 00000000..bef9f9af
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/DataTableDemoColumn.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import RadixIconsDotsHorizontal from '~icons/radix-icons/dots-horizontal'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
+import { Button } from '@/lib/registry/new-york/ui/button'
+
+defineProps<{
+  payment: {
+    id: string
+  }
+}>()
+
+function copy(id: string) {
+  navigator.clipboard.writeText(id)
+}
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="ghost" class="h-8 w-8 p-0">
+        <span class="sr-only">Open menu</span>
+        <RadixIconsDotsHorizontal class="h-4 w-4" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end">
+      <DropdownMenuLabel>Actions</DropdownMenuLabel>
+      <DropdownMenuItem @click="copy(payment.id)">
+        Copy payment ID
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem>View customer</DropdownMenuItem>
+      <DropdownMenuItem>View payment details</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
new file mode 100644
index 00000000..a39c9af3
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { format } from 'date-fns'
+import { ref } from 'vue'
+import RadixIconsCalendar from '~icons/radix-icons/calendar'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Calendar } from '@/lib/registry/new-york/ui/calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/new-york/ui/popover'
+
+const date = ref<Date>()
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button
+        :variant="'outline'"
+        :class="cn(
+          'w-[280px] justify-start text-left font-normal',
+          !date && 'text-muted-foreground',
+        )"
+      >
+        <RadixIconsCalendar class="mr-2 h-4 w-4" />
+        <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0">
+      <Calendar v-model="date" />
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue b/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
new file mode 100644
index 00000000..910a8f13
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { addDays, format } from 'date-fns'
+import { ref } from 'vue'
+import RadixIconsCalendar from '~icons/radix-icons/calendar'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Calendar } from '@/lib/registry/new-york/ui/calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/new-york/ui/popover'
+
+const date = ref({
+  start: new Date(2022, 0, 20),
+  end: addDays(new Date(2022, 0, 20), 20),
+})
+</script>
+
+<template>
+  <div :class="cn('grid gap-2', $attrs.class ?? '')">
+    <Popover>
+      <PopoverTrigger as-child>
+        <Button
+          id="date"
+          :variant="'outline'"
+          :class="cn(
+            'w-[300px] justify-start text-left font-normal',
+            !date && 'text-muted-foreground',
+          )"
+        >
+          <RadixIconsCalendar class="mr-2 h-4 w-4" />
+
+          <span>
+            {{ date.start ? (
+              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`
+              : format(date.start, 'LLL dd, y')
+            ) : 'Pick a date' }}
+          </span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="w-auto p-0" align="start" :avoid-collisions="true">
+        <Calendar
+          v-model.range="date"
+          :columns="2"
+        />
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/DialogDemo.vue b/apps/www/src/lib/registry/new-york/example/DialogDemo.vue
new file mode 100644
index 00000000..22d04986
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/DialogDemo.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/lib/registry/new-york/ui/dialog'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+</script>
+
+<template>
+  <Dialog>
+    <DialogTrigger as-child>
+      <Button variant="outline">
+        Edit Profile
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="sm:max-w-[425px]" @escape-key-down.prevent>
+      <DialogHeader>
+        <DialogTitle>Edit profile</DialogTitle>
+        <DialogDescription>
+          Make changes to your profile here. Click save when you're done.
+        </DialogDescription>
+      </DialogHeader>
+      <div class="grid gap-4 py-4">
+        <div class="grid grid-cols-4 items-center gap-4">
+          <Label for="name" class="text-right">
+            Name
+          </Label>
+          <Input id="name" value="Pedro Duarte" class="col-span-3" />
+        </div>
+        <div class="grid grid-cols-4 items-center gap-4">
+          <Label for="username" class="text-right">
+            Username
+          </Label>
+          <Input id="username" value="@peduarte" class="col-span-3" />
+        </div>
+      </div>
+      <DialogFooter>
+        <Button type="submit">
+          Save changes
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/DropdownMenuDemo.vue b/apps/www/src/lib/registry/new-york/example/DropdownMenuDemo.vue
new file mode 100644
index 00000000..8d6aedd9
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/DropdownMenuDemo.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/lib/registry/new-york/ui/dropdown-menu'
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="outline">
+        Open
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent class="w-56">
+      <DropdownMenuLabel>My Account</DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuGroup>
+        <DropdownMenuItem>
+          <span>Profile</span>
+          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <span>Billing</span>
+          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <span>Settings</span>
+          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <span>Keyboard shortcuts</span>
+          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator />
+      <DropdownMenuGroup>
+        <DropdownMenuItem>
+          <span>Team</span>
+        </DropdownMenuItem>
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <span>Invite users</span>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem>
+                <span>Email</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <span>Message</span>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <span>More...</span>
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
+        <DropdownMenuItem>
+          <span>New Team</span>
+          <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem>
+        <span>GitHub</span>
+      </DropdownMenuItem>
+      <DropdownMenuItem>
+        <span>Support</span>
+      </DropdownMenuItem>
+      <DropdownMenuItem disabled>
+        <span>API</span>
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem>
+        <span>Log out</span>
+        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue b/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue
new file mode 100644
index 00000000..45b6cf9e
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import RadixIconsCalendar from '~icons/radix-icons/calendar'
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@/lib/registry/new-york/ui/avatar'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/lib/registry/new-york/ui/hover-card'
+</script>
+
+<template>
+  <HoverCard>
+    <HoverCardTrigger as-child>
+      <Button variant="link">
+        @vuejs
+      </Button>
+    </HoverCardTrigger>
+    <HoverCardContent class="w-80">
+      <div class="flex justify-between space-x-4">
+        <Avatar>
+          <AvatarImage src="https://github.com/vuejs.png" />
+          <AvatarFallback>VC</AvatarFallback>
+        </Avatar>
+        <div class="space-y-1">
+          <h4 class="text-sm font-semibold">
+            @vuejs
+          </h4>
+          <p class="text-sm">
+            Progressive JavaScript framework for building modern web interfaces.
+          </p>
+          <div class="flex items-center pt-2">
+            <RadixIconsCalendar class="mr-2 h-4 w-4 opacity-70" />
+            <span class="text-xs text-muted-foreground">
+              Joined January 2014
+            </span>
+          </div>
+        </div>
+      </div>
+    </HoverCardContent>
+  </HoverCard>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/InputDemo.vue b/apps/www/src/lib/registry/new-york/example/InputDemo.vue
new file mode 100644
index 00000000..bab30342
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/InputDemo.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { Input } from '@/lib/registry/new-york/ui/input'
+</script>
+
+<template>
+  <Input type="email" placeholder="Email" />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/LabelDemo.vue b/apps/www/src/lib/registry/new-york/example/LabelDemo.vue
new file mode 100644
index 00000000..aa61fcca
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/LabelDemo.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+import { Label } from '@/lib/registry/new-york/ui/label'
+</script>
+
+<template>
+  <div>
+    <div className="flex items-center space-x-2">
+      <Checkbox id="terms" />
+      <Label for="terms">Accept terms and conditions</Label>
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/MenubarDemo.vue b/apps/www/src/lib/registry/new-york/example/MenubarDemo.vue
new file mode 100644
index 00000000..16455c04
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/MenubarDemo.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from '@/lib/registry/new-york/ui/menubar'
+</script>
+
+<template>
+  <Menubar>
+    <MenubarMenu>
+      <MenubarTrigger>File</MenubarTrigger>
+      <MenubarContent>
+        <MenubarItem>
+          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+        </MenubarItem>
+        <MenubarItem>
+          New Window <MenubarShortcut>⌘N</MenubarShortcut>
+        </MenubarItem>
+        <MenubarItem disabled>
+          New Incognito Window
+        </MenubarItem>
+        <MenubarSeparator />
+        <MenubarSub>
+          <MenubarSubTrigger>Share</MenubarSubTrigger>
+          <MenubarSubContent>
+            <MenubarItem>Email link</MenubarItem>
+            <MenubarItem>Messages</MenubarItem>
+            <MenubarItem>Notes</MenubarItem>
+          </MenubarSubContent>
+        </MenubarSub>
+        <MenubarSeparator />
+        <MenubarItem>
+          Print... <MenubarShortcut>⌘P</MenubarShortcut>
+        </MenubarItem>
+      </MenubarContent>
+    </MenubarMenu>
+    <MenubarMenu>
+      <MenubarTrigger>Edit</MenubarTrigger>
+      <MenubarContent>
+        <MenubarItem>
+          Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+        </MenubarItem>
+        <MenubarItem>
+          Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+        </MenubarItem>
+        <MenubarSeparator />
+        <MenubarSub>
+          <MenubarSubTrigger>Find</MenubarSubTrigger>
+          <MenubarSubContent>
+            <MenubarItem>Search the web</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>Find...</MenubarItem>
+            <MenubarItem>Find Next</MenubarItem>
+            <MenubarItem>Find Previous</MenubarItem>
+          </MenubarSubContent>
+        </MenubarSub>
+        <MenubarSeparator />
+        <MenubarItem>Cut</MenubarItem>
+        <MenubarItem>Copy</MenubarItem>
+        <MenubarItem>Paste</MenubarItem>
+      </MenubarContent>
+    </MenubarMenu>
+    <MenubarMenu>
+      <MenubarTrigger>View</MenubarTrigger>
+      <MenubarContent>
+        <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+        <MenubarCheckboxItem checked>
+          Always Show Full URLs
+        </MenubarCheckboxItem>
+        <MenubarSeparator />
+        <MenubarItem inset>
+          Reload <MenubarShortcut>⌘R</MenubarShortcut>
+        </MenubarItem>
+        <MenubarItem disabled inset>
+          Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+        </MenubarItem>
+        <MenubarSeparator />
+        <MenubarItem inset>
+          Toggle Fullscreen
+        </MenubarItem>
+        <MenubarSeparator />
+        <MenubarItem inset>
+          Hide Sidebar
+        </MenubarItem>
+      </MenubarContent>
+    </MenubarMenu>
+    <MenubarMenu>
+      <MenubarTrigger>Profiles</MenubarTrigger>
+      <MenubarContent>
+        <MenubarRadioGroup value="benoit">
+          <MenubarRadioItem value="andy">
+            Andy
+          </MenubarRadioItem>
+          <MenubarRadioItem value="benoit">
+            Benoit
+          </MenubarRadioItem>
+          <MenubarRadioItem value="Luis">
+            Luis
+          </MenubarRadioItem>
+        </MenubarRadioGroup>
+        <MenubarSeparator />
+        <MenubarItem inset>
+          Edit...
+        </MenubarItem>
+        <MenubarSeparator />
+        <MenubarItem inset>
+          Add Profile...
+        </MenubarItem>
+      </MenubarContent>
+    </MenubarMenu>
+  </Menubar>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue b/apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue
new file mode 100644
index 00000000..19694063
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import ListItem from './NavigationMenuDemoItem.vue'
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from '@/lib/registry/new-york/ui/navigation-menu'
+
+const components: { title: string; href: string; description: string }[] = [
+  {
+    title: 'Alert Dialog',
+    href: '/docs/primitives/alert-dialog',
+    description:
+      'A modal dialog that interrupts the user with important content and expects a response.',
+  },
+  {
+    title: 'Hover Card',
+    href: '/docs/primitives/hover-card',
+    description:
+      'For sighted users to preview content available behind a link.',
+  },
+  {
+    title: 'Progress',
+    href: '/docs/primitives/progress',
+    description:
+      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',
+  },
+  {
+    title: 'Scroll-area',
+    href: '/docs/primitives/scroll-area',
+    description: 'Visually or semantically separates content.',
+  },
+  {
+    title: 'Tabs',
+    href: '/docs/primitives/tabs',
+    description:
+      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
+  },
+  {
+    title: 'Tooltip',
+    href: '/docs/primitives/tooltip',
+    description:
+      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
+  },
+]
+</script>
+
+<template>
+  <NavigationMenu>
+    <NavigationMenuList>
+      <NavigationMenuItem>
+        <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+        <NavigationMenuContent>
+          <ul class="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+            <li class="row-span-3">
+              <NavigationMenuLink as-child>
+                <a
+                  class="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                  href="/"
+                >
+                  <img src="https://www.radix-vue.com/logo.svg" class="h-6 w-6">
+                  <div class="mb-2 mt-4 text-lg font-medium">
+                    shadcn/ui
+                  </div>
+                  <p class="text-sm leading-tight text-muted-foreground">
+                    Beautifully designed components built with Radix UI and
+                    Tailwind CSS.
+                  </p>
+                </a>
+              </NavigationMenuLink>
+            </li>
+            <ListItem href="/docs" title="Introduction">
+              Re-usable components built using Radix UI and Tailwind CSS.
+            </ListItem>
+            <ListItem href="/docs/installation" title="Installation">
+              How to install dependencies and structure your app.
+            </ListItem>
+            <ListItem href="/docs/primitives/typography" title="Typography">
+              Styles for headings, paragraphs, lists...etc
+            </ListItem>
+          </ul>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+      <NavigationMenuItem>
+        <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+        <NavigationMenuContent>
+          <ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+            <ListItem
+              v-for="component in components"
+              :key="component.title"
+              :title="component.title"
+              :href="component.href"
+            >
+              {{ component.description }}
+            </ListItem>
+          </ul>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+      <NavigationMenuItem>
+        <NavigationMenuLink href="/docs" :class="navigationMenuTriggerStyle()">
+          Documentation
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+  </NavigationMenu>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/NavigationMenuDemoItem.vue b/apps/www/src/lib/registry/new-york/example/NavigationMenuDemoItem.vue
new file mode 100644
index 00000000..d86f5513
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/NavigationMenuDemoItem.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  NavigationMenuLink,
+} from '@/lib/registry/new-york/ui/navigation-menu'
+
+defineProps<{ title?: string; href?: string }>()
+</script>
+
+<template>
+  <li>
+    <NavigationMenuLink as-child>
+      <a
+        :href="href"
+        :class="cn(
+          'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+          $attrs.class ?? '',
+        )"
+      >
+        <div class="text-sm font-medium leading-none">{{ title }}</div>
+        <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+          <slot />
+        </p>
+      </a>
+    </NavigationMenuLink>
+  </li>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/PopoverDemo.vue b/apps/www/src/lib/registry/new-york/example/PopoverDemo.vue
new file mode 100644
index 00000000..5586ccee
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/PopoverDemo.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/new-york/ui/popover'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Label } from '@/lib/registry/new-york/ui/label'
+import { Input } from '@/lib/registry/new-york/ui/input'
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button variant="outline">
+        Open popover
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-80">
+      <div class="grid gap-4">
+        <div class="space-y-2">
+          <h4 class="font-medium leading-none">
+            Dimensions
+          </h4>
+          <p class="text-sm text-muted-foreground">
+            Set the dimensions for the layer.
+          </p>
+        </div>
+        <div class="grid gap-2">
+          <div class="grid grid-cols-3 items-center gap-4">
+            <Label for="width">Width</Label>
+            <Input
+              id="width"
+              type="text"
+              default-value="100%"
+              class="col-span-2 h-8"
+            />
+          </div>
+          <div class="grid grid-cols-3 items-center gap-4">
+            <Label for="maxWidth">Max. width</Label>
+            <Input
+              id="maxWidth"
+              type="text"
+              default-value="300px"
+              class="col-span-2 h-8"
+            />
+          </div>
+          <div class="grid grid-cols-3 items-center gap-4">
+            <Label for="height">Height</Label>
+            <Input
+              id="height"
+              type="text"
+              default-value="25px"
+              class="col-span-2 h-8"
+            />
+          </div>
+          <div class="grid grid-cols-3 items-center gap-4">
+            <Label for="maxHeight">Max. height</Label>
+            <Input
+              id="maxHeight"
+              type="text"
+              default-value="none"
+              class="col-span-2 h-8"
+            />
+          </div>
+        </div>
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/ProgressDemo.vue b/apps/www/src/lib/registry/new-york/example/ProgressDemo.vue
new file mode 100644
index 00000000..125c32f3
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/ProgressDemo.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+import { Progress } from '@/lib/registry/new-york/ui/progress'
+
+const progress = ref(13)
+
+watchEffect((cleanupFn) => {
+  const timer = setTimeout(() => progress.value = 66, 500)
+  cleanupFn(() => clearTimeout(timer))
+})
+</script>
+
+<template>
+  <Progress v-model="progress" class="w-[60%]" />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/RadioGroupDemo.vue b/apps/www/src/lib/registry/new-york/example/RadioGroupDemo.vue
new file mode 100644
index 00000000..053a05af
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/RadioGroupDemo.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { Label } from '@/lib/registry/new-york/ui/label'
+import { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-group'
+</script>
+
+<template>
+  <RadioGroup default-value="comfortable" :orientation="'vertical'">
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem id="r1" value="default" />
+      <Label for="r1">Default</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem id="r2" value="comfortable" />
+      <Label for="r2">Comfortable</Label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem id="r3" value="compact" />
+      <Label for="r3">Compact</Label>
+    </div>
+  </RadioGroup>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/ScrollAreaDemo.vue b/apps/www/src/lib/registry/new-york/example/ScrollAreaDemo.vue
new file mode 100644
index 00000000..891055ec
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/ScrollAreaDemo.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ScrollArea } from '@/lib/registry/new-york/ui/scroll-area'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+
+const tags = Array.from({ length: 50 }).map(
+  (_, i, a) => `v1.2.0-beta.${a.length - i}`,
+)
+</script>
+
+<template>
+  <ScrollArea class="h-72 w-48 rounded-md border">
+    <div class="p-4">
+      <h4 class="mb-4 text-sm font-medium leading-none">
+        Tags
+      </h4>
+
+      <div v-for="tag in tags" :key="tag">
+        <div class="text-sm">
+          {{ tag }}
+        </div>
+        <Separator class="my-2" />
+      </div>
+    </div>
+  </ScrollArea>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/SelectDemo.vue b/apps/www/src/lib/registry/new-york/example/SelectDemo.vue
new file mode 100644
index 00000000..ee1ac775
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/SelectDemo.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/new-york/ui/select'
+</script>
+
+<template>
+  <Select>
+    <SelectTrigger class="w-[180px]">
+      <SelectValue placeholder="Select a fruit" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        <SelectLabel>Fruits</SelectLabel>
+        <SelectItem value="apple">
+          Apple
+        </SelectItem>
+        <SelectItem value="banana">
+          Banana
+        </SelectItem>
+        <SelectItem value="blueberry">
+          Blueberry
+        </SelectItem>
+        <SelectItem value="grapes">
+          Grapes
+        </SelectItem>
+        <SelectItem value="pineapple">
+          Pineapple
+        </SelectItem>
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/SeparatorDemo.vue b/apps/www/src/lib/registry/new-york/example/SeparatorDemo.vue
new file mode 100644
index 00000000..7e4f2f3e
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/SeparatorDemo.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+</script>
+
+<template>
+  <div>
+    <div class="space-y-1">
+      <h4 class="text-sm font-medium leading-none">
+        Radix Primitives
+      </h4>
+      <p class="text-sm text-muted-foreground">
+        An open-source UI component library.
+      </p>
+    </div>
+    <Separator class="my-4" />
+    <div class="flex h-5 items-center space-x-4 text-sm">
+      <div>Blog</div>
+      <Separator orientation="vertical" />
+      <div>Docs</div>
+      <Separator orientation="vertical" />
+      <div>Source</div>
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/SheetDemo.vue b/apps/www/src/lib/registry/new-york/example/SheetDemo.vue
new file mode 100644
index 00000000..0eb880d6
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/SheetDemo.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/lib/registry/new-york/ui/sheet'
+</script>
+
+<template>
+  <Sheet>
+    <SheetTrigger as-child>
+      <Button variant="outline">
+        Open
+      </Button>
+    </SheetTrigger>
+    <SheetContent>
+      <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 grid-cols-4 items-center gap-4">
+          <Label for="name" class="text-right">
+            Name
+          </Label>
+          <Input id="name" value="Pedro Duarte" class="col-span-3" />
+        </div>
+        <div class="grid grid-cols-4 items-center gap-4">
+          <Label for="username" class="text-right">
+            Username
+          </Label>
+          <Input id="username" value="@peduarte" class="col-span-3" />
+        </div>
+      </div>
+      <SheetFooter>
+        <SheetClose as-child>
+          <Button type="submit">
+            Save changes
+          </Button>
+        </SheetClose>
+      </SheetFooter>
+    </SheetContent>
+  </Sheet>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/SkeletonDemo.vue b/apps/www/src/lib/registry/new-york/example/SkeletonDemo.vue
new file mode 100644
index 00000000..a271ddbc
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/SkeletonDemo.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { Skeleton } from '@/lib/registry/new-york/ui/skeleton'
+</script>
+
+<template>
+  <div class="flex items-center space-x-4">
+    <Skeleton class="h-12 w-12 rounded-full" />
+    <div class="space-y-2">
+      <Skeleton class="h-4 w-[250px]" />
+      <Skeleton class="h-4 w-[200px]" />
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/SliderDemo.vue b/apps/www/src/lib/registry/new-york/example/SliderDemo.vue
new file mode 100644
index 00000000..85269d71
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/SliderDemo.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Slider } from '@/lib/registry/new-york/ui/slider'
+
+const modelValue = [50]
+</script>
+
+<template>
+  <Slider
+    v-model="modelValue"
+    :max="100"
+    :step="1"
+    :class="cn('w-[60%]', $attrs.class ?? '')"
+  />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/SwitchDemo.vue b/apps/www/src/lib/registry/new-york/example/SwitchDemo.vue
new file mode 100644
index 00000000..9b9d3030
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/SwitchDemo.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Label } from '@/lib/registry/new-york/ui/label'
+import { Switch } from '@/lib/registry/new-york/ui/switch'
+</script>
+
+<template>
+  <div className="flex items-center space-x-2">
+    <Switch id="airplane-mode" />
+    <Label for="airplane-mode">Airplane Mode</Label>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TableDemo.vue b/apps/www/src/lib/registry/new-york/example/TableDemo.vue
new file mode 100644
index 00000000..8e5ef93b
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TableDemo.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/lib/registry/new-york/ui/table'
+
+const invoices = [
+  {
+    invoice: 'INV001',
+    paymentStatus: 'Paid',
+    totalAmount: '$250.00',
+    paymentMethod: 'Credit Card',
+  },
+  {
+    invoice: 'INV002',
+    paymentStatus: 'Pending',
+    totalAmount: '$150.00',
+    paymentMethod: 'PayPal',
+  },
+  {
+    invoice: 'INV003',
+    paymentStatus: 'Unpaid',
+    totalAmount: '$350.00',
+    paymentMethod: 'Bank Transfer',
+  },
+  {
+    invoice: 'INV004',
+    paymentStatus: 'Paid',
+    totalAmount: '$450.00',
+    paymentMethod: 'Credit Card',
+  },
+  {
+    invoice: 'INV005',
+    paymentStatus: 'Paid',
+    totalAmount: '$550.00',
+    paymentMethod: 'PayPal',
+  },
+  {
+    invoice: 'INV006',
+    paymentStatus: 'Pending',
+    totalAmount: '$200.00',
+    paymentMethod: 'Bank Transfer',
+  },
+  {
+    invoice: 'INV007',
+    paymentStatus: 'Unpaid',
+    totalAmount: '$300.00',
+    paymentMethod: 'Credit Card',
+  },
+]
+</script>
+
+<template>
+  <Table>
+    <TableCaption>A list of your recent invoices.</TableCaption>
+    <TableHeader>
+      <TableRow>
+        <TableHead class-name="w-[100px]">
+          Invoice
+        </TableHead>
+        <TableHead>Status</TableHead>
+        <TableHead>Method</TableHead>
+        <TableHead class-name="text-right">
+          Amount
+        </TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow v-for="invoice in invoices" :key="invoice.invoice">
+        <TableCell class="font-medium">
+          {{ invoice.invoice }}
+        </TableCell>
+        <TableCell>{{ invoice.paymentStatus }}</TableCell>
+        <TableCell>{{ invoice.paymentMethod }}</TableCell>
+        <TableCell class="text-right">
+          {{ invoice.totalAmount }}
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TabsDemo.vue b/apps/www/src/lib/registry/new-york/example/TabsDemo.vue
new file mode 100644
index 00000000..c7e60cf7
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TabsDemo.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/new-york/ui/card'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/lib/registry/new-york/ui/tabs'
+</script>
+
+<template>
+  <Tabs default-value="account" class="w-[400px]">
+    <TabsList class="grid w-full grid-cols-2">
+      <TabsTrigger value="account">
+        Account
+      </TabsTrigger>
+      <TabsTrigger value="password">
+        Password
+      </TabsTrigger>
+    </TabsList>
+    <TabsContent value="account">
+      <Card>
+        <CardHeader>
+          <CardTitle>Account</CardTitle>
+          <CardDescription>
+            Make changes to your account here. Click save when you're done.
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-2">
+          <div className="space-y-1">
+            <Label for="name">Name</Label>
+            <Input id="name" default-value="Pedro Duarte" />
+          </div>
+          <div className="space-y-1">
+            <Label for="username">Username</Label>
+            <Input id="username" default-value="@peduarte" />
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button>Save changes</Button>
+        </CardFooter>
+      </Card>
+    </TabsContent>
+    <TabsContent value="password">
+      <Card>
+        <CardHeader>
+          <CardTitle>Password</CardTitle>
+          <CardDescription>
+            Change your password here. After saving, you'll be logged out.
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-2">
+          <div className="space-y-1">
+            <Label for="current">Current password</Label>
+            <Input id="current" type="password" />
+          </div>
+          <div className="space-y-1">
+            <Label for="new">New password</Label>
+            <Input id="new" type="password" />
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button>Save password</Button>
+        </CardFooter>
+      </Card>
+    </TabsContent>
+  </Tabs>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TextareaDemo.vue b/apps/www/src/lib/registry/new-york/example/TextareaDemo.vue
new file mode 100644
index 00000000..95082063
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TextareaDemo.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { Textarea } from '@/lib/registry/new-york/ui/textarea'
+</script>
+
+<template>
+  <Textarea placeholder="Type your message here." />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleDemo.vue b/apps/www/src/lib/registry/new-york/example/ToggleDemo.vue
new file mode 100644
index 00000000..3d653a62
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/ToggleDemo.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import RadixIconsFontBold from '~icons/radix-icons/font-bold'
+
+import { Toggle } from '@/lib/registry/new-york/ui/toggle'
+</script>
+
+<template>
+  <Toggle aria-label="Toggle italic">
+    <RadixIconsFontBold class="h-4 w-4" />
+  </Toggle>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TooltipDemo.vue b/apps/www/src/lib/registry/new-york/example/TooltipDemo.vue
new file mode 100644
index 00000000..be46487d
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TooltipDemo.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/lib/registry/new-york/ui/tooltip'
+</script>
+
+<template>
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button variant="outline">
+          Hover
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Add to library</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/index.ts b/apps/www/src/lib/registry/new-york/example/index.ts
new file mode 100644
index 00000000..f414dfd1
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/index.ts
@@ -0,0 +1 @@
+export { default as AccordionDemo } from './AccordionDemo.vue'
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index e4a77f47..90d376a3 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -3,7 +3,7 @@ import {
   DropdownMenuSubTrigger,
   type DropdownMenuSubTriggerProps,
 } from 'radix-vue'
-import { ChevronRight } from 'lucide-vue-next'
+import RadixIconsChevronRight from '~icons/radix-icons/chevron-right'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()
@@ -20,6 +20,6 @@ const props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()
     ]"
   >
     <slot />
-    <ChevronRight class="ml-auto h-4 w-4" />
+    <RadixIconsChevronRight class="ml-auto h-4 w-4" />
   </DropdownMenuSubTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
index c7ad6747..3fb1cb46 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'
-import { ChevronDown } from 'lucide-vue-next'
+import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
 import { cn } from '@/lib/utils'
 
 const props = withDefaults(
@@ -27,7 +27,7 @@ const props = withDefaults(
   >
     <slot />
     <SelectIcon as-child>
-      <ChevronDown class="w-4 h-4 opacity-50" />
+      <RadixIconsChevronDown class="w-4 h-4 opacity-50" />
     </SelectIcon>
   </SelectTrigger>
 </template>