From 4baa9e9dfaeb2c9a7f0555ed7b4151780c9e01d9 Mon Sep 17 00:00:00 2001
From: stabldev <114811070+stabldev@users.noreply.github.com>
Date: Fri, 1 May 2026 10:28:43 +0530
Subject: [PATCH 1/3] feat: add AGENTS.md file with instructions

---
 AGENTS.md | 149 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 149 insertions(+)
 create mode 100644 AGENTS.md

diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..e7c0ce2
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,149 @@
+# AGENTS.md
+
+## Project
+
+This repo is `headcn/ui`: a shadcn-inspired React UI component system built on top of `@headlessui/react`.
+
+The goal is to provide:
+
+- copyable, editable components
+- shadcn-like CLI + registry architecture
+- `components.json` support
+- Tailwind-first styling
+- accessible behavior powered by Headless UI
+
+Headless UI is unstyled and exposes state through render props/data attributes, so components in this repo must provide the visual/styling layer while preserving Headless UI accessibility behavior.
+
+## Current component coverage
+
+Implemented:
+
+- Button
+- Checkbox
+- Combobox
+- Fieldset
+- Input
+- Listbox
+- Radio Group
+- Textarea
+
+Missing / planned:
+
+- Dropdown Menu
+- Disclosure
+- Dialog
+- Popover
+- Tabs
+- Transition
+- Select
+- Switch
+
+Use Headless UI React docs as the source of truth for APIs and accessibility behavior.
+
+## Design principles
+
+1. Follow shadcn-style architecture.
+   - Components are copied into user apps, not hidden inside an opaque package.
+   - Code should be readable, editable, and idiomatic.
+   - Prefer composition over configuration-heavy APIs.
+
+2. Use Headless UI primitives.
+   - Import primitives from `@headlessui/react`.
+   - Do not replace Headless UI behavior with custom keyboard/focus logic unless absolutely necessary.
+   - Preserve accessibility semantics.
+
+3. Tailwind-first styling.
+   - Use Tailwind classes.
+   - Use `cn(...)` for className merging.
+   - Support user-provided `className`.
+   - Prefer Headless UI `data-*` attributes for state styling.
+
+4. Match existing repo conventions.
+   - Before adding a component, inspect nearby implemented components.
+   - Follow existing file names, exports, class patterns, registry format, docs format, and tests.
+
+## Component rules
+
+When creating or editing a component:
+
+- Use TypeScript.
+- Use React `forwardRef` where appropriate.
+- Export all public subcomponents.
+- Preserve native props where possible.
+- Keep APIs close to Headless UI naming unless the repo already has a different convention.
+- Add `"use client"` when the component requires client interactivity.
+- Do not over-abstract.
+- Do not introduce new dependencies unless clearly justified.
+- Do not hardcode app-specific copy, icons, routes, or business logic.
+- Use accessible defaults.
+- Ensure keyboard interaction is delegated to Headless UI.
+
+## Styling rules
+
+- Use `cn()` for conditional class names.
+- Keep default styling consistent with existing components.
+- Use `data-[state]`, `data-focus`, `data-hover`, `data-open`, `data-checked`, `data-disabled`, etc. where Headless UI exposes them.
+- Do not use Radix-specific attributes like `data-state="open"` unless this repo already maps them intentionally.
+- Avoid global CSS unless the component pattern requires it.
+- Do not add animation libraries for basic transitions.
+
+## Registry / CLI rules
+
+When adding a component, update every required registry/CLI artifact used by the repo.
+
+Likely files to inspect:
+
+- registry files
+- component metadata
+- CLI add/init logic
+- docs navigation
+- examples
+- package exports
+- tests
+
+The component should be installable through the same path as existing components.
+
+## Quality checklist
+
+Before finishing a task, verify:
+
+- Typecheck passes.
+- Lint passes.
+- Build passes.
+- Component exports are correct.
+- Registry entry exists.
+- Docs/example exists.
+- Component works with keyboard navigation.
+- `className` overrides work.
+- Disabled/error/focus/open/checked states are styled where relevant.
+- No Radix imports were added.
+
+## Commands
+
+Use the repo’s package manager. Detect it from lockfiles.
+
+Common commands to try:
+
+- `pnpm install`
+- `pnpm lint`
+- `pnpm typecheck`
+- `pnpm build`
+- `pnpm test`
+
+Do not invent scripts. Check `package.json` first.
+
+## Pull request expectations
+
+Every component PR should include:
+
+- component implementation
+- registry metadata
+- docs/example
+- export updates
+- validation notes
+
+Use concise PR summaries:
+
+- What component was added/changed
+- Which Headless UI primitives it wraps
+- Which commands passed

From f5babdaf841749ad8e38a29ab3ffa621759ce634 Mon Sep 17 00:00:00 2001
From: stabldev <114811070+stabldev@users.noreply.github.com>
Date: Fri, 1 May 2026 12:54:55 +0530
Subject: [PATCH 2/3] feat(www): switch component docs

---
 apps/www/content/docs/components/switch.mdx   | 31 +++++++++++++++++++
 apps/www/public/r/components/button-demo.json |  2 +-
 .../r/components/button-destructive.json      |  2 +-
 .../www/public/r/components/button-ghost.json |  2 +-
 apps/www/public/r/components/button-icon.json |  2 +-
 apps/www/public/r/components/button-link.json |  2 +-
 .../public/r/components/button-secondary.json |  2 +-
 .../public/r/components/button-with-icon.json |  2 +-
 apps/www/public/r/components/button.json      |  2 +-
 .../public/r/components/checkbox-demo.json    |  2 +-
 apps/www/public/r/components/checkbox.json    |  2 +-
 .../public/r/components/combobox-demo.json    |  2 +-
 apps/www/public/r/components/combobox.json    |  2 +-
 apps/www/public/r/components/description.json |  2 +-
 apps/www/public/r/components/field.json       |  2 +-
 .../public/r/components/fieldset-demo.json    |  2 +-
 apps/www/public/r/components/fieldset.json    |  2 +-
 apps/www/public/r/components/input-demo.json  |  2 +-
 .../public/r/components/input-disabled.json   |  2 +-
 .../r/components/input-with-button.json       |  2 +-
 .../public/r/components/input-with-label.json |  2 +-
 apps/www/public/r/components/input.json       |  2 +-
 apps/www/public/r/components/label.json       |  2 +-
 apps/www/public/r/components/legend.json      |  2 +-
 .../www/public/r/components/listbox-demo.json |  2 +-
 apps/www/public/r/components/listbox.json     |  2 +-
 .../public/r/components/radio-group-demo.json |  2 +-
 apps/www/public/r/components/radio-group.json |  2 +-
 apps/www/public/r/components/registry.json    | 11 +++++++
 apps/www/public/r/components/select.json      |  2 +-
 apps/www/public/r/components/switch-demo.json | 12 +++++++
 apps/www/public/r/components/switch.json      |  2 +-
 .../public/r/components/textarea-demo.json    |  2 +-
 .../r/components/textarea-disabled.json       |  2 +-
 .../r/components/textarea-with-button.json    |  2 +-
 .../r/components/textarea-with-label.json     |  2 +-
 apps/www/public/r/components/textarea.json    |  2 +-
 apps/www/public/r/components/utils.json       |  2 +-
 apps/www/registry.json                        | 11 +++++++
 apps/www/registry/__index__.tsx               | 20 ++++++++++++
 apps/www/registry/examples/switch-demo.tsx    | 26 ++++++++++++++++
 apps/www/registry/registry-examples.ts        | 11 +++++++
 apps/www/scripts/build-registry.mts           |  3 +-
 43 files changed, 159 insertions(+), 36 deletions(-)
 create mode 100644 apps/www/content/docs/components/switch.mdx
 create mode 100644 apps/www/public/r/components/switch-demo.json
 create mode 100644 apps/www/registry/examples/switch-demo.tsx

