From fd0087b89bdcf482de287ccf1df0c27120d68288 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Tue, 3 Oct 2023 02:51:04 +0330
Subject: [PATCH] docs: add `combobox`, `datepicker`, `radio-group`, `select`,
 `switch` and `textarea` form and some other exmaples

---
 .../src/content/docs/components/combobox.md   |  18 ++-
 .../content/docs/components/date-picker.md    |  12 +-
 .../content/docs/components/radio-group.md    |   8 +-
 .../www/src/content/docs/components/select.md |   8 +-
 .../www/src/content/docs/components/switch.md |   8 +-
 .../src/content/docs/components/textarea.md   |  28 ++++-
 .../examples/forms/components/AccountForm.vue |  14 ++-
 .../forms/components/AppearanceForm.vue       |  50 ++++----
 .../default/example/ComboboxDropdownMenu.vue  | 108 ++++++++++++++++
 .../registry/default/example/ComboboxForm.vue | 112 +++++++++++++++++
 .../default/example/ComboboxPopover.vue       | 118 ++++++++++++++++++
 .../default/example/DatePickerWithPresets.vue |  73 +++++++++++
 .../default/example/RadioGroupForm.vue        |  76 +++++++++++
 .../registry/default/example/SelectForm.vue   |  79 ++++++++++++
 .../registry/default/example/SwitchForm.vue   |  85 +++++++++++++
 .../default/example/TextareaDisabled.vue      |   7 ++
 .../registry/default/example/TextareaForm.vue |  59 +++++++++
 .../default/example/TextareaWithButton.vue    |  11 ++
 .../default/example/TextareaWithLabel.vue     |  11 ++
 .../default/example/TextareaWithText.vue      |  14 +++
 .../new-york/example/ComboboxDropdownMenu.vue | 104 +++++++++++++++
 .../new-york/example/ComboboxForm.vue         | 115 +++++++++++++++++
 .../new-york/example/ComboboxPopover.vue      |  94 ++++++++++++++
 .../example/DatePickerWithPresets.vue         |  73 +++++++++++
 .../new-york/example/RadioGroupForm.vue       |  76 +++++++++++
 .../registry/new-york/example/SelectForm.vue  |  79 ++++++++++++
 .../registry/new-york/example/SwitchForm.vue  |  85 +++++++++++++
 .../new-york/example/TextareaDisabled.vue     |   7 ++
 .../new-york/example/TextareaForm.vue         |  59 +++++++++
 .../new-york/example/TextareaWithButton.vue   |  11 ++
 .../new-york/example/TextareaWithLabel.vue    |  11 ++
 .../new-york/example/TextareaWithText.vue     |  14 +++
 32 files changed, 1585 insertions(+), 42 deletions(-)
 create mode 100644 apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue
 create mode 100644 apps/www/src/lib/registry/default/example/ComboboxForm.vue
 create mode 100644 apps/www/src/lib/registry/default/example/ComboboxPopover.vue
 create mode 100644 apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue
 create mode 100644 apps/www/src/lib/registry/default/example/RadioGroupForm.vue
 create mode 100644 apps/www/src/lib/registry/default/example/SelectForm.vue
 create mode 100644 apps/www/src/lib/registry/default/example/SwitchForm.vue
 create mode 100644 apps/www/src/lib/registry/default/example/TextareaDisabled.vue
 create mode 100644 apps/www/src/lib/registry/default/example/TextareaForm.vue
 create mode 100644 apps/www/src/lib/registry/default/example/TextareaWithButton.vue
 create mode 100644 apps/www/src/lib/registry/default/example/TextareaWithLabel.vue
 create mode 100644 apps/www/src/lib/registry/default/example/TextareaWithText.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/ComboboxDropdownMenu.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/ComboboxForm.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/RadioGroupForm.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/SelectForm.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/SwitchForm.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TextareaDisabled.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TextareaForm.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TextareaWithButton.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TextareaWithLabel.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TextareaWithText.vue