diff --git a/apps/www/content/docs/components/switch.mdx b/apps/www/content/docs/components/switch.mdx
new file mode 100644
index 0000000..15533b1
--- /dev/null
+++ b/apps/www/content/docs/components/switch.mdx
@@ -0,0 +1,31 @@
+---
+title: Switch
+description: Switches are used to toggle between two states, usually representing on and off.
+links:
+  doc: https://headlessui.com/react/switch
+  api: https://headlessui.com/react/switch#component-api
+catetory: form
+---
+
+<ComponentPreview name="switch-demo" />
+
+## Installation
+
+<CodeBlockCommand command="headcn@latest add switch" />
+
+## Usage
+
+Switches are built using the `Switch` component. You can toggle your switch by clicking directly on the component, or by pressing the spacebar while it's focused.
+
+Toggling the switch calls the `onChange` function with a negated version of the `checked` value.
+
+```tsx
+import { useState } from "react"
+import { Switch } from "@/components/ui/switch"
+
+export default function Example() {
+  const [enabled, setEnabled] = useState(false)
+
+  return <Switch checked={enabled} onChange={setEnabled} />
+}
+```
diff --git a/apps/www/public/r/components/button-demo.json b/apps/www/public/r/components/button-demo.json
index b6730d6..5c73feb 100644
--- a/apps/www/public/r/components/button-demo.json
+++ b/apps/www/public/r/components/button-demo.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/examples/button-demo.tsx",
-      "content": "import { Button } from \"@/registry/ui/button\"\n\nexport default function ButtonDemo() {\n  return <Button>Button</Button>\n}\n",
+      "content": "import { Button } from \"@/registry/ui/button\"\r\n\r\nexport default function ButtonDemo() {\r\n  return <Button>Button</Button>\r\n}\r\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/components/button-destructive.json b/apps/www/public/r/components/button-destructive.json
index 949e8d3..ca1ee3c 100644
--- a/apps/www/public/r/components/button-destructive.json
+++ b/apps/www/public/r/components/button-destructive.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/examples/button-destructive.tsx",
-      "content": "import { Button } from \"@/registry/ui/button\"\n\nexport default function ButtonDestructive() {\n  return <Button variant={\"destructive\"}>Destructive</Button>\n}\n",
+      "content": "import { Button } from \"@/registry/ui/button\"\r\n\r\nexport default function ButtonDestructive() {\r\n  return <Button variant={\"destructive\"}>Destructive</Button>\r\n}\r\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/components/button-ghost.json b/apps/www/public/r/components/button-ghost.json
index 72e2f03..fb41dff 100644
--- a/apps/www/public/r/components/button-ghost.json
+++ b/apps/www/public/r/components/button-ghost.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/examples/button-ghost.tsx",
-      "content": "import { Button } from \"@/registry/ui/button\"\n\nexport default function ButtonGhost() {\n  return <Button variant={\"ghost\"}>Ghost</Button>\n}\n",
+      "content": "import { Button } from \"@/registry/ui/button\"\r\n\r\nexport default function ButtonGhost() {\r\n  return <Button variant={\"ghost\"}>Ghost</Button>\r\n}\r\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/components/button-icon.json b/apps/www/public/r/components/button-icon.json
index f0e4538..cf90f86 100644
--- a/apps/www/public/r/components/button-icon.json
+++ b/apps/www/public/r/components/button-icon.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/examples/button-icon.tsx",
-      "content": "import { Button } from \"@/registry/ui/button\"\nimport { StarIcon } from \"@heroicons/react/16/solid\"\n\nexport default function ButtonIcon() {\n  return (\n    <Button variant={\"outline\"} size={\"icon-md\"}>\n      <StarIcon className=\"size-5\" />\n    </Button>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/ui/button\"\r\nimport { StarIcon } from \"@heroicons/react/16/solid\"\r\n\r\nexport default function ButtonIcon() {\r\n  return (\r\n    <Button variant={\"outline\"} size={\"icon-md\"}>\r\n      <StarIcon className=\"size-5\" />\r\n    </Button>\r\n  )\r\n}\r\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/components/button-link.json b/apps/www/public/r/components/button-link.json
index 9361264..a89b174 100644
--- a/apps/www/public/r/components/button-link.json
+++ b/apps/www/public/r/components/button-link.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/examples/button-link.tsx",
-      "content": "import { Button } from \"@/registry/ui/button\"\n\nexport default function ButtonLink() {\n  return <Button variant={\"link\"}>Link</Button>\n}\n",
+      "content": "import { Button } from \"@/registry/ui/button\"\r\n\r\nexport default function ButtonLink() {\r\n  return <Button variant={\"link\"}>Link</Button>\r\n}\r\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/components/button-secondary.json b/apps/www/public/r/components/button-secondary.json
index 4177ea2..52d01b7 100644
--- a/apps/www/public/r/components/button-secondary.json
+++ b/apps/www/public/r/components/button-secondary.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/examples/button-secondary.tsx",
-      "content": "import { Button } from \"@/registry/ui/button\"\n\nexport default function ButtonSecondary() {\n  return <Button variant={\"secondary\"}>Secondary</Button>\n}\n",
+      "content": "import { Button } from \"@/registry/ui/button\"\r\n\r\nexport default function ButtonSecondary() {\r\n  return <Button variant={\"secondary\"}>Secondary</Button>\r\n}\r\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/components/button-with-icon.json b/apps/www/public/r/components/button-with-icon.json
index ee28b36..7f56cc2 100644
--- a/apps/www/public/r/components/button-with-icon.json
+++ b/apps/www/public/r/components/button-with-icon.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/examples/button-with-icon.tsx",
-      "content": "import { Button } from \"@/registry/ui/button\"\nimport { CloudArrowUpIcon } from \"@heroicons/react/16/solid\"\n\nexport default function ButtonWithIcon() {\n  return (\n    <Button>\n      <CloudArrowUpIcon className=\"size-5\" /> Upload\n    </Button>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/ui/button\"\r\nimport { CloudArrowUpIcon } from \"@heroicons/react/16/solid\"\r\n\r\nexport default function ButtonWithIcon() {\r\n  return (\r\n    <Button>\r\n      <CloudArrowUpIcon className=\"size-5\" /> Upload\r\n    </Button>\r\n  )\r\n}\r\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/components/button.json b/apps/www/public/r/components/button.json
index 15809ea..4343d32 100644
--- a/apps/www/public/r/components/button.json
+++ b/apps/www/public/r/components/button.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/ui/button.tsx",
-      "content": "import {\n  Button as HeadlessButton,\n  type ButtonProps as HeadlessButtonProps,\n} from \"@headlessui/react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex shrink-0 items-center justify-center gap-1.5 rounded-md text-sm font-semibold whitespace-nowrap transition data-active:translate-y-0.5 data-disabled:pointer-events-none data-disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        primary: \"bg-primary text-primary-foreground data-hover:bg-primary/90\",\n        secondary:\n          \"bg-secondary text-secondary-foreground data-hover:bg-secondary/90\",\n        destructive:\n          \"bg-destructive text-foreground data-hover:bg-destructive/90\",\n        outline:\n          \"bg-accent/50 text-accent-foreground data-hover:bg-accent border\",\n        ghost: \"data-hover:bg-accent text-accent-foreground\",\n        link: \"text-primary underline-offset-4 data-hover:underline\",\n      },\n      size: {\n        xs: \"h-7 px-2.5 text-xs has-[>svg]:px-2\",\n        sm: \"h-8 px-3 has-[>svg]:px-2.5\",\n        md: \"h-9 px-4 has-[>svg]:px-3\",\n        lg: \"h-10 px-5 has-[>svg]:px-4\",\n        \"icon-xs\": \"size-7\",\n        \"icon-sm\": \"size-8\",\n        \"icon-md\": \"size-9\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  }\n)\n\nfunction Button({\n  children,\n  className,\n  variant,\n  size,\n  ...props\n}: HeadlessButtonProps & VariantProps<typeof buttonVariants>) {\n  return (\n    <HeadlessButton\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    >\n      {children}\n    </HeadlessButton>\n  )\n}\n\nexport { Button, buttonVariants }\n",
+      "content": "import {\r\n  Button as HeadlessButton,\r\n  type ButtonProps as HeadlessButtonProps,\r\n} from \"@headlessui/react\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst buttonVariants = cva(\r\n  \"inline-flex shrink-0 items-center justify-center gap-1.5 rounded-md text-sm font-semibold whitespace-nowrap transition data-active:translate-y-0.5 data-disabled:pointer-events-none data-disabled:opacity-50\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        primary: \"bg-primary text-primary-foreground data-hover:bg-primary/90\",\r\n        secondary:\r\n          \"bg-secondary text-secondary-foreground data-hover:bg-secondary/90\",\r\n        destructive:\r\n          \"bg-destructive text-foreground data-hover:bg-destructive/90\",\r\n        outline:\r\n          \"bg-accent/50 text-accent-foreground data-hover:bg-accent border\",\r\n        ghost: \"data-hover:bg-accent text-accent-foreground\",\r\n        link: \"text-primary underline-offset-4 data-hover:underline\",\r\n      },\r\n      size: {\r\n        xs: \"h-7 px-2.5 text-xs has-[>svg]:px-2\",\r\n        sm: \"h-8 px-3 has-[>svg]:px-2.5\",\r\n        md: \"h-9 px-4 has-[>svg]:px-3\",\r\n        lg: \"h-10 px-5 has-[>svg]:px-4\",\r\n        \"icon-xs\": \"size-7\",\r\n        \"icon-sm\": \"size-8\",\r\n        \"icon-md\": \"size-9\",\r\n        \"icon-lg\": \"size-10\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"primary\",\r\n      size: \"md\",\r\n    },\r\n  }\r\n)\r\n\r\nfunction Button({\r\n  children,\r\n  className,\r\n  variant,\r\n  size,\r\n  ...props\r\n}: HeadlessButtonProps & VariantProps<typeof buttonVariants>) {\r\n  return (\r\n    <HeadlessButton\r\n      className={cn(buttonVariants({ variant, size, className }))}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </HeadlessButton>\r\n  )\r\n}\r\n\r\nexport { Button, buttonVariants }\r\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/www/public/r/components/checkbox-demo.json b/apps/www/public/r/components/checkbox-demo.json
index b5c4b4a..5709e0d 100644
--- a/apps/www/public/r/components/checkbox-demo.json
+++ b/apps/www/public/r/components/checkbox-demo.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/examples/checkbox-demo.tsx",
-      "content": "import { Checkbox } from \"@/registry/ui/checkbox\"\nimport { Description } from \"@/registry/ui/description\"\nimport { Field } from \"@/registry/ui/field\"\nimport { Label } from \"@/registry/ui/label\"\n\nexport default function CheckboxDemo() {\n  return (\n    <div className=\"grid gap-4\">\n      <Field className=\"flex items-center gap-3\">\n        <Checkbox />\n        <Label>Accept terms and conditions</Label>\n      </Field>\n      <Field className=\"flex items-center gap-3\">\n        <Checkbox defaultChecked />\n        <div>\n          <Label>Accept terms and conditions</Label>\n          <Description>\n            This will give you early access to new features we&apos;re\n            developing.\n          </Description>\n        </div>\n      </Field>\n      <Field disabled className=\"flex items-center gap-3\">\n        <Checkbox />\n        <Label>Enable notifications</Label>\n      </Field>\n      <Field>\n        <Label className=\"bg-accent/25 has-[[data-checked]]:border-primary/25 has-[[data-checked]]:bg-primary/25 flex items-start gap-3 rounded-md border p-3 transition-colors\">\n          <Checkbox defaultChecked />\n          <div>\n            <Label>Enable notifications</Label>\n            <Description className=\"font-normal\">\n              You can enable or disable notifications at any time.\n            </Description>\n          </div>\n        </Label>\n      </Field>\n    </div>\n  )\n}\n",
+      "content": "import { Checkbox } from \"@/registry/ui/checkbox\"\r\nimport { Description } from \"@/registry/ui/description\"\r\nimport { Field } from \"@/registry/ui/field\"\r\nimport { Label } from \"@/registry/ui/label\"\r\n\r\nexport default function CheckboxDemo() {\r\n  return (\r\n    <div className=\"grid gap-4\">\r\n      <Field className=\"flex items-center gap-3\">\r\n        <Checkbox />\r\n        <Label>Accept terms and conditions</Label>\r\n      </Field>\r\n      <Field className=\"flex items-center gap-3\">\r\n        <Checkbox defaultChecked />\r\n        <div>\r\n          <Label>Accept terms and conditions</Label>\r\n          <Description>\r\n            This will give you early access to new features we&apos;re\r\n            developing.\r\n          </Description>\r\n        </div>\r\n      </Field>\r\n      <Field disabled className=\"flex items-center gap-3\">\r\n        <Checkbox />\r\n        <Label>Enable notifications</Label>\r\n      </Field>\r\n      <Field>\r\n        <Label className=\"bg-accent/25 has-[[data-checked]]:border-primary/25 has-[[data-checked]]:bg-primary/25 flex items-start gap-3 rounded-md border p-3 transition-colors\">\r\n          <Checkbox defaultChecked />\r\n          <div>\r\n            <Label>Enable notifications</Label>\r\n            <Description className=\"font-normal\">\r\n              You can enable or disable notifications at any time.\r\n            </Description>\r\n          </div>\r\n        </Label>\r\n      </Field>\r\n    </div>\r\n  )\r\n}\r\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/components/checkbox.json b/apps/www/public/r/components/checkbox.json
index 499eeca..0dbdd7d 100644
--- a/apps/www/public/r/components/checkbox.json
+++ b/apps/www/public/r/components/checkbox.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/ui/checkbox.tsx",
-      "content": "import {\n  Checkbox as HeadlessCheckbox,\n  type CheckboxProps as HeadlessCheckboxProps,\n} from \"@headlessui/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Checkbox({ className, ...props }: HeadlessCheckboxProps) {\n  return (\n    <HeadlessCheckbox\n      className={cn(\n        \"group bg-accent/50 grid size-4 shrink-0 place-items-center rounded border\",\n        \"data-checked:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <svg\n        className={cn(\n          \"stroke-primary-foreground size-[90%] translate-y-0.5 opacity-0 transition\",\n          \"group-data-checked:translate-y-0 group-data-checked:opacity-100\"\n        )}\n        viewBox=\"0 0 14 14\"\n        fill=\"none\"\n      >\n        <path\n          d=\"M3 8L6 11L11 3.5\"\n          strokeWidth={2}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </HeadlessCheckbox>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "import {\r\n  Checkbox as HeadlessCheckbox,\r\n  type CheckboxProps as HeadlessCheckboxProps,\r\n} from \"@headlessui/react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Checkbox({ className, ...props }: HeadlessCheckboxProps) {\r\n  return (\r\n    <HeadlessCheckbox\r\n      className={cn(\r\n        \"group bg-accent/50 grid size-4 shrink-0 place-items-center rounded border\",\r\n        \"data-checked:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <svg\r\n        className={cn(\r\n          \"stroke-primary-foreground size-[90%] translate-y-0.5 opacity-0 transition\",\r\n          \"group-data-checked:translate-y-0 group-data-checked:opacity-100\"\r\n        )}\r\n        viewBox=\"0 0 14 14\"\r\n        fill=\"none\"\r\n      >\r\n        <path\r\n          d=\"M3 8L6 11L11 3.5\"\r\n          strokeWidth={2}\r\n          strokeLinecap=\"round\"\r\n          strokeLinejoin=\"round\"\r\n        />\r\n      </svg>\r\n    </HeadlessCheckbox>\r\n  )\r\n}\r\n\r\nexport { Checkbox }\r\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/www/public/r/components/combobox-demo.json b/apps/www/public/r/components/combobox-demo.json
index 32cf013..2dc258d 100644
--- a/apps/www/public/r/components/combobox-demo.json
+++ b/apps/www/public/r/components/combobox-demo.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/examples/combobox-demo.tsx",
-      "content": "\"use client\"\n\nimport {\n  Combobox,\n  ComboboxButton,\n  ComboboxInput,\n  ComboboxOption,\n  ComboboxOptions,\n} from \"@/registry/ui/combobox\"\nimport { CheckIcon, ChevronDownIcon } from \"@heroicons/react/20/solid\"\nimport { useState } from \"react\"\n\ninterface Person {\n  id: number\n  name: string\n}\n\nconst people: Person[] = [\n  { id: 1, name: \"Tom Cook\" },\n  { id: 2, name: \"Wade Cooper\" },\n  { id: 3, name: \"Tanya Fox\" },\n]\n\nexport default function ComboboxDemo() {\n  const [query, setQuery] = useState(\"\")\n  const [selected, setSelected] = useState<number>(people[0].id)\n\n  const selectedPerson = people.find((p) => p.id === selected)\n  const filteredPeople =\n    query === \"\"\n      ? people\n      : people.filter((person) => {\n          return person.name.toLowerCase().includes(query.toLowerCase())\n        })\n\n  return (\n    <Combobox<Person>\n      value={selectedPerson}\n      onChange={(value) => value && setSelected(value.id)}\n      onClose={() => setQuery(\"\")}\n      __demoMode\n    >\n      <div className=\"relative\">\n        <ComboboxInput<Person>\n          displayValue={(person) => person.name}\n          onChange={(event) => setQuery(event.target.value)}\n        />\n        <ComboboxButton>\n          <ChevronDownIcon className=\"fill-muted-foreground group-data-hover:fill-foreground size-4\" />\n        </ComboboxButton>\n      </div>\n\n      <ComboboxOptions anchor=\"bottom\" transition>\n        {filteredPeople.map((person) => (\n          <ComboboxOption<Person> key={person.id} value={person}>\n            <div className=\"text-foreground text-sm/6\">{person.name}</div>\n            <CheckIcon className=\"fill-foreground invisible size-4 group-data-selected:visible\" />\n          </ComboboxOption>\n        ))}\n      </ComboboxOptions>\n    </Combobox>\n  )\n}\n",
+      "content": "\"use client\"\r\n\r\nimport {\r\n  Combobox,\r\n  ComboboxButton,\r\n  ComboboxInput,\r\n  ComboboxOption,\r\n  ComboboxOptions,\r\n} from \"@/registry/ui/combobox\"\r\nimport { CheckIcon, ChevronDownIcon } from \"@heroicons/react/20/solid\"\r\nimport { useState } from \"react\"\r\n\r\ninterface Person {\r\n  id: number\r\n  name: string\r\n}\r\n\r\nconst people: Person[] = [\r\n  { id: 1, name: \"Tom Cook\" },\r\n  { id: 2, name: \"Wade Cooper\" },\r\n  { id: 3, name: \"Tanya Fox\" },\r\n]\r\n\r\nexport default function ComboboxDemo() {\r\n  const [query, setQuery] = useState(\"\")\r\n  const [selected, setSelected] = useState<number>(people[0].id)\r\n\r\n  const selectedPerson = people.find((p) => p.id === selected)\r\n  const filteredPeople =\r\n    query === \"\"\r\n      ? people\r\n      : people.filter((person) => {\r\n          return person.name.toLowerCase().includes(query.toLowerCase())\r\n        })\r\n\r\n  return (\r\n    <Combobox<Person>\r\n      value={selectedPerson}\r\n      onChange={(value) => value && setSelected(value.id)}\r\n      onClose={() => setQuery(\"\")}\r\n      __demoMode\r\n    >\r\n      <div className=\"relative\">\r\n        <ComboboxInput<Person>\r\n          displayValue={(person) => person.name}\r\n          onChange={(event) => setQuery(event.target.value)}\r\n        />\r\n        <ComboboxButton>\r\n          <ChevronDownIcon className=\"fill-muted-foreground group-data-hover:fill-foreground size-4\" />\r\n        </ComboboxButton>\r\n      </div>\r\n\r\n      <ComboboxOptions anchor=\"bottom\" transition>\r\n        {filteredPeople.map((person) => (\r\n          <ComboboxOption<Person> key={person.id} value={person}>\r\n            <div className=\"text-foreground text-sm/6\">{person.name}</div>\r\n            <CheckIcon className=\"fill-foreground invisible size-4 group-data-selected:visible\" />\r\n          </ComboboxOption>\r\n        ))}\r\n      </ComboboxOptions>\r\n    </Combobox>\r\n  )\r\n}\r\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/components/combobox.json b/apps/www/public/r/components/combobox.json
index 7bb0c26..d903c36 100644
--- a/apps/www/public/r/components/combobox.json
+++ b/apps/www/public/r/components/combobox.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/ui/combobox.tsx",
-      "content": "import {\n  Combobox as HeadlessCombobox,\n  ComboboxButton as HeadlessComboboxButton,\n  ComboboxInput as HeadlessComboboxInput,\n  ComboboxOption as HeadlessComboboxOption,\n  ComboboxOptions as HeadlessComboboxOptions,\n  type ComboboxButtonProps as HeadlessComboboxButtonProps,\n  type ComboboxInputProps as HeadlessComboboxInputProps,\n  type ComboboxOptionProps as HeadlessComboboxOptionProps,\n  type ComboboxOptionsProps as HeadlessComboboxOptionsProps,\n  type ComboboxProps as HeadlessComboboxProps,\n} from \"@headlessui/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Combobox<\n  TValue = Array<unknown>,\n  TMultiple extends boolean | undefined = false,\n>(props: HeadlessComboboxProps<TValue, TMultiple>) {\n  return <HeadlessCombobox {...props} />\n}\n\nfunction ComboboxButton({ className, ...props }: HeadlessComboboxButtonProps) {\n  return (\n    <HeadlessComboboxButton\n      className={cn(\"group absolute inset-y-0 right-0 px-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxInput<TType = string>({\n  className,\n  ...props\n}: HeadlessComboboxInputProps<typeof HeadlessComboboxInput, TType>) {\n  return (\n    <HeadlessComboboxInput\n      className={cn(\n        \"bg-accent/50 text-accent-foreground h-9 w-full rounded-md border px-3 text-sm font-medium\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxOptions({\n  className,\n  ...props\n}: HeadlessComboboxOptionsProps) {\n  return (\n    <HeadlessComboboxOptions\n      className={cn(\n        \"bg-accent/50 w-(--input-width) rounded-lg border p-1 transition [--anchor-gap:--spacing(2)]\",\n        \"empty:invisible data-leave:data-closed:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxOption<TType = string>({\n  className,\n  ...props\n}: HeadlessComboboxOptionProps<typeof HeadlessComboboxOption, TType>) {\n  return (\n    <HeadlessComboboxOption\n      className={cn(\n        \"group text-accent-foreground flex h-9 items-center justify-between gap-2 rounded-md px-3 text-sm select-none\",\n        \"data-focus:bg-accent-foreground/10 data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Combobox,\n  ComboboxButton,\n  ComboboxInput,\n  ComboboxOption,\n  ComboboxOptions,\n}\n",
+      "content": "import {\r\n  Combobox as HeadlessCombobox,\r\n  ComboboxButton as HeadlessComboboxButton,\r\n  ComboboxInput as HeadlessComboboxInput,\r\n  ComboboxOption as HeadlessComboboxOption,\r\n  ComboboxOptions as HeadlessComboboxOptions,\r\n  type ComboboxButtonProps as HeadlessComboboxButtonProps,\r\n  type ComboboxInputProps as HeadlessComboboxInputProps,\r\n  type ComboboxOptionProps as HeadlessComboboxOptionProps,\r\n  type ComboboxOptionsProps as HeadlessComboboxOptionsProps,\r\n  type ComboboxProps as HeadlessComboboxProps,\r\n} from \"@headlessui/react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Combobox<\r\n  TValue = Array<unknown>,\r\n  TMultiple extends boolean | undefined = false,\r\n>(props: HeadlessComboboxProps<TValue, TMultiple>) {\r\n  return <HeadlessCombobox {...props} />\r\n}\r\n\r\nfunction ComboboxButton({ className, ...props }: HeadlessComboboxButtonProps) {\r\n  return (\r\n    <HeadlessComboboxButton\r\n      className={cn(\"group absolute inset-y-0 right-0 px-3\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction ComboboxInput<TType = string>({\r\n  className,\r\n  ...props\r\n}: HeadlessComboboxInputProps<typeof HeadlessComboboxInput, TType>) {\r\n  return (\r\n    <HeadlessComboboxInput\r\n      className={cn(\r\n        \"bg-accent/50 text-accent-foreground h-9 w-full rounded-md border px-3 text-sm font-medium\",\r\n        \"data-disabled:pointer-events-none data-disabled:opacity-50\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction ComboboxOptions({\r\n  className,\r\n  ...props\r\n}: HeadlessComboboxOptionsProps) {\r\n  return (\r\n    <HeadlessComboboxOptions\r\n      className={cn(\r\n        \"bg-accent/50 w-(--input-width) rounded-lg border p-1 transition [--anchor-gap:--spacing(2)]\",\r\n        \"empty:invisible data-leave:data-closed:opacity-0\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction ComboboxOption<TType = string>({\r\n  className,\r\n  ...props\r\n}: HeadlessComboboxOptionProps<typeof HeadlessComboboxOption, TType>) {\r\n  return (\r\n    <HeadlessComboboxOption\r\n      className={cn(\r\n        \"group text-accent-foreground flex h-9 items-center justify-between gap-2 rounded-md px-3 text-sm select-none\",\r\n        \"data-focus:bg-accent-foreground/10 data-disabled:opacity-50\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nexport {\r\n  Combobox,\r\n  ComboboxButton,\r\n  ComboboxInput,\r\n  ComboboxOption,\r\n  ComboboxOptions,\r\n}\r\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/www/public/r/components/description.json b/apps/www/public/r/components/description.json
index dea55ab..96466b0 100644
--- a/apps/www/public/r/components/description.json
+++ b/apps/www/public/r/components/description.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/ui/description.tsx",
-      "content": "import {\n  Description as HeadlessDescription,\n  type DescriptionProps as HeadlessDescriptionProps,\n} from \"@headlessui/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Description({ className, ...props }: HeadlessDescriptionProps) {\n  return (\n    <HeadlessDescription\n      className={cn(\n        \"text-muted-foreground text-sm\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Description }\n",
+      "content": "import {\r\n  Description as HeadlessDescription,\r\n  type DescriptionProps as HeadlessDescriptionProps,\r\n} from \"@headlessui/react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Description({ className, ...props }: HeadlessDescriptionProps) {\r\n  return (\r\n    <HeadlessDescription\r\n      className={cn(\r\n        \"text-muted-foreground text-sm\",\r\n        \"data-disabled:pointer-events-none data-disabled:opacity-50\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nexport { Description }\r\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/www/public/r/components/field.json b/apps/www/public/r/components/field.json
index d4ae0cc..99466ec 100644
--- a/apps/www/public/r/components/field.json
+++ b/apps/www/public/r/components/field.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/ui/field.tsx",
-      "content": "import {\n  Field as HeadlessField,\n  type FieldProps as HeadlessFieldProps,\n} from \"@headlessui/react\"\n\nfunction Field(props: HeadlessFieldProps) {\n  return <HeadlessField {...props} />\n}\n\nexport { Field }\n",
+      "content": "import {\r\n  Field as HeadlessField,\r\n  type FieldProps as HeadlessFieldProps,\r\n} from \"@headlessui/react\"\r\n\r\nfunction Field(props: HeadlessFieldProps) {\r\n  return <HeadlessField {...props} />\r\n}\r\n\r\nexport { Field }\r\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/www/public/r/components/fieldset-demo.json b/apps/www/public/r/components/fieldset-demo.json
index 54f32b3..f6769ff 100644
--- a/apps/www/public/r/components/fieldset-demo.json
+++ b/apps/www/public/r/components/fieldset-demo.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/examples/fieldset-demo.tsx",
-      "content": "import { Description } from \"@/registry/ui/description\"\nimport { Field } from \"@/registry/ui/field\"\nimport { Fieldset } from \"@/registry/ui/fieldset\"\nimport { Input } from \"@/registry/ui/input\"\nimport { Label } from \"@/registry/ui/label\"\nimport { Legend } from \"@/registry/ui/legend\"\nimport { Textarea } from \"@/registry/ui/textarea\"\n\nexport default function FieldsetDemo() {\n  return (\n    <Fieldset className=\"w-full max-w-100 space-y-4\">\n      <Legend>Shipping details</Legend>\n      <Field className=\"flex flex-col gap-2\">\n        <Label>Street address</Label>\n        <Input placeholder=\"Street address\" />\n      </Field>\n      <Field className=\"flex flex-col gap-1\">\n        <Label>Delivery notes</Label>\n        <Description>\n          If you have a tiger, we&apos;d like to know about it.\n        </Description>\n        <Textarea placeholder=\"Delivery notes.\" className=\"mt-2\" />\n      </Field>\n    </Fieldset>\n  )\n}\n",
+      "content": "import { Description } from \"@/registry/ui/description\"\r\nimport { Field } from \"@/registry/ui/field\"\r\nimport { Fieldset } from \"@/registry/ui/fieldset\"\r\nimport { Input } from \"@/registry/ui/input\"\r\nimport { Label } from \"@/registry/ui/label\"\r\nimport { Legend } from \"@/registry/ui/legend\"\r\nimport { Textarea } from \"@/registry/ui/textarea\"\r\n\r\nexport default function FieldsetDemo() {\r\n  return (\r\n    <Fieldset className=\"w-full max-w-100 space-y-4\">\r\n      <Legend>Shipping details</Legend>\r\n      <Field className=\"flex flex-col gap-2\">\r\n        <Label>Street address</Label>\r\n        <Input placeholder=\"Street address\" />\r\n      </Field>\r\n      <Field className=\"flex flex-col gap-1\">\r\n        <Label>Delivery notes</Label>\r\n        <Description>\r\n          If you have a tiger, we&apos;d like to know about it.\r\n        </Description>\r\n        <Textarea placeholder=\"Delivery notes.\" className=\"mt-2\" />\r\n      </Field>\r\n    </Fieldset>\r\n  )\r\n}\r\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/components/fieldset.json b/apps/www/public/r/components/fieldset.json
index f25a0d6..9c6a941 100644
--- a/apps/www/public/r/components/fieldset.json
+++ b/apps/www/public/r/components/fieldset.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/ui/fieldset.tsx",
-      "content": "import {\n  Fieldset as HeadlessFieldset,\n  type FieldsetProps as HeadlessFieldsetProps,\n} from \"@headlessui/react\"\n\nfunction Fieldset(props: HeadlessFieldsetProps) {\n  return <HeadlessFieldset {...props} />\n}\n\nexport { Fieldset }\n",
+      "content": "import {\r\n  Fieldset as HeadlessFieldset,\r\n  type FieldsetProps as HeadlessFieldsetProps,\r\n} from \"@headlessui/react\"\r\n\r\nfunction Fieldset(props: HeadlessFieldsetProps) {\r\n  return <HeadlessFieldset {...props} />\r\n}\r\n\r\nexport { Fieldset }\r\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/www/public/r/components/input-demo.json b/apps/www/public/r/components/input-demo.json
index 9fb05c9..c2c8d15 100644
--- a/apps/www/public/r/components/input-demo.json
+++ b/apps/www/public/r/components/input-demo.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/examples/input-demo.tsx",
-      "content": "import { Input } from \"@/registry/ui/input\"\n\nexport default function InputDemo() {\n  return <Input type=\"email\" placeholder=\"Email\" className=\"max-w-75\" />\n}\n",
+      "content": "import { Input } from \"@/registry/ui/input\"\r\n\r\nexport default function InputDemo() {\r\n  return <Input type=\"email\" placeholder=\"Email\" className=\"max-w-75\" />\r\n}\r\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/components/input-disabled.json b/apps/www/public/r/components/input-disabled.json
index 76dabe9..d460e8c 100644
--- a/apps/www/public/r/components/input-disabled.json
+++ b/apps/www/public/r/components/input-disabled.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/examples/input-disabled.tsx",
-      "content": "import { Input } from \"@/registry/ui/input\"\n\nexport default function InputDisabled() {\n  return (\n    <Input type=\"email\" placeholder=\"Email\" className=\"max-w-75\" disabled />\n  )\n}\n",
+      "content": "import { Input } from \"@/registry/ui/input\"\r\n\r\nexport default function InputDisabled() {\r\n  return (\r\n    <Input type=\"email\" placeholder=\"Email\" className=\"max-w-75\" disabled />\r\n  )\r\n}\r\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/components/input-with-button.json b/apps/www/public/r/components/input-with-button.json
index 4f16fb2..1bde54d 100644
--- a/apps/www/public/r/components/input-with-button.json
+++ b/apps/www/public/r/components/input-with-button.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/examples/input-with-button.tsx",
-      "content": "import { Button } from \"@/registry/ui/button\"\nimport { Input } from \"@/registry/ui/input\"\n\nexport default function InputWithButton() {\n  return (\n    <div className=\"flex w-full max-w-100 gap-2\">\n      <Input type=\"email\" placeholder=\"Email\" />\n      <Button type=\"submit\" variant=\"outline\">\n        Subscribe\n      </Button>\n    </div>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/ui/button\"\r\nimport { Input } from \"@/registry/ui/input\"\r\n\r\nexport default function InputWithButton() {\r\n  return (\r\n    <div className=\"flex w-full max-w-100 gap-2\">\r\n      <Input type=\"email\" placeholder=\"Email\" />\r\n      <Button type=\"submit\" variant=\"outline\">\r\n        Subscribe\r\n      </Button>\r\n    </div>\r\n  )\r\n}\r\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/components/input-with-label.json b/apps/www/public/r/components/input-with-label.json
index cbb309b..2334b5d 100644
--- a/apps/www/public/r/components/input-with-label.json
+++ b/apps/www/public/r/components/input-with-label.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/examples/input-with-label.tsx",
-      "content": "import { Field } from \"@/registry/ui/field\"\nimport { Input } from \"@/registry/ui/input\"\nimport { Label } from \"@/registry/ui/label\"\n\nexport default function InputWithLabel() {\n  return (\n    <Field className=\"flex w-full max-w-75 flex-col gap-2\">\n      <Label>Email</Label>\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Field>\n  )\n}\n",
+      "content": "import { Field } from \"@/registry/ui/field\"\r\nimport { Input } from \"@/registry/ui/input\"\r\nimport { Label } from \"@/registry/ui/label\"\r\n\r\nexport default function InputWithLabel() {\r\n  return (\r\n    <Field className=\"flex w-full max-w-75 flex-col gap-2\">\r\n      <Label>Email</Label>\r\n      <Input type=\"email\" placeholder=\"Email\" />\r\n    </Field>\r\n  )\r\n}\r\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/components/input.json b/apps/www/public/r/components/input.json
index 7a5c8ac..01f82b7 100644
--- a/apps/www/public/r/components/input.json
+++ b/apps/www/public/r/components/input.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/ui/input.tsx",
-      "content": "import {\n  Input as HeadlessInput,\n  type InputProps as HeadlessInputProps,\n} from \"@headlessui/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({ className, ...props }: HeadlessInputProps) {\n  return (\n    <HeadlessInput\n      className={cn(\n        \"bg-accent/50 text-accent-foreground h-9 w-full rounded-md border px-3 text-sm\",\n        \"data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "content": "import {\r\n  Input as HeadlessInput,\r\n  type InputProps as HeadlessInputProps,\r\n} from \"@headlessui/react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Input({ className, ...props }: HeadlessInputProps) {\r\n  return (\r\n    <HeadlessInput\r\n      className={cn(\r\n        \"bg-accent/50 text-accent-foreground h-9 w-full rounded-md border px-3 text-sm\",\r\n        \"data-disabled:opacity-50\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nexport { Input }\r\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/www/public/r/components/label.json b/apps/www/public/r/components/label.json
index a91d4c4..3da9070 100644
--- a/apps/www/public/r/components/label.json
+++ b/apps/www/public/r/components/label.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/ui/label.tsx",
-      "content": "import {\n  Label as HeadlessLabel,\n  type LabelProps as HeadlessLabelProps,\n} from \"@headlessui/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Label({ className, ...props }: HeadlessLabelProps) {\n  return (\n    <HeadlessLabel\n      className={cn(\n        \"text-foreground text-sm font-medium\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n",
+      "content": "import {\r\n  Label as HeadlessLabel,\r\n  type LabelProps as HeadlessLabelProps,\r\n} from \"@headlessui/react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Label({ className, ...props }: HeadlessLabelProps) {\r\n  return (\r\n    <HeadlessLabel\r\n      className={cn(\r\n        \"text-foreground text-sm font-medium\",\r\n        \"data-disabled:pointer-events-none data-disabled:opacity-50\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nexport { Label }\r\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/www/public/r/components/legend.json b/apps/www/public/r/components/legend.json
index 7f66bbb..2991b26 100644
--- a/apps/www/public/r/components/legend.json
+++ b/apps/www/public/r/components/legend.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/ui/legend.tsx",
-      "content": "import {\n  Legend as HeadlessLegend,\n  type LegendProps as HeadlessLegendProps,\n} from \"@headlessui/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Legend({ className, ...props }: HeadlessLegendProps) {\n  return (\n    <HeadlessLegend\n      className={cn(\"text-foreground font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Legend }\n",
+      "content": "import {\r\n  Legend as HeadlessLegend,\r\n  type LegendProps as HeadlessLegendProps,\r\n} from \"@headlessui/react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Legend({ className, ...props }: HeadlessLegendProps) {\r\n  return (\r\n    <HeadlessLegend\r\n      className={cn(\"text-foreground font-semibold\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nexport { Legend }\r\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/www/public/r/components/listbox-demo.json b/apps/www/public/r/components/listbox-demo.json
index 5254181..b79cdfd 100644
--- a/apps/www/public/r/components/listbox-demo.json
+++ b/apps/www/public/r/components/listbox-demo.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/examples/listbox-demo.tsx",
-      "content": "\"use client\"\n\nimport {\n  Listbox,\n  ListboxButton,\n  ListboxOption,\n  ListboxOptions,\n} from \"@/registry/ui/listbox\"\nimport { CheckIcon, ChevronDownIcon } from \"@heroicons/react/20/solid\"\nimport { useState } from \"react\"\n\ninterface Person {\n  id: number\n  name: string\n}\n\nconst people: Person[] = [\n  { id: 1, name: \"Tom Cook\" },\n  { id: 2, name: \"Wade Cooper\" },\n  { id: 3, name: \"Tanya Fox\" },\n]\n\nexport default function ListboxDemo() {\n  const [selected, setSelected] = useState<number>(people[0].id)\n  const selectedPerson = people.find((p) => p.id === selected)\n\n  return (\n    <Listbox<Person>\n      value={selectedPerson}\n      onChange={(value) => value && setSelected(value.id)}\n      __demoMode\n    >\n      <ListboxButton className=\"max-w-75\">\n        {selectedPerson?.name}\n        <ChevronDownIcon className=\"fill-muted-foreground group-data-hover:fill-foreground size-4\" />\n      </ListboxButton>\n\n      <ListboxOptions anchor=\"bottom\" transition>\n        {people.map((person) => (\n          <ListboxOption<Person> key={person.id} value={person}>\n            <div className=\"text-foreground text-sm/6\">{person.name}</div>\n            <CheckIcon className=\"fill-foreground invisible size-4 group-data-selected:visible\" />\n          </ListboxOption>\n        ))}\n      </ListboxOptions>\n    </Listbox>\n  )\n}\n",
+      "content": "\"use client\"\r\n\r\nimport {\r\n  Listbox,\r\n  ListboxButton,\r\n  ListboxOption,\r\n  ListboxOptions,\r\n} from \"@/registry/ui/listbox\"\r\nimport { CheckIcon, ChevronDownIcon } from \"@heroicons/react/20/solid\"\r\nimport { useState } from \"react\"\r\n\r\ninterface Person {\r\n  id: number\r\n  name: string\r\n}\r\n\r\nconst people: Person[] = [\r\n  { id: 1, name: \"Tom Cook\" },\r\n  { id: 2, name: \"Wade Cooper\" },\r\n  { id: 3, name: \"Tanya Fox\" },\r\n]\r\n\r\nexport default function ListboxDemo() {\r\n  const [selected, setSelected] = useState<number>(people[0].id)\r\n  const selectedPerson = people.find((p) => p.id === selected)\r\n\r\n  return (\r\n    <Listbox<Person>\r\n      value={selectedPerson}\r\n      onChange={(value) => value && setSelected(value.id)}\r\n      __demoMode\r\n    >\r\n      <ListboxButton className=\"max-w-75\">\r\n        {selectedPerson?.name}\r\n        <ChevronDownIcon className=\"fill-muted-foreground group-data-hover:fill-foreground size-4\" />\r\n      </ListboxButton>\r\n\r\n      <ListboxOptions anchor=\"bottom\" transition>\r\n        {people.map((person) => (\r\n          <ListboxOption<Person> key={person.id} value={person}>\r\n            <div className=\"text-foreground text-sm/6\">{person.name}</div>\r\n            <CheckIcon className=\"fill-foreground invisible size-4 group-data-selected:visible\" />\r\n          </ListboxOption>\r\n        ))}\r\n      </ListboxOptions>\r\n    </Listbox>\r\n  )\r\n}\r\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/components/listbox.json b/apps/www/public/r/components/listbox.json
index 93d3088..cd69d9f 100644
--- a/apps/www/public/r/components/listbox.json
+++ b/apps/www/public/r/components/listbox.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/ui/listbox.tsx",
-      "content": "import {\n  Listbox as HeadlessListbox,\n  ListboxButton as HeadlessListboxButton,\n  ListboxOption as HeadlessListboxOption,\n  ListboxOptions as HeadlessListboxOptions,\n  type ListboxButtonProps as HeadlessListboxButtonProps,\n  type ListboxOptionProps as HeadlessListboxOptionProps,\n  type ListboxOptionsProps as HeadlessListboxOptionsProps,\n  type ListboxProps as HeadlessListboxProps,\n} from \"@headlessui/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Listbox<TType = string>(\n  props: HeadlessListboxProps<typeof HeadlessListbox, TType>\n) {\n  return <HeadlessListbox {...props} />\n}\n\nfunction ListboxButton({ className, ...props }: HeadlessListboxButtonProps) {\n  return (\n    <HeadlessListboxButton\n      className={cn(\n        \"bg-accent/50 text-accent-foreground relative flex h-9 w-full items-center justify-between rounded-md border px-3 text-left text-sm font-medium\",\n        \"data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ListboxOption<TType = string>({\n  className,\n  ...props\n}: HeadlessListboxOptionProps<typeof HeadlessListboxOption, TType>) {\n  return (\n    <HeadlessListboxOption\n      className={cn(\n        \"group text-accent-foreground flex h-9 items-center justify-between gap-2 rounded-md px-3 text-sm select-none\",\n        \"data-focus:bg-accent-foreground/10 data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ListboxOptions({ className, ...props }: HeadlessListboxOptionsProps) {\n  return (\n    <HeadlessListboxOptions\n      className={cn(\n        \"bg-accent/50 w-(--button-width) rounded-lg border p-1 transition [--anchor-gap:--spacing(2)]\",\n        \"empty:invisible focus:outline-none! data-leave:data-closed:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Listbox, ListboxButton, ListboxOption, ListboxOptions }\n",
+      "content": "import {\r\n  Listbox as HeadlessListbox,\r\n  ListboxButton as HeadlessListboxButton,\r\n  ListboxOption as HeadlessListboxOption,\r\n  ListboxOptions as HeadlessListboxOptions,\r\n  type ListboxButtonProps as HeadlessListboxButtonProps,\r\n  type ListboxOptionProps as HeadlessListboxOptionProps,\r\n  type ListboxOptionsProps as HeadlessListboxOptionsProps,\r\n  type ListboxProps as HeadlessListboxProps,\r\n} from \"@headlessui/react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Listbox<TType = string>(\r\n  props: HeadlessListboxProps<typeof HeadlessListbox, TType>\r\n) {\r\n  return <HeadlessListbox {...props} />\r\n}\r\n\r\nfunction ListboxButton({ className, ...props }: HeadlessListboxButtonProps) {\r\n  return (\r\n    <HeadlessListboxButton\r\n      className={cn(\r\n        \"bg-accent/50 text-accent-foreground relative flex h-9 w-full items-center justify-between rounded-md border px-3 text-left text-sm font-medium\",\r\n        \"data-disabled:opacity-50\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction ListboxOption<TType = string>({\r\n  className,\r\n  ...props\r\n}: HeadlessListboxOptionProps<typeof HeadlessListboxOption, TType>) {\r\n  return (\r\n    <HeadlessListboxOption\r\n      className={cn(\r\n        \"group text-accent-foreground flex h-9 items-center justify-between gap-2 rounded-md px-3 text-sm select-none\",\r\n        \"data-focus:bg-accent-foreground/10 data-disabled:opacity-50\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction ListboxOptions({ className, ...props }: HeadlessListboxOptionsProps) {\r\n  return (\r\n    <HeadlessListboxOptions\r\n      className={cn(\r\n        \"bg-accent/50 w-(--button-width) rounded-lg border p-1 transition [--anchor-gap:--spacing(2)]\",\r\n        \"empty:invisible focus:outline-none! data-leave:data-closed:opacity-0\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nexport { Listbox, ListboxButton, ListboxOption, ListboxOptions }\r\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/www/public/r/components/radio-group-demo.json b/apps/www/public/r/components/radio-group-demo.json
index 889bc76..1b7eb70 100644
--- a/apps/www/public/r/components/radio-group-demo.json
+++ b/apps/www/public/r/components/radio-group-demo.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/examples/radio-group-demo.tsx",
-      "content": "\"use client\"\n\nimport { Radio, RadioGroup } from \"@/registry/ui/radio-group\"\nimport { CheckCircleIcon } from \"@heroicons/react/24/solid\"\nimport { useState } from \"react\"\n\ninterface Plan {\n  name: string\n  ram: string\n  cpus: string\n}\n\nconst plans: Plan[] = [\n  { name: \"Startup\", ram: \"12GB\", cpus: \"6 CPUs\" },\n  { name: \"Business\", ram: \"16GB\", cpus: \"8 CPUs\" },\n  { name: \"Enterprise\", ram: \"32GB\", cpus: \"12 CPUs\" },\n]\n\nexport default function RadioGroupDemo() {\n  const [selected, setSelected] = useState(plans[0])\n\n  return (\n    <RadioGroup<Plan>\n      by=\"name\"\n      value={selected}\n      onChange={setSelected}\n      aria-label=\"Server size\"\n      className=\"w-full max-w-75\"\n    >\n      {plans.map((plan) => (\n        <Radio\n          key={plan.name}\n          value={plan}\n          className=\"data-checked:bg-accent flex cursor-pointer rounded-md p-3 transition\"\n        >\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"flex flex-col gap-1\">\n              <p className=\"text-foreground text-sm font-semibold\">\n                {plan.name}\n              </p>\n              <div className=\"flex gap-1.5 text-xs\">\n                <div>{plan.ram}</div>\n                <div aria-hidden=\"true\">&middot;</div>\n                <div>{plan.cpus}</div>\n              </div>\n            </div>\n            <CheckCircleIcon className=\"size-5 opacity-0 transition group-data-checked:opacity-100\" />\n          </div>\n        </Radio>\n      ))}\n    </RadioGroup>\n  )\n}\n",
+      "content": "\"use client\"\r\n\r\nimport { Radio, RadioGroup } from \"@/registry/ui/radio-group\"\r\nimport { CheckCircleIcon } from \"@heroicons/react/24/solid\"\r\nimport { useState } from \"react\"\r\n\r\ninterface Plan {\r\n  name: string\r\n  ram: string\r\n  cpus: string\r\n}\r\n\r\nconst plans: Plan[] = [\r\n  { name: \"Startup\", ram: \"12GB\", cpus: \"6 CPUs\" },\r\n  { name: \"Business\", ram: \"16GB\", cpus: \"8 CPUs\" },\r\n  { name: \"Enterprise\", ram: \"32GB\", cpus: \"12 CPUs\" },\r\n]\r\n\r\nexport default function RadioGroupDemo() {\r\n  const [selected, setSelected] = useState(plans[0])\r\n\r\n  return (\r\n    <RadioGroup<Plan>\r\n      by=\"name\"\r\n      value={selected}\r\n      onChange={setSelected}\r\n      aria-label=\"Server size\"\r\n      className=\"w-full max-w-75\"\r\n    >\r\n      {plans.map((plan) => (\r\n        <Radio\r\n          key={plan.name}\r\n          value={plan}\r\n          className=\"data-checked:bg-accent flex cursor-pointer rounded-md p-3 transition\"\r\n        >\r\n          <div className=\"flex w-full items-center justify-between\">\r\n            <div className=\"flex flex-col gap-1\">\r\n              <p className=\"text-foreground text-sm font-semibold\">\r\n                {plan.name}\r\n              </p>\r\n              <div className=\"flex gap-1.5 text-xs\">\r\n                <div>{plan.ram}</div>\r\n                <div aria-hidden=\"true\">&middot;</div>\r\n                <div>{plan.cpus}</div>\r\n              </div>\r\n            </div>\r\n            <CheckCircleIcon className=\"size-5 opacity-0 transition group-data-checked:opacity-100\" />\r\n          </div>\r\n        </Radio>\r\n      ))}\r\n    </RadioGroup>\r\n  )\r\n}\r\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/components/radio-group.json b/apps/www/public/r/components/radio-group.json
index b8363c8..2441244 100644
--- a/apps/www/public/r/components/radio-group.json
+++ b/apps/www/public/r/components/radio-group.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/ui/radio-group.tsx",
-      "content": "import {\n  Radio as HeadlessRadio,\n  RadioGroup as HeadlessRadioGroup,\n  type RadioGroupProps as HeadlessRadioGroupProps,\n  type RadioProps as HeadlessRadioProps,\n} from \"@headlessui/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Radio<TType = string>({\n  className,\n  ...props\n}: HeadlessRadioProps<typeof HeadlessRadio, TType>) {\n  return (\n    <HeadlessRadio\n      className={cn(\n        \"group bg-accent/50 grid place-items-center rounded-full border p-1\",\n        \"data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroup<TType = string>({\n  className,\n  ...props\n}: HeadlessRadioGroupProps<typeof HeadlessRadioGroup, TType>) {\n  return (\n    <HeadlessRadioGroup className={cn(\"grid gap-3\", className)} {...props} />\n  )\n}\n\nexport { Radio, RadioGroup }\n",
+      "content": "import {\r\n  Radio as HeadlessRadio,\r\n  RadioGroup as HeadlessRadioGroup,\r\n  type RadioGroupProps as HeadlessRadioGroupProps,\r\n  type RadioProps as HeadlessRadioProps,\r\n} from \"@headlessui/react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Radio<TType = string>({\r\n  className,\r\n  ...props\r\n}: HeadlessRadioProps<typeof HeadlessRadio, TType>) {\r\n  return (\r\n    <HeadlessRadio\r\n      className={cn(\r\n        \"group bg-accent/50 grid place-items-center rounded-full border p-1\",\r\n        \"data-disabled:opacity-50\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction RadioGroup<TType = string>({\r\n  className,\r\n  ...props\r\n}: HeadlessRadioGroupProps<typeof HeadlessRadioGroup, TType>) {\r\n  return (\r\n    <HeadlessRadioGroup className={cn(\"grid gap-3\", className)} {...props} />\r\n  )\r\n}\r\n\r\nexport { Radio, RadioGroup }\r\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/www/public/r/components/registry.json b/apps/www/public/r/components/registry.json
index b7004a2..9ccf155 100644
--- a/apps/www/public/r/components/registry.json
+++ b/apps/www/public/r/components/registry.json
@@ -336,6 +336,17 @@
         }
       ]
     },
+    {
+      "name": "switch-demo",
+      "type": "registry:example",
+      "registryDepends": ["switch"],
+      "files": [
+        {
+          "path": "registry/examples/switch-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
     {
       "name": "textarea-demo",
       "type": "registry:example",
diff --git a/apps/www/public/r/components/select.json b/apps/www/public/r/components/select.json
index 7d7c81c..1b8aa46 100644
--- a/apps/www/public/r/components/select.json
+++ b/apps/www/public/r/components/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/ui/select.tsx",
-      "content": "import {\n  Select as HeadlessSelect,\n  type SelectProps as HeadlessSelectProps,\n} from \"@headlessui/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Select({ className, ...props }: HeadlessSelectProps) {\n  return (\n    <HeadlessSelect\n      className={cn(\n        \"bg-accent/50 text-accent-foreground h-9 appearance-none rounded-md border px-3 pr-8 text-sm font-medium\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Select }\n",
+      "content": "import {\r\n  Select as HeadlessSelect,\r\n  type SelectProps as HeadlessSelectProps,\r\n} from \"@headlessui/react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Select({ className, ...props }: HeadlessSelectProps) {\r\n  return (\r\n    <HeadlessSelect\r\n      className={cn(\r\n        \"bg-accent/50 text-accent-foreground h-9 appearance-none rounded-md border px-3 pr-8 text-sm font-medium\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nexport { Select }\r\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/www/public/r/components/switch-demo.json b/apps/www/public/r/components/switch-demo.json
new file mode 100644
index 0000000..1375a10
--- /dev/null
+++ b/apps/www/public/r/components/switch-demo.json
@@ -0,0 +1,12 @@
+{
+  "name": "switch-demo",
+  "type": "registry:example",
+  "registryDepends": ["switch"],
+  "files": [
+    {
+      "path": "registry/examples/switch-demo.tsx",
+      "content": "import { Switch } from \"@/registry/ui/switch\"\nimport { Description } from \"@/registry/ui/description\"\nimport { Field } from \"@/registry/ui/field\"\nimport { Label } from \"@/registry/ui/label\"\n\nexport default function SwitchDemo() {\n  return (\n    <div className=\"grid gap-4\">\n      <Field className=\"flex items-center gap-3\">\n        <Switch />\n        <Label>Airplane mode</Label>\n      </Field>\n      <Field className=\"flex items-center gap-3\">\n        <Switch defaultChecked />\n        <div>\n          <Label>Airplane mode</Label>\n          <Description>\n            Disable all network connections.\n          </Description>\n        </div>\n      </Field>\n      <Field disabled className=\"flex items-center gap-3\">\n        <Switch />\n        <Label>Airplane mode</Label>\n      </Field>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
diff --git a/apps/www/public/r/components/switch.json b/apps/www/public/r/components/switch.json
index 9001448..aba7711 100644
--- a/apps/www/public/r/components/switch.json
+++ b/apps/www/public/r/components/switch.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/ui/switch.tsx",
-      "content": "import {\n  Switch as HeadlessSwitch,\n  type SwitchProps as HeadlessSwitchProps,\n} from \"@headlessui/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Switch({ className, ...props }: HeadlessSwitchProps) {\n  return (\n    <HeadlessSwitch\n      className={cn(\n        \"group bg-accent/50 relative inline-flex h-7 w-14 shrink-0 items-center rounded-full border p-1 transition\",\n        \"data-checked:bg-primary data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          \"bg-foreground pointer-events-none inline-block aspect-square h-full translate-x-0 rounded-full transition\",\n          \"group-data-checked:translate-x-7\"\n        )}\n      />\n    </HeadlessSwitch>\n  )\n}\n\nexport { Switch }\n",
+      "content": "import {\r\n  Switch as HeadlessSwitch,\r\n  type SwitchProps as HeadlessSwitchProps,\r\n} from \"@headlessui/react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Switch({ className, ...props }: HeadlessSwitchProps) {\r\n  return (\r\n    <HeadlessSwitch\r\n      className={cn(\r\n        \"group bg-accent/50 relative inline-flex h-7 w-14 shrink-0 items-center rounded-full border p-1 transition\",\r\n        \"data-checked:bg-primary data-disabled:opacity-50\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <span\r\n        aria-hidden=\"true\"\r\n        className={cn(\r\n          \"bg-foreground pointer-events-none inline-block aspect-square h-full translate-x-0 rounded-full transition\",\r\n          \"group-data-checked:translate-x-7\"\r\n        )}\r\n      />\r\n    </HeadlessSwitch>\r\n  )\r\n}\r\n\r\nexport { Switch }\r\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/www/public/r/components/textarea-demo.json b/apps/www/public/r/components/textarea-demo.json
index c4a2333..173ed55 100644
--- a/apps/www/public/r/components/textarea-demo.json
+++ b/apps/www/public/r/components/textarea-demo.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/examples/textarea-demo.tsx",
-      "content": "import { Textarea } from \"@/registry/ui/textarea\"\n\nexport default function TextareaDemo() {\n  return (\n    <Textarea\n      placeholder=\"Type your message here.\"\n      className=\"w-full max-w-75\"\n    />\n  )\n}\n",
+      "content": "import { Textarea } from \"@/registry/ui/textarea\"\r\n\r\nexport default function TextareaDemo() {\r\n  return (\r\n    <Textarea\r\n      placeholder=\"Type your message here.\"\r\n      className=\"w-full max-w-75\"\r\n    />\r\n  )\r\n}\r\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/components/textarea-disabled.json b/apps/www/public/r/components/textarea-disabled.json
index ba41476..b5a8761 100644
--- a/apps/www/public/r/components/textarea-disabled.json
+++ b/apps/www/public/r/components/textarea-disabled.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/examples/textarea-disabled.tsx",
-      "content": "import { Textarea } from \"@/registry/ui/textarea\"\n\nexport default function TextareaDisabled() {\n  return (\n    <Textarea\n      placeholder=\"Type your message here.\"\n      className=\"w-full max-w-75\"\n      disabled\n    />\n  )\n}\n",
+      "content": "import { Textarea } from \"@/registry/ui/textarea\"\r\n\r\nexport default function TextareaDisabled() {\r\n  return (\r\n    <Textarea\r\n      placeholder=\"Type your message here.\"\r\n      className=\"w-full max-w-75\"\r\n      disabled\r\n    />\r\n  )\r\n}\r\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/components/textarea-with-button.json b/apps/www/public/r/components/textarea-with-button.json
index 550ec09..16ad36b 100644
--- a/apps/www/public/r/components/textarea-with-button.json
+++ b/apps/www/public/r/components/textarea-with-button.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/examples/textarea-with-button.tsx",
-      "content": "import { Button } from \"@/registry/ui/button\"\nimport { Textarea } from \"@/registry/ui/textarea\"\n\nexport default function TextareaWithButton() {\n  return (\n    <div className=\"flex w-full max-w-100 flex-col gap-2\">\n      <Textarea placeholder=\"Type your message here.\" className=\"w-full\" />\n      <Button>Send message</Button>\n    </div>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/ui/button\"\r\nimport { Textarea } from \"@/registry/ui/textarea\"\r\n\r\nexport default function TextareaWithButton() {\r\n  return (\r\n    <div className=\"flex w-full max-w-100 flex-col gap-2\">\r\n      <Textarea placeholder=\"Type your message here.\" className=\"w-full\" />\r\n      <Button>Send message</Button>\r\n    </div>\r\n  )\r\n}\r\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/components/textarea-with-label.json b/apps/www/public/r/components/textarea-with-label.json
index 8e64b69..4acb0b4 100644
--- a/apps/www/public/r/components/textarea-with-label.json
+++ b/apps/www/public/r/components/textarea-with-label.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/examples/textarea-with-label.tsx",
-      "content": "import { Field } from \"@/registry/ui/field\"\nimport { Label } from \"@/registry/ui/label\"\nimport { Textarea } from \"@/registry/ui/textarea\"\n\nexport default function TextareaDemo() {\n  return (\n    <Field className=\"flex w-full max-w-75 flex-col gap-2\">\n      <Label>Your message</Label>\n      <Textarea placeholder=\"Type your message here.\" className=\"w-full\" />\n    </Field>\n  )\n}\n",
+      "content": "import { Field } from \"@/registry/ui/field\"\r\nimport { Label } from \"@/registry/ui/label\"\r\nimport { Textarea } from \"@/registry/ui/textarea\"\r\n\r\nexport default function TextareaDemo() {\r\n  return (\r\n    <Field className=\"flex w-full max-w-75 flex-col gap-2\">\r\n      <Label>Your message</Label>\r\n      <Textarea placeholder=\"Type your message here.\" className=\"w-full\" />\r\n    </Field>\r\n  )\r\n}\r\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/components/textarea.json b/apps/www/public/r/components/textarea.json
index d5f393a..7886d4b 100644
--- a/apps/www/public/r/components/textarea.json
+++ b/apps/www/public/r/components/textarea.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/ui/textarea.tsx",
-      "content": "import {\n  Textarea as HeadlessTextarea,\n  type TextareaProps as HeadlessTextareaProps,\n} from \"@headlessui/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Textarea({ className, ...props }: HeadlessTextareaProps) {\n  return (\n    <HeadlessTextarea\n      className={cn(\n        \"bg-accent/50 flex field-sizing-content rounded-md border px-3 py-2 text-sm\",\n        \"data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "content": "import {\r\n  Textarea as HeadlessTextarea,\r\n  type TextareaProps as HeadlessTextareaProps,\r\n} from \"@headlessui/react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Textarea({ className, ...props }: HeadlessTextareaProps) {\r\n  return (\r\n    <HeadlessTextarea\r\n      className={cn(\r\n        \"bg-accent/50 flex field-sizing-content rounded-md border px-3 py-2 text-sm\",\r\n        \"data-disabled:opacity-50\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nexport { Textarea }\r\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/www/public/r/components/utils.json b/apps/www/public/r/components/utils.json
index 33f32db..e04029a 100644
--- a/apps/www/public/r/components/utils.json
+++ b/apps/www/public/r/components/utils.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/lib/utils.ts",
-      "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "content": "import { clsx, type ClassValue } from \"clsx\"\r\nimport { twMerge } from \"tailwind-merge\"\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs))\r\n}\r\n",
       "type": "registry:lib"
     }
   ]
diff --git a/apps/www/registry.json b/apps/www/registry.json
index b7004a2..9ccf155 100644
--- a/apps/www/registry.json
+++ b/apps/www/registry.json
@@ -336,6 +336,17 @@
         }
       ]
     },
+    {
+      "name": "switch-demo",
+      "type": "registry:example",
+      "registryDepends": ["switch"],
+      "files": [
+        {
+          "path": "registry/examples/switch-demo.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
     {
       "name": "textarea-demo",
       "type": "registry:example",
diff --git a/apps/www/registry/__index__.tsx b/apps/www/registry/__index__.tsx
index cacff27..c4ed3c7 100644
--- a/apps/www/registry/__index__.tsx
+++ b/apps/www/registry/__index__.tsx
@@ -631,6 +631,26 @@ export const Index: Record<string, any> = {
       return { default: mod.default || mod[exportName] }
     }),
   },
+  "switch-demo": {
+    name: "switch-demo",
+    type: "registry:example",
+    registryDepends: ["switch"],
+    files: [
+      {
+        path: "registry/examples/switch-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/examples/switch-demo.tsx")
+      const exportName =
+        Object.keys(mod).find(
+          (key) =>
+            typeof mod[key] === "function" || typeof mod[key] === "object"
+        ) || "switch-demo"
+      return { default: mod.default || mod[exportName] }
+    }),
+  },
   "textarea-demo": {
     name: "textarea-demo",
     type: "registry:example",
diff --git a/apps/www/registry/examples/switch-demo.tsx b/apps/www/registry/examples/switch-demo.tsx
new file mode 100644
index 0000000..718af4e
--- /dev/null
+++ b/apps/www/registry/examples/switch-demo.tsx
@@ -0,0 +1,26 @@
+import { Description } from "@/registry/ui/description"
+import { Field } from "@/registry/ui/field"
+import { Label } from "@/registry/ui/label"
+import { Switch } from "@/registry/ui/switch"
+
+export default function SwitchDemo() {
+  return (
+    <div className="grid gap-4">
+      <Field className="flex items-center gap-3">
+        <Switch />
+        <Label>Airplane mode</Label>
+      </Field>
+      <Field className="flex items-center gap-3">
+        <Switch defaultChecked />
+        <div>
+          <Label>Airplane mode</Label>
+          <Description>Disable all network connections.</Description>
+        </div>
+      </Field>
+      <Field disabled className="flex items-center gap-3">
+        <Switch />
+        <Label>Airplane mode</Label>
+      </Field>
+    </div>
+  )
+}
diff --git a/apps/www/registry/registry-examples.ts b/apps/www/registry/registry-examples.ts
index fe31719..14bb021 100644
--- a/apps/www/registry/registry-examples.ts
+++ b/apps/www/registry/registry-examples.ts
@@ -177,6 +177,17 @@ export const examples: RegistryItem[] = [
       },
     ],
   },
+  {
+    name: "switch-demo",
+    type: "registry:example",
+    registryDepends: ["switch"],
+    files: [
+      {
+        path: "examples/switch-demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
   {
     name: "textarea-demo",
     type: "registry:example",
diff --git a/apps/www/scripts/build-registry.mts b/apps/www/scripts/build-registry.mts
index 393668c..a873a6a 100644
--- a/apps/www/scripts/build-registry.mts
+++ b/apps/www/scripts/build-registry.mts
@@ -97,8 +97,9 @@ async function buildRegistryJson() {
 async function buildRegistry() {
   return new Promise((resolve, reject) => {
     execFile(
-      "pnpm",
+      process.platform === "win32" ? "pnpm.cmd" : "pnpm",
       ["-F", "www", "exec", "headcn", "build"],
+      { shell: process.platform === "win32" },
       (err, stdout) => {
         if (err) reject(err)
         else resolve(stdout)

From 61df02caad33b4d7468c30091bc51e91ffc0bf09 Mon Sep 17 00:00:00 2001
From: stabldev <114811070+stabldev@users.noreply.github.com>
Date: Fri, 1 May 2026 13:25:23 +0530
Subject: [PATCH 3/3] docs: add better switch docs

---
 apps/www/content/docs/components/switch.mdx   | 16 +++++
 apps/www/public/r/components/registry.json    | 33 ++++++++++
 .../r/components/switch-choice-card.json      | 12 ++++
 apps/www/public/r/components/switch-demo.json |  2 +-
 .../public/r/components/switch-disabled.json  | 12 ++++
 .../r/components/switch-with-description.json | 12 ++++
 apps/www/registry.json                        | 33 ++++++++++
 apps/www/registry/__index__.tsx               | 62 +++++++++++++++++++
 .../registry/examples/switch-choice-card.tsx  | 23 +++++++
 .../www/registry/examples/switch-disabled.tsx | 12 ++++
 .../examples/switch-with-description.tsx      | 23 +++++++
 apps/www/registry/registry-examples.ts        | 33 ++++++++++
 12 files changed, 272 insertions(+), 1 deletion(-)
 create mode 100644 apps/www/public/r/components/switch-choice-card.json
 create mode 100644 apps/www/public/r/components/switch-disabled.json
 create mode 100644 apps/www/public/r/components/switch-with-description.json
 create mode 100644 apps/www/registry/examples/switch-choice-card.tsx
 create mode 100644 apps/www/registry/examples/switch-disabled.tsx
 create mode 100644 apps/www/registry/examples/switch-with-description.tsx

diff --git a/apps/www/content/docs/components/switch.mdx b/apps/www/content/docs/components/switch.mdx
index 15533b1..a2b20dc 100644
--- a/apps/www/content/docs/components/switch.mdx
+++ b/apps/www/content/docs/components/switch.mdx
@@ -29,3 +29,19 @@ export default function Example() {
   return <Switch checked={enabled} onChange={setEnabled} />
 }
 ```
+
+## Examples
+
+### Description
+
+<ComponentPreview name="switch-with-description" />
+
+### Choice Card
+
+Card-style selection where `Field` wraps the entire section for a clickable card pattern.
+
+<ComponentPreview name="switch-choice-card" />
+
+### Disabled
+
+<ComponentPreview name="switch-disabled" />
diff --git a/apps/www/public/r/components/registry.json b/apps/www/public/r/components/registry.json
index 9ccf155..7d7a240 100644
--- a/apps/www/public/r/components/registry.json
+++ b/apps/www/public/r/components/registry.json
@@ -347,6 +347,39 @@
         }
       ]
     },
+    {
+      "name": "switch-disabled",
+      "type": "registry:example",
+      "registryDepends": ["switch"],
+      "files": [
+        {
+          "path": "registry/examples/switch-disabled.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "switch-with-description",
+      "type": "registry:example",
+      "registryDepends": ["switch"],
+      "files": [
+        {
+          "path": "registry/examples/switch-with-description.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "switch-choice-card",
+      "type": "registry:example",
+      "registryDepends": ["switch"],
+      "files": [
+        {
+          "path": "registry/examples/switch-choice-card.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
     {
       "name": "textarea-demo",
       "type": "registry:example",
diff --git a/apps/www/public/r/components/switch-choice-card.json b/apps/www/public/r/components/switch-choice-card.json
new file mode 100644
index 0000000..9dba439
--- /dev/null
+++ b/apps/www/public/r/components/switch-choice-card.json
@@ -0,0 +1,12 @@
+{
+  "name": "switch-choice-card",
+  "type": "registry:example",
+  "registryDepends": ["switch"],
+  "files": [
+    {
+      "path": "registry/examples/switch-choice-card.tsx",
+      "content": "\"use client\"\n\nimport { Switch } from \"@/registry/ui/switch\"\nimport { Description } from \"@/registry/ui/description\"\nimport { Field } from \"@/registry/ui/field\"\nimport { Label } from \"@/registry/ui/label\"\nimport { useState } from \"react\"\n\nexport default function SwitchChoiceCard() {\n  const [enabled, setEnabled] = useState(false)\n\n  return (\n    <Field>\n      <Label className=\"has-[[data-checked]]:border-primary has-[[data-checked]]:bg-primary/5 flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-border/50 p-4 shadow-sm transition-colors\">\n        <div className=\"space-y-0.5\">\n          <div className=\"text-base font-medium\">Security emails</div>\n          <Description>\n            Receive emails about your account security.\n          </Description>\n        </div>\n        <Switch checked={enabled} onChange={setEnabled} />\n      </Label>\n    </Field>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
diff --git a/apps/www/public/r/components/switch-demo.json b/apps/www/public/r/components/switch-demo.json
index 1375a10..4426381 100644
--- a/apps/www/public/r/components/switch-demo.json
+++ b/apps/www/public/r/components/switch-demo.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/examples/switch-demo.tsx",
-      "content": "import { Switch } from \"@/registry/ui/switch\"\nimport { Description } from \"@/registry/ui/description\"\nimport { Field } from \"@/registry/ui/field\"\nimport { Label } from \"@/registry/ui/label\"\n\nexport default function SwitchDemo() {\n  return (\n    <div className=\"grid gap-4\">\n      <Field className=\"flex items-center gap-3\">\n        <Switch />\n        <Label>Airplane mode</Label>\n      </Field>\n      <Field className=\"flex items-center gap-3\">\n        <Switch defaultChecked />\n        <div>\n          <Label>Airplane mode</Label>\n          <Description>\n            Disable all network connections.\n          </Description>\n        </div>\n      </Field>\n      <Field disabled className=\"flex items-center gap-3\">\n        <Switch />\n        <Label>Airplane mode</Label>\n      </Field>\n    </div>\n  )\n}\n",
+      "content": "import { Description } from \"@/registry/ui/description\"\nimport { Field } from \"@/registry/ui/field\"\nimport { Label } from \"@/registry/ui/label\"\nimport { Switch } from \"@/registry/ui/switch\"\n\nexport default function SwitchDemo() {\n  return (\n    <div className=\"grid gap-4\">\n      <Field className=\"flex items-center gap-3\">\n        <Switch />\n        <Label>Airplane mode</Label>\n      </Field>\n      <Field className=\"flex items-center gap-3\">\n        <Switch defaultChecked />\n        <div>\n          <Label>Airplane mode</Label>\n          <Description>Disable all network connections.</Description>\n        </div>\n      </Field>\n      <Field disabled className=\"flex items-center gap-3\">\n        <Switch />\n        <Label>Airplane mode</Label>\n      </Field>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ]
diff --git a/apps/www/public/r/components/switch-disabled.json b/apps/www/public/r/components/switch-disabled.json
new file mode 100644
index 0000000..e4e35f7
--- /dev/null
+++ b/apps/www/public/r/components/switch-disabled.json
@@ -0,0 +1,12 @@
+{
+  "name": "switch-disabled",
+  "type": "registry:example",
+  "registryDepends": ["switch"],
+  "files": [
+    {
+      "path": "registry/examples/switch-disabled.tsx",
+      "content": "import { Switch } from \"@/registry/ui/switch\"\nimport { Field } from \"@/registry/ui/field\"\nimport { Label } from \"@/registry/ui/label\"\n\nexport default function SwitchDisabled() {\n  return (\n    <Field disabled className=\"flex items-center gap-3\">\n      <Switch />\n      <Label>Airplane mode</Label>\n    </Field>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
diff --git a/apps/www/public/r/components/switch-with-description.json b/apps/www/public/r/components/switch-with-description.json
new file mode 100644
index 0000000..2d9c0e6
--- /dev/null
+++ b/apps/www/public/r/components/switch-with-description.json
@@ -0,0 +1,12 @@
+{
+  "name": "switch-with-description",
+  "type": "registry:example",
+  "registryDepends": ["switch"],
+  "files": [
+    {
+      "path": "registry/examples/switch-with-description.tsx",
+      "content": "\"use client\"\n\nimport { Switch } from \"@/registry/ui/switch\"\nimport { Description } from \"@/registry/ui/description\"\nimport { Field } from \"@/registry/ui/field\"\nimport { Label } from \"@/registry/ui/label\"\nimport { useState } from \"react\"\n\nexport default function SwitchWithDescription() {\n  const [enabled, setEnabled] = useState(false)\n\n  return (\n    <Field className=\"flex items-center gap-3\">\n      <Switch checked={enabled} onChange={setEnabled} />\n      <div>\n        <Label>Airplane mode</Label>\n        <Description>\n          Disable all network connections on this device.\n        </Description>\n      </div>\n    </Field>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ]
+}
diff --git a/apps/www/registry.json b/apps/www/registry.json
index 9ccf155..7d7a240 100644
--- a/apps/www/registry.json
+++ b/apps/www/registry.json
@@ -347,6 +347,39 @@
         }
       ]
     },
+    {
+      "name": "switch-disabled",
+      "type": "registry:example",
+      "registryDepends": ["switch"],
+      "files": [
+        {
+          "path": "registry/examples/switch-disabled.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "switch-with-description",
+      "type": "registry:example",
+      "registryDepends": ["switch"],
+      "files": [
+        {
+          "path": "registry/examples/switch-with-description.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
+    {
+      "name": "switch-choice-card",
+      "type": "registry:example",
+      "registryDepends": ["switch"],
+      "files": [
+        {
+          "path": "registry/examples/switch-choice-card.tsx",
+          "type": "registry:example"
+        }
+      ]
+    },
     {
       "name": "textarea-demo",
       "type": "registry:example",
diff --git a/apps/www/registry/__index__.tsx b/apps/www/registry/__index__.tsx
index c4ed3c7..e8b093d 100644
--- a/apps/www/registry/__index__.tsx
+++ b/apps/www/registry/__index__.tsx
@@ -651,6 +651,68 @@ export const Index: Record<string, any> = {
       return { default: mod.default || mod[exportName] }
     }),
   },
+  "switch-disabled": {
+    name: "switch-disabled",
+    type: "registry:example",
+    registryDepends: ["switch"],
+    files: [
+      {
+        path: "registry/examples/switch-disabled.tsx",
+        type: "registry:example",
+      },
+    ],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/examples/switch-disabled.tsx")
+      const exportName =
+        Object.keys(mod).find(
+          (key) =>
+            typeof mod[key] === "function" || typeof mod[key] === "object"
+        ) || "switch-disabled"
+      return { default: mod.default || mod[exportName] }
+    }),
+  },
+  "switch-with-description": {
+    name: "switch-with-description",
+    type: "registry:example",
+    registryDepends: ["switch"],
+    files: [
+      {
+        path: "registry/examples/switch-with-description.tsx",
+        type: "registry:example",
+      },
+    ],
+    component: React.lazy(async () => {
+      const mod = await import(
+        "@/registry/examples/switch-with-description.tsx"
+      )
+      const exportName =
+        Object.keys(mod).find(
+          (key) =>
+            typeof mod[key] === "function" || typeof mod[key] === "object"
+        ) || "switch-with-description"
+      return { default: mod.default || mod[exportName] }
+    }),
+  },
+  "switch-choice-card": {
+    name: "switch-choice-card",
+    type: "registry:example",
+    registryDepends: ["switch"],
+    files: [
+      {
+        path: "registry/examples/switch-choice-card.tsx",
+        type: "registry:example",
+      },
+    ],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/examples/switch-choice-card.tsx")
+      const exportName =
+        Object.keys(mod).find(
+          (key) =>
+            typeof mod[key] === "function" || typeof mod[key] === "object"
+        ) || "switch-choice-card"
+      return { default: mod.default || mod[exportName] }
+    }),
+  },
   "textarea-demo": {
     name: "textarea-demo",
     type: "registry:example",
diff --git a/apps/www/registry/examples/switch-choice-card.tsx b/apps/www/registry/examples/switch-choice-card.tsx
new file mode 100644
index 0000000..b09092c
--- /dev/null
+++ b/apps/www/registry/examples/switch-choice-card.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import { Description } from "@/registry/ui/description"
+import { Field } from "@/registry/ui/field"
+import { Label } from "@/registry/ui/label"
+import { Switch } from "@/registry/ui/switch"
+import { useState } from "react"
+
+export default function SwitchChoiceCard() {
+  const [enabled, setEnabled] = useState(true)
+
+  return (
+    <Field>
+      <Label className="bg-muted/50 has-[[data-checked]]:bg-muted flex cursor-pointer items-center justify-between gap-4 rounded-lg border p-4 shadow-sm transition-colors">
+        <div className="space-y-0.5">
+          <div className="text-base font-medium">Security emails</div>
+          <Description>Receive emails about your account security.</Description>
+        </div>
+        <Switch checked={enabled} onChange={setEnabled} />
+      </Label>
+    </Field>
+  )
+}
diff --git a/apps/www/registry/examples/switch-disabled.tsx b/apps/www/registry/examples/switch-disabled.tsx
new file mode 100644
index 0000000..51d5034
--- /dev/null
+++ b/apps/www/registry/examples/switch-disabled.tsx
@@ -0,0 +1,12 @@
+import { Field } from "@/registry/ui/field"
+import { Label } from "@/registry/ui/label"
+import { Switch } from "@/registry/ui/switch"
+
+export default function SwitchDisabled() {
+  return (
+    <Field disabled className="flex items-center gap-3">
+      <Switch />
+      <Label>Airplane mode</Label>
+    </Field>
+  )
+}
diff --git a/apps/www/registry/examples/switch-with-description.tsx b/apps/www/registry/examples/switch-with-description.tsx
new file mode 100644
index 0000000..662ab84
--- /dev/null
+++ b/apps/www/registry/examples/switch-with-description.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import { Description } from "@/registry/ui/description"
+import { Field } from "@/registry/ui/field"
+import { Label } from "@/registry/ui/label"
+import { Switch } from "@/registry/ui/switch"
+import { useState } from "react"
+
+export default function SwitchWithDescription() {
+  const [enabled, setEnabled] = useState(false)
+
+  return (
+    <Field className="flex items-center gap-3">
+      <Switch checked={enabled} onChange={setEnabled} />
+      <div>
+        <Label>Airplane mode</Label>
+        <Description>
+          Disable all network connections on this device.
+        </Description>
+      </div>
+    </Field>
+  )
+}
diff --git a/apps/www/registry/registry-examples.ts b/apps/www/registry/registry-examples.ts
index 14bb021..987d47c 100644
--- a/apps/www/registry/registry-examples.ts
+++ b/apps/www/registry/registry-examples.ts
@@ -188,6 +188,39 @@ export const examples: RegistryItem[] = [
       },
     ],
   },
+  {
+    name: "switch-disabled",
+    type: "registry:example",
+    registryDepends: ["switch"],
+    files: [
+      {
+        path: "examples/switch-disabled.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "switch-with-description",
+    type: "registry:example",
+    registryDepends: ["switch"],
+    files: [
+      {
+        path: "examples/switch-with-description.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
+  {
+    name: "switch-choice-card",
+    type: "registry:example",
+    registryDepends: ["switch"],
+    files: [
+      {
+        path: "examples/switch-choice-card.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
   {
     name: "textarea-demo",
     type: "registry:example",