diff --git a/apps/www/src/content/docs/components/combobox.md b/apps/www/src/content/docs/components/combobox.md
index e8f021da..8f909099 100644
--- a/apps/www/src/content/docs/components/combobox.md
+++ b/apps/www/src/content/docs/components/combobox.md
@@ -86,4 +86,20 @@ const value = ref({})
 </template>
 ```
 
- 
\ No newline at end of file
+## Examples
+
+### Combobox
+
+<ComponentPreview name="ComboboxDemo" />
+
+### Popover
+
+<ComponentPreview name="ComboboxPopover" />
+
+### Dropdown menu
+
+<ComponentPreview name="ComboboxDropdownMenu" />
+
+### Form
+
+<ComponentPreview name="ComboboxForm" />
diff --git a/apps/www/src/content/docs/components/date-picker.md b/apps/www/src/content/docs/components/date-picker.md
index 16d93bcf..43aef149 100644
--- a/apps/www/src/content/docs/components/date-picker.md
+++ b/apps/www/src/content/docs/components/date-picker.md
@@ -56,14 +56,18 @@ const date = ref<Date>()
 
 ## Examples
 
-### Date Range Picker
-
-<ComponentPreview name="DatePickerWithRange"  />
-
 ### Date Picker
 
 <ComponentPreview name="DatePickerDemo"  />
 
+### Date Range Picker
+
+<ComponentPreview name="DatePickerWithRange"  />
+
+### With Presets
+
+<ComponentPreview name="DatePickerWithPresets"  />
+
 ### Form
 
 <ComponentPreview name="DatePickerForm"  />
diff --git a/apps/www/src/content/docs/components/radio-group.md b/apps/www/src/content/docs/components/radio-group.md
index a2b9a762..d7db0bc9 100644
--- a/apps/www/src/content/docs/components/radio-group.md
+++ b/apps/www/src/content/docs/components/radio-group.md
@@ -34,4 +34,10 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
     </div>
   </RadioGroup>
 </template>
-```
\ No newline at end of file
+```
+
+## Examples
+
+### Form
+
+<ComponentPreview name="RadioGroupForm" />
diff --git a/apps/www/src/content/docs/components/select.md b/apps/www/src/content/docs/components/select.md
index e6798284..cc31fcf3 100644
--- a/apps/www/src/content/docs/components/select.md
+++ b/apps/www/src/content/docs/components/select.md
@@ -45,4 +45,10 @@ import {
     </SelectContent>
   </Select>
 </template>
-```
\ No newline at end of file
+```
+
+## Examples
+
+### Form
+
+<ComponentPreview name="SelectForm" />
diff --git a/apps/www/src/content/docs/components/switch.md b/apps/www/src/content/docs/components/switch.md
index ccb8c1ad..a359a4df 100644
--- a/apps/www/src/content/docs/components/switch.md
+++ b/apps/www/src/content/docs/components/switch.md
@@ -47,4 +47,10 @@ import { Switch } from '@/components/ui/switch'
 <template>
   <Switch />
 </template>
-```
\ No newline at end of file
+```
+
+## Examples
+
+### Form
+
+<ComponentPreview name="SwitchForm" />
diff --git a/apps/www/src/content/docs/components/textarea.md b/apps/www/src/content/docs/components/textarea.md
index 39229b03..24b31da8 100644
--- a/apps/www/src/content/docs/components/textarea.md
+++ b/apps/www/src/content/docs/components/textarea.md
@@ -45,4 +45,30 @@ import { Textarea } from '@/components/ui/textarea'
 <template>
   <Textarea />
 </template>
-```
\ No newline at end of file
+```
+
+## Examples
+
+### Default
+
+<ComponentPreview name="TextareaDemo" />
+
+### Disabled
+
+<ComponentPreview name="TextareaDisabled" />
+
+### With Label
+
+<ComponentPreview name="TextareaWithLabel" className="[&_div.grid]:w-full" />
+
+### With Text
+
+<ComponentPreview name="TextareaWithText" />
+
+### With Button
+
+<ComponentPreview name="TextareaWithButton" />
+
+### Form
+
+<ComponentPreview name="TextareaForm" />
diff --git a/apps/www/src/examples/forms/components/AccountForm.vue b/apps/www/src/examples/forms/components/AccountForm.vue
index a73d50cb..43d21c13 100644
--- a/apps/www/src/examples/forms/components/AccountForm.vue
+++ b/apps/www/src/examples/forms/components/AccountForm.vue
@@ -77,7 +77,7 @@ async function onSubmit(values: any) {
     </p>
   </div>
   <Separator />
-  <Form :validation-schema="accountFormSchema" class="space-y-8" @submit="onSubmit">
+  <Form v-slot="{ setValues }" :validation-schema="accountFormSchema" class="space-y-8" @submit="onSubmit">
     <FormField v-slot="{ componentField }" name="name">
       <FormItem>
         <FormLabel>Name</FormLabel>
@@ -119,7 +119,7 @@ async function onSubmit(values: any) {
       </FormItem>
     </FormField>
 
-    <FormField v-slot="{ value, componentField }" name="language">
+    <FormField v-slot="{ value }" name="language">
       <FormItem>
         <FormLabel>Language</FormLabel>
 
@@ -141,19 +141,23 @@ async function onSubmit(values: any) {
             </FormControl>
           </PopoverTrigger>
           <PopoverContent class="w-[200px] p-0">
-            <Command v-bind="componentField">
+            <Command>
               <CommandInput placeholder="Search language..." />
               <CommandEmpty>No framework found.</CommandEmpty>
               <CommandGroup>
                 <CommandItem
-                  v-for="language in languages" :key="language.value" :value="language.value" @select="() => {
+                  v-for="language in languages" :key="language.value" :value="language.label"
+                  @select="() => {
+                    setValues({
+                      language: language.value,
+                    })
                     open = false
                   }"
                 >
                   <Check
                     :class="cn(
                       'mr-2 h-4 w-4',
-                      value === language.label ? 'opacity-100' : 'opacity-0',
+                      value === language.value ? 'opacity-100' : 'opacity-0',
                     )"
                   />
                   {{ language.label }}
diff --git a/apps/www/src/examples/forms/components/AppearanceForm.vue b/apps/www/src/examples/forms/components/AppearanceForm.vue
index 0cd81695..9b58d9c1 100644
--- a/apps/www/src/examples/forms/components/AppearanceForm.vue
+++ b/apps/www/src/examples/forms/components/AppearanceForm.vue
@@ -3,18 +3,12 @@ import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
 
+import { ChevronDownIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
 import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
 import { Separator } from '@/lib/registry/new-york/ui/separator'
 import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/lib/registry/new-york/ui/select'
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Button, buttonVariants } from '@/lib/registry/new-york/ui/button'
 
 const appearanceFormSchema = toTypedSchema(z.object({
   theme: z.enum(['light', 'dark'], {
@@ -50,30 +44,30 @@ const onSubmit = handleSubmit((values) => {
   </div>
   <Separator />
   <form class="space-y-8" @submit="onSubmit">
-    <FormField v-slot="{ componentField }" name="font">
+    <FormField v-slot="{ field }" name="font">
       <FormItem>
         <FormLabel>Email</FormLabel>
         <div class="relative w-[200px]">
           <FormControl>
-            <Select v-bind="componentField">
-              <SelectTrigger>
-                <SelectValue placeholder="Select a font" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectItem value="inter">
-                    Inter
-                  </SelectItem>
-                  <SelectItem value="manrope">
-                    Manrope
-                  </SelectItem>
-                  <SelectItem value="system">
-                    System
-                  </SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
+            <select
+              :class="cn(
+                buttonVariants({ variant: 'outline' }),
+                'w-[200px] appearance-none bg-transparent font-normal',
+              )"
+              v-bind="field"
+            >
+              <option value="inter">
+                Inter
+              </option>
+              <option value="manrope">
+                Manrope
+              </option>
+              <option value="system">
+                System
+              </option>
+            </select>
           </FormControl>
+          <ChevronDownIcon class="absolute right-3 top-2.5 h-4 w-4 opacity-50" />
         </div>
         <FormDescription>
           Set the font you want to use in the dashboard.
diff --git a/apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue b/apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue
new file mode 100644
index 00000000..3009899f
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Calendar, MoreHorizontal, Tags, Trash, User } from 'lucide-vue-next'
+
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/lib/registry/default/ui/command'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/lib/registry/default/ui/dropdown-menu'
+
+const labels = [
+  'feature',
+  'bug',
+  'enhancement',
+  'documentation',
+  'design',
+  'question',
+  'maintenance',
+]
+
+const labelRef = ref('feature')
+const open = ref(false)
+</script>
+
+<template>
+  <div class="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
+    <p class="text-sm font-medium leading-none">
+      <span class="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
+        {{ labelRef }}
+      </span>
+      <span class="text-muted-foreground">Create a new project</span>
+    </p>
+    <DropdownMenu :open="open">
+      <DropdownMenuTrigger as-child>
+        <Button variant="ghost" size="sm">
+          <MoreHorizontal />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" class="w-[200px]">
+        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <User class="mr-2 h-4 w-4" />
+            Assign to...
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Calendar class="mr-2 h-4 w-4" />
+            Set due date...
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              <Tags class="mr-2 h-4 w-4" />
+              Apply label
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent class="p-0">
+              <Command>
+                <CommandInput
+                  placeholder="Filter label..."
+                  auto-focus
+                />
+                <CommandList>
+                  <CommandEmpty>No label found.</CommandEmpty>
+                  <CommandGroup>
+                    <CommandItem
+                      v-for="label in labels"
+                      :key="label"
+                      :value="label"
+                      @select="(value) => {
+                        labelRef = value as string
+                        open = false
+                      }"
+                    >
+                      {{ label }}
+                    </CommandItem>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem class="text-red-600">
+            <Trash class="mr-2 h-4 w-4" />
+            Delete
+            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/ComboboxForm.vue b/apps/www/src/lib/registry/default/example/ComboboxForm.vue
new file mode 100644
index 00000000..8080fd4f
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/ComboboxForm.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+import { Check, ChevronsUpDown } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from '@/lib/registry/default/ui/command'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/default/ui/form'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/default/ui/popover'
+
+const languages = [
+  { label: 'English', value: 'en' },
+  { label: 'French', value: 'fr' },
+  { label: 'German', value: 'de' },
+  { label: 'Spanish', value: 'es' },
+  { label: 'Portuguese', value: 'pt' },
+  { label: 'Russian', value: 'ru' },
+  { label: 'Japanese', value: 'ja' },
+  { label: 'Korean', value: 'ko' },
+  { label: 'Chinese', value: 'zh' },
+]
+
+const formSchema = toTypedSchema(z.object({
+  language: z.string({
+    required_error: 'Please select a language.',
+  }),
+}))
+
+const { handleSubmit, setValues } = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = handleSubmit((values) => {
+  console.log('Form submitted!', values)
+})
+</script>
+
+<template>
+  <form class="space-y-6" @submit="onSubmit">
+    <FormField v-slot="{ value }" name="language">
+      <FormItem class="flex flex-col">
+        <FormLabel>Language</FormLabel>
+        <Popover>
+          <PopoverTrigger as-child>
+            <FormControl>
+              <Button
+                variant="outline"
+                role="combobox"
+                :class="cn('w-[200px] justify-between', !value && 'text-muted-foreground')"
+              >
+                {{ value ? languages.find(
+                  (language) => language.value === value,
+                )?.label : 'Select language...' }}
+                <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </FormControl>
+          </PopoverTrigger>
+          <PopoverContent class="w-[200px] p-0">
+            <Command>
+              <CommandInput placeholder="Search language..." />
+              <CommandEmpty>Nothing found.</CommandEmpty>
+              <CommandGroup>
+                <CommandItem
+                  v-for="language in languages"
+                  :key="language.value"
+                  :value="language.label"
+                  @select="() => {
+                    setValues({
+                      language: language.value,
+                    })
+                  }"
+                >
+                  <Check
+                    :class="cn('mr-2 h-4 w-4', language.value === value ? 'opacity-100' : 'opacity-0')"
+                  />
+                  {{ language.label }}
+                </CommandItem>
+              </CommandGroup>
+            </Command>
+          </PopoverContent>
+        </Popover>
+        <FormDescription>
+          This is the language that will be used in the dashboard.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <Button type="submit">
+      Submit
+    </Button>
+  </form>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/ComboboxPopover.vue b/apps/www/src/lib/registry/default/example/ComboboxPopover.vue
new file mode 100644
index 00000000..9e8c741e
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/ComboboxPopover.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { h, ref } from 'vue'
+import {
+  ArrowUpCircle,
+  CheckCircle2,
+  Circle,
+  HelpCircle,
+  XCircle,
+} from 'lucide-vue-next'
+import type { Icon } from 'lucide-vue-next'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/lib/registry/default/ui/command'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/default/ui/popover'
+
+interface Status {
+  value: string
+  label: string
+  icon: Icon
+}
+
+const statuses: Status[] = [
+  {
+    value: 'backlog',
+    label: 'Backlog',
+    icon: HelpCircle,
+  },
+  {
+    value: 'todo',
+    label: 'Todo',
+    icon: Circle,
+  },
+  {
+    value: 'in progress',
+    label: 'In Progress',
+    icon: ArrowUpCircle,
+  },
+  {
+    value: 'done',
+    label: 'Done',
+    icon: CheckCircle2,
+  },
+  {
+    value: 'canceled',
+    label: 'Canceled',
+    icon: XCircle,
+  },
+]
+
+const open = ref(false)
+const value = ref<typeof statuses[number]>()
+
+const selectedStatus = ref<Status | null>(null)
+</script>
+
+<template>
+  <div class="flex items-center space-x-4">
+    <p class="text-sm text-muted-foreground">
+      Status
+    </p>
+    <Popover :open="open">
+      <PopoverTrigger as-child>
+        <Button
+          variant="outline"
+          size="sm"
+          class="w-[150px] justify-start"
+        >
+          <template v-if="selectedStatus">
+            <component :is="h(selectedStatus?.icon)" class="mr-2 h-4 w-4 shrink-0" />
+            {{ selectedStatus?.label }}
+          </template>
+          <template v-else>
+            + Set status
+          </template>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="p-0" side="right" align="start">
+        <Command>
+          <CommandInput placeholder="Change status..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              <CommandItem
+                v-for="status in statuses"
+                :key="status.value"
+                :value="status.value"
+                @select="(value) => {
+                  selectedStatus = statuses.find((priority) => priority.value === value) || null
+                  open = false
+                }"
+              >
+                <component
+                  :is="h(status.icon)"
+                  :key="status.value"
+                  :class="cn('mr-2 h-4 w-4', status.value === selectedStatus?.value ? 'opacity-100' : 'opacity-40',
+                  )"
+                />
+                <span>{{ status.label }}</span>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue b/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue
new file mode 100644
index 00000000..c45446f8
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { addDays, format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+
+import { ref } from 'vue'
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/default/ui/button'
+import { Calendar } from '@/lib/registry/default/ui/calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/default/ui/popover'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/default/ui/select'
+
+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',
+        )"
+      >
+        <CalendarIcon class="mr-2 h-4 w-4" />
+        <template v-if="date">
+          {{ format(date, "PPP") }}
+        </template>
+        <template v-else>
+          <span>Pick a date</span>
+        </template>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="flex w-auto flex-col space-y-2 p-2">
+      <Select
+        @update:model-value="(value) => {
+          date = addDays(new Date(), parseInt(value))
+        }"
+      >
+        <SelectTrigger>
+          <SelectValue placeholder="Select" />
+        </SelectTrigger>
+        <SelectContent position="popper">
+          <SelectItem value="0">
+            Today
+          </SelectItem>
+          <SelectItem value="1">
+            Tomorrow
+          </SelectItem>
+          <SelectItem value="3">
+            In 3 days
+          </SelectItem>
+          <SelectItem value="7">
+            In a week
+          </SelectItem>
+        </SelectContent>
+      </Select>
+      <div class="rounded-md border">
+        <Calendar v-model="date" mode="single" />
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/RadioGroupForm.vue b/apps/www/src/lib/registry/default/example/RadioGroupForm.vue
new file mode 100644
index 00000000..967950f6
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/RadioGroupForm.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/default/ui/form'
+import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'
+
+const formSchema = toTypedSchema(z.object({
+  type: z.enum(['all', 'mentions', 'none'], {
+    required_error: 'You need to select a notification type.',
+  }),
+}))
+
+const { handleSubmit } = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = handleSubmit((values) => {
+  console.log('Form submitted!', values)
+})
+</script>
+
+<template>
+  <form className="w-2/3 space-y-6" @submit="onSubmit">
+    <FormField v-slot="{ componentField }" name="type">
+      <FormItem class="space-y-3">
+        <FormLabel>Notify me about...</FormLabel>
+
+        <FormControl>
+          <RadioGroup
+            class="flex flex-col space-y-1"
+            v-bind="componentField"
+          >
+            <FormItem class="flex items-center gap-x-3 space-y-0">
+              <FormControl>
+                <RadioGroupItem value="all" />
+              </FormControl>
+              <FormLabel class="font-normal">
+                All new messages
+              </FormLabel>
+            </FormItem>
+            <FormItem class="flex items-center gap-x-3 space-y-0">
+              <FormControl>
+                <RadioGroupItem value="mentions" />
+              </FormControl>
+              <FormLabel class="font-normal">
+                Direct messages and mentions
+              </FormLabel>
+            </FormItem>
+            <FormItem class="flex items-center gap-x-3 space-y-0">
+              <FormControl>
+                <RadioGroupItem value="none" />
+              </FormControl>
+              <FormLabel class="font-normal">
+                Nothing
+              </FormLabel>
+            </FormItem>
+          </RadioGroup>
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <Button type="submit">
+      Submit
+    </Button>
+  </form>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/SelectForm.vue b/apps/www/src/lib/registry/default/example/SelectForm.vue
new file mode 100644
index 00000000..991a4274
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/SelectForm.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/default/ui/form'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/default/ui/select'
+
+const formSchema = toTypedSchema(z.object({
+  email: z
+    .string({
+      required_error: 'Please select an email to display.',
+    })
+    .email(),
+}))
+
+const { handleSubmit } = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = handleSubmit((values) => {
+  console.log('Form submitted!', values)
+})
+</script>
+
+<template>
+  <form className="w-2/3 space-y-6" @submit="onSubmit">
+    <FormField v-slot="{ componentField }" name="email">
+      <FormItem>
+        <FormLabel>Email</FormLabel>
+
+        <Select v-bind="componentField">
+          <FormControl>
+            <SelectTrigger>
+              <SelectValue placeholder="Select a verified email to display" />
+            </SelectTrigger>
+          </FormControl>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="m@example.com">
+                m@example.com
+              </SelectItem>
+              <SelectItem value="m@google.com">
+                m@google.com
+              </SelectItem>
+              <SelectItem value="m@support.com">
+                m@support.com
+              </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <FormDescription>
+          You can manage email addresses in your
+          <a href="/examples/forms">email settings</a>.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <Button type="submit">
+      Submit
+    </Button>
+  </form>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/SwitchForm.vue b/apps/www/src/lib/registry/default/example/SwitchForm.vue
new file mode 100644
index 00000000..9c9f4bcd
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/SwitchForm.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@/lib/registry/default/ui/form'
+import { Switch } from '@/lib/registry/default/ui/switch'
+
+const formSchema = toTypedSchema(z.object({
+  marketing_emails: z.boolean().default(false).optional(),
+  security_emails: z.boolean(),
+}))
+
+const { handleSubmit } = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    security_emails: true,
+  },
+})
+
+const onSubmit = handleSubmit((values) => {
+  console.log('Form submitted!', values)
+})
+</script>
+
+<template>
+  <form class="w-full space-y-6" @submit="onSubmit">
+    <div>
+      <h3 class="mb-4 text-lg font-medium">
+        Email Notifications
+      </h3>
+
+      <div class="space-y-4">
+        <FormField v-slot="{ value, handleChange }" name="marketing_emails">
+          <FormItem class="flex flex-row items-center justify-between rounded-lg border p-4">
+            <div class="space-y-0.5">
+              <FormLabel class="text-base">
+                Marketing emails
+              </FormLabel>
+              <FormDescription>
+                Receive emails about new products, features, and more.
+              </FormDescription>
+            </div>
+            <FormControl>
+              <Switch
+                :checked="value"
+                @update:checked="handleChange"
+              />
+            </FormControl>
+          </FormItem>
+        </FormField>
+        <FormField v-slot="{ value, handleChange }" name="security_emails">
+          <FormItem class="flex flex-row items-center justify-between rounded-lg border p-4">
+            <div class="space-y-0.5">
+              <FormLabel class="text-base">
+                Security emails
+              </FormLabel>
+              <FormDescription>
+                Receive emails about your account security.
+              </FormDescription>
+            </div>
+            <FormControl>
+              <Switch
+                :checked="value"
+                disabled
+                aria-readonly
+                @update:checked="handleChange"
+              />
+            </FormControl>
+          </FormItem>
+        </FormField>
+      </div>
+    </div>
+    <Button type="submit">
+      Submit
+    </Button>
+  </form>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/TextareaDisabled.vue b/apps/www/src/lib/registry/default/example/TextareaDisabled.vue
new file mode 100644
index 00000000..069380b9
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/TextareaDisabled.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { Textarea } from '@/lib/registry/default/ui/textarea'
+</script>
+
+<template>
+  <Textarea placeholder="Type your message here." disabled />
+</template>
diff --git a/apps/www/src/lib/registry/default/example/TextareaForm.vue b/apps/www/src/lib/registry/default/example/TextareaForm.vue
new file mode 100644
index 00000000..8befc0ee
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/TextareaForm.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/default/ui/form'
+import { Textarea } from '@/lib/registry/default/ui/textarea'
+
+const formSchema = toTypedSchema(z.object({
+  bio: z
+    .string()
+    .min(10, {
+      message: 'Bio must be at least 10 characters.',
+    })
+    .max(160, {
+      message: 'Bio must not be longer than 30 characters.',
+    }),
+}))
+
+const { handleSubmit } = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = handleSubmit((values) => {
+  console.log('Form submitted!', values)
+})
+</script>
+
+<template>
+  <form class="w-full space-y-6" @submit="onSubmit">
+    <FormField v-slot="{ componentField }" name="bio">
+      <FormItem>
+        <FormLabel>Bio</FormLabel>
+        <FormControl>
+          <Textarea
+            placeholder="Tell us a little bit about yourself"
+            class="resize-none"
+            v-bind="componentField"
+          />
+        </FormControl>
+        <FormDescription>
+          You can <span>@mention</span> other users and organizations.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+    <Button type="submit">
+      Submit
+    </Button>
+  </form>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/TextareaWithButton.vue b/apps/www/src/lib/registry/default/example/TextareaWithButton.vue
new file mode 100644
index 00000000..d7aab001
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/TextareaWithButton.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Textarea } from '@/lib/registry/default/ui/textarea'
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <div class="grid w-full gap-2">
+    <Textarea placeholder="Type your message here." />
+    <Button>Send message</Button>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/TextareaWithLabel.vue b/apps/www/src/lib/registry/default/example/TextareaWithLabel.vue
new file mode 100644
index 00000000..c42a1c5b
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/TextareaWithLabel.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Textarea } from '@/lib/registry/default/ui/textarea'
+import { Label } from '@/lib/registry/default/ui/label'
+</script>
+
+<template>
+  <div class="grid w-full gap-1.5">
+    <Label for="message">Your message</Label>
+    <Textarea id="message" placeholder="Type your message here." />
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/TextareaWithText.vue b/apps/www/src/lib/registry/default/example/TextareaWithText.vue
new file mode 100644
index 00000000..9f1e65cd
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/TextareaWithText.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { Textarea } from '@/lib/registry/default/ui/textarea'
+import { Label } from '@/lib/registry/default/ui/label'
+</script>
+
+<template>
+  <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">
+      Your message will be copied to the support team.
+    </p>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxDropdownMenu.vue b/apps/www/src/lib/registry/new-york/example/ComboboxDropdownMenu.vue
new file mode 100644
index 00000000..a3e60a6d
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/ComboboxDropdownMenu.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { DotsHorizontalIcon } from '@radix-icons/vue'
+
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/lib/registry/new-york/ui/command'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/lib/registry/new-york/ui/dropdown-menu'
+
+const labels = [
+  'feature',
+  'bug',
+  'enhancement',
+  'documentation',
+  'design',
+  'question',
+  'maintenance',
+]
+
+const labelRef = ref('feature')
+const open = ref(false)
+</script>
+
+<template>
+  <div class="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
+    <p class="text-sm font-medium leading-none">
+      <span class="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
+        {{ labelRef }}
+      </span>
+      <span class="text-muted-foreground">Create a new project</span>
+    </p>
+    <DropdownMenu :open="open">
+      <DropdownMenuTrigger as-child>
+        <Button variant="ghost" size="sm">
+          <DotsHorizontalIcon />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" class="w-[200px]">
+        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            Assign to...
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Set due date...
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              Apply label
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent class="p-0">
+              <Command>
+                <CommandInput
+                  placeholder="Filter label..."
+                  auto-focus
+                />
+                <CommandList>
+                  <CommandEmpty>No label found.</CommandEmpty>
+                  <CommandGroup>
+                    <CommandItem
+                      v-for="label in labels"
+                      :key="label"
+                      :value="label"
+                      @select="(value) => {
+                        labelRef = value as string
+                        open = false
+                      }"
+                    >
+                      {{ label }}
+                    </CommandItem>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem class="text-red-600">
+            Delete
+            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue b/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue
new file mode 100644
index 00000000..911cdf97
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+import { CaretSortIcon, CheckIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from '@/lib/registry/new-york/ui/command'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/new-york/ui/form'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/new-york/ui/popover'
+
+const languages = [
+  { label: 'English', value: 'en' },
+  { label: 'French', value: 'fr' },
+  { label: 'German', value: 'de' },
+  { label: 'Spanish', value: 'es' },
+  { label: 'Portuguese', value: 'pt' },
+  { label: 'Russian', value: 'ru' },
+  { label: 'Japanese', value: 'ja' },
+  { label: 'Korean', value: 'ko' },
+  { label: 'Chinese', value: 'zh' },
+] as const
+
+const formSchema = toTypedSchema(z.object({
+  language: z.string({
+    required_error: 'Please select a language.',
+  }),
+}))
+
+const { handleSubmit, setValues } = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    language: '',
+  },
+})
+
+const onSubmit = handleSubmit((values) => {
+  console.log('Form submitted!', values)
+})
+</script>
+
+<template>
+  <form class="space-y-6" @submit="onSubmit">
+    <FormField v-slot="{ value }" name="language">
+      <FormItem class="flex flex-col">
+        <FormLabel>Language</FormLabel>
+        <Popover>
+          <PopoverTrigger as-child>
+            <FormControl>
+              <Button
+                variant="outline"
+                role="combobox"
+                :class="cn('w-[200px] justify-between', !value && 'text-muted-foreground')"
+              >
+                {{ value ? languages.find(
+                  (language) => language.value === value,
+                )?.label : 'Select language...' }}
+                <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </FormControl>
+          </PopoverTrigger>
+          <PopoverContent class="w-[200px] p-0">
+            <Command>
+              <CommandInput placeholder="Search language..." />
+              <CommandEmpty>Nothing found.</CommandEmpty>
+              <CommandGroup>
+                <CommandItem
+                  v-for="language in languages"
+                  :key="language.value"
+                  :value="language.label"
+                  @select="() => {
+                    setValues({
+                      language: language.value,
+                    })
+                  }"
+                >
+                  {{ language.label }}
+                  <CheckIcon
+                    :class="cn('ml-auto h-4 w-4', language.value === value ? 'opacity-100' : 'opacity-0')"
+                  />
+                </CommandItem>
+              </CommandGroup>
+            </Command>
+          </PopoverContent>
+        </Popover>
+        <FormDescription>
+          This is the language that will be used in the dashboard.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <Button type="submit">
+      Submit
+    </Button>
+  </form>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue b/apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue
new file mode 100644
index 00000000..2546f25e
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/lib/registry/new-york/ui/command'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/new-york/ui/popover'
+
+interface Status {
+  value: string
+  label: string
+}
+
+const statuses: Status[] = [
+  {
+    value: 'backlog',
+    label: 'Backlog',
+  },
+  {
+    value: 'todo',
+    label: 'Todo',
+  },
+  {
+    value: 'in progress',
+    label: 'In Progress',
+  },
+  {
+    value: 'done',
+    label: 'Done',
+  },
+  {
+    value: 'canceled',
+    label: 'Canceled',
+  },
+]
+
+const open = ref(false)
+const selectedStatus = ref<Status | null>(null)
+</script>
+
+<template>
+  <div class="flex items-center space-x-4">
+    <p class="text-sm text-muted-foreground">
+      Status
+    </p>
+    <Popover :open="open">
+      <PopoverTrigger as-child>
+        <Button
+          variant="outline"
+          size="sm"
+          class="w-[150px] justify-start"
+        >
+          <template v-if="selectedStatus">
+            {{ selectedStatus?.label }}
+          </template>
+          <template v-else>
+            + Set status
+          </template>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="p-0" side="right" align="start">
+        <Command>
+          <CommandInput placeholder="Change status..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              <CommandItem
+                v-for="status in statuses"
+                :key="status.value"
+                :value="status"
+                @select="(value) => {
+                  selectedStatus = statuses.find((priority) => priority.value === value) || null
+                  open = false
+                }"
+              >
+                {{ status.label }}
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue b/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue
new file mode 100644
index 00000000..78cd4321
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { addDays, format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+
+import { ref } from 'vue'
+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'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/new-york/ui/select'
+
+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',
+        )"
+      >
+        <CalendarIcon class="mr-2 h-4 w-4" />
+        <template v-if="date">
+          {{ format(date, "PPP") }}
+        </template>
+        <template v-else>
+          <span>Pick a date</span>
+        </template>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="flex w-auto flex-col space-y-2 p-2">
+      <Select
+        @update:model-value="(value) => {
+          date = addDays(new Date(), parseInt(value))
+        }"
+      >
+        <SelectTrigger>
+          <SelectValue placeholder="Select" />
+        </SelectTrigger>
+        <SelectContent position="popper">
+          <SelectItem value="0">
+            Today
+          </SelectItem>
+          <SelectItem value="1">
+            Tomorrow
+          </SelectItem>
+          <SelectItem value="3">
+            In 3 days
+          </SelectItem>
+          <SelectItem value="7">
+            In a week
+          </SelectItem>
+        </SelectContent>
+      </Select>
+      <div class="rounded-md border">
+        <Calendar v-model="date" mode="single" />
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/RadioGroupForm.vue b/apps/www/src/lib/registry/new-york/example/RadioGroupForm.vue
new file mode 100644
index 00000000..c4d02519
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/RadioGroupForm.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/new-york/ui/form'
+import { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-group'
+
+const formSchema = toTypedSchema(z.object({
+  type: z.enum(['all', 'mentions', 'none'], {
+    required_error: 'You need to select a notification type.',
+  }),
+}))
+
+const { handleSubmit } = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = handleSubmit((values) => {
+  console.log('Form submitted!', values)
+})
+</script>
+
+<template>
+  <form className="w-2/3 space-y-6" @submit="onSubmit">
+    <FormField v-slot="{ componentField }" name="type">
+      <FormItem class="space-y-3">
+        <FormLabel>Notify me about...</FormLabel>
+
+        <FormControl>
+          <RadioGroup
+            class="flex flex-col space-y-1"
+            v-bind="componentField"
+          >
+            <FormItem class="flex items-center gap-x-3 space-y-0">
+              <FormControl>
+                <RadioGroupItem value="all" />
+              </FormControl>
+              <FormLabel class="font-normal">
+                All new messages
+              </FormLabel>
+            </FormItem>
+            <FormItem class="flex items-center gap-x-3 space-y-0">
+              <FormControl>
+                <RadioGroupItem value="mentions" />
+              </FormControl>
+              <FormLabel class="font-normal">
+                Direct messages and mentions
+              </FormLabel>
+            </FormItem>
+            <FormItem class="flex items-center gap-x-3 space-y-0">
+              <FormControl>
+                <RadioGroupItem value="none" />
+              </FormControl>
+              <FormLabel class="font-normal">
+                Nothing
+              </FormLabel>
+            </FormItem>
+          </RadioGroup>
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <Button type="submit">
+      Submit
+    </Button>
+  </form>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/SelectForm.vue b/apps/www/src/lib/registry/new-york/example/SelectForm.vue
new file mode 100644
index 00000000..8c743df9
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/SelectForm.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/new-york/ui/form'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/new-york/ui/select'
+
+const formSchema = toTypedSchema(z.object({
+  email: z
+    .string({
+      required_error: 'Please select an email to display.',
+    })
+    .email(),
+}))
+
+const { handleSubmit } = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = handleSubmit((values) => {
+  console.log('Form submitted!', values)
+})
+</script>
+
+<template>
+  <form className="w-2/3 space-y-6" @submit="onSubmit">
+    <FormField v-slot="{ componentField }" name="email">
+      <FormItem>
+        <FormLabel>Email</FormLabel>
+
+        <Select v-bind="componentField">
+          <FormControl>
+            <SelectTrigger>
+              <SelectValue placeholder="Select a verified email to display" />
+            </SelectTrigger>
+          </FormControl>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="m@example.com">
+                m@example.com
+              </SelectItem>
+              <SelectItem value="m@google.com">
+                m@google.com
+              </SelectItem>
+              <SelectItem value="m@support.com">
+                m@support.com
+              </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <FormDescription>
+          You can manage email addresses in your
+          <a href="/examples/forms">email settings</a>.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <Button type="submit">
+      Submit
+    </Button>
+  </form>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/SwitchForm.vue b/apps/www/src/lib/registry/new-york/example/SwitchForm.vue
new file mode 100644
index 00000000..0085115e
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/SwitchForm.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@/lib/registry/new-york/ui/form'
+import { Switch } from '@/lib/registry/new-york/ui/switch'
+
+const formSchema = toTypedSchema(z.object({
+  marketing_emails: z.boolean().default(false).optional(),
+  security_emails: z.boolean(),
+}))
+
+const { handleSubmit } = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    security_emails: true,
+  },
+})
+
+const onSubmit = handleSubmit((values) => {
+  console.log('Form submitted!', values)
+})
+</script>
+
+<template>
+  <form class="w-full space-y-6" @submit="onSubmit">
+    <div>
+      <h3 class="mb-4 text-lg font-medium">
+        Email Notifications
+      </h3>
+
+      <div class="space-y-4">
+        <FormField v-slot="{ value, handleChange }" name="marketing_emails">
+          <FormItem class="flex flex-row items-center justify-between rounded-lg border p-4">
+            <div class="space-y-0.5">
+              <FormLabel class="text-base">
+                Marketing emails
+              </FormLabel>
+              <FormDescription>
+                Receive emails about new products, features, and more.
+              </FormDescription>
+            </div>
+            <FormControl>
+              <Switch
+                :checked="value"
+                @update:checked="handleChange"
+              />
+            </FormControl>
+          </FormItem>
+        </FormField>
+        <FormField v-slot="{ value, handleChange }" name="security_emails">
+          <FormItem class="flex flex-row items-center justify-between rounded-lg border p-4">
+            <div class="space-y-0.5">
+              <FormLabel class="text-base">
+                Security emails
+              </FormLabel>
+              <FormDescription>
+                Receive emails about your account security.
+              </FormDescription>
+            </div>
+            <FormControl>
+              <Switch
+                :checked="value"
+                disabled
+                aria-readonly
+                @update:checked="handleChange"
+              />
+            </FormControl>
+          </FormItem>
+        </FormField>
+      </div>
+    </div>
+    <Button type="submit">
+      Submit
+    </Button>
+  </form>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TextareaDisabled.vue b/apps/www/src/lib/registry/new-york/example/TextareaDisabled.vue
new file mode 100644
index 00000000..803a2ce8
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TextareaDisabled.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." disabled />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TextareaForm.vue b/apps/www/src/lib/registry/new-york/example/TextareaForm.vue
new file mode 100644
index 00000000..5c19b78f
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TextareaForm.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/new-york/ui/form'
+import { Textarea } from '@/lib/registry/new-york/ui/textarea'
+
+const formSchema = toTypedSchema(z.object({
+  bio: z
+    .string()
+    .min(10, {
+      message: 'Bio must be at least 10 characters.',
+    })
+    .max(160, {
+      message: 'Bio must not be longer than 30 characters.',
+    }),
+}))
+
+const { handleSubmit } = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = handleSubmit((values) => {
+  console.log('Form submitted!', values)
+})
+</script>
+
+<template>
+  <form class="w-full space-y-6" @submit="onSubmit">
+    <FormField v-slot="{ componentField }" name="bio">
+      <FormItem>
+        <FormLabel>Bio</FormLabel>
+        <FormControl>
+          <Textarea
+            placeholder="Tell us a little bit about yourself"
+            class="resize-none"
+            v-bind="componentField"
+          />
+        </FormControl>
+        <FormDescription>
+          You can <span>@mention</span> other users and organizations.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+    <Button type="submit">
+      Submit
+    </Button>
+  </form>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TextareaWithButton.vue b/apps/www/src/lib/registry/new-york/example/TextareaWithButton.vue
new file mode 100644
index 00000000..772d5bfd
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TextareaWithButton.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Textarea } from '@/lib/registry/new-york/ui/textarea'
+import { Button } from '@/lib/registry/new-york/ui/button'
+</script>
+
+<template>
+  <div class="grid w-full gap-2">
+    <Textarea placeholder="Type your message here." />
+    <Button>Send message</Button>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TextareaWithLabel.vue b/apps/www/src/lib/registry/new-york/example/TextareaWithLabel.vue
new file mode 100644
index 00000000..50628fa9
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TextareaWithLabel.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Textarea } from '@/lib/registry/new-york/ui/textarea'
+import { Label } from '@/lib/registry/new-york/ui/label'
+</script>
+
+<template>
+  <div class="grid w-full gap-1.5">
+    <Label for="message">Your message</Label>
+    <Textarea id="message" placeholder="Type your message here." />
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TextareaWithText.vue b/apps/www/src/lib/registry/new-york/example/TextareaWithText.vue
new file mode 100644
index 00000000..c724dffa
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TextareaWithText.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { Textarea } from '@/lib/registry/new-york/ui/textarea'
+import { Label } from '@/lib/registry/new-york/ui/label'
+</script>
+
+<template>
+  <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">
+      Your message will be copied to the support team.
+    </p>
+  </div>
+</template>