diff --git a/apps/v4/components/component-preview-tabs.tsx b/apps/v4/components/component-preview-tabs.tsx
index 50394234b..5ac2ae2c5 100644
--- a/apps/v4/components/component-preview-tabs.tsx
+++ b/apps/v4/components/component-preview-tabs.tsx
@@ -22,7 +22,7 @@ export function ComponentPreviewTabs({
   return (
     <div
       className={cn(
-        "group relative mt-4 mb-12 flex flex-col gap-2 rounded-lg border",
+        "group relative mt-4 mb-12 flex flex-col gap-2 overflow-hidden rounded-xl border",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/__index__.tsx b/apps/v4/examples/__index__.tsx
index b26248289..e816d6bb9 100644
--- a/apps/v4/examples/__index__.tsx
+++ b/apps/v4/examples/__index__.tsx
@@ -5,6 +5,19 @@ import * as React from "react"
 
 export const ExamplesIndex: Record<string, Record<string, any>> = {
   radix: {
+    "accordion-basic": {
+      name: "accordion-basic",
+      filePath: "examples/radix/accordion-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/accordion-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "accordion-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "accordion-borders": {
       name: "accordion-borders",
       filePath: "examples/radix/accordion-borders.tsx",
@@ -57,6 +70,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "accordion-in-card": {
+      name: "accordion-in-card",
+      filePath: "examples/radix/accordion-in-card.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/accordion-in-card")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "accordion-in-card"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "accordion-multiple": {
       name: "accordion-multiple",
       filePath: "examples/radix/accordion-multiple.tsx",
@@ -70,6 +96,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "accordion-with-borders": {
+      name: "accordion-with-borders",
+      filePath: "examples/radix/accordion-with-borders.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/accordion-with-borders")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "accordion-with-borders"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "accordion-with-disabled": {
+      name: "accordion-with-disabled",
+      filePath: "examples/radix/accordion-with-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/accordion-with-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "accordion-with-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "alert-demo": {
       name: "alert-demo",
       filePath: "examples/radix/alert-demo.tsx",
@@ -96,6 +148,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "alert-dialog-basic": {
+      name: "alert-dialog-basic",
+      filePath: "examples/radix/alert-dialog-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/alert-dialog-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "alert-dialog-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "alert-dialog-demo": {
       name: "alert-dialog-demo",
       filePath: "examples/radix/alert-dialog-demo.tsx",
@@ -109,6 +174,123 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "alert-dialog-destructive": {
+      name: "alert-dialog-destructive",
+      filePath: "examples/radix/alert-dialog-destructive.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/alert-dialog-destructive")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "alert-dialog-destructive"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "alert-dialog-in-dialog": {
+      name: "alert-dialog-in-dialog",
+      filePath: "examples/radix/alert-dialog-in-dialog.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/alert-dialog-in-dialog")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "alert-dialog-in-dialog"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "alert-dialog-small-with-media": {
+      name: "alert-dialog-small-with-media",
+      filePath: "examples/radix/alert-dialog-small-with-media.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/alert-dialog-small-with-media")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "alert-dialog-small-with-media"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "alert-dialog-small": {
+      name: "alert-dialog-small",
+      filePath: "examples/radix/alert-dialog-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/alert-dialog-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "alert-dialog-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "alert-dialog-with-media": {
+      name: "alert-dialog-with-media",
+      filePath: "examples/radix/alert-dialog-with-media.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/alert-dialog-with-media")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "alert-dialog-with-media"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "alert-example1": {
+      name: "alert-example1",
+      filePath: "examples/radix/alert-example1.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/alert-example1")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "alert-example1"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "alert-example2": {
+      name: "alert-example2",
+      filePath: "examples/radix/alert-example2.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/alert-example2")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "alert-example2"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "alert-example3": {
+      name: "alert-example3",
+      filePath: "examples/radix/alert-example3.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/alert-example3")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "alert-example3"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "alert-example4": {
+      name: "alert-example4",
+      filePath: "examples/radix/alert-example4.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/alert-example4")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "alert-example4"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "aspect-ratio-demo": {
       name: "aspect-ratio-demo",
       filePath: "examples/radix/aspect-ratio-demo.tsx",
@@ -122,6 +304,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "aspect-ratio16x9": {
+      name: "aspect-ratio16x9",
+      filePath: "examples/radix/aspect-ratio16x9.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/aspect-ratio16x9")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "aspect-ratio16x9"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "aspect-ratio1x1": {
+      name: "aspect-ratio1x1",
+      filePath: "examples/radix/aspect-ratio1x1.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/aspect-ratio1x1")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "aspect-ratio1x1"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "aspect-ratio21x9": {
+      name: "aspect-ratio21x9",
+      filePath: "examples/radix/aspect-ratio21x9.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/aspect-ratio21x9")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "aspect-ratio21x9"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "aspect-ratio9x16": {
+      name: "aspect-ratio9x16",
+      filePath: "examples/radix/aspect-ratio9x16.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/aspect-ratio9x16")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "aspect-ratio9x16"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "avatar-demo": {
       name: "avatar-demo",
       filePath: "examples/radix/avatar-demo.tsx",
@@ -135,6 +369,123 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "avatar-group-example": {
+      name: "avatar-group-example",
+      filePath: "examples/radix/avatar-group-example.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/avatar-group-example")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "avatar-group-example"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "avatar-group-with-count": {
+      name: "avatar-group-with-count",
+      filePath: "examples/radix/avatar-group-with-count.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/avatar-group-with-count")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "avatar-group-with-count"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "avatar-group-with-icon-count": {
+      name: "avatar-group-with-icon-count",
+      filePath: "examples/radix/avatar-group-with-icon-count.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/avatar-group-with-icon-count")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "avatar-group-with-icon-count"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "avatar-in-empty": {
+      name: "avatar-in-empty",
+      filePath: "examples/radix/avatar-in-empty.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/avatar-in-empty")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "avatar-in-empty"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "avatar-sizes": {
+      name: "avatar-sizes",
+      filePath: "examples/radix/avatar-sizes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/avatar-sizes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "avatar-sizes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "avatar-with-badge-icon": {
+      name: "avatar-with-badge-icon",
+      filePath: "examples/radix/avatar-with-badge-icon.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/avatar-with-badge-icon")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "avatar-with-badge-icon"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "avatar-with-badge": {
+      name: "avatar-with-badge",
+      filePath: "examples/radix/avatar-with-badge.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/avatar-with-badge")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "avatar-with-badge"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "badge-as-link": {
+      name: "badge-as-link",
+      filePath: "examples/radix/badge-as-link.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/badge-as-link")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "badge-as-link"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "badge-custom-colors": {
+      name: "badge-custom-colors",
+      filePath: "examples/radix/badge-custom-colors.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/badge-custom-colors")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "badge-custom-colors"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "badge-demo": {
       name: "badge-demo",
       filePath: "examples/radix/badge-demo.tsx",
@@ -161,6 +512,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "badge-long-text": {
+      name: "badge-long-text",
+      filePath: "examples/radix/badge-long-text.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/badge-long-text")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "badge-long-text"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "badge-outline": {
       name: "badge-outline",
       filePath: "examples/radix/badge-outline.tsx",
@@ -187,6 +551,71 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "badge-variants": {
+      name: "badge-variants",
+      filePath: "examples/radix/badge-variants.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/badge-variants")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "badge-variants"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "badge-with-icon-left": {
+      name: "badge-with-icon-left",
+      filePath: "examples/radix/badge-with-icon-left.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/badge-with-icon-left")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "badge-with-icon-left"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "badge-with-icon-right": {
+      name: "badge-with-icon-right",
+      filePath: "examples/radix/badge-with-icon-right.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/badge-with-icon-right")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "badge-with-icon-right"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "badge-with-spinner": {
+      name: "badge-with-spinner",
+      filePath: "examples/radix/badge-with-spinner.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/badge-with-spinner")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "badge-with-spinner"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "breadcrumb-basic": {
+      name: "breadcrumb-basic",
+      filePath: "examples/radix/breadcrumb-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/breadcrumb-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "breadcrumb-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "breadcrumb-demo": {
       name: "breadcrumb-demo",
       filePath: "examples/radix/breadcrumb-demo.tsx",
@@ -265,6 +694,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "breadcrumb-with-dropdown": {
+      name: "breadcrumb-with-dropdown",
+      filePath: "examples/radix/breadcrumb-with-dropdown.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/breadcrumb-with-dropdown")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "breadcrumb-with-dropdown"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "breadcrumb-with-link": {
+      name: "breadcrumb-with-link",
+      filePath: "examples/radix/breadcrumb-with-link.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/breadcrumb-with-link")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "breadcrumb-with-link"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "button-as-child": {
       name: "button-as-child",
       filePath: "examples/radix/button-as-child.tsx",
@@ -317,6 +772,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "button-examples": {
+      name: "button-examples",
+      filePath: "examples/radix/button-examples.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-examples")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-examples"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "button-ghost": {
       name: "button-ghost",
       filePath: "examples/radix/button-ghost.tsx",
@@ -330,6 +798,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "button-group-basic": {
+      name: "button-group-basic",
+      filePath: "examples/radix/button-group-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-group-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "button-group-demo": {
       name: "button-group-demo",
       filePath: "examples/radix/button-group-demo.tsx",
@@ -382,6 +863,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "button-group-navigation": {
+      name: "button-group-navigation",
+      filePath: "examples/radix/button-group-navigation.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-group-navigation")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-navigation"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "button-group-nested": {
       name: "button-group-nested",
       filePath: "examples/radix/button-group-nested.tsx",
@@ -408,6 +902,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "button-group-pagination-split": {
+      name: "button-group-pagination-split",
+      filePath: "examples/radix/button-group-pagination-split.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-group-pagination-split")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-pagination-split"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-pagination": {
+      name: "button-group-pagination",
+      filePath: "examples/radix/button-group-pagination.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-group-pagination")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-pagination"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "button-group-popover": {
       name: "button-group-popover",
       filePath: "examples/radix/button-group-popover.tsx",
@@ -473,6 +993,201 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "button-group-text-alignment": {
+      name: "button-group-text-alignment",
+      filePath: "examples/radix/button-group-text-alignment.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-group-text-alignment")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-text-alignment"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-vertical-nested": {
+      name: "button-group-vertical-nested",
+      filePath: "examples/radix/button-group-vertical-nested.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-group-vertical-nested")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-vertical-nested"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-vertical": {
+      name: "button-group-vertical",
+      filePath: "examples/radix/button-group-vertical.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-group-vertical")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-vertical"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-with-dropdown": {
+      name: "button-group-with-dropdown",
+      filePath: "examples/radix/button-group-with-dropdown.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-group-with-dropdown")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-with-dropdown"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-with-fields": {
+      name: "button-group-with-fields",
+      filePath: "examples/radix/button-group-with-fields.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-group-with-fields")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-with-fields"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-with-icons": {
+      name: "button-group-with-icons",
+      filePath: "examples/radix/button-group-with-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-group-with-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-with-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-with-input-group": {
+      name: "button-group-with-input-group",
+      filePath: "examples/radix/button-group-with-input-group.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-group-with-input-group")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-with-input-group"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-with-input": {
+      name: "button-group-with-input",
+      filePath: "examples/radix/button-group-with-input.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-group-with-input")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-with-input"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-with-like": {
+      name: "button-group-with-like",
+      filePath: "examples/radix/button-group-with-like.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-group-with-like")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-with-like"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-with-select-and-input": {
+      name: "button-group-with-select-and-input",
+      filePath: "examples/radix/button-group-with-select-and-input.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-group-with-select-and-input")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-with-select-and-input"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-with-select": {
+      name: "button-group-with-select",
+      filePath: "examples/radix/button-group-with-select.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-group-with-select")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-with-select"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-with-text": {
+      name: "button-group-with-text",
+      filePath: "examples/radix/button-group-with-text.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-group-with-text")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-with-text"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-icon-left": {
+      name: "button-icon-left",
+      filePath: "examples/radix/button-icon-left.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-icon-left")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-icon-left"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-icon-only": {
+      name: "button-icon-only",
+      filePath: "examples/radix/button-icon-only.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-icon-only")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-icon-only"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-icon-right": {
+      name: "button-icon-right",
+      filePath: "examples/radix/button-icon-right.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-icon-right")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-icon-right"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "button-icon": {
       name: "button-icon",
       filePath: "examples/radix/button-icon.tsx",
@@ -486,6 +1201,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "button-invalid-states": {
+      name: "button-invalid-states",
+      filePath: "examples/radix/button-invalid-states.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-invalid-states")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-invalid-states"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "button-link": {
       name: "button-link",
       filePath: "examples/radix/button-link.tsx",
@@ -564,6 +1292,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "button-variants-and-sizes": {
+      name: "button-variants-and-sizes",
+      filePath: "examples/radix/button-variants-and-sizes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/button-variants-and-sizes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-variants-and-sizes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "button-with-icon": {
       name: "button-with-icon",
       filePath: "examples/radix/button-with-icon.tsx",
@@ -577,6 +1318,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "calendar-booked-dates": {
+      name: "calendar-booked-dates",
+      filePath: "examples/radix/calendar-booked-dates.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/calendar-booked-dates")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "calendar-booked-dates"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "calendar-custom-days": {
+      name: "calendar-custom-days",
+      filePath: "examples/radix/calendar-custom-days.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/calendar-custom-days")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "calendar-custom-days"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "calendar-demo": {
       name: "calendar-demo",
       filePath: "examples/radix/calendar-demo.tsx",
@@ -603,6 +1370,110 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "calendar-multiple": {
+      name: "calendar-multiple",
+      filePath: "examples/radix/calendar-multiple.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/calendar-multiple")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "calendar-multiple"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "calendar-range-multiple-months": {
+      name: "calendar-range-multiple-months",
+      filePath: "examples/radix/calendar-range-multiple-months.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/calendar-range-multiple-months")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "calendar-range-multiple-months"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "calendar-range": {
+      name: "calendar-range",
+      filePath: "examples/radix/calendar-range.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/calendar-range")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "calendar-range"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "calendar-single": {
+      name: "calendar-single",
+      filePath: "examples/radix/calendar-single.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/calendar-single")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "calendar-single"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "calendar-week-numbers": {
+      name: "calendar-week-numbers",
+      filePath: "examples/radix/calendar-week-numbers.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/calendar-week-numbers")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "calendar-week-numbers"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "calendar-with-presets": {
+      name: "calendar-with-presets",
+      filePath: "examples/radix/calendar-with-presets.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/calendar-with-presets")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "calendar-with-presets"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "calendar-with-time": {
+      name: "calendar-with-time",
+      filePath: "examples/radix/calendar-with-time.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/calendar-with-time")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "calendar-with-time"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "card-default": {
+      name: "card-default",
+      filePath: "examples/radix/card-default.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/card-default")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "card-default"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "card-demo": {
       name: "card-demo",
       filePath: "examples/radix/card-demo.tsx",
@@ -616,6 +1487,123 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "card-footer-with-border-small": {
+      name: "card-footer-with-border-small",
+      filePath: "examples/radix/card-footer-with-border-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/card-footer-with-border-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "card-footer-with-border-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "card-footer-with-border": {
+      name: "card-footer-with-border",
+      filePath: "examples/radix/card-footer-with-border.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/card-footer-with-border")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "card-footer-with-border"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "card-header-with-border-small": {
+      name: "card-header-with-border-small",
+      filePath: "examples/radix/card-header-with-border-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/card-header-with-border-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "card-header-with-border-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "card-header-with-border": {
+      name: "card-header-with-border",
+      filePath: "examples/radix/card-header-with-border.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/card-header-with-border")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "card-header-with-border"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "card-login": {
+      name: "card-login",
+      filePath: "examples/radix/card-login.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/card-login")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "card-login"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "card-meeting-notes": {
+      name: "card-meeting-notes",
+      filePath: "examples/radix/card-meeting-notes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/card-meeting-notes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "card-meeting-notes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "card-small": {
+      name: "card-small",
+      filePath: "examples/radix/card-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/card-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "card-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "card-with-image-small": {
+      name: "card-with-image-small",
+      filePath: "examples/radix/card-with-image-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/card-with-image-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "card-with-image-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "card-with-image": {
+      name: "card-with-image",
+      filePath: "examples/radix/card-with-image.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/card-with-image")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "card-with-image"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "carousel-api": {
       name: "carousel-api",
       filePath: "examples/radix/carousel-api.tsx",
@@ -629,6 +1617,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "carousel-basic": {
+      name: "carousel-basic",
+      filePath: "examples/radix/carousel-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/carousel-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "carousel-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "carousel-demo": {
       name: "carousel-demo",
       filePath: "examples/radix/carousel-demo.tsx",
@@ -642,6 +1643,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "carousel-multiple": {
+      name: "carousel-multiple",
+      filePath: "examples/radix/carousel-multiple.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/carousel-multiple")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "carousel-multiple"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "carousel-orientation": {
       name: "carousel-orientation",
       filePath: "examples/radix/carousel-orientation.tsx",
@@ -694,6 +1708,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "carousel-with-gap": {
+      name: "carousel-with-gap",
+      filePath: "examples/radix/carousel-with-gap.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/carousel-with-gap")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "carousel-with-gap"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "chart-area-example": {
+      name: "chart-area-example",
+      filePath: "examples/radix/chart-area-example.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/chart-area-example")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "chart-area-example"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "chart-bar-demo-axis": {
       name: "chart-bar-demo-axis",
       filePath: "examples/radix/chart-bar-demo-axis.tsx",
@@ -759,6 +1799,71 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "chart-bar-example": {
+      name: "chart-bar-example",
+      filePath: "examples/radix/chart-bar-example.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/chart-bar-example")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "chart-bar-example"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "chart-line-example": {
+      name: "chart-line-example",
+      filePath: "examples/radix/chart-line-example.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/chart-line-example")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "chart-line-example"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "chart-pie-example": {
+      name: "chart-pie-example",
+      filePath: "examples/radix/chart-pie-example.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/chart-pie-example")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "chart-pie-example"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "chart-radar-example": {
+      name: "chart-radar-example",
+      filePath: "examples/radix/chart-radar-example.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/chart-radar-example")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "chart-radar-example"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "chart-radial-example": {
+      name: "chart-radial-example",
+      filePath: "examples/radix/chart-radial-example.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/chart-radial-example")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "chart-radial-example"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "chart-tooltip-demo": {
       name: "chart-tooltip-demo",
       filePath: "examples/radix/chart-tooltip-demo.tsx",
@@ -772,6 +1877,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "checkbox-basic": {
+      name: "checkbox-basic",
+      filePath: "examples/radix/checkbox-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/checkbox-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "checkbox-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "checkbox-demo": {
       name: "checkbox-demo",
       filePath: "examples/radix/checkbox-demo.tsx",
@@ -798,6 +1916,71 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "checkbox-fields": {
+      name: "checkbox-fields",
+      filePath: "examples/radix/checkbox-fields.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/checkbox-fields")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "checkbox-fields"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "checkbox-group": {
+      name: "checkbox-group",
+      filePath: "examples/radix/checkbox-group.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/checkbox-group")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "checkbox-group"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "checkbox-in-table": {
+      name: "checkbox-in-table",
+      filePath: "examples/radix/checkbox-in-table.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/checkbox-in-table")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "checkbox-in-table"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "checkbox-invalid": {
+      name: "checkbox-invalid",
+      filePath: "examples/radix/checkbox-invalid.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/checkbox-invalid")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "checkbox-invalid"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "checkbox-with-description": {
+      name: "checkbox-with-description",
+      filePath: "examples/radix/checkbox-with-description.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/checkbox-with-description")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "checkbox-with-description"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "checkbox-with-text": {
       name: "checkbox-with-text",
       filePath: "examples/radix/checkbox-with-text.tsx",
@@ -811,6 +1994,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "checkbox-with-title": {
+      name: "checkbox-with-title",
+      filePath: "examples/radix/checkbox-with-title.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/checkbox-with-title")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "checkbox-with-title"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "collapsible-demo": {
       name: "collapsible-demo",
       filePath: "examples/radix/collapsible-demo.tsx",
@@ -824,6 +2020,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "collapsible-file-tree": {
+      name: "collapsible-file-tree",
+      filePath: "examples/radix/collapsible-file-tree.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/collapsible-file-tree")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "collapsible-file-tree"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "collapsible-settings": {
+      name: "collapsible-settings",
+      filePath: "examples/radix/collapsible-settings.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/collapsible-settings")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "collapsible-settings"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-auto-highlight": {
+      name: "combobox-auto-highlight",
+      filePath: "examples/radix/combobox-auto-highlight.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/combobox-auto-highlight")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-auto-highlight"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-basic": {
+      name: "combobox-basic",
+      filePath: "examples/radix/combobox-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/combobox-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "combobox-demo": {
       name: "combobox-demo",
       filePath: "examples/radix/combobox-demo.tsx",
@@ -837,6 +2085,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "combobox-disabled": {
+      name: "combobox-disabled",
+      filePath: "examples/radix/combobox-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/combobox-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "combobox-dropdown-menu": {
       name: "combobox-dropdown-menu",
       filePath: "examples/radix/combobox-dropdown-menu.tsx",
@@ -850,6 +2111,110 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "combobox-in-dialog": {
+      name: "combobox-in-dialog",
+      filePath: "examples/radix/combobox-in-dialog.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/combobox-in-dialog")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-in-dialog"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-in-popup": {
+      name: "combobox-in-popup",
+      filePath: "examples/radix/combobox-in-popup.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/combobox-in-popup")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-in-popup"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-invalid": {
+      name: "combobox-invalid",
+      filePath: "examples/radix/combobox-invalid.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/combobox-invalid")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-invalid"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-large-list": {
+      name: "combobox-large-list",
+      filePath: "examples/radix/combobox-large-list.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/combobox-large-list")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-large-list"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-multiple-disabled": {
+      name: "combobox-multiple-disabled",
+      filePath: "examples/radix/combobox-multiple-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/combobox-multiple-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-multiple-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-multiple-invalid": {
+      name: "combobox-multiple-invalid",
+      filePath: "examples/radix/combobox-multiple-invalid.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/combobox-multiple-invalid")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-multiple-invalid"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-multiple-no-remove": {
+      name: "combobox-multiple-no-remove",
+      filePath: "examples/radix/combobox-multiple-no-remove.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/combobox-multiple-no-remove")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-multiple-no-remove"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-multiple": {
+      name: "combobox-multiple",
+      filePath: "examples/radix/combobox-multiple.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/combobox-multiple")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-multiple"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "combobox-popover": {
       name: "combobox-popover",
       filePath: "examples/radix/combobox-popover.tsx",
@@ -876,6 +2241,110 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "combobox-with-clear": {
+      name: "combobox-with-clear",
+      filePath: "examples/radix/combobox-with-clear.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/combobox-with-clear")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-with-clear"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-with-custom-items": {
+      name: "combobox-with-custom-items",
+      filePath: "examples/radix/combobox-with-custom-items.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/combobox-with-custom-items")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-with-custom-items"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-with-form": {
+      name: "combobox-with-form",
+      filePath: "examples/radix/combobox-with-form.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/combobox-with-form")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-with-form"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-with-groups-and-separator": {
+      name: "combobox-with-groups-and-separator",
+      filePath: "examples/radix/combobox-with-groups-and-separator.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/combobox-with-groups-and-separator")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-with-groups-and-separator"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-with-groups": {
+      name: "combobox-with-groups",
+      filePath: "examples/radix/combobox-with-groups.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/combobox-with-groups")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-with-groups"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-with-other-inputs": {
+      name: "combobox-with-other-inputs",
+      filePath: "examples/radix/combobox-with-other-inputs.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/combobox-with-other-inputs")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-with-other-inputs"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "comboxbox-input-addon": {
+      name: "comboxbox-input-addon",
+      filePath: "examples/radix/comboxbox-input-addon.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/comboxbox-input-addon")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "comboxbox-input-addon"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "command-basic": {
+      name: "command-basic",
+      filePath: "examples/radix/command-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/command-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "command-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "command-demo": {
       name: "command-demo",
       filePath: "examples/radix/command-demo.tsx",
@@ -902,6 +2371,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "command-many-items": {
+      name: "command-many-items",
+      filePath: "examples/radix/command-many-items.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/command-many-items")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "command-many-items"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "command-with-groups": {
+      name: "command-with-groups",
+      filePath: "examples/radix/command-with-groups.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/command-with-groups")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "command-with-groups"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "command-with-shortcuts": {
+      name: "command-with-shortcuts",
+      filePath: "examples/radix/command-with-shortcuts.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/command-with-shortcuts")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "command-with-shortcuts"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "context-menu-basic": {
+      name: "context-menu-basic",
+      filePath: "examples/radix/context-menu-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/context-menu-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "context-menu-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "context-menu-demo": {
       name: "context-menu-demo",
       filePath: "examples/radix/context-menu-demo.tsx",
@@ -915,6 +2436,136 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "context-menu-in-dialog": {
+      name: "context-menu-in-dialog",
+      filePath: "examples/radix/context-menu-in-dialog.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/context-menu-in-dialog")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "context-menu-in-dialog"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "context-menu-with-checkboxes": {
+      name: "context-menu-with-checkboxes",
+      filePath: "examples/radix/context-menu-with-checkboxes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/context-menu-with-checkboxes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "context-menu-with-checkboxes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "context-menu-with-destructive": {
+      name: "context-menu-with-destructive",
+      filePath: "examples/radix/context-menu-with-destructive.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/context-menu-with-destructive")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "context-menu-with-destructive"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "context-menu-with-groups": {
+      name: "context-menu-with-groups",
+      filePath: "examples/radix/context-menu-with-groups.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/context-menu-with-groups")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "context-menu-with-groups"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "context-menu-with-icons": {
+      name: "context-menu-with-icons",
+      filePath: "examples/radix/context-menu-with-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/context-menu-with-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "context-menu-with-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "context-menu-with-radio": {
+      name: "context-menu-with-radio",
+      filePath: "examples/radix/context-menu-with-radio.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/context-menu-with-radio")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "context-menu-with-radio"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "context-menu-with-shortcuts": {
+      name: "context-menu-with-shortcuts",
+      filePath: "examples/radix/context-menu-with-shortcuts.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/context-menu-with-shortcuts")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "context-menu-with-shortcuts"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "context-menu-with-sides": {
+      name: "context-menu-with-sides",
+      filePath: "examples/radix/context-menu-with-sides.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/context-menu-with-sides")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "context-menu-with-sides"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "context-menu-with-submenu": {
+      name: "context-menu-with-submenu",
+      filePath: "examples/radix/context-menu-with-submenu.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/context-menu-with-submenu")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "context-menu-with-submenu"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "data-picker-with-dropdowns": {
+      name: "data-picker-with-dropdowns",
+      filePath: "examples/radix/data-picker-with-dropdowns.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/data-picker-with-dropdowns")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "data-picker-with-dropdowns"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "data-table-demo": {
       name: "data-table-demo",
       filePath: "examples/radix/data-table-demo.tsx",
@@ -941,6 +2592,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "date-picker-simple": {
+      name: "date-picker-simple",
+      filePath: "examples/radix/date-picker-simple.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/date-picker-simple")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "date-picker-simple"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "date-picker-with-presets": {
       name: "date-picker-with-presets",
       filePath: "examples/radix/date-picker-with-presets.tsx",
@@ -967,6 +2631,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "default-item-group": {
+      name: "default-item-group",
+      filePath: "examples/radix/default-item-group.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/default-item-group")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "default-item-group"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dialog-chat-settings": {
+      name: "dialog-chat-settings",
+      filePath: "examples/radix/dialog-chat-settings.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/dialog-chat-settings")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dialog-chat-settings"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "dialog-close-button": {
       name: "dialog-close-button",
       filePath: "examples/radix/dialog-close-button.tsx",
@@ -993,6 +2683,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "dialog-no-close-button": {
+      name: "dialog-no-close-button",
+      filePath: "examples/radix/dialog-no-close-button.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/dialog-no-close-button")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dialog-no-close-button"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dialog-scrollable-content": {
+      name: "dialog-scrollable-content",
+      filePath: "examples/radix/dialog-scrollable-content.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/dialog-scrollable-content")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dialog-scrollable-content"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dialog-with-form": {
+      name: "dialog-with-form",
+      filePath: "examples/radix/dialog-with-form.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/dialog-with-form")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dialog-with-form"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dialog-with-sticky-footer": {
+      name: "dialog-with-sticky-footer",
+      filePath: "examples/radix/dialog-with-sticky-footer.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/dialog-with-sticky-footer")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dialog-with-sticky-footer"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "drawer-demo": {
       name: "drawer-demo",
       filePath: "examples/radix/drawer-demo.tsx",
@@ -1019,6 +2761,45 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "drawer-scrollable-content": {
+      name: "drawer-scrollable-content",
+      filePath: "examples/radix/drawer-scrollable-content.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/drawer-scrollable-content")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "drawer-scrollable-content"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "drawer-with-sides": {
+      name: "drawer-with-sides",
+      filePath: "examples/radix/drawer-with-sides.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/drawer-with-sides")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "drawer-with-sides"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dropdown-menu-basic": {
+      name: "dropdown-menu-basic",
+      filePath: "examples/radix/dropdown-menu-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/dropdown-menu-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "dropdown-menu-checkboxes": {
       name: "dropdown-menu-checkboxes",
       filePath: "examples/radix/dropdown-menu-checkboxes.tsx",
@@ -1032,6 +2813,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "dropdown-menu-complex": {
+      name: "dropdown-menu-complex",
+      filePath: "examples/radix/dropdown-menu-complex.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/dropdown-menu-complex")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-complex"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "dropdown-menu-demo": {
       name: "dropdown-menu-demo",
       filePath: "examples/radix/dropdown-menu-demo.tsx",
@@ -1058,6 +2852,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "dropdown-menu-in-dialog": {
+      name: "dropdown-menu-in-dialog",
+      filePath: "examples/radix/dropdown-menu-in-dialog.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/dropdown-menu-in-dialog")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-in-dialog"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "dropdown-menu-radio-group": {
       name: "dropdown-menu-radio-group",
       filePath: "examples/radix/dropdown-menu-radio-group.tsx",
@@ -1071,6 +2878,123 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "dropdown-menu-with-avatar": {
+      name: "dropdown-menu-with-avatar",
+      filePath: "examples/radix/dropdown-menu-with-avatar.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/dropdown-menu-with-avatar")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-with-avatar"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dropdown-menu-with-checkboxes-icons": {
+      name: "dropdown-menu-with-checkboxes-icons",
+      filePath: "examples/radix/dropdown-menu-with-checkboxes-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/dropdown-menu-with-checkboxes-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-with-checkboxes-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dropdown-menu-with-checkboxes": {
+      name: "dropdown-menu-with-checkboxes",
+      filePath: "examples/radix/dropdown-menu-with-checkboxes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/dropdown-menu-with-checkboxes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-with-checkboxes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dropdown-menu-with-destructive": {
+      name: "dropdown-menu-with-destructive",
+      filePath: "examples/radix/dropdown-menu-with-destructive.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/dropdown-menu-with-destructive")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-with-destructive"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dropdown-menu-with-icons": {
+      name: "dropdown-menu-with-icons",
+      filePath: "examples/radix/dropdown-menu-with-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/dropdown-menu-with-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-with-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dropdown-menu-with-radio-icons": {
+      name: "dropdown-menu-with-radio-icons",
+      filePath: "examples/radix/dropdown-menu-with-radio-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/dropdown-menu-with-radio-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-with-radio-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dropdown-menu-with-radio": {
+      name: "dropdown-menu-with-radio",
+      filePath: "examples/radix/dropdown-menu-with-radio.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/dropdown-menu-with-radio")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-with-radio"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dropdown-menu-with-shortcuts": {
+      name: "dropdown-menu-with-shortcuts",
+      filePath: "examples/radix/dropdown-menu-with-shortcuts.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/dropdown-menu-with-shortcuts")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-with-shortcuts"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dropdown-menu-with-submenu": {
+      name: "dropdown-menu-with-submenu",
+      filePath: "examples/radix/dropdown-menu-with-submenu.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/dropdown-menu-with-submenu")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-with-submenu"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "empty-avatar-group": {
       name: "empty-avatar-group",
       filePath: "examples/radix/empty-avatar-group.tsx",
@@ -1110,6 +3034,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "empty-basic": {
+      name: "empty-basic",
+      filePath: "examples/radix/empty-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/empty-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "empty-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "empty-demo": {
       name: "empty-demo",
       filePath: "examples/radix/empty-demo.tsx",
@@ -1136,6 +3073,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "empty-in-card": {
+      name: "empty-in-card",
+      filePath: "examples/radix/empty-in-card.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/empty-in-card")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "empty-in-card"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "empty-input-group": {
       name: "empty-input-group",
       filePath: "examples/radix/empty-input-group.tsx",
@@ -1162,6 +3112,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "empty-with-border": {
+      name: "empty-with-border",
+      filePath: "examples/radix/empty-with-border.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/empty-with-border")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "empty-with-border"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "empty-with-icon": {
+      name: "empty-with-icon",
+      filePath: "examples/radix/empty-with-icon.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/empty-with-icon")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "empty-with-icon"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "empty-with-muted-background-alt": {
+      name: "empty-with-muted-background-alt",
+      filePath: "examples/radix/empty-with-muted-background-alt.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/empty-with-muted-background-alt")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "empty-with-muted-background-alt"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "empty-with-muted-background": {
+      name: "empty-with-muted-background",
+      filePath: "examples/radix/empty-with-muted-background.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/empty-with-muted-background")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "empty-with-muted-background"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "field-checkbox": {
       name: "field-checkbox",
       filePath: "examples/radix/field-checkbox.tsx",
@@ -1318,6 +3320,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "file-upload-list": {
+      name: "file-upload-list",
+      filePath: "examples/radix/file-upload-list.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/file-upload-list")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "file-upload-list"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "hover-card-demo": {
       name: "hover-card-demo",
       filePath: "examples/radix/hover-card-demo.tsx",
@@ -1331,6 +3346,45 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "hover-card-in-dialog": {
+      name: "hover-card-in-dialog",
+      filePath: "examples/radix/hover-card-in-dialog.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/hover-card-in-dialog")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "hover-card-in-dialog"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "hover-card-sides": {
+      name: "hover-card-sides",
+      filePath: "examples/radix/hover-card-sides.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/hover-card-sides")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "hover-card-sides"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-basic": {
+      name: "input-basic",
+      filePath: "examples/radix/input-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-demo": {
       name: "input-demo",
       filePath: "examples/radix/input-demo.tsx",
@@ -1357,6 +3411,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-fields": {
+      name: "input-fields",
+      filePath: "examples/radix/input-fields.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-fields")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-fields"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-file": {
       name: "input-file",
       filePath: "examples/radix/input-file.tsx",
@@ -1370,6 +3437,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-form": {
+      name: "input-form",
+      filePath: "examples/radix/input-form.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-form")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-form"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-group-basic": {
+      name: "input-group-basic",
+      filePath: "examples/radix/input-group-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-group-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-group-button-group": {
       name: "input-group-button-group",
       filePath: "examples/radix/input-group-button-group.tsx",
@@ -1448,6 +3541,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-group-in-card": {
+      name: "input-group-in-card",
+      filePath: "examples/radix/input-group-in-card.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-group-in-card")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-in-card"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-group-label": {
       name: "input-group-label",
       filePath: "examples/radix/input-group-label.tsx",
@@ -1487,6 +3593,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-group-textarea-examples": {
+      name: "input-group-textarea-examples",
+      filePath: "examples/radix/input-group-textarea-examples.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-group-textarea-examples")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-textarea-examples"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-group-textarea": {
       name: "input-group-textarea",
       filePath: "examples/radix/input-group-textarea.tsx",
@@ -1513,6 +3632,84 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-group-with-addons": {
+      name: "input-group-with-addons",
+      filePath: "examples/radix/input-group-with-addons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-group-with-addons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-with-addons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-group-with-buttons": {
+      name: "input-group-with-buttons",
+      filePath: "examples/radix/input-group-with-buttons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-group-with-buttons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-with-buttons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-group-with-kbd": {
+      name: "input-group-with-kbd",
+      filePath: "examples/radix/input-group-with-kbd.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-group-with-kbd")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-with-kbd"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-group-with-tooltip": {
+      name: "input-group-with-tooltip",
+      filePath: "examples/radix/input-group-with-tooltip.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-group-with-tooltip")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-with-tooltip"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-invalid": {
+      name: "input-invalid",
+      filePath: "examples/radix/input-invalid.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-invalid")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-invalid"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-otp-alphanumeric": {
+      name: "input-otp-alphanumeric",
+      filePath: "examples/radix/input-otp-alphanumeric.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-otp-alphanumeric")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-otp-alphanumeric"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-otp-controlled": {
       name: "input-otp-controlled",
       filePath: "examples/radix/input-otp-controlled.tsx",
@@ -1539,6 +3736,71 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-otp-disabled": {
+      name: "input-otp-disabled",
+      filePath: "examples/radix/input-otp-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-otp-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-otp-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-otp-fields": {
+      name: "input-otp-fields",
+      filePath: "examples/radix/input-otp-fields.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-otp-fields")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-otp-fields"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-otp-form": {
+      name: "input-otp-form",
+      filePath: "examples/radix/input-otp-form.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-otp-form")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-otp-form"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-otp-four-digits": {
+      name: "input-otp-four-digits",
+      filePath: "examples/radix/input-otp-four-digits.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-otp-four-digits")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-otp-four-digits"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-otp-invalid": {
+      name: "input-otp-invalid",
+      filePath: "examples/radix/input-otp-invalid.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-otp-invalid")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-otp-invalid"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-otp-pattern": {
       name: "input-otp-pattern",
       filePath: "examples/radix/input-otp-pattern.tsx",
@@ -1565,6 +3827,45 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-otp-simple": {
+      name: "input-otp-simple",
+      filePath: "examples/radix/input-otp-simple.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-otp-simple")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-otp-simple"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-otp-with-separator": {
+      name: "input-otp-with-separator",
+      filePath: "examples/radix/input-otp-with-separator.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-otp-with-separator")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-otp-with-separator"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-types": {
+      name: "input-types",
+      filePath: "examples/radix/input-types.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-types")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-types"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-with-button": {
       name: "input-with-button",
       filePath: "examples/radix/input-with-button.tsx",
@@ -1578,6 +3879,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-with-description": {
+      name: "input-with-description",
+      filePath: "examples/radix/input-with-description.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-with-description")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-with-description"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-with-label": {
       name: "input-with-label",
       filePath: "examples/radix/input-with-label.tsx",
@@ -1591,6 +3905,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-with-native-select": {
+      name: "input-with-native-select",
+      filePath: "examples/radix/input-with-native-select.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-with-native-select")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-with-native-select"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-with-select": {
+      name: "input-with-select",
+      filePath: "examples/radix/input-with-select.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-with-select")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-with-select"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-with-text": {
       name: "input-with-text",
       filePath: "examples/radix/input-with-text.tsx",
@@ -1617,6 +3957,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "item-default-extra-small": {
+      name: "item-default-extra-small",
+      filePath: "examples/radix/item-default-extra-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/item-default-extra-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-default-extra-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-default-small": {
+      name: "item-default-small",
+      filePath: "examples/radix/item-default-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/item-default-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-default-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-default-with-image": {
+      name: "item-default-with-image",
+      filePath: "examples/radix/item-default-with-image.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/item-default-with-image")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-default-with-image"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-default": {
+      name: "item-default",
+      filePath: "examples/radix/item-default.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/item-default")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-default"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "item-demo": {
       name: "item-demo",
       filePath: "examples/radix/item-demo.tsx",
@@ -1643,6 +4035,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "item-footer-examples": {
+      name: "item-footer-examples",
+      filePath: "examples/radix/item-footer-examples.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/item-footer-examples")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-footer-examples"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "item-group": {
       name: "item-group",
       filePath: "examples/radix/item-group.tsx",
@@ -1656,6 +4061,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "item-header-and-footer-examples": {
+      name: "item-header-and-footer-examples",
+      filePath: "examples/radix/item-header-and-footer-examples.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/item-header-and-footer-examples")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-header-and-footer-examples"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-header-examples": {
+      name: "item-header-examples",
+      filePath: "examples/radix/item-header-examples.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/item-header-examples")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-header-examples"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "item-header": {
       name: "item-header",
       filePath: "examples/radix/item-header.tsx",
@@ -1695,6 +4126,45 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "item-link-default": {
+      name: "item-link-default",
+      filePath: "examples/radix/item-link-default.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/item-link-default")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-link-default"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-link-muted": {
+      name: "item-link-muted",
+      filePath: "examples/radix/item-link-muted.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/item-link-muted")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-link-muted"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-link-outline": {
+      name: "item-link-outline",
+      filePath: "examples/radix/item-link-outline.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/item-link-outline")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-link-outline"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "item-link": {
       name: "item-link",
       filePath: "examples/radix/item-link.tsx",
@@ -1708,6 +4178,149 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "item-muted-extra-small": {
+      name: "item-muted-extra-small",
+      filePath: "examples/radix/item-muted-extra-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/item-muted-extra-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-muted-extra-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-muted-small": {
+      name: "item-muted-small",
+      filePath: "examples/radix/item-muted-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/item-muted-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-muted-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-muted-with-image": {
+      name: "item-muted-with-image",
+      filePath: "examples/radix/item-muted-with-image.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/item-muted-with-image")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-muted-with-image"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-muted": {
+      name: "item-muted",
+      filePath: "examples/radix/item-muted.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/item-muted")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-muted"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-outline-extra-small": {
+      name: "item-outline-extra-small",
+      filePath: "examples/radix/item-outline-extra-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/item-outline-extra-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-outline-extra-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-outline-small": {
+      name: "item-outline-small",
+      filePath: "examples/radix/item-outline-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/item-outline-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-outline-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-outline-with-image-extra-small": {
+      name: "item-outline-with-image-extra-small",
+      filePath: "examples/radix/item-outline-with-image-extra-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/item-outline-with-image-extra-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-outline-with-image-extra-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-outline-with-image-small": {
+      name: "item-outline-with-image-small",
+      filePath: "examples/radix/item-outline-with-image-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/item-outline-with-image-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-outline-with-image-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-outline-with-image": {
+      name: "item-outline-with-image",
+      filePath: "examples/radix/item-outline-with-image.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/item-outline-with-image")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-outline-with-image"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-outline": {
+      name: "item-outline",
+      filePath: "examples/radix/item-outline.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/item-outline")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-outline"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-separator-example": {
+      name: "item-separator-example",
+      filePath: "examples/radix/item-separator-example.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/item-separator-example")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-separator-example"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "item-size": {
       name: "item-size",
       filePath: "examples/radix/item-size.tsx",
@@ -1734,6 +4347,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "kbd-arrow-keys": {
+      name: "kbd-arrow-keys",
+      filePath: "examples/radix/kbd-arrow-keys.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/kbd-arrow-keys")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "kbd-arrow-keys"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "kbd-basic": {
+      name: "kbd-basic",
+      filePath: "examples/radix/kbd-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/kbd-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "kbd-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "kbd-button": {
       name: "kbd-button",
       filePath: "examples/radix/kbd-button.tsx",
@@ -1760,6 +4399,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "kbd-group-example": {
+      name: "kbd-group-example",
+      filePath: "examples/radix/kbd-group-example.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/kbd-group-example")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "kbd-group-example"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "kbd-group": {
       name: "kbd-group",
       filePath: "examples/radix/kbd-group.tsx",
@@ -1773,6 +4425,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "kbd-in-input-group": {
+      name: "kbd-in-input-group",
+      filePath: "examples/radix/kbd-in-input-group.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/kbd-in-input-group")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "kbd-in-input-group"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "kbd-in-tooltip": {
+      name: "kbd-in-tooltip",
+      filePath: "examples/radix/kbd-in-tooltip.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/kbd-in-tooltip")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "kbd-in-tooltip"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "kbd-input-group": {
       name: "kbd-input-group",
       filePath: "examples/radix/kbd-input-group.tsx",
@@ -1786,6 +4464,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "kbd-modifier-keys": {
+      name: "kbd-modifier-keys",
+      filePath: "examples/radix/kbd-modifier-keys.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/kbd-modifier-keys")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "kbd-modifier-keys"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "kbd-tooltip": {
       name: "kbd-tooltip",
       filePath: "examples/radix/kbd-tooltip.tsx",
@@ -1799,6 +4490,45 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "kbd-with-icons-and-text": {
+      name: "kbd-with-icons-and-text",
+      filePath: "examples/radix/kbd-with-icons-and-text.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/kbd-with-icons-and-text")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "kbd-with-icons-and-text"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "kbd-with-icons": {
+      name: "kbd-with-icons",
+      filePath: "examples/radix/kbd-with-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/kbd-with-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "kbd-with-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "kbd-with-samp": {
+      name: "kbd-with-samp",
+      filePath: "examples/radix/kbd-with-samp.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/kbd-with-samp")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "kbd-with-samp"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "label-demo": {
       name: "label-demo",
       filePath: "examples/radix/label-demo.tsx",
@@ -1812,6 +4542,71 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "label-disabled": {
+      name: "label-disabled",
+      filePath: "examples/radix/label-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/label-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "label-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "label-with-checkbox": {
+      name: "label-with-checkbox",
+      filePath: "examples/radix/label-with-checkbox.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/label-with-checkbox")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "label-with-checkbox"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "label-with-input": {
+      name: "label-with-input",
+      filePath: "examples/radix/label-with-input.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/label-with-input")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "label-with-input"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "label-with-textarea": {
+      name: "label-with-textarea",
+      filePath: "examples/radix/label-with-textarea.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/label-with-textarea")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "label-with-textarea"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "menubar-basic": {
+      name: "menubar-basic",
+      filePath: "examples/radix/menubar-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/menubar-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "menubar-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "menubar-demo": {
       name: "menubar-demo",
       filePath: "examples/radix/menubar-demo.tsx",
@@ -1825,6 +4620,149 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "menubar-destructive": {
+      name: "menubar-destructive",
+      filePath: "examples/radix/menubar-destructive.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/menubar-destructive")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "menubar-destructive"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "menubar-format": {
+      name: "menubar-format",
+      filePath: "examples/radix/menubar-format.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/menubar-format")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "menubar-format"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "menubar-in-dialog": {
+      name: "menubar-in-dialog",
+      filePath: "examples/radix/menubar-in-dialog.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/menubar-in-dialog")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "menubar-in-dialog"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "menubar-insert": {
+      name: "menubar-insert",
+      filePath: "examples/radix/menubar-insert.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/menubar-insert")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "menubar-insert"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "menubar-with-checkboxes": {
+      name: "menubar-with-checkboxes",
+      filePath: "examples/radix/menubar-with-checkboxes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/menubar-with-checkboxes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "menubar-with-checkboxes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "menubar-with-icons": {
+      name: "menubar-with-icons",
+      filePath: "examples/radix/menubar-with-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/menubar-with-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "menubar-with-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "menubar-with-radio": {
+      name: "menubar-with-radio",
+      filePath: "examples/radix/menubar-with-radio.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/menubar-with-radio")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "menubar-with-radio"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "menubar-with-shortcuts": {
+      name: "menubar-with-shortcuts",
+      filePath: "examples/radix/menubar-with-shortcuts.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/menubar-with-shortcuts")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "menubar-with-shortcuts"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "menubar-with-submenu": {
+      name: "menubar-with-submenu",
+      filePath: "examples/radix/menubar-with-submenu.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/menubar-with-submenu")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "menubar-with-submenu"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "muted-item-group": {
+      name: "muted-item-group",
+      filePath: "examples/radix/muted-item-group.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/muted-item-group")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "muted-item-group"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "native-select-basic": {
+      name: "native-select-basic",
+      filePath: "examples/radix/native-select-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/native-select-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "native-select-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "native-select-demo": {
       name: "native-select-demo",
       filePath: "examples/radix/native-select-demo.tsx",
@@ -1851,6 +4789,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "native-select-fields": {
+      name: "native-select-fields",
+      filePath: "examples/radix/native-select-fields.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/native-select-fields")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "native-select-fields"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "native-select-groups": {
       name: "native-select-groups",
       filePath: "examples/radix/native-select-groups.tsx",
@@ -1877,6 +4828,45 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "native-select-sizes": {
+      name: "native-select-sizes",
+      filePath: "examples/radix/native-select-sizes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/native-select-sizes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "native-select-sizes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "native-select-with-field": {
+      name: "native-select-with-field",
+      filePath: "examples/radix/native-select-with-field.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/native-select-with-field")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "native-select-with-field"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "native-select-with-groups": {
+      name: "native-select-with-groups",
+      filePath: "examples/radix/native-select-with-groups.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/native-select-with-groups")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "native-select-with-groups"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "navigation-menu-demo": {
       name: "navigation-menu-demo",
       filePath: "examples/radix/navigation-menu-demo.tsx",
@@ -1890,6 +4880,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "navigation-menu-with-viewport": {
+      name: "navigation-menu-with-viewport",
+      filePath: "examples/radix/navigation-menu-with-viewport.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/navigation-menu-with-viewport")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "navigation-menu-with-viewport"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "navigation-menu-without-viewport": {
+      name: "navigation-menu-without-viewport",
+      filePath: "examples/radix/navigation-menu-without-viewport.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/navigation-menu-without-viewport")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "navigation-menu-without-viewport"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "outline-item-group": {
+      name: "outline-item-group",
+      filePath: "examples/radix/outline-item-group.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/outline-item-group")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "outline-item-group"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "pagination-basic": {
+      name: "pagination-basic",
+      filePath: "examples/radix/pagination-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/pagination-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "pagination-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "pagination-demo": {
       name: "pagination-demo",
       filePath: "examples/radix/pagination-demo.tsx",
@@ -1903,6 +4945,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "pagination-icons-only": {
+      name: "pagination-icons-only",
+      filePath: "examples/radix/pagination-icons-only.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/pagination-icons-only")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "pagination-icons-only"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "pagination-simple": {
+      name: "pagination-simple",
+      filePath: "examples/radix/pagination-simple.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/pagination-simple")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "pagination-simple"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "popover-alignments": {
+      name: "popover-alignments",
+      filePath: "examples/radix/popover-alignments.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/popover-alignments")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "popover-alignments"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "popover-basic": {
+      name: "popover-basic",
+      filePath: "examples/radix/popover-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/popover-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "popover-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "popover-demo": {
       name: "popover-demo",
       filePath: "examples/radix/popover-demo.tsx",
@@ -1916,6 +5010,45 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "popover-in-dialog": {
+      name: "popover-in-dialog",
+      filePath: "examples/radix/popover-in-dialog.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/popover-in-dialog")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "popover-in-dialog"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "popover-with-form": {
+      name: "popover-with-form",
+      filePath: "examples/radix/popover-with-form.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/popover-with-form")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "popover-with-form"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "progress-controlled": {
+      name: "progress-controlled",
+      filePath: "examples/radix/progress-controlled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/progress-controlled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "progress-controlled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "progress-demo": {
       name: "progress-demo",
       filePath: "examples/radix/progress-demo.tsx",
@@ -1929,6 +5062,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "progress-values": {
+      name: "progress-values",
+      filePath: "examples/radix/progress-values.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/progress-values")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "progress-values"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "progress-with-label": {
+      name: "progress-with-label",
+      filePath: "examples/radix/progress-with-label.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/progress-with-label")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "progress-with-label"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "radio-fields": {
+      name: "radio-fields",
+      filePath: "examples/radix/radio-fields.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/radio-fields")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "radio-fields"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "radio-group-basic": {
+      name: "radio-group-basic",
+      filePath: "examples/radix/radio-group-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/radio-group-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "radio-group-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "radio-group-demo": {
       name: "radio-group-demo",
       filePath: "examples/radix/radio-group-demo.tsx",
@@ -1942,6 +5127,84 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "radio-group-disabled": {
+      name: "radio-group-disabled",
+      filePath: "examples/radix/radio-group-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/radio-group-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "radio-group-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "radio-group-grid": {
+      name: "radio-group-grid",
+      filePath: "examples/radix/radio-group-grid.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/radio-group-grid")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "radio-group-grid"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "radio-group-invalid": {
+      name: "radio-group-invalid",
+      filePath: "examples/radix/radio-group-invalid.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/radio-group-invalid")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "radio-group-invalid"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "radio-group-with-descriptions": {
+      name: "radio-group-with-descriptions",
+      filePath: "examples/radix/radio-group-with-descriptions.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/radio-group-with-descriptions")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "radio-group-with-descriptions"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "radio-group-with-field-set": {
+      name: "radio-group-with-field-set",
+      filePath: "examples/radix/radio-group-with-field-set.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/radio-group-with-field-set")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "radio-group-with-field-set"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "resizable-controlled": {
+      name: "resizable-controlled",
+      filePath: "examples/radix/resizable-controlled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/resizable-controlled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "resizable-controlled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "resizable-demo-with-handle": {
       name: "resizable-demo-with-handle",
       filePath: "examples/radix/resizable-demo-with-handle.tsx",
@@ -1981,6 +5244,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "resizable-horizontal": {
+      name: "resizable-horizontal",
+      filePath: "examples/radix/resizable-horizontal.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/resizable-horizontal")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "resizable-horizontal"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "resizable-nested": {
+      name: "resizable-nested",
+      filePath: "examples/radix/resizable-nested.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/resizable-nested")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "resizable-nested"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "resizable-vertical": {
       name: "resizable-vertical",
       filePath: "examples/radix/resizable-vertical.tsx",
@@ -1994,6 +5283,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "resizable-with-handle": {
+      name: "resizable-with-handle",
+      filePath: "examples/radix/resizable-with-handle.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/resizable-with-handle")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "resizable-with-handle"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "scroll-area-demo": {
       name: "scroll-area-demo",
       filePath: "examples/radix/scroll-area-demo.tsx",
@@ -2020,6 +5322,45 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "scroll-area-horizontal": {
+      name: "scroll-area-horizontal",
+      filePath: "examples/radix/scroll-area-horizontal.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/scroll-area-horizontal")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "scroll-area-horizontal"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "scroll-area-vertical": {
+      name: "scroll-area-vertical",
+      filePath: "examples/radix/scroll-area-vertical.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/scroll-area-vertical")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "scroll-area-vertical"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-basic": {
+      name: "select-basic",
+      filePath: "examples/radix/select-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/select-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "select-demo": {
       name: "select-demo",
       filePath: "examples/radix/select-demo.tsx",
@@ -2033,6 +5374,110 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "select-disabled": {
+      name: "select-disabled",
+      filePath: "examples/radix/select-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/select-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-fields": {
+      name: "select-fields",
+      filePath: "examples/radix/select-fields.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/select-fields")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-fields"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-in-dialog": {
+      name: "select-in-dialog",
+      filePath: "examples/radix/select-in-dialog.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/select-in-dialog")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-in-dialog"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-inline": {
+      name: "select-inline",
+      filePath: "examples/radix/select-inline.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/select-inline")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-inline"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-invalid": {
+      name: "select-invalid",
+      filePath: "examples/radix/select-invalid.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/select-invalid")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-invalid"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-item-aligned": {
+      name: "select-item-aligned",
+      filePath: "examples/radix/select-item-aligned.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/select-item-aligned")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-item-aligned"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-large-list": {
+      name: "select-large-list",
+      filePath: "examples/radix/select-large-list.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/select-large-list")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-large-list"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-plan": {
+      name: "select-plan",
+      filePath: "examples/radix/select-plan.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/select-plan")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-plan"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "select-scrollable": {
       name: "select-scrollable",
       filePath: "examples/radix/select-scrollable.tsx",
@@ -2046,6 +5491,71 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "select-sizes": {
+      name: "select-sizes",
+      filePath: "examples/radix/select-sizes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/select-sizes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-sizes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-with-button": {
+      name: "select-with-button",
+      filePath: "examples/radix/select-with-button.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/select-with-button")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-with-button"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-with-field": {
+      name: "select-with-field",
+      filePath: "examples/radix/select-with-field.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/select-with-field")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-with-field"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-with-groups": {
+      name: "select-with-groups",
+      filePath: "examples/radix/select-with-groups.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/select-with-groups")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-with-groups"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-with-icons": {
+      name: "select-with-icons",
+      filePath: "examples/radix/select-with-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/select-with-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-with-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "separator-demo": {
       name: "separator-demo",
       filePath: "examples/radix/separator-demo.tsx",
@@ -2059,6 +5569,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "separator-horizontal": {
+      name: "separator-horizontal",
+      filePath: "examples/radix/separator-horizontal.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/separator-horizontal")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "separator-horizontal"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "separator-in-list": {
+      name: "separator-in-list",
+      filePath: "examples/radix/separator-in-list.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/separator-in-list")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "separator-in-list"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "separator-vertical-menu": {
+      name: "separator-vertical-menu",
+      filePath: "examples/radix/separator-vertical-menu.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/separator-vertical-menu")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "separator-vertical-menu"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "separator-vertical": {
+      name: "separator-vertical",
+      filePath: "examples/radix/separator-vertical.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/separator-vertical")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "separator-vertical"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "sheet-demo": {
       name: "sheet-demo",
       filePath: "examples/radix/sheet-demo.tsx",
@@ -2072,6 +5634,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "sheet-no-close-button": {
+      name: "sheet-no-close-button",
+      filePath: "examples/radix/sheet-no-close-button.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/sheet-no-close-button")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "sheet-no-close-button"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "sheet-side": {
       name: "sheet-side",
       filePath: "examples/radix/sheet-side.tsx",
@@ -2085,6 +5660,45 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "sheet-with-form": {
+      name: "sheet-with-form",
+      filePath: "examples/radix/sheet-with-form.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/sheet-with-form")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "sheet-with-form"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "sheet-with-sides": {
+      name: "sheet-with-sides",
+      filePath: "examples/radix/sheet-with-sides.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/sheet-with-sides")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "sheet-with-sides"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "skeleton-avatar": {
+      name: "skeleton-avatar",
+      filePath: "examples/radix/skeleton-avatar.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/skeleton-avatar")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "skeleton-avatar"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "skeleton-card": {
       name: "skeleton-card",
       filePath: "examples/radix/skeleton-card.tsx",
@@ -2111,6 +5725,71 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "skeleton-form": {
+      name: "skeleton-form",
+      filePath: "examples/radix/skeleton-form.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/skeleton-form")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "skeleton-form"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "skeleton-table": {
+      name: "skeleton-table",
+      filePath: "examples/radix/skeleton-table.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/skeleton-table")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "skeleton-table"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "skeleton-text": {
+      name: "skeleton-text",
+      filePath: "examples/radix/skeleton-text.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/skeleton-text")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "skeleton-text"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "slider-basic": {
+      name: "slider-basic",
+      filePath: "examples/radix/slider-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/slider-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "slider-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "slider-controlled": {
+      name: "slider-controlled",
+      filePath: "examples/radix/slider-controlled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/slider-controlled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "slider-controlled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "slider-demo": {
       name: "slider-demo",
       filePath: "examples/radix/slider-demo.tsx",
@@ -2124,6 +5803,84 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "slider-disabled": {
+      name: "slider-disabled",
+      filePath: "examples/radix/slider-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/slider-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "slider-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "slider-fields": {
+      name: "slider-fields",
+      filePath: "examples/radix/slider-fields.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/slider-fields")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "slider-fields"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "slider-multiple": {
+      name: "slider-multiple",
+      filePath: "examples/radix/slider-multiple.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/slider-multiple")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "slider-multiple"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "slider-range": {
+      name: "slider-range",
+      filePath: "examples/radix/slider-range.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/slider-range")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "slider-range"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "slider-vertical": {
+      name: "slider-vertical",
+      filePath: "examples/radix/slider-vertical.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/slider-vertical")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "slider-vertical"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "sonner-basic": {
+      name: "sonner-basic",
+      filePath: "examples/radix/sonner-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/sonner-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "sonner-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "sonner-demo": {
       name: "sonner-demo",
       filePath: "examples/radix/sonner-demo.tsx",
@@ -2150,6 +5907,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "sonner-with-description": {
+      name: "sonner-with-description",
+      filePath: "examples/radix/sonner-with-description.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/sonner-with-description")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "sonner-with-description"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "spinner-badge": {
       name: "spinner-badge",
       filePath: "examples/radix/spinner-badge.tsx",
@@ -2241,6 +6011,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "spinner-in-badges": {
+      name: "spinner-in-badges",
+      filePath: "examples/radix/spinner-in-badges.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/spinner-in-badges")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "spinner-in-badges"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "spinner-in-buttons": {
+      name: "spinner-in-buttons",
+      filePath: "examples/radix/spinner-in-buttons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/spinner-in-buttons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "spinner-in-buttons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "spinner-in-empty": {
+      name: "spinner-in-empty",
+      filePath: "examples/radix/spinner-in-empty.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/spinner-in-empty")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "spinner-in-empty"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "spinner-in-input-group": {
+      name: "spinner-in-input-group",
+      filePath: "examples/radix/spinner-in-input-group.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/spinner-in-input-group")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "spinner-in-input-group"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "spinner-input-group": {
       name: "spinner-input-group",
       filePath: "examples/radix/spinner-input-group.tsx",
@@ -2280,6 +6102,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "switch-basic": {
+      name: "switch-basic",
+      filePath: "examples/radix/switch-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/switch-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "switch-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "switch-demo": {
       name: "switch-demo",
       filePath: "examples/radix/switch-demo.tsx",
@@ -2293,6 +6128,84 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "switch-disabled": {
+      name: "switch-disabled",
+      filePath: "examples/radix/switch-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/switch-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "switch-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "switch-fields": {
+      name: "switch-fields",
+      filePath: "examples/radix/switch-fields.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/switch-fields")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "switch-fields"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "switch-sizes": {
+      name: "switch-sizes",
+      filePath: "examples/radix/switch-sizes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/switch-sizes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "switch-sizes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "switch-with-description": {
+      name: "switch-with-description",
+      filePath: "examples/radix/switch-with-description.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/switch-with-description")
+        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-with-label": {
+      name: "switch-with-label",
+      filePath: "examples/radix/switch-with-label.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/switch-with-label")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "switch-with-label"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "table-basic": {
+      name: "table-basic",
+      filePath: "examples/radix/table-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/table-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "table-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "table-demo": {
       name: "table-demo",
       filePath: "examples/radix/table-demo.tsx",
@@ -2306,6 +6219,97 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "table-simple": {
+      name: "table-simple",
+      filePath: "examples/radix/table-simple.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/table-simple")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "table-simple"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "table-with-actions": {
+      name: "table-with-actions",
+      filePath: "examples/radix/table-with-actions.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/table-with-actions")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "table-with-actions"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "table-with-badges": {
+      name: "table-with-badges",
+      filePath: "examples/radix/table-with-badges.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/table-with-badges")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "table-with-badges"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "table-with-footer": {
+      name: "table-with-footer",
+      filePath: "examples/radix/table-with-footer.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/table-with-footer")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "table-with-footer"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "table-with-input": {
+      name: "table-with-input",
+      filePath: "examples/radix/table-with-input.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/table-with-input")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "table-with-input"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "table-with-select": {
+      name: "table-with-select",
+      filePath: "examples/radix/table-with-select.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/table-with-select")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "table-with-select"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-basic": {
+      name: "tabs-basic",
+      filePath: "examples/radix/tabs-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/tabs-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "tabs-demo": {
       name: "tabs-demo",
       filePath: "examples/radix/tabs-demo.tsx",
@@ -2319,6 +6323,175 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "tabs-disabled": {
+      name: "tabs-disabled",
+      filePath: "examples/radix/tabs-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/tabs-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-icon-only": {
+      name: "tabs-icon-only",
+      filePath: "examples/radix/tabs-icon-only.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/tabs-icon-only")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-icon-only"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-line-disabled": {
+      name: "tabs-line-disabled",
+      filePath: "examples/radix/tabs-line-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/tabs-line-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-line-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-line-with-content": {
+      name: "tabs-line-with-content",
+      filePath: "examples/radix/tabs-line-with-content.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/tabs-line-with-content")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-line-with-content"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-line": {
+      name: "tabs-line",
+      filePath: "examples/radix/tabs-line.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/tabs-line")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-line"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-multiple": {
+      name: "tabs-multiple",
+      filePath: "examples/radix/tabs-multiple.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/tabs-multiple")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-multiple"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-variants-comparison": {
+      name: "tabs-variants-comparison",
+      filePath: "examples/radix/tabs-variants-comparison.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/tabs-variants-comparison")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-variants-comparison"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-vertical": {
+      name: "tabs-vertical",
+      filePath: "examples/radix/tabs-vertical.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/tabs-vertical")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-vertical"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-with-content": {
+      name: "tabs-with-content",
+      filePath: "examples/radix/tabs-with-content.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/tabs-with-content")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-with-content"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-with-dropdown": {
+      name: "tabs-with-dropdown",
+      filePath: "examples/radix/tabs-with-dropdown.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/tabs-with-dropdown")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-with-dropdown"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-with-icons": {
+      name: "tabs-with-icons",
+      filePath: "examples/radix/tabs-with-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/tabs-with-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-with-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-with-input-and-button": {
+      name: "tabs-with-input-and-button",
+      filePath: "examples/radix/tabs-with-input-and-button.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/tabs-with-input-and-button")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-with-input-and-button"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "textarea-basic": {
+      name: "textarea-basic",
+      filePath: "examples/radix/textarea-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/textarea-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "textarea-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "textarea-demo": {
       name: "textarea-demo",
       filePath: "examples/radix/textarea-demo.tsx",
@@ -2345,6 +6518,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "textarea-fields": {
+      name: "textarea-fields",
+      filePath: "examples/radix/textarea-fields.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/textarea-fields")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "textarea-fields"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "textarea-invalid": {
+      name: "textarea-invalid",
+      filePath: "examples/radix/textarea-invalid.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/textarea-invalid")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "textarea-invalid"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "textarea-with-button": {
       name: "textarea-with-button",
       filePath: "examples/radix/textarea-with-button.tsx",
@@ -2358,6 +6557,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "textarea-with-description": {
+      name: "textarea-with-description",
+      filePath: "examples/radix/textarea-with-description.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/textarea-with-description")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "textarea-with-description"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "textarea-with-label": {
       name: "textarea-with-label",
       filePath: "examples/radix/textarea-with-label.tsx",
@@ -2384,6 +6596,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "toggle-basic": {
+      name: "toggle-basic",
+      filePath: "examples/radix/toggle-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/toggle-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "toggle-demo": {
       name: "toggle-demo",
       filePath: "examples/radix/toggle-demo.tsx",
@@ -2410,6 +6635,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "toggle-group-basic": {
+      name: "toggle-group-basic",
+      filePath: "examples/radix/toggle-group-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/toggle-group-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "toggle-group-date-range": {
+      name: "toggle-group-date-range",
+      filePath: "examples/radix/toggle-group-date-range.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/toggle-group-date-range")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-date-range"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "toggle-group-demo": {
       name: "toggle-group-demo",
       filePath: "examples/radix/toggle-group-demo.tsx",
@@ -2436,6 +6687,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "toggle-group-filter": {
+      name: "toggle-group-filter",
+      filePath: "examples/radix/toggle-group-filter.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/toggle-group-filter")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-filter"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "toggle-group-lg": {
       name: "toggle-group-lg",
       filePath: "examples/radix/toggle-group-lg.tsx",
@@ -2449,6 +6713,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "toggle-group-outline-with-icons": {
+      name: "toggle-group-outline-with-icons",
+      filePath: "examples/radix/toggle-group-outline-with-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/toggle-group-outline-with-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-outline-with-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "toggle-group-outline": {
       name: "toggle-group-outline",
       filePath: "examples/radix/toggle-group-outline.tsx",
@@ -2475,6 +6752,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "toggle-group-sizes": {
+      name: "toggle-group-sizes",
+      filePath: "examples/radix/toggle-group-sizes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/toggle-group-sizes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-sizes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "toggle-group-sm": {
       name: "toggle-group-sm",
       filePath: "examples/radix/toggle-group-sm.tsx",
@@ -2488,6 +6778,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "toggle-group-sort": {
+      name: "toggle-group-sort",
+      filePath: "examples/radix/toggle-group-sort.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/toggle-group-sort")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-sort"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "toggle-group-spacing": {
       name: "toggle-group-spacing",
       filePath: "examples/radix/toggle-group-spacing.tsx",
@@ -2501,6 +6804,86 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "toggle-group-vertical-outline-with-icons": {
+      name: "toggle-group-vertical-outline-with-icons",
+      filePath: "examples/radix/toggle-group-vertical-outline-with-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import(
+          "./radix/toggle-group-vertical-outline-with-icons"
+        )
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-vertical-outline-with-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "toggle-group-vertical-outline": {
+      name: "toggle-group-vertical-outline",
+      filePath: "examples/radix/toggle-group-vertical-outline.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/toggle-group-vertical-outline")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-vertical-outline"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "toggle-group-vertical-with-spacing": {
+      name: "toggle-group-vertical-with-spacing",
+      filePath: "examples/radix/toggle-group-vertical-with-spacing.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/toggle-group-vertical-with-spacing")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-vertical-with-spacing"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "toggle-group-vertical": {
+      name: "toggle-group-vertical",
+      filePath: "examples/radix/toggle-group-vertical.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/toggle-group-vertical")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-vertical"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "toggle-group-with-icons": {
+      name: "toggle-group-with-icons",
+      filePath: "examples/radix/toggle-group-with-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/toggle-group-with-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-with-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "toggle-group-with-input-and-select": {
+      name: "toggle-group-with-input-and-select",
+      filePath: "examples/radix/toggle-group-with-input-and-select.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/toggle-group-with-input-and-select")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-with-input-and-select"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "toggle-lg": {
       name: "toggle-lg",
       filePath: "examples/radix/toggle-lg.tsx",
@@ -2527,6 +6910,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "toggle-sizes": {
+      name: "toggle-sizes",
+      filePath: "examples/radix/toggle-sizes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/toggle-sizes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-sizes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "toggle-sm": {
       name: "toggle-sm",
       filePath: "examples/radix/toggle-sm.tsx",
@@ -2540,6 +6936,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "toggle-with-button-icon-text": {
+      name: "toggle-with-button-icon-text",
+      filePath: "examples/radix/toggle-with-button-icon-text.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/toggle-with-button-icon-text")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-with-button-icon-text"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "toggle-with-button-icon": {
+      name: "toggle-with-button-icon",
+      filePath: "examples/radix/toggle-with-button-icon.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/toggle-with-button-icon")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-with-button-icon"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "toggle-with-button-text": {
+      name: "toggle-with-button-text",
+      filePath: "examples/radix/toggle-with-button-text.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/toggle-with-button-text")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-with-button-text"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "toggle-with-icon": {
+      name: "toggle-with-icon",
+      filePath: "examples/radix/toggle-with-icon.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/toggle-with-icon")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-with-icon"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "toggle-with-text": {
       name: "toggle-with-text",
       filePath: "examples/radix/toggle-with-text.tsx",
@@ -2553,6 +7001,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "tooltip-basic": {
+      name: "tooltip-basic",
+      filePath: "examples/radix/tooltip-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/tooltip-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tooltip-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "tooltip-demo": {
       name: "tooltip-demo",
       filePath: "examples/radix/tooltip-demo.tsx",
@@ -2566,6 +7027,97 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "tooltip-disabled": {
+      name: "tooltip-disabled",
+      filePath: "examples/radix/tooltip-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/tooltip-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tooltip-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tooltip-formatted": {
+      name: "tooltip-formatted",
+      filePath: "examples/radix/tooltip-formatted.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/tooltip-formatted")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tooltip-formatted"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tooltip-long-content": {
+      name: "tooltip-long-content",
+      filePath: "examples/radix/tooltip-long-content.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/tooltip-long-content")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tooltip-long-content"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tooltip-on-link": {
+      name: "tooltip-on-link",
+      filePath: "examples/radix/tooltip-on-link.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/tooltip-on-link")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tooltip-on-link"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tooltip-sides": {
+      name: "tooltip-sides",
+      filePath: "examples/radix/tooltip-sides.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/tooltip-sides")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tooltip-sides"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tooltip-with-icon": {
+      name: "tooltip-with-icon",
+      filePath: "examples/radix/tooltip-with-icon.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/tooltip-with-icon")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tooltip-with-icon"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tooltip-with-keyboard": {
+      name: "tooltip-with-keyboard",
+      filePath: "examples/radix/tooltip-with-keyboard.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/tooltip-with-keyboard")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tooltip-with-keyboard"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "typography-blockquote": {
       name: "typography-blockquote",
       filePath: "examples/radix/typography-blockquote.tsx",
@@ -2750,6 +7302,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
     },
   },
   base: {
+    "accordion-basic": {
+      name: "accordion-basic",
+      filePath: "examples/base/accordion-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/accordion-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "accordion-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "accordion-borders": {
       name: "accordion-borders",
       filePath: "examples/base/accordion-borders.tsx",
@@ -2802,6 +7367,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "accordion-in-card": {
+      name: "accordion-in-card",
+      filePath: "examples/base/accordion-in-card.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/accordion-in-card")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "accordion-in-card"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "accordion-multiple": {
       name: "accordion-multiple",
       filePath: "examples/base/accordion-multiple.tsx",
@@ -2815,6 +7393,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "accordion-with-borders": {
+      name: "accordion-with-borders",
+      filePath: "examples/base/accordion-with-borders.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/accordion-with-borders")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "accordion-with-borders"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "accordion-with-disabled": {
+      name: "accordion-with-disabled",
+      filePath: "examples/base/accordion-with-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/accordion-with-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "accordion-with-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "alert-demo": {
       name: "alert-demo",
       filePath: "examples/base/alert-demo.tsx",
@@ -2841,6 +7445,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "alert-dialog-basic": {
+      name: "alert-dialog-basic",
+      filePath: "examples/base/alert-dialog-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/alert-dialog-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "alert-dialog-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "alert-dialog-demo": {
       name: "alert-dialog-demo",
       filePath: "examples/base/alert-dialog-demo.tsx",
@@ -2854,6 +7471,123 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "alert-dialog-destructive": {
+      name: "alert-dialog-destructive",
+      filePath: "examples/base/alert-dialog-destructive.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/alert-dialog-destructive")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "alert-dialog-destructive"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "alert-dialog-in-dialog": {
+      name: "alert-dialog-in-dialog",
+      filePath: "examples/base/alert-dialog-in-dialog.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/alert-dialog-in-dialog")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "alert-dialog-in-dialog"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "alert-dialog-small-with-media": {
+      name: "alert-dialog-small-with-media",
+      filePath: "examples/base/alert-dialog-small-with-media.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/alert-dialog-small-with-media")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "alert-dialog-small-with-media"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "alert-dialog-small": {
+      name: "alert-dialog-small",
+      filePath: "examples/base/alert-dialog-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/alert-dialog-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "alert-dialog-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "alert-dialog-with-media": {
+      name: "alert-dialog-with-media",
+      filePath: "examples/base/alert-dialog-with-media.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/alert-dialog-with-media")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "alert-dialog-with-media"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "alert-example1": {
+      name: "alert-example1",
+      filePath: "examples/base/alert-example1.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/alert-example1")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "alert-example1"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "alert-example2": {
+      name: "alert-example2",
+      filePath: "examples/base/alert-example2.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/alert-example2")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "alert-example2"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "alert-example3": {
+      name: "alert-example3",
+      filePath: "examples/base/alert-example3.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/alert-example3")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "alert-example3"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "alert-example4": {
+      name: "alert-example4",
+      filePath: "examples/base/alert-example4.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/alert-example4")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "alert-example4"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "aspect-ratio-demo": {
       name: "aspect-ratio-demo",
       filePath: "examples/base/aspect-ratio-demo.tsx",
@@ -2867,6 +7601,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "aspect-ratio16x9": {
+      name: "aspect-ratio16x9",
+      filePath: "examples/base/aspect-ratio16x9.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/aspect-ratio16x9")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "aspect-ratio16x9"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "aspect-ratio1x1": {
+      name: "aspect-ratio1x1",
+      filePath: "examples/base/aspect-ratio1x1.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/aspect-ratio1x1")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "aspect-ratio1x1"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "aspect-ratio21x9": {
+      name: "aspect-ratio21x9",
+      filePath: "examples/base/aspect-ratio21x9.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/aspect-ratio21x9")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "aspect-ratio21x9"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "aspect-ratio9x16": {
+      name: "aspect-ratio9x16",
+      filePath: "examples/base/aspect-ratio9x16.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/aspect-ratio9x16")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "aspect-ratio9x16"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "avatar-demo": {
       name: "avatar-demo",
       filePath: "examples/base/avatar-demo.tsx",
@@ -2880,6 +7666,123 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "avatar-group-example": {
+      name: "avatar-group-example",
+      filePath: "examples/base/avatar-group-example.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/avatar-group-example")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "avatar-group-example"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "avatar-group-with-count": {
+      name: "avatar-group-with-count",
+      filePath: "examples/base/avatar-group-with-count.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/avatar-group-with-count")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "avatar-group-with-count"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "avatar-group-with-icon-count": {
+      name: "avatar-group-with-icon-count",
+      filePath: "examples/base/avatar-group-with-icon-count.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/avatar-group-with-icon-count")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "avatar-group-with-icon-count"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "avatar-in-empty": {
+      name: "avatar-in-empty",
+      filePath: "examples/base/avatar-in-empty.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/avatar-in-empty")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "avatar-in-empty"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "avatar-sizes": {
+      name: "avatar-sizes",
+      filePath: "examples/base/avatar-sizes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/avatar-sizes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "avatar-sizes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "avatar-with-badge-icon": {
+      name: "avatar-with-badge-icon",
+      filePath: "examples/base/avatar-with-badge-icon.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/avatar-with-badge-icon")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "avatar-with-badge-icon"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "avatar-with-badge": {
+      name: "avatar-with-badge",
+      filePath: "examples/base/avatar-with-badge.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/avatar-with-badge")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "avatar-with-badge"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "badge-as-link": {
+      name: "badge-as-link",
+      filePath: "examples/base/badge-as-link.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/badge-as-link")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "badge-as-link"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "badge-custom-colors": {
+      name: "badge-custom-colors",
+      filePath: "examples/base/badge-custom-colors.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/badge-custom-colors")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "badge-custom-colors"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "badge-demo": {
       name: "badge-demo",
       filePath: "examples/base/badge-demo.tsx",
@@ -2906,6 +7809,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "badge-long-text": {
+      name: "badge-long-text",
+      filePath: "examples/base/badge-long-text.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/badge-long-text")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "badge-long-text"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "badge-outline": {
       name: "badge-outline",
       filePath: "examples/base/badge-outline.tsx",
@@ -2932,6 +7848,71 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "badge-variants": {
+      name: "badge-variants",
+      filePath: "examples/base/badge-variants.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/badge-variants")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "badge-variants"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "badge-with-icon-left": {
+      name: "badge-with-icon-left",
+      filePath: "examples/base/badge-with-icon-left.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/badge-with-icon-left")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "badge-with-icon-left"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "badge-with-icon-right": {
+      name: "badge-with-icon-right",
+      filePath: "examples/base/badge-with-icon-right.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/badge-with-icon-right")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "badge-with-icon-right"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "badge-with-spinner": {
+      name: "badge-with-spinner",
+      filePath: "examples/base/badge-with-spinner.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/badge-with-spinner")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "badge-with-spinner"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "breadcrumb-basic": {
+      name: "breadcrumb-basic",
+      filePath: "examples/base/breadcrumb-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/breadcrumb-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "breadcrumb-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "breadcrumb-demo": {
       name: "breadcrumb-demo",
       filePath: "examples/base/breadcrumb-demo.tsx",
@@ -3010,6 +7991,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "breadcrumb-with-dropdown": {
+      name: "breadcrumb-with-dropdown",
+      filePath: "examples/base/breadcrumb-with-dropdown.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/breadcrumb-with-dropdown")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "breadcrumb-with-dropdown"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "breadcrumb-with-link": {
+      name: "breadcrumb-with-link",
+      filePath: "examples/base/breadcrumb-with-link.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/breadcrumb-with-link")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "breadcrumb-with-link"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "button-as-child": {
       name: "button-as-child",
       filePath: "examples/base/button-as-child.tsx",
@@ -3062,6 +8069,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "button-examples": {
+      name: "button-examples",
+      filePath: "examples/base/button-examples.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-examples")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-examples"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "button-ghost": {
       name: "button-ghost",
       filePath: "examples/base/button-ghost.tsx",
@@ -3075,6 +8095,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "button-group-basic": {
+      name: "button-group-basic",
+      filePath: "examples/base/button-group-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-group-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "button-group-demo": {
       name: "button-group-demo",
       filePath: "examples/base/button-group-demo.tsx",
@@ -3127,6 +8160,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "button-group-navigation": {
+      name: "button-group-navigation",
+      filePath: "examples/base/button-group-navigation.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-group-navigation")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-navigation"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "button-group-nested": {
       name: "button-group-nested",
       filePath: "examples/base/button-group-nested.tsx",
@@ -3153,6 +8199,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "button-group-pagination-split": {
+      name: "button-group-pagination-split",
+      filePath: "examples/base/button-group-pagination-split.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-group-pagination-split")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-pagination-split"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-pagination": {
+      name: "button-group-pagination",
+      filePath: "examples/base/button-group-pagination.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-group-pagination")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-pagination"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "button-group-popover": {
       name: "button-group-popover",
       filePath: "examples/base/button-group-popover.tsx",
@@ -3218,6 +8290,201 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "button-group-text-alignment": {
+      name: "button-group-text-alignment",
+      filePath: "examples/base/button-group-text-alignment.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-group-text-alignment")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-text-alignment"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-vertical-nested": {
+      name: "button-group-vertical-nested",
+      filePath: "examples/base/button-group-vertical-nested.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-group-vertical-nested")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-vertical-nested"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-vertical": {
+      name: "button-group-vertical",
+      filePath: "examples/base/button-group-vertical.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-group-vertical")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-vertical"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-with-dropdown": {
+      name: "button-group-with-dropdown",
+      filePath: "examples/base/button-group-with-dropdown.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-group-with-dropdown")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-with-dropdown"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-with-fields": {
+      name: "button-group-with-fields",
+      filePath: "examples/base/button-group-with-fields.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-group-with-fields")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-with-fields"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-with-icons": {
+      name: "button-group-with-icons",
+      filePath: "examples/base/button-group-with-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-group-with-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-with-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-with-input-group": {
+      name: "button-group-with-input-group",
+      filePath: "examples/base/button-group-with-input-group.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-group-with-input-group")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-with-input-group"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-with-input": {
+      name: "button-group-with-input",
+      filePath: "examples/base/button-group-with-input.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-group-with-input")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-with-input"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-with-like": {
+      name: "button-group-with-like",
+      filePath: "examples/base/button-group-with-like.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-group-with-like")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-with-like"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-with-select-and-input": {
+      name: "button-group-with-select-and-input",
+      filePath: "examples/base/button-group-with-select-and-input.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-group-with-select-and-input")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-with-select-and-input"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-with-select": {
+      name: "button-group-with-select",
+      filePath: "examples/base/button-group-with-select.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-group-with-select")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-with-select"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-group-with-text": {
+      name: "button-group-with-text",
+      filePath: "examples/base/button-group-with-text.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-group-with-text")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-group-with-text"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-icon-left": {
+      name: "button-icon-left",
+      filePath: "examples/base/button-icon-left.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-icon-left")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-icon-left"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-icon-only": {
+      name: "button-icon-only",
+      filePath: "examples/base/button-icon-only.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-icon-only")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-icon-only"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "button-icon-right": {
+      name: "button-icon-right",
+      filePath: "examples/base/button-icon-right.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-icon-right")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-icon-right"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "button-icon": {
       name: "button-icon",
       filePath: "examples/base/button-icon.tsx",
@@ -3231,6 +8498,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "button-invalid-states": {
+      name: "button-invalid-states",
+      filePath: "examples/base/button-invalid-states.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-invalid-states")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-invalid-states"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "button-link": {
       name: "button-link",
       filePath: "examples/base/button-link.tsx",
@@ -3309,6 +8589,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "button-variants-and-sizes": {
+      name: "button-variants-and-sizes",
+      filePath: "examples/base/button-variants-and-sizes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/button-variants-and-sizes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "button-variants-and-sizes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "button-with-icon": {
       name: "button-with-icon",
       filePath: "examples/base/button-with-icon.tsx",
@@ -3322,6 +8615,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "calendar-booked-dates": {
+      name: "calendar-booked-dates",
+      filePath: "examples/base/calendar-booked-dates.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/calendar-booked-dates")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "calendar-booked-dates"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "calendar-custom-days": {
+      name: "calendar-custom-days",
+      filePath: "examples/base/calendar-custom-days.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/calendar-custom-days")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "calendar-custom-days"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "calendar-demo": {
       name: "calendar-demo",
       filePath: "examples/base/calendar-demo.tsx",
@@ -3348,6 +8667,110 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "calendar-multiple": {
+      name: "calendar-multiple",
+      filePath: "examples/base/calendar-multiple.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/calendar-multiple")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "calendar-multiple"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "calendar-range-multiple-months": {
+      name: "calendar-range-multiple-months",
+      filePath: "examples/base/calendar-range-multiple-months.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/calendar-range-multiple-months")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "calendar-range-multiple-months"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "calendar-range": {
+      name: "calendar-range",
+      filePath: "examples/base/calendar-range.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/calendar-range")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "calendar-range"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "calendar-single": {
+      name: "calendar-single",
+      filePath: "examples/base/calendar-single.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/calendar-single")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "calendar-single"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "calendar-week-numbers": {
+      name: "calendar-week-numbers",
+      filePath: "examples/base/calendar-week-numbers.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/calendar-week-numbers")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "calendar-week-numbers"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "calendar-with-presets": {
+      name: "calendar-with-presets",
+      filePath: "examples/base/calendar-with-presets.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/calendar-with-presets")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "calendar-with-presets"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "calendar-with-time": {
+      name: "calendar-with-time",
+      filePath: "examples/base/calendar-with-time.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/calendar-with-time")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "calendar-with-time"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "card-default": {
+      name: "card-default",
+      filePath: "examples/base/card-default.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/card-default")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "card-default"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "card-demo": {
       name: "card-demo",
       filePath: "examples/base/card-demo.tsx",
@@ -3361,6 +8784,123 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "card-footer-with-border-small": {
+      name: "card-footer-with-border-small",
+      filePath: "examples/base/card-footer-with-border-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/card-footer-with-border-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "card-footer-with-border-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "card-footer-with-border": {
+      name: "card-footer-with-border",
+      filePath: "examples/base/card-footer-with-border.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/card-footer-with-border")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "card-footer-with-border"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "card-header-with-border-small": {
+      name: "card-header-with-border-small",
+      filePath: "examples/base/card-header-with-border-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/card-header-with-border-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "card-header-with-border-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "card-header-with-border": {
+      name: "card-header-with-border",
+      filePath: "examples/base/card-header-with-border.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/card-header-with-border")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "card-header-with-border"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "card-login": {
+      name: "card-login",
+      filePath: "examples/base/card-login.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/card-login")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "card-login"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "card-meeting-notes": {
+      name: "card-meeting-notes",
+      filePath: "examples/base/card-meeting-notes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/card-meeting-notes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "card-meeting-notes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "card-small": {
+      name: "card-small",
+      filePath: "examples/base/card-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/card-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "card-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "card-with-image-small": {
+      name: "card-with-image-small",
+      filePath: "examples/base/card-with-image-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/card-with-image-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "card-with-image-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "card-with-image": {
+      name: "card-with-image",
+      filePath: "examples/base/card-with-image.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/card-with-image")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "card-with-image"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "carousel-api": {
       name: "carousel-api",
       filePath: "examples/base/carousel-api.tsx",
@@ -3374,6 +8914,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "carousel-basic": {
+      name: "carousel-basic",
+      filePath: "examples/base/carousel-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/carousel-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "carousel-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "carousel-demo": {
       name: "carousel-demo",
       filePath: "examples/base/carousel-demo.tsx",
@@ -3387,6 +8940,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "carousel-multiple": {
+      name: "carousel-multiple",
+      filePath: "examples/base/carousel-multiple.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/carousel-multiple")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "carousel-multiple"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "carousel-orientation": {
       name: "carousel-orientation",
       filePath: "examples/base/carousel-orientation.tsx",
@@ -3439,6 +9005,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "carousel-with-gap": {
+      name: "carousel-with-gap",
+      filePath: "examples/base/carousel-with-gap.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/carousel-with-gap")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "carousel-with-gap"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "chart-area-example": {
+      name: "chart-area-example",
+      filePath: "examples/base/chart-area-example.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/chart-area-example")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "chart-area-example"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "chart-bar-demo-axis": {
       name: "chart-bar-demo-axis",
       filePath: "examples/base/chart-bar-demo-axis.tsx",
@@ -3504,6 +9096,71 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "chart-bar-example": {
+      name: "chart-bar-example",
+      filePath: "examples/base/chart-bar-example.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/chart-bar-example")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "chart-bar-example"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "chart-line-example": {
+      name: "chart-line-example",
+      filePath: "examples/base/chart-line-example.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/chart-line-example")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "chart-line-example"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "chart-pie-example": {
+      name: "chart-pie-example",
+      filePath: "examples/base/chart-pie-example.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/chart-pie-example")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "chart-pie-example"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "chart-radar-example": {
+      name: "chart-radar-example",
+      filePath: "examples/base/chart-radar-example.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/chart-radar-example")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "chart-radar-example"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "chart-radial-example": {
+      name: "chart-radial-example",
+      filePath: "examples/base/chart-radial-example.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/chart-radial-example")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "chart-radial-example"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "chart-tooltip-demo": {
       name: "chart-tooltip-demo",
       filePath: "examples/base/chart-tooltip-demo.tsx",
@@ -3517,6 +9174,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "checkbox-basic": {
+      name: "checkbox-basic",
+      filePath: "examples/base/checkbox-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/checkbox-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "checkbox-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "checkbox-demo": {
       name: "checkbox-demo",
       filePath: "examples/base/checkbox-demo.tsx",
@@ -3543,6 +9213,71 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "checkbox-fields": {
+      name: "checkbox-fields",
+      filePath: "examples/base/checkbox-fields.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/checkbox-fields")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "checkbox-fields"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "checkbox-group": {
+      name: "checkbox-group",
+      filePath: "examples/base/checkbox-group.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/checkbox-group")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "checkbox-group"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "checkbox-in-table": {
+      name: "checkbox-in-table",
+      filePath: "examples/base/checkbox-in-table.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/checkbox-in-table")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "checkbox-in-table"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "checkbox-invalid": {
+      name: "checkbox-invalid",
+      filePath: "examples/base/checkbox-invalid.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/checkbox-invalid")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "checkbox-invalid"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "checkbox-with-description": {
+      name: "checkbox-with-description",
+      filePath: "examples/base/checkbox-with-description.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/checkbox-with-description")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "checkbox-with-description"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "checkbox-with-text": {
       name: "checkbox-with-text",
       filePath: "examples/base/checkbox-with-text.tsx",
@@ -3556,6 +9291,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "checkbox-with-title": {
+      name: "checkbox-with-title",
+      filePath: "examples/base/checkbox-with-title.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/checkbox-with-title")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "checkbox-with-title"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "collapsible-demo": {
       name: "collapsible-demo",
       filePath: "examples/base/collapsible-demo.tsx",
@@ -3569,6 +9317,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "collapsible-file-tree": {
+      name: "collapsible-file-tree",
+      filePath: "examples/base/collapsible-file-tree.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/collapsible-file-tree")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "collapsible-file-tree"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "collapsible-settings": {
+      name: "collapsible-settings",
+      filePath: "examples/base/collapsible-settings.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/collapsible-settings")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "collapsible-settings"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-auto-highlight": {
+      name: "combobox-auto-highlight",
+      filePath: "examples/base/combobox-auto-highlight.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/combobox-auto-highlight")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-auto-highlight"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-basic": {
+      name: "combobox-basic",
+      filePath: "examples/base/combobox-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/combobox-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "combobox-demo": {
       name: "combobox-demo",
       filePath: "examples/base/combobox-demo.tsx",
@@ -3582,6 +9382,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "combobox-disabled": {
+      name: "combobox-disabled",
+      filePath: "examples/base/combobox-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/combobox-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "combobox-dropdown-menu": {
       name: "combobox-dropdown-menu",
       filePath: "examples/base/combobox-dropdown-menu.tsx",
@@ -3595,6 +9408,110 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "combobox-in-dialog": {
+      name: "combobox-in-dialog",
+      filePath: "examples/base/combobox-in-dialog.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/combobox-in-dialog")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-in-dialog"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-in-popup": {
+      name: "combobox-in-popup",
+      filePath: "examples/base/combobox-in-popup.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/combobox-in-popup")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-in-popup"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-invalid": {
+      name: "combobox-invalid",
+      filePath: "examples/base/combobox-invalid.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/combobox-invalid")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-invalid"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-large-list": {
+      name: "combobox-large-list",
+      filePath: "examples/base/combobox-large-list.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/combobox-large-list")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-large-list"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-multiple-disabled": {
+      name: "combobox-multiple-disabled",
+      filePath: "examples/base/combobox-multiple-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/combobox-multiple-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-multiple-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-multiple-invalid": {
+      name: "combobox-multiple-invalid",
+      filePath: "examples/base/combobox-multiple-invalid.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/combobox-multiple-invalid")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-multiple-invalid"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-multiple-no-remove": {
+      name: "combobox-multiple-no-remove",
+      filePath: "examples/base/combobox-multiple-no-remove.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/combobox-multiple-no-remove")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-multiple-no-remove"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-multiple": {
+      name: "combobox-multiple",
+      filePath: "examples/base/combobox-multiple.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/combobox-multiple")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-multiple"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "combobox-popover": {
       name: "combobox-popover",
       filePath: "examples/base/combobox-popover.tsx",
@@ -3621,6 +9538,110 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "combobox-with-clear": {
+      name: "combobox-with-clear",
+      filePath: "examples/base/combobox-with-clear.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/combobox-with-clear")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-with-clear"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-with-custom-items": {
+      name: "combobox-with-custom-items",
+      filePath: "examples/base/combobox-with-custom-items.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/combobox-with-custom-items")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-with-custom-items"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-with-form": {
+      name: "combobox-with-form",
+      filePath: "examples/base/combobox-with-form.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/combobox-with-form")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-with-form"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-with-groups-and-separator": {
+      name: "combobox-with-groups-and-separator",
+      filePath: "examples/base/combobox-with-groups-and-separator.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/combobox-with-groups-and-separator")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-with-groups-and-separator"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-with-groups": {
+      name: "combobox-with-groups",
+      filePath: "examples/base/combobox-with-groups.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/combobox-with-groups")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-with-groups"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "combobox-with-other-inputs": {
+      name: "combobox-with-other-inputs",
+      filePath: "examples/base/combobox-with-other-inputs.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/combobox-with-other-inputs")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "combobox-with-other-inputs"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "comboxbox-input-addon": {
+      name: "comboxbox-input-addon",
+      filePath: "examples/base/comboxbox-input-addon.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/comboxbox-input-addon")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "comboxbox-input-addon"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "command-basic": {
+      name: "command-basic",
+      filePath: "examples/base/command-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/command-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "command-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "command-demo": {
       name: "command-demo",
       filePath: "examples/base/command-demo.tsx",
@@ -3647,6 +9668,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "command-many-items": {
+      name: "command-many-items",
+      filePath: "examples/base/command-many-items.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/command-many-items")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "command-many-items"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "command-with-groups": {
+      name: "command-with-groups",
+      filePath: "examples/base/command-with-groups.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/command-with-groups")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "command-with-groups"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "command-with-shortcuts": {
+      name: "command-with-shortcuts",
+      filePath: "examples/base/command-with-shortcuts.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/command-with-shortcuts")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "command-with-shortcuts"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "context-menu-basic": {
+      name: "context-menu-basic",
+      filePath: "examples/base/context-menu-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/context-menu-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "context-menu-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "context-menu-demo": {
       name: "context-menu-demo",
       filePath: "examples/base/context-menu-demo.tsx",
@@ -3660,6 +9733,136 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "context-menu-in-dialog": {
+      name: "context-menu-in-dialog",
+      filePath: "examples/base/context-menu-in-dialog.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/context-menu-in-dialog")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "context-menu-in-dialog"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "context-menu-with-checkboxes": {
+      name: "context-menu-with-checkboxes",
+      filePath: "examples/base/context-menu-with-checkboxes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/context-menu-with-checkboxes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "context-menu-with-checkboxes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "context-menu-with-destructive": {
+      name: "context-menu-with-destructive",
+      filePath: "examples/base/context-menu-with-destructive.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/context-menu-with-destructive")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "context-menu-with-destructive"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "context-menu-with-groups": {
+      name: "context-menu-with-groups",
+      filePath: "examples/base/context-menu-with-groups.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/context-menu-with-groups")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "context-menu-with-groups"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "context-menu-with-icons": {
+      name: "context-menu-with-icons",
+      filePath: "examples/base/context-menu-with-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/context-menu-with-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "context-menu-with-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "context-menu-with-radio": {
+      name: "context-menu-with-radio",
+      filePath: "examples/base/context-menu-with-radio.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/context-menu-with-radio")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "context-menu-with-radio"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "context-menu-with-shortcuts": {
+      name: "context-menu-with-shortcuts",
+      filePath: "examples/base/context-menu-with-shortcuts.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/context-menu-with-shortcuts")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "context-menu-with-shortcuts"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "context-menu-with-sides": {
+      name: "context-menu-with-sides",
+      filePath: "examples/base/context-menu-with-sides.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/context-menu-with-sides")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "context-menu-with-sides"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "context-menu-with-submenu": {
+      name: "context-menu-with-submenu",
+      filePath: "examples/base/context-menu-with-submenu.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/context-menu-with-submenu")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "context-menu-with-submenu"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "data-picker-with-dropdowns": {
+      name: "data-picker-with-dropdowns",
+      filePath: "examples/base/data-picker-with-dropdowns.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/data-picker-with-dropdowns")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "data-picker-with-dropdowns"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "data-table-demo": {
       name: "data-table-demo",
       filePath: "examples/base/data-table-demo.tsx",
@@ -3686,6 +9889,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "date-picker-simple": {
+      name: "date-picker-simple",
+      filePath: "examples/base/date-picker-simple.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/date-picker-simple")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "date-picker-simple"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "date-picker-with-presets": {
       name: "date-picker-with-presets",
       filePath: "examples/base/date-picker-with-presets.tsx",
@@ -3712,6 +9928,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "default-item-group": {
+      name: "default-item-group",
+      filePath: "examples/base/default-item-group.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/default-item-group")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "default-item-group"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dialog-chat-settings": {
+      name: "dialog-chat-settings",
+      filePath: "examples/base/dialog-chat-settings.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/dialog-chat-settings")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dialog-chat-settings"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "dialog-close-button": {
       name: "dialog-close-button",
       filePath: "examples/base/dialog-close-button.tsx",
@@ -3738,6 +9980,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "dialog-no-close-button": {
+      name: "dialog-no-close-button",
+      filePath: "examples/base/dialog-no-close-button.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/dialog-no-close-button")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dialog-no-close-button"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dialog-scrollable-content": {
+      name: "dialog-scrollable-content",
+      filePath: "examples/base/dialog-scrollable-content.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/dialog-scrollable-content")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dialog-scrollable-content"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dialog-with-form": {
+      name: "dialog-with-form",
+      filePath: "examples/base/dialog-with-form.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/dialog-with-form")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dialog-with-form"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dialog-with-sticky-footer": {
+      name: "dialog-with-sticky-footer",
+      filePath: "examples/base/dialog-with-sticky-footer.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/dialog-with-sticky-footer")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dialog-with-sticky-footer"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "drawer-demo": {
       name: "drawer-demo",
       filePath: "examples/base/drawer-demo.tsx",
@@ -3764,6 +10058,45 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "drawer-scrollable-content": {
+      name: "drawer-scrollable-content",
+      filePath: "examples/base/drawer-scrollable-content.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/drawer-scrollable-content")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "drawer-scrollable-content"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "drawer-with-sides": {
+      name: "drawer-with-sides",
+      filePath: "examples/base/drawer-with-sides.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/drawer-with-sides")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "drawer-with-sides"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dropdown-menu-basic": {
+      name: "dropdown-menu-basic",
+      filePath: "examples/base/dropdown-menu-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/dropdown-menu-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "dropdown-menu-checkboxes": {
       name: "dropdown-menu-checkboxes",
       filePath: "examples/base/dropdown-menu-checkboxes.tsx",
@@ -3777,6 +10110,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "dropdown-menu-complex": {
+      name: "dropdown-menu-complex",
+      filePath: "examples/base/dropdown-menu-complex.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/dropdown-menu-complex")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-complex"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "dropdown-menu-demo": {
       name: "dropdown-menu-demo",
       filePath: "examples/base/dropdown-menu-demo.tsx",
@@ -3803,6 +10149,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "dropdown-menu-in-dialog": {
+      name: "dropdown-menu-in-dialog",
+      filePath: "examples/base/dropdown-menu-in-dialog.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/dropdown-menu-in-dialog")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-in-dialog"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "dropdown-menu-radio-group": {
       name: "dropdown-menu-radio-group",
       filePath: "examples/base/dropdown-menu-radio-group.tsx",
@@ -3816,6 +10175,123 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "dropdown-menu-with-avatar": {
+      name: "dropdown-menu-with-avatar",
+      filePath: "examples/base/dropdown-menu-with-avatar.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/dropdown-menu-with-avatar")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-with-avatar"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dropdown-menu-with-checkboxes-icons": {
+      name: "dropdown-menu-with-checkboxes-icons",
+      filePath: "examples/base/dropdown-menu-with-checkboxes-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/dropdown-menu-with-checkboxes-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-with-checkboxes-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dropdown-menu-with-checkboxes": {
+      name: "dropdown-menu-with-checkboxes",
+      filePath: "examples/base/dropdown-menu-with-checkboxes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/dropdown-menu-with-checkboxes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-with-checkboxes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dropdown-menu-with-destructive": {
+      name: "dropdown-menu-with-destructive",
+      filePath: "examples/base/dropdown-menu-with-destructive.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/dropdown-menu-with-destructive")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-with-destructive"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dropdown-menu-with-icons": {
+      name: "dropdown-menu-with-icons",
+      filePath: "examples/base/dropdown-menu-with-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/dropdown-menu-with-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-with-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dropdown-menu-with-radio-icons": {
+      name: "dropdown-menu-with-radio-icons",
+      filePath: "examples/base/dropdown-menu-with-radio-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/dropdown-menu-with-radio-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-with-radio-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dropdown-menu-with-radio": {
+      name: "dropdown-menu-with-radio",
+      filePath: "examples/base/dropdown-menu-with-radio.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/dropdown-menu-with-radio")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-with-radio"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dropdown-menu-with-shortcuts": {
+      name: "dropdown-menu-with-shortcuts",
+      filePath: "examples/base/dropdown-menu-with-shortcuts.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/dropdown-menu-with-shortcuts")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-with-shortcuts"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "dropdown-menu-with-submenu": {
+      name: "dropdown-menu-with-submenu",
+      filePath: "examples/base/dropdown-menu-with-submenu.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/dropdown-menu-with-submenu")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "dropdown-menu-with-submenu"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "empty-avatar-group": {
       name: "empty-avatar-group",
       filePath: "examples/base/empty-avatar-group.tsx",
@@ -3855,6 +10331,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "empty-basic": {
+      name: "empty-basic",
+      filePath: "examples/base/empty-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/empty-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "empty-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "empty-demo": {
       name: "empty-demo",
       filePath: "examples/base/empty-demo.tsx",
@@ -3881,6 +10370,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "empty-in-card": {
+      name: "empty-in-card",
+      filePath: "examples/base/empty-in-card.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/empty-in-card")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "empty-in-card"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "empty-input-group": {
       name: "empty-input-group",
       filePath: "examples/base/empty-input-group.tsx",
@@ -3907,6 +10409,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "empty-with-border": {
+      name: "empty-with-border",
+      filePath: "examples/base/empty-with-border.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/empty-with-border")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "empty-with-border"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "empty-with-icon": {
+      name: "empty-with-icon",
+      filePath: "examples/base/empty-with-icon.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/empty-with-icon")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "empty-with-icon"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "empty-with-muted-background-alt": {
+      name: "empty-with-muted-background-alt",
+      filePath: "examples/base/empty-with-muted-background-alt.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/empty-with-muted-background-alt")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "empty-with-muted-background-alt"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "empty-with-muted-background": {
+      name: "empty-with-muted-background",
+      filePath: "examples/base/empty-with-muted-background.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/empty-with-muted-background")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "empty-with-muted-background"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "field-checkbox": {
       name: "field-checkbox",
       filePath: "examples/base/field-checkbox.tsx",
@@ -4063,6 +10617,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "file-upload-list": {
+      name: "file-upload-list",
+      filePath: "examples/base/file-upload-list.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/file-upload-list")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "file-upload-list"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "hover-card-demo": {
       name: "hover-card-demo",
       filePath: "examples/base/hover-card-demo.tsx",
@@ -4076,6 +10643,45 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "hover-card-in-dialog": {
+      name: "hover-card-in-dialog",
+      filePath: "examples/base/hover-card-in-dialog.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/hover-card-in-dialog")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "hover-card-in-dialog"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "hover-card-sides": {
+      name: "hover-card-sides",
+      filePath: "examples/base/hover-card-sides.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/hover-card-sides")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "hover-card-sides"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-basic": {
+      name: "input-basic",
+      filePath: "examples/base/input-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-demo": {
       name: "input-demo",
       filePath: "examples/base/input-demo.tsx",
@@ -4102,6 +10708,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-fields": {
+      name: "input-fields",
+      filePath: "examples/base/input-fields.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-fields")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-fields"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-file": {
       name: "input-file",
       filePath: "examples/base/input-file.tsx",
@@ -4115,6 +10734,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-form": {
+      name: "input-form",
+      filePath: "examples/base/input-form.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-form")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-form"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-group-basic": {
+      name: "input-group-basic",
+      filePath: "examples/base/input-group-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-group-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-group-button-group": {
       name: "input-group-button-group",
       filePath: "examples/base/input-group-button-group.tsx",
@@ -4193,6 +10838,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-group-in-card": {
+      name: "input-group-in-card",
+      filePath: "examples/base/input-group-in-card.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-group-in-card")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-in-card"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-group-label": {
       name: "input-group-label",
       filePath: "examples/base/input-group-label.tsx",
@@ -4232,6 +10890,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-group-textarea-examples": {
+      name: "input-group-textarea-examples",
+      filePath: "examples/base/input-group-textarea-examples.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-group-textarea-examples")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-textarea-examples"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-group-textarea": {
       name: "input-group-textarea",
       filePath: "examples/base/input-group-textarea.tsx",
@@ -4258,6 +10929,84 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-group-with-addons": {
+      name: "input-group-with-addons",
+      filePath: "examples/base/input-group-with-addons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-group-with-addons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-with-addons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-group-with-buttons": {
+      name: "input-group-with-buttons",
+      filePath: "examples/base/input-group-with-buttons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-group-with-buttons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-with-buttons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-group-with-kbd": {
+      name: "input-group-with-kbd",
+      filePath: "examples/base/input-group-with-kbd.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-group-with-kbd")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-with-kbd"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-group-with-tooltip": {
+      name: "input-group-with-tooltip",
+      filePath: "examples/base/input-group-with-tooltip.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-group-with-tooltip")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-with-tooltip"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-invalid": {
+      name: "input-invalid",
+      filePath: "examples/base/input-invalid.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-invalid")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-invalid"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-otp-alphanumeric": {
+      name: "input-otp-alphanumeric",
+      filePath: "examples/base/input-otp-alphanumeric.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-otp-alphanumeric")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-otp-alphanumeric"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-otp-controlled": {
       name: "input-otp-controlled",
       filePath: "examples/base/input-otp-controlled.tsx",
@@ -4284,6 +11033,71 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-otp-disabled": {
+      name: "input-otp-disabled",
+      filePath: "examples/base/input-otp-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-otp-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-otp-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-otp-fields": {
+      name: "input-otp-fields",
+      filePath: "examples/base/input-otp-fields.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-otp-fields")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-otp-fields"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-otp-form": {
+      name: "input-otp-form",
+      filePath: "examples/base/input-otp-form.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-otp-form")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-otp-form"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-otp-four-digits": {
+      name: "input-otp-four-digits",
+      filePath: "examples/base/input-otp-four-digits.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-otp-four-digits")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-otp-four-digits"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-otp-invalid": {
+      name: "input-otp-invalid",
+      filePath: "examples/base/input-otp-invalid.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-otp-invalid")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-otp-invalid"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-otp-pattern": {
       name: "input-otp-pattern",
       filePath: "examples/base/input-otp-pattern.tsx",
@@ -4310,6 +11124,45 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-otp-simple": {
+      name: "input-otp-simple",
+      filePath: "examples/base/input-otp-simple.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-otp-simple")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-otp-simple"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-otp-with-separator": {
+      name: "input-otp-with-separator",
+      filePath: "examples/base/input-otp-with-separator.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-otp-with-separator")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-otp-with-separator"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-types": {
+      name: "input-types",
+      filePath: "examples/base/input-types.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-types")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-types"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-with-button": {
       name: "input-with-button",
       filePath: "examples/base/input-with-button.tsx",
@@ -4323,6 +11176,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-with-description": {
+      name: "input-with-description",
+      filePath: "examples/base/input-with-description.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-with-description")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-with-description"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-with-label": {
       name: "input-with-label",
       filePath: "examples/base/input-with-label.tsx",
@@ -4336,6 +11202,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-with-native-select": {
+      name: "input-with-native-select",
+      filePath: "examples/base/input-with-native-select.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-with-native-select")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-with-native-select"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-with-select": {
+      name: "input-with-select",
+      filePath: "examples/base/input-with-select.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-with-select")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-with-select"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-with-text": {
       name: "input-with-text",
       filePath: "examples/base/input-with-text.tsx",
@@ -4362,6 +11254,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "item-default-extra-small": {
+      name: "item-default-extra-small",
+      filePath: "examples/base/item-default-extra-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-default-extra-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-default-extra-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-default-small": {
+      name: "item-default-small",
+      filePath: "examples/base/item-default-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-default-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-default-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-default-with-image": {
+      name: "item-default-with-image",
+      filePath: "examples/base/item-default-with-image.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-default-with-image")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-default-with-image"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-default": {
+      name: "item-default",
+      filePath: "examples/base/item-default.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-default")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-default"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "item-demo": {
       name: "item-demo",
       filePath: "examples/base/item-demo.tsx",
@@ -4388,6 +11332,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "item-footer-examples": {
+      name: "item-footer-examples",
+      filePath: "examples/base/item-footer-examples.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-footer-examples")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-footer-examples"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "item-group": {
       name: "item-group",
       filePath: "examples/base/item-group.tsx",
@@ -4401,6 +11358,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "item-header-and-footer-examples": {
+      name: "item-header-and-footer-examples",
+      filePath: "examples/base/item-header-and-footer-examples.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-header-and-footer-examples")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-header-and-footer-examples"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-header-examples": {
+      name: "item-header-examples",
+      filePath: "examples/base/item-header-examples.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-header-examples")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-header-examples"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "item-header": {
       name: "item-header",
       filePath: "examples/base/item-header.tsx",
@@ -4440,6 +11423,45 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "item-link-default": {
+      name: "item-link-default",
+      filePath: "examples/base/item-link-default.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-link-default")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-link-default"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-link-muted": {
+      name: "item-link-muted",
+      filePath: "examples/base/item-link-muted.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-link-muted")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-link-muted"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-link-outline": {
+      name: "item-link-outline",
+      filePath: "examples/base/item-link-outline.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-link-outline")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-link-outline"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "item-link": {
       name: "item-link",
       filePath: "examples/base/item-link.tsx",
@@ -4453,6 +11475,149 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "item-muted-extra-small": {
+      name: "item-muted-extra-small",
+      filePath: "examples/base/item-muted-extra-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-muted-extra-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-muted-extra-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-muted-small": {
+      name: "item-muted-small",
+      filePath: "examples/base/item-muted-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-muted-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-muted-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-muted-with-image": {
+      name: "item-muted-with-image",
+      filePath: "examples/base/item-muted-with-image.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-muted-with-image")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-muted-with-image"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-muted": {
+      name: "item-muted",
+      filePath: "examples/base/item-muted.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-muted")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-muted"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-outline-extra-small": {
+      name: "item-outline-extra-small",
+      filePath: "examples/base/item-outline-extra-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-outline-extra-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-outline-extra-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-outline-small": {
+      name: "item-outline-small",
+      filePath: "examples/base/item-outline-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-outline-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-outline-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-outline-with-image-extra-small": {
+      name: "item-outline-with-image-extra-small",
+      filePath: "examples/base/item-outline-with-image-extra-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-outline-with-image-extra-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-outline-with-image-extra-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-outline-with-image-small": {
+      name: "item-outline-with-image-small",
+      filePath: "examples/base/item-outline-with-image-small.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-outline-with-image-small")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-outline-with-image-small"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-outline-with-image": {
+      name: "item-outline-with-image",
+      filePath: "examples/base/item-outline-with-image.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-outline-with-image")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-outline-with-image"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-outline": {
+      name: "item-outline",
+      filePath: "examples/base/item-outline.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-outline")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-outline"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "item-separator-example": {
+      name: "item-separator-example",
+      filePath: "examples/base/item-separator-example.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/item-separator-example")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "item-separator-example"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "item-size": {
       name: "item-size",
       filePath: "examples/base/item-size.tsx",
@@ -4479,6 +11644,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "kbd-arrow-keys": {
+      name: "kbd-arrow-keys",
+      filePath: "examples/base/kbd-arrow-keys.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/kbd-arrow-keys")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "kbd-arrow-keys"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "kbd-basic": {
+      name: "kbd-basic",
+      filePath: "examples/base/kbd-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/kbd-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "kbd-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "kbd-button": {
       name: "kbd-button",
       filePath: "examples/base/kbd-button.tsx",
@@ -4505,6 +11696,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "kbd-group-example": {
+      name: "kbd-group-example",
+      filePath: "examples/base/kbd-group-example.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/kbd-group-example")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "kbd-group-example"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "kbd-group": {
       name: "kbd-group",
       filePath: "examples/base/kbd-group.tsx",
@@ -4518,6 +11722,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "kbd-in-input-group": {
+      name: "kbd-in-input-group",
+      filePath: "examples/base/kbd-in-input-group.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/kbd-in-input-group")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "kbd-in-input-group"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "kbd-in-tooltip": {
+      name: "kbd-in-tooltip",
+      filePath: "examples/base/kbd-in-tooltip.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/kbd-in-tooltip")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "kbd-in-tooltip"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "kbd-input-group": {
       name: "kbd-input-group",
       filePath: "examples/base/kbd-input-group.tsx",
@@ -4531,6 +11761,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "kbd-modifier-keys": {
+      name: "kbd-modifier-keys",
+      filePath: "examples/base/kbd-modifier-keys.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/kbd-modifier-keys")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "kbd-modifier-keys"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "kbd-tooltip": {
       name: "kbd-tooltip",
       filePath: "examples/base/kbd-tooltip.tsx",
@@ -4544,6 +11787,45 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "kbd-with-icons-and-text": {
+      name: "kbd-with-icons-and-text",
+      filePath: "examples/base/kbd-with-icons-and-text.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/kbd-with-icons-and-text")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "kbd-with-icons-and-text"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "kbd-with-icons": {
+      name: "kbd-with-icons",
+      filePath: "examples/base/kbd-with-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/kbd-with-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "kbd-with-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "kbd-with-samp": {
+      name: "kbd-with-samp",
+      filePath: "examples/base/kbd-with-samp.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/kbd-with-samp")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "kbd-with-samp"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "label-demo": {
       name: "label-demo",
       filePath: "examples/base/label-demo.tsx",
@@ -4557,6 +11839,71 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "label-disabled": {
+      name: "label-disabled",
+      filePath: "examples/base/label-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/label-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "label-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "label-with-checkbox": {
+      name: "label-with-checkbox",
+      filePath: "examples/base/label-with-checkbox.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/label-with-checkbox")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "label-with-checkbox"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "label-with-input": {
+      name: "label-with-input",
+      filePath: "examples/base/label-with-input.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/label-with-input")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "label-with-input"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "label-with-textarea": {
+      name: "label-with-textarea",
+      filePath: "examples/base/label-with-textarea.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/label-with-textarea")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "label-with-textarea"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "menubar-basic": {
+      name: "menubar-basic",
+      filePath: "examples/base/menubar-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/menubar-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "menubar-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "menubar-demo": {
       name: "menubar-demo",
       filePath: "examples/base/menubar-demo.tsx",
@@ -4570,6 +11917,149 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "menubar-destructive": {
+      name: "menubar-destructive",
+      filePath: "examples/base/menubar-destructive.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/menubar-destructive")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "menubar-destructive"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "menubar-format": {
+      name: "menubar-format",
+      filePath: "examples/base/menubar-format.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/menubar-format")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "menubar-format"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "menubar-in-dialog": {
+      name: "menubar-in-dialog",
+      filePath: "examples/base/menubar-in-dialog.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/menubar-in-dialog")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "menubar-in-dialog"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "menubar-insert": {
+      name: "menubar-insert",
+      filePath: "examples/base/menubar-insert.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/menubar-insert")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "menubar-insert"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "menubar-with-checkboxes": {
+      name: "menubar-with-checkboxes",
+      filePath: "examples/base/menubar-with-checkboxes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/menubar-with-checkboxes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "menubar-with-checkboxes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "menubar-with-icons": {
+      name: "menubar-with-icons",
+      filePath: "examples/base/menubar-with-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/menubar-with-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "menubar-with-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "menubar-with-radio": {
+      name: "menubar-with-radio",
+      filePath: "examples/base/menubar-with-radio.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/menubar-with-radio")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "menubar-with-radio"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "menubar-with-shortcuts": {
+      name: "menubar-with-shortcuts",
+      filePath: "examples/base/menubar-with-shortcuts.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/menubar-with-shortcuts")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "menubar-with-shortcuts"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "menubar-with-submenu": {
+      name: "menubar-with-submenu",
+      filePath: "examples/base/menubar-with-submenu.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/menubar-with-submenu")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "menubar-with-submenu"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "muted-item-group": {
+      name: "muted-item-group",
+      filePath: "examples/base/muted-item-group.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/muted-item-group")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "muted-item-group"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "native-select-basic": {
+      name: "native-select-basic",
+      filePath: "examples/base/native-select-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/native-select-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "native-select-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "native-select-demo": {
       name: "native-select-demo",
       filePath: "examples/base/native-select-demo.tsx",
@@ -4596,6 +12086,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "native-select-fields": {
+      name: "native-select-fields",
+      filePath: "examples/base/native-select-fields.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/native-select-fields")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "native-select-fields"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "native-select-groups": {
       name: "native-select-groups",
       filePath: "examples/base/native-select-groups.tsx",
@@ -4622,6 +12125,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "native-select-sizes": {
+      name: "native-select-sizes",
+      filePath: "examples/base/native-select-sizes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/native-select-sizes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "native-select-sizes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "native-select-with-field": {
+      name: "native-select-with-field",
+      filePath: "examples/base/native-select-with-field.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/native-select-with-field")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "native-select-with-field"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "native-select-with-groups": {
+      name: "native-select-with-groups",
+      filePath: "examples/base/native-select-with-groups.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/native-select-with-groups")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "native-select-with-groups"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "navigation-menu-basic": {
+      name: "navigation-menu-basic",
+      filePath: "examples/base/navigation-menu-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/navigation-menu-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "navigation-menu-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "navigation-menu-demo": {
       name: "navigation-menu-demo",
       filePath: "examples/base/navigation-menu-demo.tsx",
@@ -4635,6 +12190,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "outline-item-group": {
+      name: "outline-item-group",
+      filePath: "examples/base/outline-item-group.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/outline-item-group")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "outline-item-group"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "pagination-basic": {
+      name: "pagination-basic",
+      filePath: "examples/base/pagination-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/pagination-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "pagination-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "pagination-demo": {
       name: "pagination-demo",
       filePath: "examples/base/pagination-demo.tsx",
@@ -4648,6 +12229,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "pagination-icons-only": {
+      name: "pagination-icons-only",
+      filePath: "examples/base/pagination-icons-only.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/pagination-icons-only")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "pagination-icons-only"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "pagination-simple": {
+      name: "pagination-simple",
+      filePath: "examples/base/pagination-simple.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/pagination-simple")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "pagination-simple"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "popover-alignments": {
+      name: "popover-alignments",
+      filePath: "examples/base/popover-alignments.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/popover-alignments")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "popover-alignments"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "popover-basic": {
+      name: "popover-basic",
+      filePath: "examples/base/popover-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/popover-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "popover-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "popover-demo": {
       name: "popover-demo",
       filePath: "examples/base/popover-demo.tsx",
@@ -4661,6 +12294,45 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "popover-in-dialog": {
+      name: "popover-in-dialog",
+      filePath: "examples/base/popover-in-dialog.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/popover-in-dialog")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "popover-in-dialog"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "popover-with-form": {
+      name: "popover-with-form",
+      filePath: "examples/base/popover-with-form.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/popover-with-form")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "popover-with-form"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "progress-controlled": {
+      name: "progress-controlled",
+      filePath: "examples/base/progress-controlled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/progress-controlled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "progress-controlled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "progress-demo": {
       name: "progress-demo",
       filePath: "examples/base/progress-demo.tsx",
@@ -4674,6 +12346,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "progress-values": {
+      name: "progress-values",
+      filePath: "examples/base/progress-values.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/progress-values")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "progress-values"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "progress-with-label": {
+      name: "progress-with-label",
+      filePath: "examples/base/progress-with-label.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/progress-with-label")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "progress-with-label"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "radio-fields": {
+      name: "radio-fields",
+      filePath: "examples/base/radio-fields.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/radio-fields")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "radio-fields"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "radio-group-basic": {
+      name: "radio-group-basic",
+      filePath: "examples/base/radio-group-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/radio-group-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "radio-group-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "radio-group-demo": {
       name: "radio-group-demo",
       filePath: "examples/base/radio-group-demo.tsx",
@@ -4687,6 +12411,84 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "radio-group-disabled": {
+      name: "radio-group-disabled",
+      filePath: "examples/base/radio-group-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/radio-group-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "radio-group-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "radio-group-grid": {
+      name: "radio-group-grid",
+      filePath: "examples/base/radio-group-grid.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/radio-group-grid")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "radio-group-grid"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "radio-group-invalid": {
+      name: "radio-group-invalid",
+      filePath: "examples/base/radio-group-invalid.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/radio-group-invalid")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "radio-group-invalid"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "radio-group-with-descriptions": {
+      name: "radio-group-with-descriptions",
+      filePath: "examples/base/radio-group-with-descriptions.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/radio-group-with-descriptions")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "radio-group-with-descriptions"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "radio-group-with-field-set": {
+      name: "radio-group-with-field-set",
+      filePath: "examples/base/radio-group-with-field-set.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/radio-group-with-field-set")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "radio-group-with-field-set"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "resizable-controlled": {
+      name: "resizable-controlled",
+      filePath: "examples/base/resizable-controlled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/resizable-controlled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "resizable-controlled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "resizable-demo-with-handle": {
       name: "resizable-demo-with-handle",
       filePath: "examples/base/resizable-demo-with-handle.tsx",
@@ -4726,6 +12528,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "resizable-horizontal": {
+      name: "resizable-horizontal",
+      filePath: "examples/base/resizable-horizontal.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/resizable-horizontal")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "resizable-horizontal"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "resizable-nested": {
+      name: "resizable-nested",
+      filePath: "examples/base/resizable-nested.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/resizable-nested")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "resizable-nested"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "resizable-vertical": {
       name: "resizable-vertical",
       filePath: "examples/base/resizable-vertical.tsx",
@@ -4739,6 +12567,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "resizable-with-handle": {
+      name: "resizable-with-handle",
+      filePath: "examples/base/resizable-with-handle.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/resizable-with-handle")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "resizable-with-handle"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "scroll-area-demo": {
       name: "scroll-area-demo",
       filePath: "examples/base/scroll-area-demo.tsx",
@@ -4765,6 +12606,45 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "scroll-area-horizontal": {
+      name: "scroll-area-horizontal",
+      filePath: "examples/base/scroll-area-horizontal.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/scroll-area-horizontal")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "scroll-area-horizontal"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "scroll-area-vertical": {
+      name: "scroll-area-vertical",
+      filePath: "examples/base/scroll-area-vertical.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/scroll-area-vertical")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "scroll-area-vertical"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-basic": {
+      name: "select-basic",
+      filePath: "examples/base/select-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/select-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "select-demo": {
       name: "select-demo",
       filePath: "examples/base/select-demo.tsx",
@@ -4778,6 +12658,123 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "select-disabled": {
+      name: "select-disabled",
+      filePath: "examples/base/select-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/select-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-fields": {
+      name: "select-fields",
+      filePath: "examples/base/select-fields.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/select-fields")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-fields"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-in-dialog": {
+      name: "select-in-dialog",
+      filePath: "examples/base/select-in-dialog.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/select-in-dialog")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-in-dialog"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-inline": {
+      name: "select-inline",
+      filePath: "examples/base/select-inline.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/select-inline")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-inline"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-invalid": {
+      name: "select-invalid",
+      filePath: "examples/base/select-invalid.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/select-invalid")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-invalid"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-item-aligned": {
+      name: "select-item-aligned",
+      filePath: "examples/base/select-item-aligned.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/select-item-aligned")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-item-aligned"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-large-list": {
+      name: "select-large-list",
+      filePath: "examples/base/select-large-list.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/select-large-list")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-large-list"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-multiple": {
+      name: "select-multiple",
+      filePath: "examples/base/select-multiple.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/select-multiple")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-multiple"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-plan": {
+      name: "select-plan",
+      filePath: "examples/base/select-plan.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/select-plan")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-plan"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "select-scrollable": {
       name: "select-scrollable",
       filePath: "examples/base/select-scrollable.tsx",
@@ -4791,6 +12788,71 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "select-sizes": {
+      name: "select-sizes",
+      filePath: "examples/base/select-sizes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/select-sizes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-sizes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-with-button": {
+      name: "select-with-button",
+      filePath: "examples/base/select-with-button.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/select-with-button")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-with-button"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-with-field": {
+      name: "select-with-field",
+      filePath: "examples/base/select-with-field.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/select-with-field")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-with-field"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-with-groups": {
+      name: "select-with-groups",
+      filePath: "examples/base/select-with-groups.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/select-with-groups")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-with-groups"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "select-with-icons": {
+      name: "select-with-icons",
+      filePath: "examples/base/select-with-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/select-with-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "select-with-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "separator-demo": {
       name: "separator-demo",
       filePath: "examples/base/separator-demo.tsx",
@@ -4804,6 +12866,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "separator-horizontal": {
+      name: "separator-horizontal",
+      filePath: "examples/base/separator-horizontal.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/separator-horizontal")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "separator-horizontal"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "separator-in-list": {
+      name: "separator-in-list",
+      filePath: "examples/base/separator-in-list.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/separator-in-list")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "separator-in-list"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "separator-vertical-menu": {
+      name: "separator-vertical-menu",
+      filePath: "examples/base/separator-vertical-menu.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/separator-vertical-menu")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "separator-vertical-menu"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "separator-vertical": {
+      name: "separator-vertical",
+      filePath: "examples/base/separator-vertical.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/separator-vertical")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "separator-vertical"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "sheet-demo": {
       name: "sheet-demo",
       filePath: "examples/base/sheet-demo.tsx",
@@ -4817,6 +12931,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "sheet-no-close-button": {
+      name: "sheet-no-close-button",
+      filePath: "examples/base/sheet-no-close-button.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/sheet-no-close-button")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "sheet-no-close-button"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "sheet-side": {
       name: "sheet-side",
       filePath: "examples/base/sheet-side.tsx",
@@ -4830,6 +12957,45 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "sheet-with-form": {
+      name: "sheet-with-form",
+      filePath: "examples/base/sheet-with-form.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/sheet-with-form")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "sheet-with-form"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "sheet-with-sides": {
+      name: "sheet-with-sides",
+      filePath: "examples/base/sheet-with-sides.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/sheet-with-sides")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "sheet-with-sides"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "skeleton-avatar": {
+      name: "skeleton-avatar",
+      filePath: "examples/base/skeleton-avatar.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/skeleton-avatar")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "skeleton-avatar"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "skeleton-card": {
       name: "skeleton-card",
       filePath: "examples/base/skeleton-card.tsx",
@@ -4856,6 +13022,71 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "skeleton-form": {
+      name: "skeleton-form",
+      filePath: "examples/base/skeleton-form.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/skeleton-form")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "skeleton-form"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "skeleton-table": {
+      name: "skeleton-table",
+      filePath: "examples/base/skeleton-table.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/skeleton-table")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "skeleton-table"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "skeleton-text": {
+      name: "skeleton-text",
+      filePath: "examples/base/skeleton-text.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/skeleton-text")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "skeleton-text"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "slider-basic": {
+      name: "slider-basic",
+      filePath: "examples/base/slider-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/slider-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "slider-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "slider-controlled": {
+      name: "slider-controlled",
+      filePath: "examples/base/slider-controlled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/slider-controlled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "slider-controlled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "slider-demo": {
       name: "slider-demo",
       filePath: "examples/base/slider-demo.tsx",
@@ -4869,6 +13100,84 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "slider-disabled": {
+      name: "slider-disabled",
+      filePath: "examples/base/slider-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/slider-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "slider-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "slider-fields": {
+      name: "slider-fields",
+      filePath: "examples/base/slider-fields.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/slider-fields")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "slider-fields"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "slider-multiple": {
+      name: "slider-multiple",
+      filePath: "examples/base/slider-multiple.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/slider-multiple")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "slider-multiple"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "slider-range": {
+      name: "slider-range",
+      filePath: "examples/base/slider-range.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/slider-range")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "slider-range"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "slider-vertical": {
+      name: "slider-vertical",
+      filePath: "examples/base/slider-vertical.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/slider-vertical")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "slider-vertical"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "sonner-basic": {
+      name: "sonner-basic",
+      filePath: "examples/base/sonner-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/sonner-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "sonner-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "sonner-demo": {
       name: "sonner-demo",
       filePath: "examples/base/sonner-demo.tsx",
@@ -4895,6 +13204,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "sonner-with-description": {
+      name: "sonner-with-description",
+      filePath: "examples/base/sonner-with-description.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/sonner-with-description")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "sonner-with-description"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "spinner-badge": {
       name: "spinner-badge",
       filePath: "examples/base/spinner-badge.tsx",
@@ -4986,6 +13308,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "spinner-in-badges": {
+      name: "spinner-in-badges",
+      filePath: "examples/base/spinner-in-badges.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/spinner-in-badges")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "spinner-in-badges"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "spinner-in-buttons": {
+      name: "spinner-in-buttons",
+      filePath: "examples/base/spinner-in-buttons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/spinner-in-buttons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "spinner-in-buttons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "spinner-in-empty": {
+      name: "spinner-in-empty",
+      filePath: "examples/base/spinner-in-empty.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/spinner-in-empty")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "spinner-in-empty"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "spinner-in-input-group": {
+      name: "spinner-in-input-group",
+      filePath: "examples/base/spinner-in-input-group.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/spinner-in-input-group")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "spinner-in-input-group"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "spinner-input-group": {
       name: "spinner-input-group",
       filePath: "examples/base/spinner-input-group.tsx",
@@ -5025,6 +13399,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "switch-basic": {
+      name: "switch-basic",
+      filePath: "examples/base/switch-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/switch-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "switch-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "switch-demo": {
       name: "switch-demo",
       filePath: "examples/base/switch-demo.tsx",
@@ -5038,6 +13425,84 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "switch-disabled": {
+      name: "switch-disabled",
+      filePath: "examples/base/switch-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/switch-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "switch-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "switch-fields": {
+      name: "switch-fields",
+      filePath: "examples/base/switch-fields.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/switch-fields")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "switch-fields"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "switch-sizes": {
+      name: "switch-sizes",
+      filePath: "examples/base/switch-sizes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/switch-sizes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "switch-sizes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "switch-with-description": {
+      name: "switch-with-description",
+      filePath: "examples/base/switch-with-description.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/switch-with-description")
+        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-with-label": {
+      name: "switch-with-label",
+      filePath: "examples/base/switch-with-label.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/switch-with-label")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "switch-with-label"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "table-basic": {
+      name: "table-basic",
+      filePath: "examples/base/table-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/table-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "table-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "table-demo": {
       name: "table-demo",
       filePath: "examples/base/table-demo.tsx",
@@ -5051,6 +13516,97 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "table-simple": {
+      name: "table-simple",
+      filePath: "examples/base/table-simple.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/table-simple")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "table-simple"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "table-with-actions": {
+      name: "table-with-actions",
+      filePath: "examples/base/table-with-actions.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/table-with-actions")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "table-with-actions"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "table-with-badges": {
+      name: "table-with-badges",
+      filePath: "examples/base/table-with-badges.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/table-with-badges")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "table-with-badges"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "table-with-footer": {
+      name: "table-with-footer",
+      filePath: "examples/base/table-with-footer.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/table-with-footer")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "table-with-footer"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "table-with-input": {
+      name: "table-with-input",
+      filePath: "examples/base/table-with-input.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/table-with-input")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "table-with-input"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "table-with-select": {
+      name: "table-with-select",
+      filePath: "examples/base/table-with-select.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/table-with-select")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "table-with-select"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-basic": {
+      name: "tabs-basic",
+      filePath: "examples/base/tabs-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/tabs-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "tabs-demo": {
       name: "tabs-demo",
       filePath: "examples/base/tabs-demo.tsx",
@@ -5064,6 +13620,175 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "tabs-disabled": {
+      name: "tabs-disabled",
+      filePath: "examples/base/tabs-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/tabs-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-icon-only": {
+      name: "tabs-icon-only",
+      filePath: "examples/base/tabs-icon-only.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/tabs-icon-only")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-icon-only"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-line-disabled": {
+      name: "tabs-line-disabled",
+      filePath: "examples/base/tabs-line-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/tabs-line-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-line-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-line-with-content": {
+      name: "tabs-line-with-content",
+      filePath: "examples/base/tabs-line-with-content.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/tabs-line-with-content")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-line-with-content"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-line": {
+      name: "tabs-line",
+      filePath: "examples/base/tabs-line.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/tabs-line")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-line"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-multiple": {
+      name: "tabs-multiple",
+      filePath: "examples/base/tabs-multiple.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/tabs-multiple")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-multiple"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-variants-comparison": {
+      name: "tabs-variants-comparison",
+      filePath: "examples/base/tabs-variants-comparison.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/tabs-variants-comparison")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-variants-comparison"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-vertical": {
+      name: "tabs-vertical",
+      filePath: "examples/base/tabs-vertical.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/tabs-vertical")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-vertical"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-with-content": {
+      name: "tabs-with-content",
+      filePath: "examples/base/tabs-with-content.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/tabs-with-content")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-with-content"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-with-dropdown": {
+      name: "tabs-with-dropdown",
+      filePath: "examples/base/tabs-with-dropdown.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/tabs-with-dropdown")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-with-dropdown"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-with-icons": {
+      name: "tabs-with-icons",
+      filePath: "examples/base/tabs-with-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/tabs-with-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-with-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tabs-with-input-and-button": {
+      name: "tabs-with-input-and-button",
+      filePath: "examples/base/tabs-with-input-and-button.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/tabs-with-input-and-button")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tabs-with-input-and-button"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "textarea-basic": {
+      name: "textarea-basic",
+      filePath: "examples/base/textarea-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/textarea-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "textarea-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "textarea-demo": {
       name: "textarea-demo",
       filePath: "examples/base/textarea-demo.tsx",
@@ -5090,6 +13815,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "textarea-fields": {
+      name: "textarea-fields",
+      filePath: "examples/base/textarea-fields.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/textarea-fields")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "textarea-fields"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "textarea-invalid": {
+      name: "textarea-invalid",
+      filePath: "examples/base/textarea-invalid.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/textarea-invalid")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "textarea-invalid"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "textarea-with-button": {
       name: "textarea-with-button",
       filePath: "examples/base/textarea-with-button.tsx",
@@ -5103,6 +13854,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "textarea-with-description": {
+      name: "textarea-with-description",
+      filePath: "examples/base/textarea-with-description.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/textarea-with-description")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "textarea-with-description"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "textarea-with-label": {
       name: "textarea-with-label",
       filePath: "examples/base/textarea-with-label.tsx",
@@ -5129,6 +13893,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "toggle-basic": {
+      name: "toggle-basic",
+      filePath: "examples/base/toggle-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/toggle-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "toggle-demo": {
       name: "toggle-demo",
       filePath: "examples/base/toggle-demo.tsx",
@@ -5155,6 +13932,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "toggle-group-basic": {
+      name: "toggle-group-basic",
+      filePath: "examples/base/toggle-group-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/toggle-group-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "toggle-group-date-range": {
+      name: "toggle-group-date-range",
+      filePath: "examples/base/toggle-group-date-range.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/toggle-group-date-range")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-date-range"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "toggle-group-demo": {
       name: "toggle-group-demo",
       filePath: "examples/base/toggle-group-demo.tsx",
@@ -5181,6 +13984,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "toggle-group-filter": {
+      name: "toggle-group-filter",
+      filePath: "examples/base/toggle-group-filter.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/toggle-group-filter")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-filter"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "toggle-group-lg": {
       name: "toggle-group-lg",
       filePath: "examples/base/toggle-group-lg.tsx",
@@ -5194,6 +14010,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "toggle-group-outline-with-icons": {
+      name: "toggle-group-outline-with-icons",
+      filePath: "examples/base/toggle-group-outline-with-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/toggle-group-outline-with-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-outline-with-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "toggle-group-outline": {
       name: "toggle-group-outline",
       filePath: "examples/base/toggle-group-outline.tsx",
@@ -5220,6 +14049,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "toggle-group-sizes": {
+      name: "toggle-group-sizes",
+      filePath: "examples/base/toggle-group-sizes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/toggle-group-sizes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-sizes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "toggle-group-sm": {
       name: "toggle-group-sm",
       filePath: "examples/base/toggle-group-sm.tsx",
@@ -5233,6 +14075,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "toggle-group-sort": {
+      name: "toggle-group-sort",
+      filePath: "examples/base/toggle-group-sort.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/toggle-group-sort")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-sort"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "toggle-group-spacing": {
       name: "toggle-group-spacing",
       filePath: "examples/base/toggle-group-spacing.tsx",
@@ -5246,6 +14101,86 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "toggle-group-vertical-outline-with-icons": {
+      name: "toggle-group-vertical-outline-with-icons",
+      filePath: "examples/base/toggle-group-vertical-outline-with-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import(
+          "./base/toggle-group-vertical-outline-with-icons"
+        )
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-vertical-outline-with-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "toggle-group-vertical-outline": {
+      name: "toggle-group-vertical-outline",
+      filePath: "examples/base/toggle-group-vertical-outline.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/toggle-group-vertical-outline")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-vertical-outline"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "toggle-group-vertical-with-spacing": {
+      name: "toggle-group-vertical-with-spacing",
+      filePath: "examples/base/toggle-group-vertical-with-spacing.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/toggle-group-vertical-with-spacing")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-vertical-with-spacing"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "toggle-group-vertical": {
+      name: "toggle-group-vertical",
+      filePath: "examples/base/toggle-group-vertical.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/toggle-group-vertical")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-vertical"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "toggle-group-with-icons": {
+      name: "toggle-group-with-icons",
+      filePath: "examples/base/toggle-group-with-icons.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/toggle-group-with-icons")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-with-icons"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "toggle-group-with-input-and-select": {
+      name: "toggle-group-with-input-and-select",
+      filePath: "examples/base/toggle-group-with-input-and-select.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/toggle-group-with-input-and-select")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-group-with-input-and-select"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "toggle-lg": {
       name: "toggle-lg",
       filePath: "examples/base/toggle-lg.tsx",
@@ -5272,6 +14207,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "toggle-sizes": {
+      name: "toggle-sizes",
+      filePath: "examples/base/toggle-sizes.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/toggle-sizes")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-sizes"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "toggle-sm": {
       name: "toggle-sm",
       filePath: "examples/base/toggle-sm.tsx",
@@ -5285,6 +14233,58 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "toggle-with-button-icon-text": {
+      name: "toggle-with-button-icon-text",
+      filePath: "examples/base/toggle-with-button-icon-text.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/toggle-with-button-icon-text")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-with-button-icon-text"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "toggle-with-button-icon": {
+      name: "toggle-with-button-icon",
+      filePath: "examples/base/toggle-with-button-icon.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/toggle-with-button-icon")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-with-button-icon"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "toggle-with-button-text": {
+      name: "toggle-with-button-text",
+      filePath: "examples/base/toggle-with-button-text.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/toggle-with-button-text")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-with-button-text"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "toggle-with-icon": {
+      name: "toggle-with-icon",
+      filePath: "examples/base/toggle-with-icon.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/toggle-with-icon")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "toggle-with-icon"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "toggle-with-text": {
       name: "toggle-with-text",
       filePath: "examples/base/toggle-with-text.tsx",
@@ -5298,6 +14298,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "tooltip-basic": {
+      name: "tooltip-basic",
+      filePath: "examples/base/tooltip-basic.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/tooltip-basic")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tooltip-basic"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "tooltip-demo": {
       name: "tooltip-demo",
       filePath: "examples/base/tooltip-demo.tsx",
@@ -5311,6 +14324,97 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "tooltip-disabled": {
+      name: "tooltip-disabled",
+      filePath: "examples/base/tooltip-disabled.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/tooltip-disabled")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tooltip-disabled"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tooltip-formatted": {
+      name: "tooltip-formatted",
+      filePath: "examples/base/tooltip-formatted.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/tooltip-formatted")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tooltip-formatted"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tooltip-long-content": {
+      name: "tooltip-long-content",
+      filePath: "examples/base/tooltip-long-content.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/tooltip-long-content")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tooltip-long-content"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tooltip-on-link": {
+      name: "tooltip-on-link",
+      filePath: "examples/base/tooltip-on-link.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/tooltip-on-link")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tooltip-on-link"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tooltip-sides": {
+      name: "tooltip-sides",
+      filePath: "examples/base/tooltip-sides.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/tooltip-sides")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tooltip-sides"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tooltip-with-icon": {
+      name: "tooltip-with-icon",
+      filePath: "examples/base/tooltip-with-icon.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/tooltip-with-icon")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tooltip-with-icon"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "tooltip-with-keyboard": {
+      name: "tooltip-with-keyboard",
+      filePath: "examples/base/tooltip-with-keyboard.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/tooltip-with-keyboard")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "tooltip-with-keyboard"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "typography-blockquote": {
       name: "typography-blockquote",
       filePath: "examples/base/typography-blockquote.tsx",
diff --git a/apps/v4/examples/base/accordion-basic.tsx b/apps/v4/examples/base/accordion-basic.tsx
new file mode 100644
index 000000000..623626299
--- /dev/null
+++ b/apps/v4/examples/base/accordion-basic.tsx
@@ -0,0 +1,39 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/examples/base/ui/accordion"
+
+export function AccordionBasic() {
+  const items = [
+    {
+      value: "item-1",
+      trigger: "Is it accessible?",
+      content: "Yes. It adheres to the WAI-ARIA design pattern.",
+    },
+    {
+      value: "item-2",
+      trigger: "Is it styled?",
+      content:
+        "Yes. It comes with default styles that matches the other components' aesthetic.",
+    },
+    {
+      value: "item-3",
+      trigger: "Is it animated?",
+      content:
+        "Yes. It's animated by default, but you can disable it if you prefer.",
+    },
+  ]
+
+  return (
+    <Accordion className="mx-auto max-w-lg">
+      {items.map((item) => (
+        <AccordionItem key={item.value} value={item.value}>
+          <AccordionTrigger>{item.trigger}</AccordionTrigger>
+          <AccordionContent>{item.content}</AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  )
+}
diff --git a/apps/v4/examples/base/accordion-in-card.tsx b/apps/v4/examples/base/accordion-in-card.tsx
new file mode 100644
index 000000000..a835e281c
--- /dev/null
+++ b/apps/v4/examples/base/accordion-in-card.tsx
@@ -0,0 +1,142 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/examples/base/ui/accordion"
+import { Button } from "@/examples/base/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/examples/base/ui/card"
+import { ArrowUpRightIcon } from "lucide-react"
+
+export function AccordionInCard() {
+  const items = [
+    {
+      value: "plans",
+      trigger: "What subscription plans do you offer?",
+      content: (
+        <>
+          <p>
+            We offer three subscription tiers: Starter ($9/month), Professional
+            ($29/month), and Enterprise ($99/month). Each plan includes
+            increasing storage limits, API access, priority support, and team
+            collaboration features.
+          </p>
+          <p>
+            <a href="#">Annual billing is available</a> with a 20% discount. All
+            plans include a 14-day free trial with no credit card required.
+          </p>
+          <Button size="sm">
+            View plans
+            <ArrowUpRightIcon />
+          </Button>
+        </>
+      ),
+    },
+    {
+      value: "billing",
+      trigger: "How does billing work?",
+      content: (
+        <>
+          <p>
+            Billing occurs automatically at the start of each billing cycle. We
+            accept all major credit cards, PayPal, and ACH transfers for
+            enterprise customers.
+          </p>
+          <p>
+            You&apos;ll receive an invoice via email after each payment. You can
+            update your payment method or billing information anytime in your
+            account settings. Failed payments will trigger automated retry
+            attempts and email notifications.
+          </p>
+        </>
+      ),
+    },
+    {
+      value: "upgrade",
+      trigger: "Can I upgrade or downgrade my plan?",
+      content: (
+        <>
+          <p>
+            Yes, you can change your plan at any time. When upgrading,
+            you&apos;ll be charged a prorated amount for the remainder of your
+            billing cycle and immediately gain access to new features.
+          </p>
+          <p>
+            When downgrading, the change takes effect at the end of your current
+            billing period, and you&apos;ll retain access to premium features
+            until then. No refunds are provided for downgrades.
+          </p>
+        </>
+      ),
+    },
+    {
+      value: "cancel",
+      trigger: "How do I cancel my subscription?",
+      content: (
+        <>
+          <p>
+            You can cancel your subscription anytime from your account settings.
+            There are no cancellation fees or penalties. Your access will
+            continue until the end of your current billing period.
+          </p>
+          <p>
+            After cancellation, your data is retained for 30 days in case you
+            want to reactivate. You can export all your data before or after
+            canceling. We&apos;d love to hear your feedback about why
+            you&apos;re leaving.
+          </p>
+        </>
+      ),
+    },
+    {
+      value: "refund",
+      trigger: "What is your refund policy?",
+      content: (
+        <>
+          <p>
+            We offer a 30-day money-back guarantee for new subscriptions. If
+            you&apos;re not satisfied within the first 30 days, contact our
+            support team for a full refund.
+          </p>
+          <p>
+            After 30 days, we don&apos;t provide refunds for partial billing
+            periods, but you can cancel anytime to avoid future charges.
+            Enterprise customers have custom refund terms outlined in their
+            contracts.
+          </p>
+        </>
+      ),
+    },
+  ]
+
+  return (
+    <Card className="mx-auto w-full max-w-lg gap-4">
+      <CardHeader>
+        <CardTitle>Subscription & Billing</CardTitle>
+        <CardDescription>
+          Common questions about your account, plans, and payments
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Accordion
+          multiple
+          defaultValue={["plans"]}
+          className="style-maia:rounded-md style-mira:rounded-md"
+        >
+          {items.map((item) => (
+            <AccordionItem key={item.value} value={item.value}>
+              <AccordionTrigger>{item.trigger}</AccordionTrigger>
+              <AccordionContent>{item.content}</AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/accordion-multiple.tsx b/apps/v4/examples/base/accordion-multiple.tsx
index 809644f3d..94a6fd33d 100644
--- a/apps/v4/examples/base/accordion-multiple.tsx
+++ b/apps/v4/examples/base/accordion-multiple.tsx
@@ -5,42 +5,32 @@ import {
   AccordionTrigger,
 } from "@/examples/base/ui/accordion"
 
-export default function AccordionMultiple() {
+export function AccordionMultiple() {
+  const items = [
+    {
+      value: "item-1",
+      trigger:
+        "What are the key considerations when implementing a comprehensive enterprise-level authentication system?",
+      content:
+        "Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.",
+    },
+    {
+      value: "item-2",
+      trigger:
+        "How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?",
+      content:
+        "Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.",
+    },
+  ]
+
   return (
-    <Accordion multiple className="w-full max-w-md">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>
-          What are the key considerations when implementing a comprehensive
-          enterprise-level authentication system?
-        </AccordionTrigger>
-        <AccordionContent>
-          Implementing a robust enterprise authentication system requires
-          careful consideration of multiple factors. This includes secure
-          password hashing and storage, multi-factor authentication (MFA)
-          implementation, session management, OAuth2 and SSO integration,
-          regular security audits, rate limiting to prevent brute force attacks,
-          and maintaining detailed audit logs. Additionally, you&apos;ll need to
-          consider scalability, performance impact, and compliance with relevant
-          data protection regulations such as GDPR or HIPAA.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>
-          How does modern distributed system architecture handle eventual
-          consistency and data synchronization across multiple regions?
-        </AccordionTrigger>
-        <AccordionContent>
-          Modern distributed systems employ various strategies to maintain data
-          consistency across regions. This often involves using techniques like
-          CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip
-          protocols. Systems might implement event sourcing patterns, utilize
-          message queues for asynchronous updates, and employ sophisticated
-          conflict resolution strategies. Popular solutions like Amazon&apos;s
-          DynamoDB and Google&apos;s Spanner demonstrate different approaches to
-          solving these challenges, balancing between consistency, availability,
-          and partition tolerance as described in the CAP theorem.
-        </AccordionContent>
-      </AccordionItem>
+    <Accordion multiple className="mx-auto max-w-lg">
+      {items.map((item) => (
+        <AccordionItem key={item.value} value={item.value}>
+          <AccordionTrigger>{item.trigger}</AccordionTrigger>
+          <AccordionContent>{item.content}</AccordionContent>
+        </AccordionItem>
+      ))}
     </Accordion>
   )
 }
diff --git a/apps/v4/examples/base/accordion-with-borders.tsx b/apps/v4/examples/base/accordion-with-borders.tsx
new file mode 100644
index 000000000..7e271f681
--- /dev/null
+++ b/apps/v4/examples/base/accordion-with-borders.tsx
@@ -0,0 +1,59 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/examples/base/ui/accordion"
+
+export function AccordionWithBorders() {
+  const items = [
+    {
+      value: "billing",
+      trigger: "How does billing work?",
+      content:
+        "We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.",
+    },
+    {
+      value: "security",
+      trigger: "Is my data secure?",
+      content:
+        "Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.",
+    },
+    {
+      value: "integration",
+      trigger: "What integrations do you support?",
+      content: (
+        <>
+          <p>
+            We integrate with 500+ popular tools including Slack, Zapier,
+            Salesforce, HubSpot, and more. You can also build custom
+            integrations using our REST API and webhooks.{" "}
+          </p>
+          <p>
+            Our API documentation includes code examples in 10+ programming
+            languages.
+          </p>
+        </>
+      ),
+    },
+  ]
+
+  return (
+    <Accordion className="style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg">
+      {items.map((item) => (
+        <AccordionItem
+          key={item.value}
+          value={item.value}
+          className="style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg"
+        >
+          <AccordionTrigger className="style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium">
+            {item.trigger}
+          </AccordionTrigger>
+          <AccordionContent className="text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0">
+            {item.content}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  )
+}
diff --git a/apps/v4/examples/base/accordion-with-disabled.tsx b/apps/v4/examples/base/accordion-with-disabled.tsx
new file mode 100644
index 000000000..ace185f31
--- /dev/null
+++ b/apps/v4/examples/base/accordion-with-disabled.tsx
@@ -0,0 +1,52 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/examples/base/ui/accordion"
+
+export function AccordionWithDisabled() {
+  const items = [
+    {
+      value: "item-1",
+      trigger: "Can I access my account history?",
+      content:
+        "Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.",
+      disabled: false,
+    },
+    {
+      value: "item-2",
+      trigger: "Premium feature information",
+      content:
+        "This section contains information about premium features. Upgrade your plan to access this content.",
+      disabled: true,
+    },
+    {
+      value: "item-3",
+      trigger: "How do I update my email address?",
+      content:
+        "You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.",
+      disabled: false,
+    },
+  ]
+
+  return (
+    <Accordion className="style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border">
+      {items.map((item) => (
+        <AccordionItem
+          key={item.value}
+          value={item.value}
+          disabled={item.disabled}
+          className="data-open:bg-muted/50 p-1"
+        >
+          <AccordionTrigger className="style-nova:px-2.5 style-lyra:px-2 style-vega:px-4">
+            {item.trigger}
+          </AccordionTrigger>
+          <AccordionContent className="style-nova:px-2.5 style-lyra:px-2 style-vega:px-4">
+            {item.content}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  )
+}
diff --git a/apps/v4/examples/base/alert-dialog-basic.tsx b/apps/v4/examples/base/alert-dialog-basic.tsx
new file mode 100644
index 000000000..b2fa0336c
--- /dev/null
+++ b/apps/v4/examples/base/alert-dialog-basic.tsx
@@ -0,0 +1,33 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/examples/base/ui/alert-dialog"
+import { Button } from "@/examples/base/ui/button"
+
+export function AlertDialogBasic() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger render={<Button variant="outline">Default</Button>} />
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/apps/v4/examples/base/alert-dialog-destructive.tsx b/apps/v4/examples/base/alert-dialog-destructive.tsx
new file mode 100644
index 000000000..b622b066f
--- /dev/null
+++ b/apps/v4/examples/base/alert-dialog-destructive.tsx
@@ -0,0 +1,40 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/examples/base/ui/alert-dialog"
+import { Button } from "@/examples/base/ui/button"
+import { Trash2Icon } from "lucide-react"
+
+export function AlertDialogDestructive() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger
+        render={<Button variant="destructive">Delete Chat</Button>}
+      />
+      <AlertDialogContent size="sm">
+        <AlertDialogHeader>
+          <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
+            <Trash2Icon />
+          </AlertDialogMedia>
+          <AlertDialogTitle>Delete chat?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will permanently delete this chat conversation. View{" "}
+            <a href="#">Settings</a> delete any memories saved during this chat.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel variant="ghost">Cancel</AlertDialogCancel>
+          <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/apps/v4/examples/base/alert-dialog-in-dialog.tsx b/apps/v4/examples/base/alert-dialog-in-dialog.tsx
new file mode 100644
index 000000000..39a24212c
--- /dev/null
+++ b/apps/v4/examples/base/alert-dialog-in-dialog.tsx
@@ -0,0 +1,61 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/examples/base/ui/alert-dialog"
+import { Button } from "@/examples/base/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/base/ui/dialog"
+
+export function AlertDialogInDialog() {
+  return (
+    <>
+      <Dialog>
+        <DialogTrigger render={<Button variant="outline" />}>
+          Open Dialog
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Alert Dialog Example</DialogTitle>
+            <DialogDescription>
+              Click the button below to open an alert dialog.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <AlertDialog>
+              <AlertDialogTrigger render={<Button />}>
+                Open Alert Dialog
+              </AlertDialogTrigger>
+              <AlertDialogContent size="sm">
+                <AlertDialogHeader>
+                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    This action cannot be undone. This will permanently delete
+                    your account and remove your data from our servers.
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>Cancel</AlertDialogCancel>
+                  <AlertDialogAction>Continue</AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/alert-dialog-small-with-media.tsx b/apps/v4/examples/base/alert-dialog-small-with-media.tsx
new file mode 100644
index 000000000..c14e524a1
--- /dev/null
+++ b/apps/v4/examples/base/alert-dialog-small-with-media.tsx
@@ -0,0 +1,40 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/examples/base/ui/alert-dialog"
+import { Button } from "@/examples/base/ui/button"
+import { BluetoothIcon } from "lucide-react"
+
+export function AlertDialogSmallWithMedia() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger
+        render={<Button variant="outline">Small (Media)</Button>}
+      />
+
+      <AlertDialogContent size="sm">
+        <AlertDialogHeader>
+          <AlertDialogMedia>
+            <BluetoothIcon />
+          </AlertDialogMedia>
+          <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
+          <AlertDialogDescription>
+            Do you want to allow the USB accessory to connect to this device?
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
+          <AlertDialogAction>Allow</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/apps/v4/examples/base/alert-dialog-small.tsx b/apps/v4/examples/base/alert-dialog-small.tsx
new file mode 100644
index 000000000..1718fd5fe
--- /dev/null
+++ b/apps/v4/examples/base/alert-dialog-small.tsx
@@ -0,0 +1,32 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/examples/base/ui/alert-dialog"
+import { Button } from "@/examples/base/ui/button"
+
+export function AlertDialogSmall() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger render={<Button variant="outline">Small</Button>} />
+      <AlertDialogContent size="sm">
+        <AlertDialogHeader>
+          <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
+          <AlertDialogDescription>
+            Do you want to allow the USB accessory to connect to this device?
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
+          <AlertDialogAction>Allow</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/apps/v4/examples/base/alert-dialog-with-media.tsx b/apps/v4/examples/base/alert-dialog-with-media.tsx
new file mode 100644
index 000000000..b74bd8d2c
--- /dev/null
+++ b/apps/v4/examples/base/alert-dialog-with-media.tsx
@@ -0,0 +1,40 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/examples/base/ui/alert-dialog"
+import { Button } from "@/examples/base/ui/button"
+import { BluetoothIcon } from "lucide-react"
+
+export function AlertDialogWithMedia() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger
+        render={<Button variant="outline">Default (Media)</Button>}
+      />
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogMedia>
+            <BluetoothIcon />
+          </AlertDialogMedia>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will permanently delete your account and remove your data from
+            our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/apps/v4/examples/base/alert-example1.tsx b/apps/v4/examples/base/alert-example1.tsx
new file mode 100644
index 000000000..2b5972a65
--- /dev/null
+++ b/apps/v4/examples/base/alert-example1.tsx
@@ -0,0 +1,22 @@
+import { Alert, AlertDescription, AlertTitle } from "@/examples/base/ui/alert"
+
+export function AlertExample1() {
+  return (
+    <div className="mx-auto flex w-full max-w-lg flex-col gap-4">
+      <Alert>
+        <AlertTitle>Success! Your changes have been saved.</AlertTitle>
+      </Alert>
+      <Alert>
+        <AlertTitle>Success! Your changes have been saved.</AlertTitle>
+        <AlertDescription>
+          This is an alert with title and description.
+        </AlertDescription>
+      </Alert>
+      <Alert>
+        <AlertDescription>
+          This one has a description only. No title. No icon.
+        </AlertDescription>
+      </Alert>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/alert-example2.tsx b/apps/v4/examples/base/alert-example2.tsx
new file mode 100644
index 000000000..16a82c915
--- /dev/null
+++ b/apps/v4/examples/base/alert-example2.tsx
@@ -0,0 +1,62 @@
+import { Alert, AlertDescription, AlertTitle } from "@/examples/base/ui/alert"
+import { CircleAlertIcon } from "lucide-react"
+
+export function AlertExample2() {
+  return (
+    <div className="mx-auto flex w-full max-w-lg flex-col gap-4">
+      <Alert>
+        <CircleAlertIcon />
+        <AlertTitle>
+          Let&apos;s try one with icon, title and a <a href="#">link</a>.
+        </AlertTitle>
+      </Alert>
+      <Alert>
+        <CircleAlertIcon />
+        <AlertDescription>
+          This one has an icon and a description only. No title.{" "}
+          <a href="#">But it has a link</a> and a <a href="#">second link</a>.
+        </AlertDescription>
+      </Alert>
+
+      <Alert>
+        <CircleAlertIcon />
+        <AlertTitle>Success! Your changes have been saved</AlertTitle>
+        <AlertDescription>
+          This is an alert with icon, title and description.
+        </AlertDescription>
+      </Alert>
+      <Alert>
+        <CircleAlertIcon />
+        <AlertTitle>
+          This is a very long alert title that demonstrates how the component
+          handles extended text content and potentially wraps across multiple
+          lines
+        </AlertTitle>
+      </Alert>
+      <Alert>
+        <CircleAlertIcon />
+        <AlertDescription>
+          This is a very long alert description that demonstrates how the
+          component handles extended text content and potentially wraps across
+          multiple lines
+        </AlertDescription>
+      </Alert>
+      <Alert>
+        <CircleAlertIcon />
+        <AlertTitle>
+          This is an extremely long alert title that spans multiple lines to
+          demonstrate how the component handles very lengthy headings while
+          maintaining readability and proper text wrapping behavior
+        </AlertTitle>
+        <AlertDescription>
+          This is an equally long description that contains detailed information
+          about the alert. It shows how the component can accommodate extensive
+          content while preserving proper spacing, alignment, and readability
+          across different screen sizes and viewport widths. This helps ensure
+          the user experience remains consistent regardless of the content
+          length.
+        </AlertDescription>
+      </Alert>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/alert-example3.tsx b/apps/v4/examples/base/alert-example3.tsx
new file mode 100644
index 000000000..23ae7d7c7
--- /dev/null
+++ b/apps/v4/examples/base/alert-example3.tsx
@@ -0,0 +1,31 @@
+import { Alert, AlertDescription, AlertTitle } from "@/examples/base/ui/alert"
+import { CircleAlertIcon } from "lucide-react"
+
+export function AlertExample3() {
+  return (
+    <div className="mx-auto flex w-full max-w-lg flex-col gap-4">
+      <Alert variant="destructive">
+        <CircleAlertIcon />
+        <AlertTitle>Something went wrong!</AlertTitle>
+        <AlertDescription>
+          Your session has expired. Please log in again.
+        </AlertDescription>
+      </Alert>
+      <Alert variant="destructive">
+        <CircleAlertIcon />
+        <AlertTitle>Unable to process your payment.</AlertTitle>
+        <AlertDescription>
+          <p>
+            Please verify your <a href="#">billing information</a> and try
+            again.
+          </p>
+          <ul className="list-inside list-disc">
+            <li>Check your card details</li>
+            <li>Ensure sufficient funds</li>
+            <li>Verify billing address</li>
+          </ul>
+        </AlertDescription>
+      </Alert>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/alert-example4.tsx b/apps/v4/examples/base/alert-example4.tsx
new file mode 100644
index 000000000..bc92ef73e
--- /dev/null
+++ b/apps/v4/examples/base/alert-example4.tsx
@@ -0,0 +1,34 @@
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+} from "@/examples/base/ui/alert"
+import { Badge } from "@/examples/base/ui/badge"
+import { Button } from "@/examples/base/ui/button"
+import { CircleAlertIcon } from "lucide-react"
+
+export function AlertExample4() {
+  return (
+    <div className="mx-auto flex w-full max-w-lg flex-col gap-4">
+      <Alert>
+        <CircleAlertIcon />
+        <AlertTitle>The selected emails have been marked as spam.</AlertTitle>
+        <AlertAction>
+          <Button size="xs">Undo</Button>
+        </AlertAction>
+      </Alert>
+      <Alert>
+        <CircleAlertIcon />
+        <AlertTitle>The selected emails have been marked as spam.</AlertTitle>
+        <AlertDescription>
+          This is a very long alert title that demonstrates how the component
+          handles extended text content.
+        </AlertDescription>
+        <AlertAction>
+          <Badge variant="secondary">Badge</Badge>
+        </AlertAction>
+      </Alert>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/aspect-ratio16x9.tsx b/apps/v4/examples/base/aspect-ratio16x9.tsx
new file mode 100644
index 000000000..b1c364b7a
--- /dev/null
+++ b/apps/v4/examples/base/aspect-ratio16x9.tsx
@@ -0,0 +1,15 @@
+import Image from "next/image"
+import { AspectRatio } from "@/examples/base/ui/aspect-ratio"
+
+export function AspectRatio16x9() {
+  return (
+    <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
+      <Image
+        src="https://avatar.vercel.sh/shadcn1"
+        alt="Photo"
+        fill
+        className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
+      />
+    </AspectRatio>
+  )
+}
diff --git a/apps/v4/examples/base/aspect-ratio1x1.tsx b/apps/v4/examples/base/aspect-ratio1x1.tsx
new file mode 100644
index 000000000..50b082091
--- /dev/null
+++ b/apps/v4/examples/base/aspect-ratio1x1.tsx
@@ -0,0 +1,15 @@
+import Image from "next/image"
+import { AspectRatio } from "@/examples/base/ui/aspect-ratio"
+
+export function AspectRatio1x1() {
+  return (
+    <AspectRatio ratio={1 / 1} className="bg-muted rounded-lg">
+      <Image
+        src="https://avatar.vercel.sh/shadcn1"
+        alt="Photo"
+        fill
+        className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
+      />
+    </AspectRatio>
+  )
+}
diff --git a/apps/v4/examples/base/aspect-ratio21x9.tsx b/apps/v4/examples/base/aspect-ratio21x9.tsx
new file mode 100644
index 000000000..102cad54f
--- /dev/null
+++ b/apps/v4/examples/base/aspect-ratio21x9.tsx
@@ -0,0 +1,15 @@
+import Image from "next/image"
+import { AspectRatio } from "@/examples/base/ui/aspect-ratio"
+
+export function AspectRatio21x9() {
+  return (
+    <AspectRatio ratio={21 / 9} className="bg-muted rounded-lg">
+      <Image
+        src="https://avatar.vercel.sh/shadcn1"
+        alt="Photo"
+        fill
+        className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
+      />
+    </AspectRatio>
+  )
+}
diff --git a/apps/v4/examples/base/aspect-ratio9x16.tsx b/apps/v4/examples/base/aspect-ratio9x16.tsx
new file mode 100644
index 000000000..e81b55ff6
--- /dev/null
+++ b/apps/v4/examples/base/aspect-ratio9x16.tsx
@@ -0,0 +1,15 @@
+import Image from "next/image"
+import { AspectRatio } from "@/examples/base/ui/aspect-ratio"
+
+export function AspectRatio9x16() {
+  return (
+    <AspectRatio ratio={9 / 16} className="bg-muted rounded-lg">
+      <Image
+        src="https://avatar.vercel.sh/shadcn1"
+        alt="Photo"
+        fill
+        className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
+      />
+    </AspectRatio>
+  )
+}
diff --git a/apps/v4/examples/base/avatar-group-example.tsx b/apps/v4/examples/base/avatar-group-example.tsx
new file mode 100644
index 000000000..bd4564bfb
--- /dev/null
+++ b/apps/v4/examples/base/avatar-group-example.tsx
@@ -0,0 +1,73 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarImage,
+} from "@/examples/base/ui/avatar"
+
+export function AvatarGroupExample() {
+  return (
+    <>
+      <AvatarGroup>
+        <Avatar size="sm">
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar size="sm">
+          <AvatarImage
+            src="https://github.com/maxleiter.png"
+            alt="@maxleiter"
+          />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar size="sm">
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+      </AvatarGroup>
+      <AvatarGroup>
+        <Avatar>
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage
+            src="https://github.com/maxleiter.png"
+            alt="@maxleiter"
+          />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+      </AvatarGroup>
+      <AvatarGroup>
+        <Avatar size="lg">
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarImage
+            src="https://github.com/maxleiter.png"
+            alt="@maxleiter"
+          />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+      </AvatarGroup>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/avatar-group-with-count.tsx b/apps/v4/examples/base/avatar-group-with-count.tsx
new file mode 100644
index 000000000..9034275a0
--- /dev/null
+++ b/apps/v4/examples/base/avatar-group-with-count.tsx
@@ -0,0 +1,77 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarImage,
+} from "@/examples/base/ui/avatar"
+
+export function AvatarGroupWithCount() {
+  return (
+    <>
+      <AvatarGroup>
+        <Avatar size="sm">
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar size="sm">
+          <AvatarImage
+            src="https://github.com/maxleiter.png"
+            alt="@maxleiter"
+          />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar size="sm">
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+        <AvatarGroupCount>+3</AvatarGroupCount>
+      </AvatarGroup>
+      <AvatarGroup>
+        <Avatar>
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage
+            src="https://github.com/maxleiter.png"
+            alt="@maxleiter"
+          />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+        <AvatarGroupCount>+3</AvatarGroupCount>
+      </AvatarGroup>
+      <AvatarGroup>
+        <Avatar size="lg">
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarImage
+            src="https://github.com/maxleiter.png"
+            alt="@maxleiter"
+          />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+        <AvatarGroupCount>+3</AvatarGroupCount>
+      </AvatarGroup>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/avatar-group-with-icon-count.tsx b/apps/v4/examples/base/avatar-group-with-icon-count.tsx
new file mode 100644
index 000000000..439288e19
--- /dev/null
+++ b/apps/v4/examples/base/avatar-group-with-icon-count.tsx
@@ -0,0 +1,90 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarImage,
+} from "@/examples/base/ui/avatar"
+import { PlusIcon } from "lucide-react"
+
+export function AvatarGroupWithIconCount() {
+  return (
+    <>
+      <AvatarGroup>
+        <Avatar size="sm">
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar size="sm">
+          <AvatarImage
+            src="https://github.com/maxleiter.png"
+            alt="@maxleiter"
+          />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar size="sm">
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+        <AvatarGroupCount>
+          <PlusIcon />
+        </AvatarGroupCount>
+      </AvatarGroup>
+      <AvatarGroup>
+        <Avatar>
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage
+            src="https://github.com/maxleiter.png"
+            alt="@maxleiter"
+          />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+        <AvatarGroupCount>
+          <PlusIcon />
+        </AvatarGroupCount>
+      </AvatarGroup>
+      <AvatarGroup>
+        <Avatar size="lg">
+          <AvatarImage
+            src="https://github.com/shadcn.png"
+            alt="@shadcn"
+            className="grayscale"
+          />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarImage
+            src="https://github.com/maxleiter.png"
+            alt="@maxleiter"
+            className="grayscale"
+          />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+            className="grayscale"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+        <AvatarGroupCount>
+          <PlusIcon />
+        </AvatarGroupCount>
+      </AvatarGroup>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/avatar-in-empty.tsx b/apps/v4/examples/base/avatar-in-empty.tsx
new file mode 100644
index 000000000..6d21fa8c1
--- /dev/null
+++ b/apps/v4/examples/base/avatar-in-empty.tsx
@@ -0,0 +1,67 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarImage,
+} from "@/examples/base/ui/avatar"
+import { Button } from "@/examples/base/ui/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/examples/base/ui/empty"
+import { PlusIcon } from "lucide-react"
+
+export function AvatarInEmpty() {
+  return (
+    <Empty className="w-full flex-none border">
+      <EmptyHeader>
+        <EmptyMedia>
+          <AvatarGroup>
+            <Avatar size="lg">
+              <AvatarImage
+                src="https://github.com/shadcn.png"
+                alt="@shadcn"
+                className="grayscale"
+              />
+              <AvatarFallback>CN</AvatarFallback>
+            </Avatar>
+            <Avatar size="lg">
+              <AvatarImage
+                src="https://github.com/maxleiter.png"
+                alt="@maxleiter"
+                className="grayscale"
+              />
+              <AvatarFallback>LR</AvatarFallback>
+            </Avatar>
+            <Avatar size="lg">
+              <AvatarImage
+                src="https://github.com/evilrabbit.png"
+                alt="@evilrabbit"
+                className="grayscale"
+              />
+              <AvatarFallback>ER</AvatarFallback>
+            </Avatar>
+            <AvatarGroupCount>
+              <PlusIcon />
+            </AvatarGroupCount>
+          </AvatarGroup>
+        </EmptyMedia>
+        <EmptyTitle>No Team Members</EmptyTitle>
+        <EmptyDescription>
+          Invite your team to collaborate on this project.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button>
+          <PlusIcon />
+          Invite Members
+        </Button>
+      </EmptyContent>
+    </Empty>
+  )
+}
diff --git a/apps/v4/examples/base/avatar-sizes.tsx b/apps/v4/examples/base/avatar-sizes.tsx
new file mode 100644
index 000000000..ae87e6f27
--- /dev/null
+++ b/apps/v4/examples/base/avatar-sizes.tsx
@@ -0,0 +1,33 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/examples/base/ui/avatar"
+
+export function AvatarSizes() {
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-2">
+        <Avatar size="sm">
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Avatar size="sm">
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/avatar-with-badge-icon.tsx b/apps/v4/examples/base/avatar-with-badge-icon.tsx
new file mode 100644
index 000000000..442ba46c0
--- /dev/null
+++ b/apps/v4/examples/base/avatar-with-badge-icon.tsx
@@ -0,0 +1,66 @@
+import {
+  Avatar,
+  AvatarBadge,
+  AvatarFallback,
+  AvatarImage,
+} from "@/examples/base/ui/avatar"
+import { CheckIcon, PlusIcon } from "lucide-react"
+
+export function AvatarWithBadgeIcon() {
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-2">
+        <Avatar size="sm">
+          <AvatarImage
+            src="https://github.com/pranathip.png"
+            alt="@pranathip"
+          />
+          <AvatarFallback>PP</AvatarFallback>
+          <AvatarBadge>
+            <PlusIcon />
+          </AvatarBadge>
+        </Avatar>
+        <Avatar>
+          <AvatarImage
+            src="https://github.com/pranathip.png"
+            alt="@pranathip"
+          />
+          <AvatarFallback>PP</AvatarFallback>
+          <AvatarBadge>
+            <PlusIcon />
+          </AvatarBadge>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarImage
+            src="https://github.com/pranathip.png"
+            alt="@pranathip"
+          />
+          <AvatarFallback>PP</AvatarFallback>
+          <AvatarBadge>
+            <PlusIcon />
+          </AvatarBadge>
+        </Avatar>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Avatar size="sm">
+          <AvatarFallback>PP</AvatarFallback>
+          <AvatarBadge>
+            <CheckIcon />
+          </AvatarBadge>
+        </Avatar>
+        <Avatar>
+          <AvatarFallback>PP</AvatarFallback>
+          <AvatarBadge>
+            <CheckIcon />
+          </AvatarBadge>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarFallback>PP</AvatarFallback>
+          <AvatarBadge>
+            <CheckIcon />
+          </AvatarBadge>
+        </Avatar>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/avatar-with-badge.tsx b/apps/v4/examples/base/avatar-with-badge.tsx
new file mode 100644
index 000000000..47d67d20f
--- /dev/null
+++ b/apps/v4/examples/base/avatar-with-badge.tsx
@@ -0,0 +1,53 @@
+import {
+  Avatar,
+  AvatarBadge,
+  AvatarFallback,
+  AvatarImage,
+} from "@/examples/base/ui/avatar"
+
+export function AvatarWithBadge() {
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-2">
+        <Avatar size="sm">
+          <AvatarImage
+            src="https://github.com/jorgezreik.png"
+            alt="@jorgezreik"
+          />
+          <AvatarFallback>JZ</AvatarFallback>
+          <AvatarBadge />
+        </Avatar>
+        <Avatar>
+          <AvatarImage
+            src="https://github.com/jorgezreik.png"
+            alt="@jorgezreik"
+          />
+          <AvatarFallback>JZ</AvatarFallback>
+          <AvatarBadge />
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarImage
+            src="https://github.com/jorgezreik.png"
+            alt="@jorgezreik"
+          />
+          <AvatarFallback>JZ</AvatarFallback>
+          <AvatarBadge />
+        </Avatar>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Avatar size="sm">
+          <AvatarFallback>JZ</AvatarFallback>
+          <AvatarBadge />
+        </Avatar>
+        <Avatar>
+          <AvatarFallback>JZ</AvatarFallback>
+          <AvatarBadge />
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarFallback>JZ</AvatarFallback>
+          <AvatarBadge />
+        </Avatar>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/badge-as-link.tsx b/apps/v4/examples/base/badge-as-link.tsx
new file mode 100644
index 000000000..7d3075314
--- /dev/null
+++ b/apps/v4/examples/base/badge-as-link.tsx
@@ -0,0 +1,40 @@
+import { Badge } from "@/examples/base/ui/badge"
+import { ArrowUpRightIcon } from "lucide-react"
+
+export function BadgeAsLink() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Badge
+        render={
+          <a href="#">
+            Link <ArrowUpRightIcon />
+          </a>
+        }
+      />
+      <Badge
+        variant="secondary"
+        render={
+          <a href="#">
+            Link <ArrowUpRightIcon />
+          </a>
+        }
+      />
+      <Badge
+        variant="destructive"
+        render={
+          <a href="#">
+            Link <ArrowUpRightIcon />
+          </a>
+        }
+      />
+      <Badge
+        variant="ghost"
+        render={
+          <a href="#">
+            Link <ArrowUpRightIcon />
+          </a>
+        }
+      />
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/badge-custom-colors.tsx b/apps/v4/examples/base/badge-custom-colors.tsx
new file mode 100644
index 000000000..63893a3a6
--- /dev/null
+++ b/apps/v4/examples/base/badge-custom-colors.tsx
@@ -0,0 +1,35 @@
+import { Badge } from "@/examples/base/ui/badge"
+
+export function BadgeCustomColors() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Badge className="bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50">
+        Blue
+      </Badge>
+      <Badge className="bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50">
+        Green
+      </Badge>
+      <Badge className="bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50">
+        Sky
+      </Badge>
+      <Badge className="bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50">
+        Purple
+      </Badge>
+      <Badge className="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300">
+        Blue
+      </Badge>
+      <Badge className="bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300">
+        Green
+      </Badge>
+      <Badge className="bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300">
+        Sky
+      </Badge>
+      <Badge className="bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300">
+        Purple
+      </Badge>
+      <Badge className="bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300">
+        Red
+      </Badge>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/badge-long-text.tsx b/apps/v4/examples/base/badge-long-text.tsx
new file mode 100644
index 000000000..52d8ba062
--- /dev/null
+++ b/apps/v4/examples/base/badge-long-text.tsx
@@ -0,0 +1,11 @@
+import { Badge } from "@/examples/base/ui/badge"
+
+export function BadgeLongText() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Badge variant="secondary">
+        A badge with a lot of text to see how it wraps
+      </Badge>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/badge-variants.tsx b/apps/v4/examples/base/badge-variants.tsx
new file mode 100644
index 000000000..01d5e8f07
--- /dev/null
+++ b/apps/v4/examples/base/badge-variants.tsx
@@ -0,0 +1,14 @@
+import { Badge } from "@/examples/base/ui/badge"
+
+export function BadgeVariants() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Badge>Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="outline">Outline</Badge>
+      <Badge variant="ghost">Ghost</Badge>
+      <Badge variant="link">Link</Badge>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/badge-with-icon-left.tsx b/apps/v4/examples/base/badge-with-icon-left.tsx
new file mode 100644
index 000000000..9806d0dc8
--- /dev/null
+++ b/apps/v4/examples/base/badge-with-icon-left.tsx
@@ -0,0 +1,33 @@
+import { Badge } from "@/examples/base/ui/badge"
+import { BadgeCheck } from "lucide-react"
+
+export function BadgeWithIconLeft() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Badge>
+        <BadgeCheck />
+        Default
+      </Badge>
+      <Badge variant="secondary">
+        <BadgeCheck />
+        Secondary
+      </Badge>
+      <Badge variant="destructive">
+        <BadgeCheck />
+        Destructive
+      </Badge>
+      <Badge variant="outline">
+        <BadgeCheck />
+        Outline
+      </Badge>
+      <Badge variant="ghost">
+        <BadgeCheck />
+        Ghost
+      </Badge>
+      <Badge variant="link">
+        <BadgeCheck />
+        Link
+      </Badge>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/badge-with-icon-right.tsx b/apps/v4/examples/base/badge-with-icon-right.tsx
new file mode 100644
index 000000000..3717a7c3e
--- /dev/null
+++ b/apps/v4/examples/base/badge-with-icon-right.tsx
@@ -0,0 +1,33 @@
+import { Badge } from "@/examples/base/ui/badge"
+import { ArrowRightIcon } from "lucide-react"
+
+export function BadgeWithIconRight() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Badge>
+        Default
+        <ArrowRightIcon />
+      </Badge>
+      <Badge variant="secondary">
+        Secondary
+        <ArrowRightIcon />
+      </Badge>
+      <Badge variant="destructive">
+        Destructive
+        <ArrowRightIcon />
+      </Badge>
+      <Badge variant="outline">
+        Outline
+        <ArrowRightIcon />
+      </Badge>
+      <Badge variant="ghost">
+        Ghost
+        <ArrowRightIcon />
+      </Badge>
+      <Badge variant="link">
+        Link
+        <ArrowRightIcon />
+      </Badge>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/badge-with-spinner.tsx b/apps/v4/examples/base/badge-with-spinner.tsx
new file mode 100644
index 000000000..fe1f661e7
--- /dev/null
+++ b/apps/v4/examples/base/badge-with-spinner.tsx
@@ -0,0 +1,33 @@
+import { Badge } from "@/examples/base/ui/badge"
+import { Spinner } from "@/examples/base/ui/spinner"
+
+export function BadgeWithSpinner() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Badge>
+        <Spinner data-icon="inline-start" />
+        Default
+      </Badge>
+      <Badge variant="secondary">
+        <Spinner data-icon="inline-start" />
+        Secondary
+      </Badge>
+      <Badge variant="destructive">
+        <Spinner data-icon="inline-start" />
+        Destructive
+      </Badge>
+      <Badge variant="outline">
+        <Spinner data-icon="inline-start" />
+        Outline
+      </Badge>
+      <Badge variant="ghost">
+        <Spinner data-icon="inline-start" />
+        Ghost
+      </Badge>
+      <Badge variant="link">
+        <Spinner data-icon="inline-start" />
+        Link
+      </Badge>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/breadcrumb-basic.tsx b/apps/v4/examples/base/breadcrumb-basic.tsx
new file mode 100644
index 000000000..da3856ad5
--- /dev/null
+++ b/apps/v4/examples/base/breadcrumb-basic.tsx
@@ -0,0 +1,28 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/examples/base/ui/breadcrumb"
+
+export function BreadcrumbBasic() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/v4/examples/base/breadcrumb-with-dropdown.tsx b/apps/v4/examples/base/breadcrumb-with-dropdown.tsx
new file mode 100644
index 000000000..0e4b1b942
--- /dev/null
+++ b/apps/v4/examples/base/breadcrumb-with-dropdown.tsx
@@ -0,0 +1,52 @@
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/examples/base/ui/breadcrumb"
+import { Button } from "@/examples/base/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui/dropdown-menu"
+
+export function BreadcrumbWithDropdown() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              render={<Button size="icon-sm" variant="ghost" />}
+            >
+              <BreadcrumbEllipsis />
+              <span className="sr-only">Toggle menu</span>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem>Documentation</DropdownMenuItem>
+              <DropdownMenuItem>Themes</DropdownMenuItem>
+              <DropdownMenuItem>GitHub</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/v4/examples/base/breadcrumb-with-link.tsx b/apps/v4/examples/base/breadcrumb-with-link.tsx
new file mode 100644
index 000000000..05350dd16
--- /dev/null
+++ b/apps/v4/examples/base/breadcrumb-with-link.tsx
@@ -0,0 +1,34 @@
+import Link from "next/link"
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/examples/base/ui/breadcrumb"
+
+export function BreadcrumbWithLink() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink render={<Link href="#">Home</Link>} />
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbEllipsis />
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink render={<Link href="#">Components</Link>} />
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/v4/examples/base/button-examples.tsx b/apps/v4/examples/base/button-examples.tsx
new file mode 100644
index 000000000..5916dd86c
--- /dev/null
+++ b/apps/v4/examples/base/button-examples.tsx
@@ -0,0 +1,24 @@
+import { Button } from "@/examples/base/ui/button"
+import { ArrowRightIcon } from "lucide-react"
+
+export function ButtonExamples() {
+  return (
+    <div className="flex flex-wrap items-center gap-4">
+      <div className="flex items-center gap-2">
+        <Button variant="outline">Cancel</Button>
+        <Button>
+          Submit <ArrowRightIcon />
+        </Button>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button variant="destructive">Delete</Button>
+        <Button size="icon">
+          <ArrowRightIcon />
+        </Button>
+      </div>
+      <Button render={<a href="#" />} nativeButton={false}>
+        Link
+      </Button>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/button-group-basic.tsx b/apps/v4/examples/base/button-group-basic.tsx
new file mode 100644
index 000000000..149b5fcb4
--- /dev/null
+++ b/apps/v4/examples/base/button-group-basic.tsx
@@ -0,0 +1,13 @@
+import { Button } from "@/examples/base/ui/button"
+import { ButtonGroup } from "@/examples/base/ui/button-group"
+
+export function ButtonGroupBasic() {
+  return (
+    <div className="flex flex-col gap-4">
+      <ButtonGroup>
+        <Button variant="outline">Button</Button>
+        <Button variant="outline">Another Button</Button>
+      </ButtonGroup>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/button-group-navigation.tsx b/apps/v4/examples/base/button-group-navigation.tsx
new file mode 100644
index 000000000..ad5908e3a
--- /dev/null
+++ b/apps/v4/examples/base/button-group-navigation.tsx
@@ -0,0 +1,23 @@
+import { Button } from "@/examples/base/ui/button"
+import { ButtonGroup } from "@/examples/base/ui/button-group"
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
+
+export function ButtonGroupNavigation() {
+  return (
+    <ButtonGroup>
+      <ButtonGroup>
+        <Button variant="outline">
+          <ArrowLeftIcon />
+        </Button>
+        <Button variant="outline">
+          <ArrowRightIcon />
+        </Button>
+      </ButtonGroup>
+      <ButtonGroup aria-label="Single navigation button">
+        <Button variant="outline" size="icon">
+          <ArrowLeftIcon />
+        </Button>
+      </ButtonGroup>
+    </ButtonGroup>
+  )
+}
diff --git a/apps/v4/examples/base/button-group-nested.tsx b/apps/v4/examples/base/button-group-nested.tsx
index 8aeeee9ab..1590c091d 100644
--- a/apps/v4/examples/base/button-group-nested.tsx
+++ b/apps/v4/examples/base/button-group-nested.tsx
@@ -1,36 +1,36 @@
-"use client"
-
 import { Button } from "@/examples/base/ui/button"
 import { ButtonGroup } from "@/examples/base/ui/button-group"
-import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
+import { Input } from "@/examples/base/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/base/ui/input-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/base/ui/tooltip"
+import { AudioLinesIcon, PlusIcon } from "lucide-react"
 
-export default function ButtonGroupNested() {
+export function ButtonGroupNested() {
   return (
     <ButtonGroup>
       <ButtonGroup>
-        <Button variant="outline" size="sm">
-          1
-        </Button>
-        <Button variant="outline" size="sm">
-          2
-        </Button>
-        <Button variant="outline" size="sm">
-          3
-        </Button>
-        <Button variant="outline" size="sm">
-          4
-        </Button>
-        <Button variant="outline" size="sm">
-          5
+        <Button variant="outline" size="icon">
+          <PlusIcon />
         </Button>
       </ButtonGroup>
       <ButtonGroup>
-        <Button variant="outline" size="icon-sm" aria-label="Previous">
-          <ArrowLeftIcon />
-        </Button>
-        <Button variant="outline" size="icon-sm" aria-label="Next">
-          <ArrowRightIcon />
-        </Button>
+        <InputGroup>
+          <InputGroupInput placeholder="Send a message..." />
+          <Tooltip>
+            <TooltipTrigger render={<InputGroupAddon align="inline-end" />}>
+              <AudioLinesIcon />
+            </TooltipTrigger>
+            <TooltipContent>Voice Mode</TooltipContent>
+          </Tooltip>
+        </InputGroup>
       </ButtonGroup>
     </ButtonGroup>
   )
diff --git a/apps/v4/examples/base/button-group-pagination-split.tsx b/apps/v4/examples/base/button-group-pagination-split.tsx
new file mode 100644
index 000000000..113fead12
--- /dev/null
+++ b/apps/v4/examples/base/button-group-pagination-split.tsx
@@ -0,0 +1,35 @@
+import { Button } from "@/examples/base/ui/button"
+import { ButtonGroup } from "@/examples/base/ui/button-group"
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
+
+export function ButtonGroupPaginationSplit() {
+  return (
+    <ButtonGroup>
+      <ButtonGroup>
+        <Button variant="outline" size="sm">
+          1
+        </Button>
+        <Button variant="outline" size="sm">
+          2
+        </Button>
+        <Button variant="outline" size="sm">
+          3
+        </Button>
+        <Button variant="outline" size="sm">
+          4
+        </Button>
+        <Button variant="outline" size="sm">
+          5
+        </Button>
+      </ButtonGroup>
+      <ButtonGroup>
+        <Button variant="outline" size="icon-xs">
+          <ArrowLeftIcon />
+        </Button>
+        <Button variant="outline" size="icon-xs">
+          <ArrowRightIcon />
+        </Button>
+      </ButtonGroup>
+    </ButtonGroup>
+  )
+}
diff --git a/apps/v4/examples/base/button-group-pagination.tsx b/apps/v4/examples/base/button-group-pagination.tsx
new file mode 100644
index 000000000..53505fb04
--- /dev/null
+++ b/apps/v4/examples/base/button-group-pagination.tsx
@@ -0,0 +1,33 @@
+import { Button } from "@/examples/base/ui/button"
+import { ButtonGroup } from "@/examples/base/ui/button-group"
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
+
+export function ButtonGroupPagination() {
+  return (
+    <ButtonGroup>
+      <Button variant="outline" size="sm">
+        <ArrowLeftIcon />
+        Previous
+      </Button>
+      <Button variant="outline" size="sm">
+        1
+      </Button>
+      <Button variant="outline" size="sm">
+        2
+      </Button>
+      <Button variant="outline" size="sm">
+        3
+      </Button>
+      <Button variant="outline" size="sm">
+        4
+      </Button>
+      <Button variant="outline" size="sm">
+        5
+      </Button>
+      <Button variant="outline" size="sm">
+        Next
+        <ArrowRightIcon />
+      </Button>
+    </ButtonGroup>
+  )
+}
diff --git a/apps/v4/examples/base/button-group-text-alignment.tsx b/apps/v4/examples/base/button-group-text-alignment.tsx
new file mode 100644
index 000000000..8aeffd0ed
--- /dev/null
+++ b/apps/v4/examples/base/button-group-text-alignment.tsx
@@ -0,0 +1,26 @@
+import { Button } from "@/examples/base/ui/button"
+import { ButtonGroup } from "@/examples/base/ui/button-group"
+import { Field } from "@/examples/base/ui/field"
+import { Label } from "@/examples/base/ui/label"
+
+export function ButtonGroupTextAlignment() {
+  return (
+    <Field>
+      <Label id="alignment-label">Text Alignment</Label>
+      <ButtonGroup aria-labelledby="alignment-label">
+        <Button variant="outline" size="sm">
+          Left
+        </Button>
+        <Button variant="outline" size="sm">
+          Center
+        </Button>
+        <Button variant="outline" size="sm">
+          Right
+        </Button>
+        <Button variant="outline" size="sm">
+          Justify
+        </Button>
+      </ButtonGroup>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/button-group-vertical-nested.tsx b/apps/v4/examples/base/button-group-vertical-nested.tsx
new file mode 100644
index 000000000..c8a5b4ff9
--- /dev/null
+++ b/apps/v4/examples/base/button-group-vertical-nested.tsx
@@ -0,0 +1,45 @@
+import { Button } from "@/examples/base/ui/button"
+import { ButtonGroup } from "@/examples/base/ui/button-group"
+import {
+  CopyIcon,
+  FlipHorizontalIcon,
+  FlipVerticalIcon,
+  RotateCwIcon,
+  SearchIcon,
+  ShareIcon,
+  TrashIcon,
+} from "lucide-react"
+
+export function ButtonGroupVerticalNested() {
+  return (
+    <ButtonGroup orientation="vertical" aria-label="Design tools palette">
+      <ButtonGroup orientation="vertical">
+        <Button variant="outline" size="icon">
+          <SearchIcon />
+        </Button>
+        <Button variant="outline" size="icon">
+          <CopyIcon />
+        </Button>
+        <Button variant="outline" size="icon">
+          <ShareIcon />
+        </Button>
+      </ButtonGroup>
+      <ButtonGroup orientation="vertical">
+        <Button variant="outline" size="icon">
+          <FlipHorizontalIcon />
+        </Button>
+        <Button variant="outline" size="icon">
+          <FlipVerticalIcon />
+        </Button>
+        <Button variant="outline" size="icon">
+          <RotateCwIcon />
+        </Button>
+      </ButtonGroup>
+      <ButtonGroup>
+        <Button variant="outline" size="icon">
+          <TrashIcon />
+        </Button>
+      </ButtonGroup>
+    </ButtonGroup>
+  )
+}
diff --git a/apps/v4/examples/base/button-group-vertical.tsx b/apps/v4/examples/base/button-group-vertical.tsx
new file mode 100644
index 000000000..752f13914
--- /dev/null
+++ b/apps/v4/examples/base/button-group-vertical.tsx
@@ -0,0 +1,22 @@
+import { Button } from "@/examples/base/ui/button"
+import { ButtonGroup } from "@/examples/base/ui/button-group"
+import { MinusIcon, PlusIcon } from "lucide-react"
+
+export function ButtonGroupVertical() {
+  return (
+    <div className="flex gap-6">
+      <ButtonGroup
+        orientation="vertical"
+        aria-label="Media controls"
+        className="h-fit"
+      >
+        <Button variant="outline" size="icon">
+          <PlusIcon />
+        </Button>
+        <Button variant="outline" size="icon">
+          <MinusIcon />
+        </Button>
+      </ButtonGroup>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/button-group-with-dropdown.tsx b/apps/v4/examples/base/button-group-with-dropdown.tsx
new file mode 100644
index 000000000..6239bec91
--- /dev/null
+++ b/apps/v4/examples/base/button-group-with-dropdown.tsx
@@ -0,0 +1,90 @@
+import { Button } from "@/examples/base/ui/button"
+import { ButtonGroup } from "@/examples/base/ui/button-group"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui/dropdown-menu"
+import {
+  AlertTriangleIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  CopyIcon,
+  ShareIcon,
+  TrashIcon,
+  UserRoundXIcon,
+  VolumeX,
+} from "lucide-react"
+
+export function ButtonGroupWithDropdown() {
+  return (
+    <>
+      <div className="flex flex-col gap-4">
+        <ButtonGroup>
+          <Button variant="outline">Update</Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              render={<Button variant="outline" size="icon" />}
+            >
+              <ChevronDownIcon />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem>Disable</DropdownMenuItem>
+              <DropdownMenuItem variant="destructive">
+                Uninstall
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </ButtonGroup>
+        <ButtonGroup>
+          <Button variant="outline">Follow</Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              render={<Button variant="outline" size="icon" />}
+            >
+              <ChevronDownIcon />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-50">
+              <DropdownMenuGroup>
+                <DropdownMenuItem>
+                  <VolumeX />
+                  Mute Conversation
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <CheckIcon />
+                  Mark as Read
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <AlertTriangleIcon />
+                  Report Conversation
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <UserRoundXIcon />
+                  Block User
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <ShareIcon />
+                  Share Conversation
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <CopyIcon />
+                  Copy Conversation
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem variant="destructive">
+                  <TrashIcon />
+                  Delete Conversation
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </ButtonGroup>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/button-group-with-fields.tsx b/apps/v4/examples/base/button-group-with-fields.tsx
new file mode 100644
index 000000000..b65fa816c
--- /dev/null
+++ b/apps/v4/examples/base/button-group-with-fields.tsx
@@ -0,0 +1,41 @@
+import { Button } from "@/examples/base/ui/button"
+import { ButtonGroup } from "@/examples/base/ui/button-group"
+import { Field, FieldGroup } from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/base/ui/input-group"
+import { Label } from "@/examples/base/ui/label"
+import { MinusIcon, PlusIcon } from "lucide-react"
+
+export function ButtonGroupWithFields() {
+  return (
+    <FieldGroup className="grid grid-cols-3 gap-4">
+      <Field className="col-span-2">
+        <Label htmlFor="width">Width</Label>
+        <ButtonGroup>
+          <InputGroup>
+            <InputGroupInput id="width" />
+            <InputGroupAddon className="text-muted-foreground">
+              W
+            </InputGroupAddon>
+            <InputGroupAddon
+              align="inline-end"
+              className="text-muted-foreground"
+            >
+              px
+            </InputGroupAddon>
+          </InputGroup>
+          <Button variant="outline" size="icon">
+            <MinusIcon />
+          </Button>
+          <Button variant="outline" size="icon">
+            <PlusIcon />
+          </Button>
+        </ButtonGroup>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/base/button-group-with-icons.tsx b/apps/v4/examples/base/button-group-with-icons.tsx
new file mode 100644
index 000000000..7b4df54a2
--- /dev/null
+++ b/apps/v4/examples/base/button-group-with-icons.tsx
@@ -0,0 +1,25 @@
+import { Button } from "@/examples/base/ui/button"
+import { ButtonGroup } from "@/examples/base/ui/button-group"
+import {
+  FlipHorizontalIcon,
+  FlipVerticalIcon,
+  RotateCwIcon,
+} from "lucide-react"
+
+export function ButtonGroupWithIcons() {
+  return (
+    <div className="flex flex-col gap-4">
+      <ButtonGroup>
+        <Button variant="outline">
+          <FlipHorizontalIcon />
+        </Button>
+        <Button variant="outline">
+          <FlipVerticalIcon />
+        </Button>
+        <Button variant="outline">
+          <RotateCwIcon />
+        </Button>
+      </ButtonGroup>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/button-group-with-input-group.tsx b/apps/v4/examples/base/button-group-with-input-group.tsx
new file mode 100644
index 000000000..0c7e74564
--- /dev/null
+++ b/apps/v4/examples/base/button-group-with-input-group.tsx
@@ -0,0 +1,20 @@
+import { Input } from "@/examples/base/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/base/ui/input-group"
+import { SearchIcon } from "lucide-react"
+
+export function ButtonGroupWithInputGroup() {
+  return (
+    <div className="flex flex-col gap-4">
+      <InputGroup>
+        <InputGroupInput placeholder="Type to search..." />
+        <InputGroupAddon align="inline-start" className="text-muted-foreground">
+          <SearchIcon />
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/button-group-with-input.tsx b/apps/v4/examples/base/button-group-with-input.tsx
new file mode 100644
index 000000000..79cd7be12
--- /dev/null
+++ b/apps/v4/examples/base/button-group-with-input.tsx
@@ -0,0 +1,18 @@
+import { Button } from "@/examples/base/ui/button"
+import { ButtonGroup } from "@/examples/base/ui/button-group"
+import { Input } from "@/examples/base/ui/input"
+
+export function ButtonGroupWithInput() {
+  return (
+    <div className="flex flex-col gap-4">
+      <ButtonGroup>
+        <Button variant="outline">Button</Button>
+        <Input placeholder="Type something here..." />
+      </ButtonGroup>
+      <ButtonGroup>
+        <Input placeholder="Type something here..." />
+        <Button variant="outline">Button</Button>
+      </ButtonGroup>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/button-group-with-like.tsx b/apps/v4/examples/base/button-group-with-like.tsx
new file mode 100644
index 000000000..e48eb3d84
--- /dev/null
+++ b/apps/v4/examples/base/button-group-with-like.tsx
@@ -0,0 +1,22 @@
+import { Button } from "@/examples/base/ui/button"
+import { ButtonGroup } from "@/examples/base/ui/button-group"
+import { HeartIcon } from "lucide-react"
+
+export function ButtonGroupWithLike() {
+  return (
+    <ButtonGroup>
+      <Button variant="outline">
+        <HeartIcon /> Like
+      </Button>
+      <Button
+        variant="outline"
+        size="icon"
+        className="w-12"
+        render={<span />}
+        nativeButton={false}
+      >
+        1.2K
+      </Button>
+    </ButtonGroup>
+  )
+}
diff --git a/apps/v4/examples/base/button-group-with-select-and-input.tsx b/apps/v4/examples/base/button-group-with-select-and-input.tsx
new file mode 100644
index 000000000..524304002
--- /dev/null
+++ b/apps/v4/examples/base/button-group-with-select-and-input.tsx
@@ -0,0 +1,39 @@
+import { Button } from "@/examples/base/ui/button"
+import { ButtonGroup } from "@/examples/base/ui/button-group"
+import { Input } from "@/examples/base/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+
+const durationItems = [
+  { label: "Hours", value: "hours" },
+  { label: "Days", value: "days" },
+  { label: "Weeks", value: "weeks" },
+]
+
+export function ButtonGroupWithSelectAndInput() {
+  return (
+    <ButtonGroup>
+      <Select items={durationItems} defaultValue={durationItems[0]}>
+        <SelectTrigger id="duration">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent align="start">
+          <SelectGroup>
+            {durationItems.map((item) => (
+              <SelectItem key={item.value} value={item.value}>
+                {item.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <Input />
+    </ButtonGroup>
+  )
+}
diff --git a/apps/v4/examples/base/button-group-with-select.tsx b/apps/v4/examples/base/button-group-with-select.tsx
new file mode 100644
index 000000000..75ff7a8b0
--- /dev/null
+++ b/apps/v4/examples/base/button-group-with-select.tsx
@@ -0,0 +1,48 @@
+import { Button } from "@/examples/base/ui/button"
+import { ButtonGroup } from "@/examples/base/ui/button-group"
+import { Field } from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+import { Label } from "@/examples/base/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+import { ArrowRightIcon } from "lucide-react"
+
+const currencyItems = [
+  { label: "$", value: "$" },
+  { label: "€", value: "€" },
+  { label: "£", value: "£" },
+]
+
+export function ButtonGroupWithSelect() {
+  return (
+    <Field>
+      <Label htmlFor="amount">Amount</Label>
+      <ButtonGroup>
+        <Select items={currencyItems} defaultValue={currencyItems[0]}>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {currencyItems.map((item) => (
+                <SelectItem key={item.value} value={item}>
+                  {item.label}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <Input placeholder="Enter amount to send" />
+        <Button variant="outline">
+          <ArrowRightIcon />
+        </Button>
+      </ButtonGroup>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/button-group-with-text.tsx b/apps/v4/examples/base/button-group-with-text.tsx
new file mode 100644
index 000000000..89c619d35
--- /dev/null
+++ b/apps/v4/examples/base/button-group-with-text.tsx
@@ -0,0 +1,21 @@
+import { Button } from "@/examples/base/ui/button"
+import { ButtonGroup, ButtonGroupText } from "@/examples/base/ui/button-group"
+import { Input } from "@/examples/base/ui/input"
+import { Label } from "@/examples/base/ui/label"
+
+export function ButtonGroupWithText() {
+  return (
+    <div className="flex flex-col gap-4">
+      <ButtonGroup>
+        <ButtonGroupText>Text</ButtonGroupText>
+        <Button variant="outline">Another Button</Button>
+      </ButtonGroup>
+      <ButtonGroup>
+        <ButtonGroupText render={<Label htmlFor="input-text" />}>
+          GPU Size
+        </ButtonGroupText>
+        <Input id="input-text" placeholder="Type something here..." />
+      </ButtonGroup>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/button-icon-left.tsx b/apps/v4/examples/base/button-icon-left.tsx
new file mode 100644
index 000000000..26fd4e3f3
--- /dev/null
+++ b/apps/v4/examples/base/button-icon-left.tsx
@@ -0,0 +1,89 @@
+import { Button } from "@/examples/base/ui/button"
+import { ArrowLeftCircleIcon } from "lucide-react"
+
+export function ButtonIconLeft() {
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="xs">
+          <ArrowLeftCircleIcon /> Default
+        </Button>
+        <Button size="xs" variant="secondary">
+          <ArrowLeftCircleIcon /> Secondary
+        </Button>
+        <Button size="xs" variant="outline">
+          <ArrowLeftCircleIcon /> Outline
+        </Button>
+        <Button size="xs" variant="ghost">
+          <ArrowLeftCircleIcon /> Ghost
+        </Button>
+        <Button size="xs" variant="destructive">
+          <ArrowLeftCircleIcon /> Destructive
+        </Button>
+        <Button size="xs" variant="link">
+          <ArrowLeftCircleIcon /> Link
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="sm">
+          <ArrowLeftCircleIcon /> Default
+        </Button>
+        <Button size="sm" variant="secondary">
+          <ArrowLeftCircleIcon /> Secondary
+        </Button>
+        <Button size="sm" variant="outline">
+          <ArrowLeftCircleIcon /> Outline
+        </Button>
+        <Button size="sm" variant="ghost">
+          <ArrowLeftCircleIcon /> Ghost
+        </Button>
+        <Button size="sm" variant="destructive">
+          <ArrowLeftCircleIcon /> Destructive
+        </Button>
+        <Button size="sm" variant="link">
+          <ArrowLeftCircleIcon /> Link
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button>
+          <ArrowLeftCircleIcon /> Default
+        </Button>
+        <Button variant="secondary">
+          <ArrowLeftCircleIcon /> Secondary
+        </Button>
+        <Button variant="outline">
+          <ArrowLeftCircleIcon /> Outline
+        </Button>
+        <Button variant="ghost">
+          <ArrowLeftCircleIcon /> Ghost
+        </Button>
+        <Button variant="destructive">
+          <ArrowLeftCircleIcon /> Destructive
+        </Button>
+        <Button variant="link">
+          <ArrowLeftCircleIcon /> Link
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="lg">
+          <ArrowLeftCircleIcon /> Default
+        </Button>
+        <Button size="lg" variant="secondary">
+          <ArrowLeftCircleIcon /> Secondary
+        </Button>
+        <Button size="lg" variant="outline">
+          <ArrowLeftCircleIcon /> Outline
+        </Button>
+        <Button size="lg" variant="ghost">
+          <ArrowLeftCircleIcon /> Ghost
+        </Button>
+        <Button size="lg" variant="destructive">
+          <ArrowLeftCircleIcon /> Destructive
+        </Button>
+        <Button size="lg" variant="link">
+          <ArrowLeftCircleIcon /> Link
+        </Button>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/button-icon-only.tsx b/apps/v4/examples/base/button-icon-only.tsx
new file mode 100644
index 000000000..768250f5a
--- /dev/null
+++ b/apps/v4/examples/base/button-icon-only.tsx
@@ -0,0 +1,89 @@
+import { Button } from "@/examples/base/ui/button"
+import { ArrowRightIcon } from "lucide-react"
+
+export function ButtonIconOnly() {
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="icon-xs">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-xs" variant="secondary">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-xs" variant="outline">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-xs" variant="ghost">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-xs" variant="destructive">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-xs" variant="link">
+          <ArrowRightIcon />
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="icon-sm">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-sm" variant="secondary">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-sm" variant="outline">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-sm" variant="ghost">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-sm" variant="destructive">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-sm" variant="link">
+          <ArrowRightIcon />
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="icon">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon" variant="secondary">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon" variant="outline">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon" variant="ghost">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon" variant="destructive">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon" variant="link">
+          <ArrowRightIcon />
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="icon-lg">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-lg" variant="secondary">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-lg" variant="outline">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-lg" variant="ghost">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-lg" variant="destructive">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-lg" variant="link">
+          <ArrowRightIcon />
+        </Button>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/button-icon-right.tsx b/apps/v4/examples/base/button-icon-right.tsx
new file mode 100644
index 000000000..617922307
--- /dev/null
+++ b/apps/v4/examples/base/button-icon-right.tsx
@@ -0,0 +1,90 @@
+import { Button } from "@/examples/base/ui/button"
+import { ArrowRightIcon } from "lucide-react"
+
+export function ButtonIconRight() {
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="xs">
+          Default <ArrowRightIcon />
+        </Button>
+        <Button size="xs" variant="secondary">
+          Secondary <ArrowRightIcon />
+        </Button>
+        <Button size="xs" variant="outline">
+          Outline <ArrowRightIcon />
+        </Button>
+        <Button size="xs" variant="ghost">
+          Ghost <ArrowRightIcon />
+        </Button>
+        <Button size="xs" variant="destructive">
+          Destructive <ArrowRightIcon />
+        </Button>
+        <Button size="xs" variant="link">
+          Link <ArrowRightIcon />
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="sm">
+          Default
+          <ArrowRightIcon />
+        </Button>
+        <Button size="sm" variant="secondary">
+          Secondary <ArrowRightIcon />
+        </Button>
+        <Button size="sm" variant="outline">
+          Outline <ArrowRightIcon />
+        </Button>
+        <Button size="sm" variant="ghost">
+          Ghost <ArrowRightIcon />
+        </Button>
+        <Button size="sm" variant="destructive">
+          Destructive <ArrowRightIcon />
+        </Button>
+        <Button size="sm" variant="link">
+          Link <ArrowRightIcon />
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button>
+          Default <ArrowRightIcon />
+        </Button>
+        <Button variant="secondary">
+          Secondary <ArrowRightIcon />
+        </Button>
+        <Button variant="outline">
+          Outline <ArrowRightIcon />
+        </Button>
+        <Button variant="ghost">
+          Ghost <ArrowRightIcon />
+        </Button>
+        <Button variant="destructive">
+          Destructive <ArrowRightIcon />
+        </Button>
+        <Button variant="link">
+          Link <ArrowRightIcon />
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="lg">
+          Default <ArrowRightIcon />
+        </Button>
+        <Button size="lg" variant="secondary">
+          Secondary <ArrowRightIcon />
+        </Button>
+        <Button size="lg" variant="outline">
+          Outline <ArrowRightIcon />
+        </Button>
+        <Button size="lg" variant="ghost">
+          Ghost <ArrowRightIcon />
+        </Button>
+        <Button size="lg" variant="destructive">
+          Destructive <ArrowRightIcon />
+        </Button>
+        <Button size="lg" variant="link">
+          Link <ArrowRightIcon />
+        </Button>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/button-invalid-states.tsx b/apps/v4/examples/base/button-invalid-states.tsx
new file mode 100644
index 000000000..2d9374194
--- /dev/null
+++ b/apps/v4/examples/base/button-invalid-states.tsx
@@ -0,0 +1,86 @@
+import { Button } from "@/examples/base/ui/button"
+
+export function ButtonInvalidStates() {
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="xs" aria-invalid="true">
+          Default
+        </Button>
+        <Button size="xs" variant="secondary" aria-invalid="true">
+          Secondary
+        </Button>
+        <Button size="xs" variant="outline" aria-invalid="true">
+          Outline
+        </Button>
+        <Button size="xs" variant="ghost" aria-invalid="true">
+          Ghost
+        </Button>
+        <Button size="xs" variant="destructive" aria-invalid="true">
+          Destructive
+        </Button>
+        <Button size="xs" variant="link" aria-invalid="true">
+          Link
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="sm" aria-invalid="true">
+          Default
+        </Button>
+        <Button size="sm" variant="secondary" aria-invalid="true">
+          Secondary
+        </Button>
+        <Button size="sm" variant="outline" aria-invalid="true">
+          Outline
+        </Button>
+        <Button size="sm" variant="ghost" aria-invalid="true">
+          Ghost
+        </Button>
+        <Button size="sm" variant="destructive" aria-invalid="true">
+          Destructive
+        </Button>
+        <Button size="sm" variant="link" aria-invalid="true">
+          Link
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button aria-invalid="true">Default</Button>
+        <Button variant="secondary" aria-invalid="true">
+          Secondary
+        </Button>
+        <Button variant="outline" aria-invalid="true">
+          Outline
+        </Button>
+        <Button variant="ghost" aria-invalid="true">
+          Ghost
+        </Button>
+        <Button variant="destructive" aria-invalid="true">
+          Destructive
+        </Button>
+        <Button variant="link" aria-invalid="true">
+          Link
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="lg" aria-invalid="true">
+          Default
+        </Button>
+        <Button size="lg" variant="secondary" aria-invalid="true">
+          Secondary
+        </Button>
+        <Button size="lg" variant="outline" aria-invalid="true">
+          Outline
+        </Button>
+        <Button size="lg" variant="ghost" aria-invalid="true">
+          Ghost
+        </Button>
+        <Button size="lg" variant="destructive" aria-invalid="true">
+          Destructive
+        </Button>
+        <Button size="lg" variant="link" aria-invalid="true">
+          Link
+        </Button>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/button-variants-and-sizes.tsx b/apps/v4/examples/base/button-variants-and-sizes.tsx
new file mode 100644
index 000000000..48c709256
--- /dev/null
+++ b/apps/v4/examples/base/button-variants-and-sizes.tsx
@@ -0,0 +1,70 @@
+import { Button } from "@/examples/base/ui/button"
+
+export function ButtonVariantsAndSizes() {
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="xs">Default</Button>
+        <Button size="xs" variant="secondary">
+          Secondary
+        </Button>
+        <Button size="xs" variant="outline">
+          Outline
+        </Button>
+        <Button size="xs" variant="ghost">
+          Ghost
+        </Button>
+        <Button size="xs" variant="destructive">
+          Destructive
+        </Button>
+        <Button size="xs" variant="link">
+          Link
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="sm">Default</Button>
+        <Button size="sm" variant="secondary">
+          Secondary
+        </Button>
+        <Button size="sm" variant="outline">
+          Outline
+        </Button>
+        <Button size="sm" variant="ghost">
+          Ghost
+        </Button>
+        <Button size="sm" variant="destructive">
+          Destructive
+        </Button>
+        <Button size="sm" variant="link">
+          Link
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button>Default</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="destructive">Destructive</Button>
+        <Button variant="link">Link</Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="lg">Default</Button>
+        <Button size="lg" variant="secondary">
+          Secondary
+        </Button>
+        <Button size="lg" variant="outline">
+          Outline
+        </Button>
+        <Button size="lg" variant="ghost">
+          Ghost
+        </Button>
+        <Button size="lg" variant="destructive">
+          Destructive
+        </Button>
+        <Button size="lg" variant="link">
+          Link
+        </Button>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/calendar-booked-dates.tsx b/apps/v4/examples/base/calendar-booked-dates.tsx
new file mode 100644
index 000000000..7d97c395d
--- /dev/null
+++ b/apps/v4/examples/base/calendar-booked-dates.tsx
@@ -0,0 +1,36 @@
+"use client"
+
+import * as React from "react"
+import { Calendar } from "@/examples/base/ui/calendar"
+import { Card, CardContent } from "@/examples/base/ui/card"
+import { es } from "react-day-picker/locale"
+
+export function CalendarBookedDates() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(new Date().getFullYear(), 1, 3)
+  )
+  const bookedDates = Array.from(
+    { length: 15 },
+    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)
+  )
+
+  return (
+    <Card className="mx-auto w-fit p-0">
+      <CardContent className="p-0">
+        <Calendar
+          mode="single"
+          defaultMonth={date}
+          selected={date}
+          onSelect={setDate}
+          disabled={bookedDates}
+          modifiers={{
+            booked: bookedDates,
+          }}
+          modifiersClassNames={{
+            booked: "[&>button]:line-through opacity-100",
+          }}
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/calendar-custom-days.tsx b/apps/v4/examples/base/calendar-custom-days.tsx
new file mode 100644
index 000000000..589176c28
--- /dev/null
+++ b/apps/v4/examples/base/calendar-custom-days.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { Calendar, CalendarDayButton } from "@/examples/base/ui/calendar"
+import { Card, CardContent } from "@/examples/base/ui/card"
+import { addDays } from "date-fns"
+import { type DateRange } from "react-day-picker"
+
+export function CalendarCustomDays() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(new Date().getFullYear(), 11, 8),
+    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),
+  })
+
+  return (
+    <Card className="mx-auto w-fit p-0">
+      <CardContent className="p-0">
+        <Calendar
+          mode="range"
+          defaultMonth={range?.from}
+          selected={range}
+          onSelect={setRange}
+          numberOfMonths={1}
+          captionLayout="dropdown"
+          className="[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]"
+          formatters={{
+            formatMonthDropdown: (date) => {
+              return date.toLocaleString("default", { month: "long" })
+            },
+          }}
+          components={{
+            DayButton: ({ children, modifiers, day, ...props }) => {
+              const isWeekend =
+                day.date.getDay() === 0 || day.date.getDay() === 6
+
+              return (
+                <CalendarDayButton day={day} modifiers={modifiers} {...props}>
+                  {children}
+                  {!modifiers.outside && (
+                    <span>{isWeekend ? "$120" : "$100"}</span>
+                  )}
+                </CalendarDayButton>
+              )
+            },
+          }}
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/calendar-multiple.tsx b/apps/v4/examples/base/calendar-multiple.tsx
new file mode 100644
index 000000000..4506ceafc
--- /dev/null
+++ b/apps/v4/examples/base/calendar-multiple.tsx
@@ -0,0 +1,12 @@
+import { Calendar } from "@/examples/base/ui/calendar"
+import { Card, CardContent } from "@/examples/base/ui/card"
+
+export function CalendarMultiple() {
+  return (
+    <Card className="mx-auto w-fit p-0">
+      <CardContent className="p-0">
+        <Calendar mode="multiple" />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/calendar-range-multiple-months.tsx b/apps/v4/examples/base/calendar-range-multiple-months.tsx
new file mode 100644
index 000000000..8e0f801b3
--- /dev/null
+++ b/apps/v4/examples/base/calendar-range-multiple-months.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { Calendar } from "@/examples/base/ui/calendar"
+import { Card, CardContent } from "@/examples/base/ui/card"
+import { addDays } from "date-fns"
+import { type DateRange } from "react-day-picker"
+import { es } from "react-day-picker/locale"
+
+export function CalendarRangeMultipleMonths() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(new Date().getFullYear(), 3, 12),
+    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),
+  })
+
+  return (
+    <Card className="mx-auto w-fit p-0">
+      <CardContent className="p-0">
+        <Calendar
+          mode="range"
+          defaultMonth={range?.from}
+          selected={range}
+          onSelect={setRange}
+          numberOfMonths={3}
+          locale={es}
+          fixedWeeks
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/calendar-range.tsx b/apps/v4/examples/base/calendar-range.tsx
new file mode 100644
index 000000000..c11ed75fd
--- /dev/null
+++ b/apps/v4/examples/base/calendar-range.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { Calendar } from "@/examples/base/ui/calendar"
+import { Card, CardContent } from "@/examples/base/ui/card"
+import { addDays } from "date-fns"
+import { type DateRange } from "react-day-picker"
+
+export function CalendarRange() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(new Date().getFullYear(), 0, 12),
+    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),
+  })
+
+  return (
+    <Card className="mx-auto w-fit p-0">
+      <CardContent className="p-0">
+        <Calendar
+          mode="range"
+          defaultMonth={dateRange?.from}
+          selected={dateRange}
+          onSelect={setDateRange}
+          numberOfMonths={2}
+          disabled={(date) =>
+            date > new Date() || date < new Date("1900-01-01")
+          }
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/calendar-single.tsx b/apps/v4/examples/base/calendar-single.tsx
new file mode 100644
index 000000000..67f3b18d7
--- /dev/null
+++ b/apps/v4/examples/base/calendar-single.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { Calendar } from "@/examples/base/ui/calendar"
+import { Card, CardContent } from "@/examples/base/ui/card"
+
+export function CalendarSingle() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(new Date().getFullYear(), new Date().getMonth(), 12)
+  )
+  return (
+    <Card className="mx-auto w-fit p-0">
+      <CardContent className="p-0">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          captionLayout="dropdown"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/calendar-week-numbers.tsx b/apps/v4/examples/base/calendar-week-numbers.tsx
new file mode 100644
index 000000000..a5077d827
--- /dev/null
+++ b/apps/v4/examples/base/calendar-week-numbers.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+import { Calendar } from "@/examples/base/ui/calendar"
+import { Card, CardContent } from "@/examples/base/ui/card"
+
+export function CalendarWeekNumbers() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(new Date().getFullYear(), 1, 3)
+  )
+
+  return (
+    <Card className="mx-auto w-fit p-0">
+      <CardContent className="p-0">
+        <Calendar
+          mode="single"
+          defaultMonth={date}
+          selected={date}
+          onSelect={setDate}
+          showWeekNumber
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/calendar-with-presets.tsx b/apps/v4/examples/base/calendar-with-presets.tsx
new file mode 100644
index 000000000..794cc6ff7
--- /dev/null
+++ b/apps/v4/examples/base/calendar-with-presets.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
+import { Calendar } from "@/examples/base/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/examples/base/ui/card"
+import { addDays } from "date-fns"
+
+export function CalendarWithPresets() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(new Date().getFullYear(), 1, 12)
+  )
+  const [currentMonth, setCurrentMonth] = React.useState<Date>(
+    new Date(new Date().getFullYear(), new Date().getMonth(), 1)
+  )
+
+  return (
+    <Card className="mx-auto w-fit max-w-[300px]" size="sm">
+      <CardContent>
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          month={currentMonth}
+          onMonthChange={setCurrentMonth}
+          fixedWeeks
+          className="p-0 [--cell-size:--spacing(9.5)]"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-wrap gap-2 border-t">
+        {[
+          { label: "Today", value: 0 },
+          { label: "Tomorrow", value: 1 },
+          { label: "In 3 days", value: 3 },
+          { label: "In a week", value: 7 },
+          { label: "In 2 weeks", value: 14 },
+        ].map((preset) => (
+          <Button
+            key={preset.value}
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => {
+              const newDate = addDays(new Date(), preset.value)
+              setDate(newDate)
+              setCurrentMonth(
+                new Date(newDate.getFullYear(), newDate.getMonth(), 1)
+              )
+            }}
+          >
+            {preset.label}
+          </Button>
+        ))}
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/calendar-with-time.tsx b/apps/v4/examples/base/calendar-with-time.tsx
new file mode 100644
index 000000000..2a044442b
--- /dev/null
+++ b/apps/v4/examples/base/calendar-with-time.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import { Calendar } from "@/examples/base/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/examples/base/ui/card"
+import { Field, FieldGroup, FieldLabel } from "@/examples/base/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/base/ui/input-group"
+import { Clock2Icon } from "lucide-react"
+
+export function CalendarWithTime() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(new Date().getFullYear(), new Date().getMonth(), 12)
+  )
+
+  return (
+    <Card size="sm" className="mx-auto w-fit">
+      <CardContent>
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="p-0"
+        />
+      </CardContent>
+      <CardFooter className="bg-card border-t">
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor="time-from">Start Time</FieldLabel>
+            <InputGroup>
+              <InputGroupInput
+                id="time-from"
+                type="time"
+                step="1"
+                defaultValue="10:30:00"
+                className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+              />
+              <InputGroupAddon>
+                <Clock2Icon className="text-muted-foreground" />
+              </InputGroupAddon>
+            </InputGroup>
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="time-to">End Time</FieldLabel>
+            <InputGroup>
+              <InputGroupInput
+                id="time-to"
+                type="time"
+                step="1"
+                defaultValue="12:30:00"
+                className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+              />
+              <InputGroupAddon>
+                <Clock2Icon className="text-muted-foreground" />
+              </InputGroupAddon>
+            </InputGroup>
+          </Field>
+        </FieldGroup>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/card-default.tsx b/apps/v4/examples/base/card-default.tsx
new file mode 100644
index 000000000..d758d47f5
--- /dev/null
+++ b/apps/v4/examples/base/card-default.tsx
@@ -0,0 +1,33 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/base/ui/card"
+
+export function CardDefault() {
+  return (
+    <Card size="default" className="mx-auto w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Default Card</CardTitle>
+        <CardDescription>
+          This card uses the default size variant.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>
+          The card component supports a size prop that defaults to
+          &quot;default&quot; for standard spacing and sizing.
+        </p>
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline" className="w-full">
+          Action
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/card-footer-with-border-small.tsx b/apps/v4/examples/base/card-footer-with-border-small.tsx
new file mode 100644
index 000000000..2cd234b4f
--- /dev/null
+++ b/apps/v4/examples/base/card-footer-with-border-small.tsx
@@ -0,0 +1,20 @@
+import { Button } from "@/examples/base/ui/button"
+import { Card, CardContent, CardFooter } from "@/examples/base/ui/card"
+
+export function CardFooterWithBorderSmall() {
+  return (
+    <Card size="sm" className="mx-auto w-full max-w-sm">
+      <CardContent>
+        <p>
+          The footer has a border-t class applied, creating a visual separation
+          between the content and footer sections.
+        </p>
+      </CardContent>
+      <CardFooter className="border-t">
+        <Button variant="outline" size="sm" className="w-full">
+          Footer with Border
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/card-footer-with-border.tsx b/apps/v4/examples/base/card-footer-with-border.tsx
new file mode 100644
index 000000000..a43f2c356
--- /dev/null
+++ b/apps/v4/examples/base/card-footer-with-border.tsx
@@ -0,0 +1,20 @@
+import { Button } from "@/examples/base/ui/button"
+import { Card, CardContent, CardFooter } from "@/examples/base/ui/card"
+
+export function CardFooterWithBorder() {
+  return (
+    <Card className="mx-auto w-full max-w-sm">
+      <CardContent>
+        <p>
+          The footer has a border-t class applied, creating a visual separation
+          between the content and footer sections.
+        </p>
+      </CardContent>
+      <CardFooter className="border-t">
+        <Button variant="outline" className="w-full">
+          Footer with Border
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/card-header-with-border-small.tsx b/apps/v4/examples/base/card-header-with-border-small.tsx
new file mode 100644
index 000000000..158fd85c3
--- /dev/null
+++ b/apps/v4/examples/base/card-header-with-border-small.tsx
@@ -0,0 +1,26 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/examples/base/ui/card"
+
+export function CardHeaderWithBorderSmall() {
+  return (
+    <Card size="sm" className="mx-auto w-full max-w-sm">
+      <CardHeader className="border-b">
+        <CardTitle>Header with Border</CardTitle>
+        <CardDescription>
+          This is a small card with a header that has a bottom border.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>
+          The header has a border-b class applied, creating a visual separation
+          between the header and content sections.
+        </p>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/card-header-with-border.tsx b/apps/v4/examples/base/card-header-with-border.tsx
new file mode 100644
index 000000000..32fb9605e
--- /dev/null
+++ b/apps/v4/examples/base/card-header-with-border.tsx
@@ -0,0 +1,26 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/examples/base/ui/card"
+
+export function CardHeaderWithBorder() {
+  return (
+    <Card className="mx-auto w-full max-w-sm">
+      <CardHeader className="border-b">
+        <CardTitle>Header with Border</CardTitle>
+        <CardDescription>
+          This is a card with a header that has a bottom border.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>
+          The header has a border-b class applied, creating a visual separation
+          between the header and content sections.
+        </p>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/card-login.tsx b/apps/v4/examples/base/card-login.tsx
new file mode 100644
index 000000000..425843f2d
--- /dev/null
+++ b/apps/v4/examples/base/card-login.tsx
@@ -0,0 +1,65 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/base/ui/card"
+import { Field, FieldGroup, FieldLabel } from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+
+export function CardLogin() {
+  return (
+    <Card className="mx-auto w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Login to your account</CardTitle>
+        <CardDescription>
+          Enter your email below to login to your account
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form>
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="email">Email</FieldLabel>
+              <Input
+                id="email"
+                type="email"
+                placeholder="m@example.com"
+                required
+              />
+            </Field>
+            <Field>
+              <div className="flex items-center">
+                <FieldLabel htmlFor="password">Password</FieldLabel>
+                <a
+                  href="#"
+                  className="ml-auto inline-block underline-offset-4 hover:underline"
+                >
+                  Forgot your password?
+                </a>
+              </div>
+              <Input id="password" type="password" required />
+            </Field>
+          </FieldGroup>
+        </form>
+      </CardContent>
+      <CardFooter className="flex-col gap-2">
+        <Button type="submit" className="w-full">
+          Login
+        </Button>
+        <Button variant="outline" className="w-full">
+          Login with Google
+        </Button>
+        <div className="mt-4 text-center">
+          Don&apos;t have an account?{" "}
+          <a href="#" className="underline underline-offset-4">
+            Sign up
+          </a>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/card-meeting-notes.tsx b/apps/v4/examples/base/card-meeting-notes.tsx
new file mode 100644
index 000000000..184480319
--- /dev/null
+++ b/apps/v4/examples/base/card-meeting-notes.tsx
@@ -0,0 +1,73 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarImage,
+} from "@/examples/base/ui/avatar"
+import { Button } from "@/examples/base/ui/button"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/base/ui/card"
+import { CaptionsIcon } from "lucide-react"
+
+export function CardMeetingNotes() {
+  return (
+    <Card className="mx-auto w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Meeting Notes</CardTitle>
+        <CardDescription>
+          Transcript from the meeting with the client.
+        </CardDescription>
+        <CardAction>
+          <Button variant="outline" size="sm">
+            <CaptionsIcon />
+            Transcribe
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <p>
+          Client requested dashboard redesign with focus on mobile
+          responsiveness.
+        </p>
+        <ol className="mt-4 flex list-decimal flex-col gap-2 pl-6">
+          <li>New analytics widgets for daily/weekly metrics</li>
+          <li>Simplified navigation menu</li>
+          <li>Dark mode support</li>
+          <li>Timeline: 6 weeks</li>
+          <li>Follow-up meeting scheduled for next Tuesday</li>
+        </ol>
+      </CardContent>
+      <CardFooter>
+        <AvatarGroup>
+          <Avatar>
+            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+            <AvatarFallback>CN</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarImage
+              src="https://github.com/maxleiter.png"
+              alt="@maxleiter"
+            />
+            <AvatarFallback>LR</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarImage
+              src="https://github.com/evilrabbit.png"
+              alt="@evilrabbit"
+            />
+            <AvatarFallback>ER</AvatarFallback>
+          </Avatar>
+          <AvatarGroupCount>+8</AvatarGroupCount>
+        </AvatarGroup>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/card-small.tsx b/apps/v4/examples/base/card-small.tsx
new file mode 100644
index 000000000..2af149a7e
--- /dev/null
+++ b/apps/v4/examples/base/card-small.tsx
@@ -0,0 +1,33 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/base/ui/card"
+
+export function CardSmall() {
+  return (
+    <Card size="sm" className="mx-auto w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Small Card</CardTitle>
+        <CardDescription>
+          This card uses the small size variant.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>
+          The card component supports a size prop that can be set to
+          &quot;sm&quot; for a more compact appearance.
+        </p>
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline" size="sm" className="w-full">
+          Action
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/card-with-image-small.tsx b/apps/v4/examples/base/card-with-image-small.tsx
new file mode 100644
index 000000000..bb6275a8c
--- /dev/null
+++ b/apps/v4/examples/base/card-with-image-small.tsx
@@ -0,0 +1,35 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/base/ui/card"
+import { PlusIcon } from "lucide-react"
+
+export function CardWithImageSmall() {
+  return (
+    <Card size="sm" className="relative mx-auto w-full max-w-sm pt-0">
+      <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
+      <img
+        src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Photo by mymind on Unsplash"
+        title="Photo by mymind on Unsplash"
+        className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale"
+      />
+      <CardHeader>
+        <CardTitle>Beautiful Landscape</CardTitle>
+        <CardDescription>
+          A stunning view that captures the essence of natural beauty.
+        </CardDescription>
+      </CardHeader>
+      <CardFooter>
+        <Button size="sm" className="w-full">
+          <PlusIcon />
+          Button
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/card-with-image.tsx b/apps/v4/examples/base/card-with-image.tsx
new file mode 100644
index 000000000..f3a966e76
--- /dev/null
+++ b/apps/v4/examples/base/card-with-image.tsx
@@ -0,0 +1,35 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/base/ui/card"
+import { PlusIcon } from "lucide-react"
+
+export function CardWithImage() {
+  return (
+    <Card size="default" className="relative mx-auto w-full max-w-sm pt-0">
+      <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
+      <img
+        src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Photo by mymind on Unsplash"
+        title="Photo by mymind on Unsplash"
+        className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale"
+      />
+      <CardHeader>
+        <CardTitle>Beautiful Landscape</CardTitle>
+        <CardDescription>
+          A stunning view that captures the essence of natural beauty.
+        </CardDescription>
+      </CardHeader>
+      <CardFooter>
+        <Button className="w-full">
+          <PlusIcon />
+          Button
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/carousel-basic.tsx b/apps/v4/examples/base/carousel-basic.tsx
new file mode 100644
index 000000000..fc3e9ccae
--- /dev/null
+++ b/apps/v4/examples/base/carousel-basic.tsx
@@ -0,0 +1,30 @@
+import { Card, CardContent } from "@/examples/base/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/examples/base/ui/carousel"
+
+export function CarouselBasic() {
+  return (
+    <Carousel className="mx-auto max-w-xs sm:max-w-sm">
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index}>
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-4xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious className="hidden sm:inline-flex" />
+      <CarouselNext className="hidden sm:inline-flex" />
+    </Carousel>
+  )
+}
diff --git a/apps/v4/examples/base/carousel-multiple.tsx b/apps/v4/examples/base/carousel-multiple.tsx
new file mode 100644
index 000000000..e0b96001e
--- /dev/null
+++ b/apps/v4/examples/base/carousel-multiple.tsx
@@ -0,0 +1,35 @@
+import { Card, CardContent } from "@/examples/base/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/examples/base/ui/carousel"
+
+export function CarouselMultiple() {
+  return (
+    <Carousel
+      className="mx-auto max-w-xs sm:max-w-sm"
+      opts={{
+        align: "start",
+      }}
+    >
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index} className="sm:basis-1/2 lg:basis-1/3">
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-3xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious className="hidden sm:inline-flex" />
+      <CarouselNext className="hidden sm:inline-flex" />
+    </Carousel>
+  )
+}
diff --git a/apps/v4/examples/base/carousel-with-gap.tsx b/apps/v4/examples/base/carousel-with-gap.tsx
new file mode 100644
index 000000000..23b654498
--- /dev/null
+++ b/apps/v4/examples/base/carousel-with-gap.tsx
@@ -0,0 +1,30 @@
+import { Card, CardContent } from "@/examples/base/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/examples/base/ui/carousel"
+
+export function CarouselWithGap() {
+  return (
+    <Carousel className="mx-auto max-w-xs sm:max-w-sm">
+      <CarouselContent className="-ml-1">
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index} className="pl-1 md:basis-1/2">
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-2xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious className="hidden sm:inline-flex" />
+      <CarouselNext className="hidden sm:inline-flex" />
+    </Carousel>
+  )
+}
diff --git a/apps/v4/examples/base/chart-area-example.tsx b/apps/v4/examples/base/chart-area-example.tsx
new file mode 100644
index 000000000..cdc348f1d
--- /dev/null
+++ b/apps/v4/examples/base/chart-area-example.tsx
@@ -0,0 +1,90 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/base/ui/card"
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/examples/base/ui/chart"
+import { TrendingUpIcon } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+const areaChartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const areaChartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartAreaExample() {
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>Area Chart</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={areaChartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={areaChartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 leading-none font-medium">
+              Trending up by 5.2% this month{" "}
+              <TrendingUpIcon className="size-4" />
+            </div>
+            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/chart-bar-example.tsx b/apps/v4/examples/base/chart-bar-example.tsx
new file mode 100644
index 000000000..bfcc0e168
--- /dev/null
+++ b/apps/v4/examples/base/chart-bar-example.tsx
@@ -0,0 +1,75 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/base/ui/card"
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/examples/base/ui/chart"
+import { TrendingUpIcon } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+const barChartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const barChartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartBarExample() {
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>Bar Chart - Multiple</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={barChartConfig}>
+          <BarChart accessibilityLayer data={barChartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="dashed" />}
+            />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/chart-line-example.tsx b/apps/v4/examples/base/chart-line-example.tsx
new file mode 100644
index 000000000..35bfc7c80
--- /dev/null
+++ b/apps/v4/examples/base/chart-line-example.tsx
@@ -0,0 +1,96 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/base/ui/card"
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/examples/base/ui/chart"
+import { TrendingUpIcon } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+const lineChartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const lineChartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartLineExample() {
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>Line Chart - Multiple</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={lineChartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={lineChartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <Line
+              dataKey="desktop"
+              type="monotone"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={false}
+            />
+            <Line
+              dataKey="mobile"
+              type="monotone"
+              stroke="var(--color-mobile)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 leading-none font-medium">
+              Trending up by 5.2% this month{" "}
+              <TrendingUpIcon className="size-4" />
+            </div>
+            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+              Showing total visitors for the last 6 months
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/chart-pie-example.tsx b/apps/v4/examples/base/chart-pie-example.tsx
new file mode 100644
index 000000000..0307d5fab
--- /dev/null
+++ b/apps/v4/examples/base/chart-pie-example.tsx
@@ -0,0 +1,126 @@
+"use client"
+
+import * as React from "react"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/base/ui/card"
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/examples/base/ui/chart"
+import { TrendingUpIcon } from "lucide-react"
+import { Label, Pie, PieChart } from "recharts"
+
+const pieChartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 190, fill: "var(--color-other)" },
+]
+
+const pieChartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartPieExample() {
+  const totalVisitors = React.useMemo(() => {
+    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)
+  }, [])
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Donut with Text</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={pieChartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={pieChartData}
+              dataKey="visitors"
+              nameKey="browser"
+              innerRadius={60}
+              strokeWidth={5}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-3xl font-bold"
+                        >
+                          {totalVisitors.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/chart-radar-example.tsx b/apps/v4/examples/base/chart-radar-example.tsx
new file mode 100644
index 000000000..26aac6196
--- /dev/null
+++ b/apps/v4/examples/base/chart-radar-example.tsx
@@ -0,0 +1,78 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/base/ui/card"
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/examples/base/ui/chart"
+import { TrendingUpIcon } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+const radarChartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const radarChartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadarExample() {
+  return (
+    <Card className="w-full">
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Multiple</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={radarChartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={radarChartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <PolarAngleAxis dataKey="month" />
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+            <Radar dataKey="mobile" fill="var(--color-mobile)" />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
+        </div>
+        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/chart-radial-example.tsx b/apps/v4/examples/base/chart-radial-example.tsx
new file mode 100644
index 000000000..f197af041
--- /dev/null
+++ b/apps/v4/examples/base/chart-radial-example.tsx
@@ -0,0 +1,103 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/base/ui/card"
+import { ChartContainer, type ChartConfig } from "@/examples/base/ui/chart"
+import { TrendingUpIcon } from "lucide-react"
+import {
+  Label,
+  PolarGrid,
+  PolarRadiusAxis,
+  RadialBar,
+  RadialBarChart,
+} from "recharts"
+
+const radialChartData = [
+  { browser: "safari", visitors: 1260, fill: "var(--color-safari)" },
+]
+
+const radialChartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadialExample() {
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>Radial Chart - Shape</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={radialChartConfig}
+          className="mx-auto aspect-square max-h-[210px]"
+        >
+          <RadialBarChart
+            data={radialChartData}
+            endAngle={100}
+            innerRadius={80}
+            outerRadius={140}
+          >
+            <PolarGrid
+              gridType="circle"
+              radialLines={false}
+              stroke="none"
+              className="first:fill-muted last:fill-background"
+              polarRadius={[86, 74]}
+            />
+            <RadialBar dataKey="visitors" background />
+            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-4xl font-bold"
+                        >
+                          {radialChartData[0].visitors.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </PolarRadiusAxis>
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/checkbox-basic.tsx b/apps/v4/examples/base/checkbox-basic.tsx
new file mode 100644
index 000000000..9637005a6
--- /dev/null
+++ b/apps/v4/examples/base/checkbox-basic.tsx
@@ -0,0 +1,11 @@
+import { Checkbox } from "@/examples/base/ui/checkbox"
+import { Field, FieldLabel } from "@/examples/base/ui/field"
+
+export function CheckboxBasic() {
+  return (
+    <Field orientation="horizontal">
+      <Checkbox id="terms" />
+      <FieldLabel htmlFor="terms">Accept terms and conditions</FieldLabel>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/checkbox-disabled.tsx b/apps/v4/examples/base/checkbox-disabled.tsx
index 54c101012..ad6f0dae9 100644
--- a/apps/v4/examples/base/checkbox-disabled.tsx
+++ b/apps/v4/examples/base/checkbox-disabled.tsx
@@ -1,15 +1,11 @@
 import { Checkbox } from "@/examples/base/ui/checkbox"
+import { Field, FieldLabel } from "@/examples/base/ui/field"
 
-export default function CheckboxDisabled() {
+export function CheckboxDisabled() {
   return (
-    <div className="flex items-center space-x-2">
-      <Checkbox id="terms2" disabled />
-      <label
-        htmlFor="terms2"
-        className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-      >
-        Accept terms and conditions
-      </label>
-    </div>
+    <Field orientation="horizontal">
+      <Checkbox id="toggle" disabled />
+      <FieldLabel htmlFor="toggle">Enable notifications</FieldLabel>
+    </Field>
   )
 }
diff --git a/apps/v4/examples/base/checkbox-fields.tsx b/apps/v4/examples/base/checkbox-fields.tsx
new file mode 100644
index 000000000..3926b1a7e
--- /dev/null
+++ b/apps/v4/examples/base/checkbox-fields.tsx
@@ -0,0 +1,91 @@
+import { Checkbox } from "@/examples/base/ui/checkbox"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+  FieldTitle,
+} from "@/examples/base/ui/field"
+import { Select } from "@/examples/base/ui/select"
+
+export function CheckboxFields() {
+  return (
+    <FieldGroup>
+      <Field orientation="horizontal">
+        <Checkbox id="checkbox-basic" defaultChecked />
+        <FieldLabel htmlFor="checkbox-basic" className="font-normal">
+          I agree to the terms and conditions
+        </FieldLabel>
+      </Field>
+      <Field orientation="horizontal">
+        <FieldLabel htmlFor="checkbox-right">
+          Accept terms and conditions
+        </FieldLabel>
+        <Checkbox id="checkbox-right" />
+      </Field>
+      <Field orientation="horizontal">
+        <Checkbox id="checkbox-with-desc" />
+        <FieldContent>
+          <FieldLabel htmlFor="checkbox-with-desc">
+            Subscribe to newsletter
+          </FieldLabel>
+          <FieldDescription>
+            Receive weekly updates about new features and promotions.
+          </FieldDescription>
+        </FieldContent>
+      </Field>
+      <FieldLabel htmlFor="checkbox-with-title">
+        <Field orientation="horizontal">
+          <Checkbox id="checkbox-with-title" />
+          <FieldContent>
+            <FieldTitle>Enable Touch ID</FieldTitle>
+            <FieldDescription>
+              Enable Touch ID to quickly unlock your device.
+            </FieldDescription>
+          </FieldContent>
+        </Field>
+      </FieldLabel>
+      <FieldSet>
+        <FieldLegend variant="label">Preferences</FieldLegend>
+        <FieldDescription>
+          Select all that apply to customize your experience.
+        </FieldDescription>
+        <FieldGroup className="gap-3">
+          <Field orientation="horizontal">
+            <Checkbox id="pref-dark" />
+            <FieldLabel htmlFor="pref-dark" className="font-normal">
+              Dark mode
+            </FieldLabel>
+          </Field>
+          <Field orientation="horizontal">
+            <Checkbox id="pref-compact" />
+            <FieldLabel htmlFor="pref-compact" className="font-normal">
+              Compact view
+            </FieldLabel>
+          </Field>
+          <Field orientation="horizontal">
+            <Checkbox id="pref-notifications" />
+            <FieldLabel htmlFor="pref-notifications" className="font-normal">
+              Enable notifications
+            </FieldLabel>
+          </Field>
+        </FieldGroup>
+      </FieldSet>
+      <Field data-invalid orientation="horizontal">
+        <Checkbox id="checkbox-invalid" aria-invalid />
+        <FieldLabel htmlFor="checkbox-invalid" className="font-normal">
+          Invalid checkbox
+        </FieldLabel>
+      </Field>
+      <Field data-disabled orientation="horizontal">
+        <Checkbox id="checkbox-disabled-field" disabled />
+        <FieldLabel htmlFor="checkbox-disabled-field" className="font-normal">
+          Disabled checkbox
+        </FieldLabel>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/base/checkbox-group.tsx b/apps/v4/examples/base/checkbox-group.tsx
new file mode 100644
index 000000000..f0aac655f
--- /dev/null
+++ b/apps/v4/examples/base/checkbox-group.tsx
@@ -0,0 +1,46 @@
+import { Checkbox } from "@/examples/base/ui/checkbox"
+import { Field, FieldLabel } from "@/examples/base/ui/field"
+
+export function CheckboxGroup() {
+  return (
+    <Field>
+      <FieldLabel>Show these items on the desktop:</FieldLabel>
+      <Field orientation="horizontal">
+        <Checkbox id="finder-pref-9k2-hard-disks-ljj" />
+        <FieldLabel
+          htmlFor="finder-pref-9k2-hard-disks-ljj"
+          className="font-normal"
+        >
+          Hard disks
+        </FieldLabel>
+      </Field>
+      <Field orientation="horizontal">
+        <Checkbox id="finder-pref-9k2-external-disks-1yg" />
+        <FieldLabel
+          htmlFor="finder-pref-9k2-external-disks-1yg"
+          className="font-normal"
+        >
+          External disks
+        </FieldLabel>
+      </Field>
+      <Field orientation="horizontal">
+        <Checkbox id="finder-pref-9k2-cds-dvds-fzt" />
+        <FieldLabel
+          htmlFor="finder-pref-9k2-cds-dvds-fzt"
+          className="font-normal"
+        >
+          CDs, DVDs, and iPods
+        </FieldLabel>
+      </Field>
+      <Field orientation="horizontal">
+        <Checkbox id="finder-pref-9k2-connected-servers-6l2" />
+        <FieldLabel
+          htmlFor="finder-pref-9k2-connected-servers-6l2"
+          className="font-normal"
+        >
+          Connected servers
+        </FieldLabel>
+      </Field>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/checkbox-in-table.tsx b/apps/v4/examples/base/checkbox-in-table.tsx
new file mode 100644
index 000000000..8ff1c89d4
--- /dev/null
+++ b/apps/v4/examples/base/checkbox-in-table.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import * as React from "react"
+import { Checkbox } from "@/examples/base/ui/checkbox"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/examples/base/ui/table"
+
+const tableData = [
+  {
+    id: "1",
+    name: "Sarah Chen",
+    email: "sarah.chen@example.com",
+    role: "Admin",
+  },
+  {
+    id: "2",
+    name: "Marcus Rodriguez",
+    email: "marcus.rodriguez@example.com",
+    role: "User",
+  },
+  {
+    id: "3",
+    name: "Priya Patel",
+    email: "priya.patel@example.com",
+    role: "User",
+  },
+  {
+    id: "4",
+    name: "David Kim",
+    email: "david.kim@example.com",
+    role: "Editor",
+  },
+]
+
+export function CheckboxInTable() {
+  const [selectedRows, setSelectedRows] = React.useState<Set<string>>(
+    new Set(["1"])
+  )
+
+  const selectAll = selectedRows.size === tableData.length
+
+  const handleSelectAll = (checked: boolean) => {
+    if (checked) {
+      setSelectedRows(new Set(tableData.map((row) => row.id)))
+    } else {
+      setSelectedRows(new Set())
+    }
+  }
+
+  const handleSelectRow = (id: string, checked: boolean) => {
+    const newSelected = new Set(selectedRows)
+    if (checked) {
+      newSelected.add(id)
+    } else {
+      newSelected.delete(id)
+    }
+    setSelectedRows(newSelected)
+  }
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-8">
+            <Checkbox
+              id="select-all"
+              checked={selectAll}
+              onCheckedChange={handleSelectAll}
+            />
+          </TableHead>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Role</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {tableData.map((row) => (
+          <TableRow
+            key={row.id}
+            data-state={selectedRows.has(row.id) ? "selected" : undefined}
+          >
+            <TableCell>
+              <Checkbox
+                id={`row-${row.id}`}
+                checked={selectedRows.has(row.id)}
+                onCheckedChange={(checked) =>
+                  handleSelectRow(row.id, checked === true)
+                }
+              />
+            </TableCell>
+            <TableCell className="font-medium">{row.name}</TableCell>
+            <TableCell>{row.email}</TableCell>
+            <TableCell>{row.role}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/apps/v4/examples/base/checkbox-invalid.tsx b/apps/v4/examples/base/checkbox-invalid.tsx
new file mode 100644
index 000000000..164f4d026
--- /dev/null
+++ b/apps/v4/examples/base/checkbox-invalid.tsx
@@ -0,0 +1,11 @@
+import { Checkbox } from "@/examples/base/ui/checkbox"
+import { Field, FieldLabel } from "@/examples/base/ui/field"
+
+export function CheckboxInvalid() {
+  return (
+    <Field orientation="horizontal" data-invalid>
+      <Checkbox id="terms-3" aria-invalid />
+      <FieldLabel htmlFor="terms-3">Accept terms and conditions</FieldLabel>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/checkbox-with-description.tsx b/apps/v4/examples/base/checkbox-with-description.tsx
new file mode 100644
index 000000000..47c79687d
--- /dev/null
+++ b/apps/v4/examples/base/checkbox-with-description.tsx
@@ -0,0 +1,21 @@
+import { Checkbox } from "@/examples/base/ui/checkbox"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldLabel,
+} from "@/examples/base/ui/field"
+
+export function CheckboxWithDescription() {
+  return (
+    <Field orientation="horizontal">
+      <Checkbox id="terms-2" defaultChecked />
+      <FieldContent>
+        <FieldLabel htmlFor="terms-2">Accept terms and conditions</FieldLabel>
+        <FieldDescription>
+          By clicking this checkbox, you agree to the terms and conditions.
+        </FieldDescription>
+      </FieldContent>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/checkbox-with-title.tsx b/apps/v4/examples/base/checkbox-with-title.tsx
new file mode 100644
index 000000000..5d31e8914
--- /dev/null
+++ b/apps/v4/examples/base/checkbox-with-title.tsx
@@ -0,0 +1,38 @@
+import { Checkbox } from "@/examples/base/ui/checkbox"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldTitle,
+} from "@/examples/base/ui/field"
+
+export function CheckboxWithTitle() {
+  return (
+    <FieldGroup>
+      <FieldLabel htmlFor="toggle-2">
+        <Field orientation="horizontal">
+          <Checkbox id="toggle-2" defaultChecked />
+          <FieldContent>
+            <FieldTitle>Enable notifications</FieldTitle>
+            <FieldDescription>
+              You can enable or disable notifications at any time.
+            </FieldDescription>
+          </FieldContent>
+        </Field>
+      </FieldLabel>
+      <FieldLabel htmlFor="toggle-4">
+        <Field orientation="horizontal" data-disabled>
+          <Checkbox id="toggle-4" disabled />
+          <FieldContent>
+            <FieldTitle>Enable notifications</FieldTitle>
+            <FieldDescription>
+              You can enable or disable notifications at any time.
+            </FieldDescription>
+          </FieldContent>
+        </Field>
+      </FieldLabel>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/base/collapsible-file-tree.tsx b/apps/v4/examples/base/collapsible-file-tree.tsx
new file mode 100644
index 000000000..17b705388
--- /dev/null
+++ b/apps/v4/examples/base/collapsible-file-tree.tsx
@@ -0,0 +1,121 @@
+import { Button } from "@/examples/base/ui/button"
+import { Card, CardContent, CardHeader } from "@/examples/base/ui/card"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/examples/base/ui/collapsible"
+import { Tabs, TabsList, TabsTrigger } from "@/examples/base/ui/tabs"
+import { ChevronRightIcon, FileIcon, FolderIcon } from "lucide-react"
+
+type FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }
+
+export function CollapsibleFileTree() {
+  const fileTree: FileTreeItem[] = [
+    {
+      name: "components",
+      items: [
+        {
+          name: "ui",
+          items: [
+            { name: "button.tsx" },
+            { name: "card.tsx" },
+            { name: "dialog.tsx" },
+            { name: "input.tsx" },
+            { name: "select.tsx" },
+            { name: "table.tsx" },
+          ],
+        },
+        { name: "login-form.tsx" },
+        { name: "register-form.tsx" },
+      ],
+    },
+    {
+      name: "lib",
+      items: [{ name: "utils.ts" }, { name: "cn.ts" }, { name: "api.ts" }],
+    },
+    {
+      name: "hooks",
+      items: [
+        { name: "use-media-query.ts" },
+        { name: "use-debounce.ts" },
+        { name: "use-local-storage.ts" },
+      ],
+    },
+    {
+      name: "types",
+      items: [{ name: "index.d.ts" }, { name: "api.d.ts" }],
+    },
+    {
+      name: "public",
+      items: [
+        { name: "favicon.ico" },
+        { name: "logo.svg" },
+        { name: "images" },
+      ],
+    },
+    { name: "app.tsx" },
+    { name: "layout.tsx" },
+    { name: "globals.css" },
+    { name: "package.json" },
+    { name: "tsconfig.json" },
+    { name: "README.md" },
+    { name: ".gitignore" },
+  ]
+
+  const renderItem = (fileItem: FileTreeItem) => {
+    if ("items" in fileItem) {
+      return (
+        <Collapsible key={fileItem.name}>
+          <CollapsibleTrigger
+            render={
+              <Button
+                variant="ghost"
+                size="sm"
+                className="group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none"
+              />
+            }
+          >
+            <ChevronRightIcon className="transition-transform group-data-[state=open]:rotate-90" />
+            <FolderIcon />
+            {fileItem.name}
+          </CollapsibleTrigger>
+          <CollapsibleContent className="style-lyra:ml-4 mt-1 ml-5">
+            <div className="flex flex-col gap-1">
+              {fileItem.items.map((child) => renderItem(child))}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      )
+    }
+    return (
+      <Button
+        key={fileItem.name}
+        variant="link"
+        size="sm"
+        className="text-foreground w-full justify-start gap-2"
+      >
+        <FileIcon />
+        <span>{fileItem.name}</span>
+      </Button>
+    )
+  }
+
+  return (
+    <Card className="mx-auto w-full max-w-[16rem] gap-2" size="sm">
+      <CardHeader>
+        <Tabs defaultValue="explorer">
+          <TabsList className="w-full">
+            <TabsTrigger value="explorer">Explorer</TabsTrigger>
+            <TabsTrigger value="settings">Outline</TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-col gap-1">
+          {fileTree.map((item) => renderItem(item))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/collapsible-settings.tsx b/apps/v4/examples/base/collapsible-settings.tsx
new file mode 100644
index 000000000..f1e8067fe
--- /dev/null
+++ b/apps/v4/examples/base/collapsible-settings.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/examples/base/ui/card"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/examples/base/ui/collapsible"
+import { Field, FieldGroup, FieldLabel } from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+import { MaximizeIcon, MinimizeIcon } from "lucide-react"
+
+export function CollapsibleSettings() {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <Card className="mx-auto w-full max-w-xs" size="sm">
+      <CardHeader>
+        <CardTitle>Radius</CardTitle>
+        <CardDescription>Set the corner radius of the element.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Collapsible
+          open={isOpen}
+          onOpenChange={setIsOpen}
+          className="flex items-start gap-2"
+        >
+          <FieldGroup className="grid w-full grid-cols-2 gap-2">
+            <Field>
+              <FieldLabel htmlFor="radius-x" className="sr-only">
+                Radius X
+              </FieldLabel>
+              <Input id="radius" placeholder="0" defaultValue={0} />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="radius-y" className="sr-only">
+                Radius Y
+              </FieldLabel>
+              <Input id="radius" placeholder="0" defaultValue={0} />
+            </Field>
+            <CollapsibleContent className="col-span-full grid grid-cols-subgrid gap-2">
+              <Field>
+                <FieldLabel htmlFor="radius-x" className="sr-only">
+                  Radius X
+                </FieldLabel>
+                <Input id="radius" placeholder="0" defaultValue={0} />
+              </Field>
+              <Field>
+                <FieldLabel htmlFor="radius-y" className="sr-only">
+                  Radius Y
+                </FieldLabel>
+                <Input id="radius" placeholder="0" defaultValue={0} />
+              </Field>
+            </CollapsibleContent>
+          </FieldGroup>
+          <CollapsibleTrigger render={<Button variant="outline" size="icon" />}>
+            {isOpen ? <MinimizeIcon /> : <MaximizeIcon />}
+          </CollapsibleTrigger>
+        </Collapsible>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/combobox-auto-highlight.tsx b/apps/v4/examples/base/combobox-auto-highlight.tsx
new file mode 100644
index 000000000..0a9c07ca7
--- /dev/null
+++ b/apps/v4/examples/base/combobox-auto-highlight.tsx
@@ -0,0 +1,70 @@
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/examples/base/ui/combobox"
+import { Select } from "@/examples/base/ui/select"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+const items = [
+  {
+    label: "Select a framework",
+    value: null,
+  },
+  {
+    label: "React",
+    value: "react",
+  },
+  {
+    label: "Vue",
+    value: "vue",
+  },
+  {
+    label: "Angular",
+    value: "angular",
+  },
+  {
+    label: "Svelte",
+    value: "svelte",
+  },
+  {
+    label: "Solid",
+    value: "solid",
+  },
+  {
+    label: "Preact",
+    value: "preact",
+  },
+  {
+    label: "Next.js",
+    value: "next.js",
+  },
+]
+
+export function ComboboxAutoHighlight() {
+  return (
+    <Combobox items={frameworks} autoHighlight>
+      <ComboboxInput placeholder="Select a framework" />
+      <ComboboxContent>
+        <ComboboxEmpty>No items found.</ComboboxEmpty>
+        <ComboboxList>
+          {(item) => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/base/combobox-basic.tsx b/apps/v4/examples/base/combobox-basic.tsx
new file mode 100644
index 000000000..bcf42b521
--- /dev/null
+++ b/apps/v4/examples/base/combobox-basic.tsx
@@ -0,0 +1,70 @@
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/examples/base/ui/combobox"
+import { Select } from "@/examples/base/ui/select"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+const items = [
+  {
+    label: "Select a framework",
+    value: null,
+  },
+  {
+    label: "React",
+    value: "react",
+  },
+  {
+    label: "Vue",
+    value: "vue",
+  },
+  {
+    label: "Angular",
+    value: "angular",
+  },
+  {
+    label: "Svelte",
+    value: "svelte",
+  },
+  {
+    label: "Solid",
+    value: "solid",
+  },
+  {
+    label: "Preact",
+    value: "preact",
+  },
+  {
+    label: "Next.js",
+    value: "next.js",
+  },
+]
+
+export function ComboboxBasic() {
+  return (
+    <Combobox items={frameworks}>
+      <ComboboxInput placeholder="Select a framework" />
+      <ComboboxContent>
+        <ComboboxEmpty>No items found.</ComboboxEmpty>
+        <ComboboxList>
+          {(item) => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/base/combobox-disabled.tsx b/apps/v4/examples/base/combobox-disabled.tsx
new file mode 100644
index 000000000..5eaaa476d
--- /dev/null
+++ b/apps/v4/examples/base/combobox-disabled.tsx
@@ -0,0 +1,70 @@
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/examples/base/ui/combobox"
+import { Select } from "@/examples/base/ui/select"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+const items = [
+  {
+    label: "Select a framework",
+    value: null,
+  },
+  {
+    label: "React",
+    value: "react",
+  },
+  {
+    label: "Vue",
+    value: "vue",
+  },
+  {
+    label: "Angular",
+    value: "angular",
+  },
+  {
+    label: "Svelte",
+    value: "svelte",
+  },
+  {
+    label: "Solid",
+    value: "solid",
+  },
+  {
+    label: "Preact",
+    value: "preact",
+  },
+  {
+    label: "Next.js",
+    value: "next.js",
+  },
+]
+
+export function ComboboxDisabled() {
+  return (
+    <Combobox items={frameworks}>
+      <ComboboxInput placeholder="Select a framework" disabled />
+      <ComboboxContent>
+        <ComboboxEmpty>No items found.</ComboboxEmpty>
+        <ComboboxList>
+          {(item) => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/base/combobox-in-dialog.tsx b/apps/v4/examples/base/combobox-in-dialog.tsx
new file mode 100644
index 000000000..072d56fb8
--- /dev/null
+++ b/apps/v4/examples/base/combobox-in-dialog.tsx
@@ -0,0 +1,128 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/examples/base/ui/combobox"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/base/ui/dialog"
+import { Field, FieldLabel } from "@/examples/base/ui/field"
+import { Select } from "@/examples/base/ui/select"
+import { toast } from "sonner"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+const items = [
+  {
+    label: "Select a framework",
+    value: null,
+  },
+  {
+    label: "React",
+    value: "react",
+  },
+  {
+    label: "Vue",
+    value: "vue",
+  },
+  {
+    label: "Angular",
+    value: "angular",
+  },
+  {
+    label: "Svelte",
+    value: "svelte",
+  },
+  {
+    label: "Solid",
+    value: "solid",
+  },
+  {
+    label: "Preact",
+    value: "preact",
+  },
+  {
+    label: "Next.js",
+    value: "next.js",
+  },
+]
+
+export function ComboboxInDialog() {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger render={<Button variant="outline" />}>
+          Open Dialog
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Select Framework</DialogTitle>
+            <DialogDescription>
+              Choose your preferred framework from the list below.
+            </DialogDescription>
+          </DialogHeader>
+          <Field>
+            <FieldLabel htmlFor="framework-dialog" className="sr-only">
+              Framework
+            </FieldLabel>
+            <Combobox items={frameworks}>
+              <ComboboxInput
+                id="framework-dialog"
+                placeholder="Select a framework"
+              />
+              <ComboboxContent>
+                <ComboboxEmpty>No items found.</ComboboxEmpty>
+                <ComboboxList>
+                  {(item) => (
+                    <ComboboxItem key={item} value={item}>
+                      {item}
+                    </ComboboxItem>
+                  )}
+                </ComboboxList>
+              </ComboboxContent>
+            </Combobox>
+          </Field>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              onClick={() => {
+                toast("Framework selected.")
+                setOpen(false)
+              }}
+            >
+              Confirm
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/combobox-in-popup.tsx b/apps/v4/examples/base/combobox-in-popup.tsx
new file mode 100644
index 000000000..ef823674a
--- /dev/null
+++ b/apps/v4/examples/base/combobox-in-popup.tsx
@@ -0,0 +1,488 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger,
+  ComboboxValue,
+} from "@/examples/base/ui/combobox"
+import { Select } from "@/examples/base/ui/select"
+
+const countries = [
+  { code: "", value: "", continent: "", label: "Select country" },
+  { code: "af", value: "afghanistan", label: "Afghanistan", continent: "Asia" },
+  { code: "al", value: "albania", label: "Albania", continent: "Europe" },
+  { code: "dz", value: "algeria", label: "Algeria", continent: "Africa" },
+  { code: "ad", value: "andorra", label: "Andorra", continent: "Europe" },
+  { code: "ao", value: "angola", label: "Angola", continent: "Africa" },
+  {
+    code: "ar",
+    value: "argentina",
+    label: "Argentina",
+    continent: "South America",
+  },
+  { code: "am", value: "armenia", label: "Armenia", continent: "Asia" },
+  { code: "au", value: "australia", label: "Australia", continent: "Oceania" },
+  { code: "at", value: "austria", label: "Austria", continent: "Europe" },
+  { code: "az", value: "azerbaijan", label: "Azerbaijan", continent: "Asia" },
+  {
+    code: "bs",
+    value: "bahamas",
+    label: "Bahamas",
+    continent: "North America",
+  },
+  { code: "bh", value: "bahrain", label: "Bahrain", continent: "Asia" },
+  { code: "bd", value: "bangladesh", label: "Bangladesh", continent: "Asia" },
+  {
+    code: "bb",
+    value: "barbados",
+    label: "Barbados",
+    continent: "North America",
+  },
+  { code: "by", value: "belarus", label: "Belarus", continent: "Europe" },
+  { code: "be", value: "belgium", label: "Belgium", continent: "Europe" },
+  { code: "bz", value: "belize", label: "Belize", continent: "North America" },
+  { code: "bj", value: "benin", label: "Benin", continent: "Africa" },
+  { code: "bt", value: "bhutan", label: "Bhutan", continent: "Asia" },
+  {
+    code: "bo",
+    value: "bolivia",
+    label: "Bolivia",
+    continent: "South America",
+  },
+  {
+    code: "ba",
+    value: "bosnia-and-herzegovina",
+    label: "Bosnia and Herzegovina",
+    continent: "Europe",
+  },
+  { code: "bw", value: "botswana", label: "Botswana", continent: "Africa" },
+  { code: "br", value: "brazil", label: "Brazil", continent: "South America" },
+  { code: "bn", value: "brunei", label: "Brunei", continent: "Asia" },
+  { code: "bg", value: "bulgaria", label: "Bulgaria", continent: "Europe" },
+  {
+    code: "bf",
+    value: "burkina-faso",
+    label: "Burkina Faso",
+    continent: "Africa",
+  },
+  { code: "bi", value: "burundi", label: "Burundi", continent: "Africa" },
+  { code: "kh", value: "cambodia", label: "Cambodia", continent: "Asia" },
+  { code: "cm", value: "cameroon", label: "Cameroon", continent: "Africa" },
+  { code: "ca", value: "canada", label: "Canada", continent: "North America" },
+  { code: "cv", value: "cape-verde", label: "Cape Verde", continent: "Africa" },
+  {
+    code: "cf",
+    value: "central-african-republic",
+    label: "Central African Republic",
+    continent: "Africa",
+  },
+  { code: "td", value: "chad", label: "Chad", continent: "Africa" },
+  { code: "cl", value: "chile", label: "Chile", continent: "South America" },
+  { code: "cn", value: "china", label: "China", continent: "Asia" },
+  {
+    code: "co",
+    value: "colombia",
+    label: "Colombia",
+    continent: "South America",
+  },
+  { code: "km", value: "comoros", label: "Comoros", continent: "Africa" },
+  { code: "cg", value: "congo", label: "Congo", continent: "Africa" },
+  {
+    code: "cr",
+    value: "costa-rica",
+    label: "Costa Rica",
+    continent: "North America",
+  },
+  { code: "hr", value: "croatia", label: "Croatia", continent: "Europe" },
+  { code: "cu", value: "cuba", label: "Cuba", continent: "North America" },
+  { code: "cy", value: "cyprus", label: "Cyprus", continent: "Asia" },
+  {
+    code: "cz",
+    value: "czech-republic",
+    label: "Czech Republic",
+    continent: "Europe",
+  },
+  { code: "dk", value: "denmark", label: "Denmark", continent: "Europe" },
+  { code: "dj", value: "djibouti", label: "Djibouti", continent: "Africa" },
+  {
+    code: "dm",
+    value: "dominica",
+    label: "Dominica",
+    continent: "North America",
+  },
+  {
+    code: "do",
+    value: "dominican-republic",
+    label: "Dominican Republic",
+    continent: "North America",
+  },
+  {
+    code: "ec",
+    value: "ecuador",
+    label: "Ecuador",
+    continent: "South America",
+  },
+  { code: "eg", value: "egypt", label: "Egypt", continent: "Africa" },
+  {
+    code: "sv",
+    value: "el-salvador",
+    label: "El Salvador",
+    continent: "North America",
+  },
+  {
+    code: "gq",
+    value: "equatorial-guinea",
+    label: "Equatorial Guinea",
+    continent: "Africa",
+  },
+  { code: "er", value: "eritrea", label: "Eritrea", continent: "Africa" },
+  { code: "ee", value: "estonia", label: "Estonia", continent: "Europe" },
+  { code: "et", value: "ethiopia", label: "Ethiopia", continent: "Africa" },
+  { code: "fj", value: "fiji", label: "Fiji", continent: "Oceania" },
+  { code: "fi", value: "finland", label: "Finland", continent: "Europe" },
+  { code: "fr", value: "france", label: "France", continent: "Europe" },
+  { code: "ga", value: "gabon", label: "Gabon", continent: "Africa" },
+  { code: "gm", value: "gambia", label: "Gambia", continent: "Africa" },
+  { code: "ge", value: "georgia", label: "Georgia", continent: "Asia" },
+  { code: "de", value: "germany", label: "Germany", continent: "Europe" },
+  { code: "gh", value: "ghana", label: "Ghana", continent: "Africa" },
+  { code: "gr", value: "greece", label: "Greece", continent: "Europe" },
+  {
+    code: "gd",
+    value: "grenada",
+    label: "Grenada",
+    continent: "North America",
+  },
+  {
+    code: "gt",
+    value: "guatemala",
+    label: "Guatemala",
+    continent: "North America",
+  },
+  { code: "gn", value: "guinea", label: "Guinea", continent: "Africa" },
+  {
+    code: "gw",
+    value: "guinea-bissau",
+    label: "Guinea-Bissau",
+    continent: "Africa",
+  },
+  { code: "gy", value: "guyana", label: "Guyana", continent: "South America" },
+  { code: "ht", value: "haiti", label: "Haiti", continent: "North America" },
+  {
+    code: "hn",
+    value: "honduras",
+    label: "Honduras",
+    continent: "North America",
+  },
+  { code: "hu", value: "hungary", label: "Hungary", continent: "Europe" },
+  { code: "is", value: "iceland", label: "Iceland", continent: "Europe" },
+  { code: "in", value: "india", label: "India", continent: "Asia" },
+  { code: "id", value: "indonesia", label: "Indonesia", continent: "Asia" },
+  { code: "ir", value: "iran", label: "Iran", continent: "Asia" },
+  { code: "iq", value: "iraq", label: "Iraq", continent: "Asia" },
+  { code: "ie", value: "ireland", label: "Ireland", continent: "Europe" },
+  { code: "il", value: "israel", label: "Israel", continent: "Asia" },
+  { code: "it", value: "italy", label: "Italy", continent: "Europe" },
+  {
+    code: "jm",
+    value: "jamaica",
+    label: "Jamaica",
+    continent: "North America",
+  },
+  { code: "jp", value: "japan", label: "Japan", continent: "Asia" },
+  { code: "jo", value: "jordan", label: "Jordan", continent: "Asia" },
+  { code: "kz", value: "kazakhstan", label: "Kazakhstan", continent: "Asia" },
+  { code: "ke", value: "kenya", label: "Kenya", continent: "Africa" },
+  { code: "kw", value: "kuwait", label: "Kuwait", continent: "Asia" },
+  { code: "kg", value: "kyrgyzstan", label: "Kyrgyzstan", continent: "Asia" },
+  { code: "la", value: "laos", label: "Laos", continent: "Asia" },
+  { code: "lv", value: "latvia", label: "Latvia", continent: "Europe" },
+  { code: "lb", value: "lebanon", label: "Lebanon", continent: "Asia" },
+  { code: "ls", value: "lesotho", label: "Lesotho", continent: "Africa" },
+  { code: "lr", value: "liberia", label: "Liberia", continent: "Africa" },
+  { code: "ly", value: "libya", label: "Libya", continent: "Africa" },
+  {
+    code: "li",
+    value: "liechtenstein",
+    label: "Liechtenstein",
+    continent: "Europe",
+  },
+  { code: "lt", value: "lithuania", label: "Lithuania", continent: "Europe" },
+  { code: "lu", value: "luxembourg", label: "Luxembourg", continent: "Europe" },
+  { code: "mg", value: "madagascar", label: "Madagascar", continent: "Africa" },
+  { code: "mw", value: "malawi", label: "Malawi", continent: "Africa" },
+  { code: "my", value: "malaysia", label: "Malaysia", continent: "Asia" },
+  { code: "mv", value: "maldives", label: "Maldives", continent: "Asia" },
+  { code: "ml", value: "mali", label: "Mali", continent: "Africa" },
+  { code: "mt", value: "malta", label: "Malta", continent: "Europe" },
+  {
+    code: "mh",
+    value: "marshall-islands",
+    label: "Marshall Islands",
+    continent: "Oceania",
+  },
+  { code: "mr", value: "mauritania", label: "Mauritania", continent: "Africa" },
+  { code: "mu", value: "mauritius", label: "Mauritius", continent: "Africa" },
+  { code: "mx", value: "mexico", label: "Mexico", continent: "North America" },
+  {
+    code: "fm",
+    value: "micronesia",
+    label: "Micronesia",
+    continent: "Oceania",
+  },
+  { code: "md", value: "moldova", label: "Moldova", continent: "Europe" },
+  { code: "mc", value: "monaco", label: "Monaco", continent: "Europe" },
+  { code: "mn", value: "mongolia", label: "Mongolia", continent: "Asia" },
+  { code: "me", value: "montenegro", label: "Montenegro", continent: "Europe" },
+  { code: "ma", value: "morocco", label: "Morocco", continent: "Africa" },
+  { code: "mz", value: "mozambique", label: "Mozambique", continent: "Africa" },
+  { code: "mm", value: "myanmar", label: "Myanmar", continent: "Asia" },
+  { code: "na", value: "namibia", label: "Namibia", continent: "Africa" },
+  { code: "nr", value: "nauru", label: "Nauru", continent: "Oceania" },
+  { code: "np", value: "nepal", label: "Nepal", continent: "Asia" },
+  {
+    code: "nl",
+    value: "netherlands",
+    label: "Netherlands",
+    continent: "Europe",
+  },
+  {
+    code: "nz",
+    value: "new-zealand",
+    label: "New Zealand",
+    continent: "Oceania",
+  },
+  {
+    code: "ni",
+    value: "nicaragua",
+    label: "Nicaragua",
+    continent: "North America",
+  },
+  { code: "ne", value: "niger", label: "Niger", continent: "Africa" },
+  { code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" },
+  { code: "kp", value: "north-korea", label: "North Korea", continent: "Asia" },
+  {
+    code: "mk",
+    value: "north-macedonia",
+    label: "North Macedonia",
+    continent: "Europe",
+  },
+  { code: "no", value: "norway", label: "Norway", continent: "Europe" },
+  { code: "om", value: "oman", label: "Oman", continent: "Asia" },
+  { code: "pk", value: "pakistan", label: "Pakistan", continent: "Asia" },
+  { code: "pw", value: "palau", label: "Palau", continent: "Oceania" },
+  { code: "ps", value: "palestine", label: "Palestine", continent: "Asia" },
+  { code: "pa", value: "panama", label: "Panama", continent: "North America" },
+  {
+    code: "pg",
+    value: "papua-new-guinea",
+    label: "Papua New Guinea",
+    continent: "Oceania",
+  },
+  {
+    code: "py",
+    value: "paraguay",
+    label: "Paraguay",
+    continent: "South America",
+  },
+  { code: "pe", value: "peru", label: "Peru", continent: "South America" },
+  { code: "ph", value: "philippines", label: "Philippines", continent: "Asia" },
+  { code: "pl", value: "poland", label: "Poland", continent: "Europe" },
+  { code: "pt", value: "portugal", label: "Portugal", continent: "Europe" },
+  { code: "qa", value: "qatar", label: "Qatar", continent: "Asia" },
+  { code: "ro", value: "romania", label: "Romania", continent: "Europe" },
+  { code: "ru", value: "russia", label: "Russia", continent: "Europe" },
+  { code: "rw", value: "rwanda", label: "Rwanda", continent: "Africa" },
+  { code: "ws", value: "samoa", label: "Samoa", continent: "Oceania" },
+  { code: "sm", value: "san-marino", label: "San Marino", continent: "Europe" },
+  {
+    code: "sa",
+    value: "saudi-arabia",
+    label: "Saudi Arabia",
+    continent: "Asia",
+  },
+  { code: "sn", value: "senegal", label: "Senegal", continent: "Africa" },
+  { code: "rs", value: "serbia", label: "Serbia", continent: "Europe" },
+  { code: "sc", value: "seychelles", label: "Seychelles", continent: "Africa" },
+  {
+    code: "sl",
+    value: "sierra-leone",
+    label: "Sierra Leone",
+    continent: "Africa",
+  },
+  { code: "sg", value: "singapore", label: "Singapore", continent: "Asia" },
+  { code: "sk", value: "slovakia", label: "Slovakia", continent: "Europe" },
+  { code: "si", value: "slovenia", label: "Slovenia", continent: "Europe" },
+  {
+    code: "sb",
+    value: "solomon-islands",
+    label: "Solomon Islands",
+    continent: "Oceania",
+  },
+  { code: "so", value: "somalia", label: "Somalia", continent: "Africa" },
+  {
+    code: "za",
+    value: "south-africa",
+    label: "South Africa",
+    continent: "Africa",
+  },
+  { code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" },
+  {
+    code: "ss",
+    value: "south-sudan",
+    label: "South Sudan",
+    continent: "Africa",
+  },
+  { code: "es", value: "spain", label: "Spain", continent: "Europe" },
+  { code: "lk", value: "sri-lanka", label: "Sri Lanka", continent: "Asia" },
+  { code: "sd", value: "sudan", label: "Sudan", continent: "Africa" },
+  {
+    code: "sr",
+    value: "suriname",
+    label: "Suriname",
+    continent: "South America",
+  },
+  { code: "se", value: "sweden", label: "Sweden", continent: "Europe" },
+  {
+    code: "ch",
+    value: "switzerland",
+    label: "Switzerland",
+    continent: "Europe",
+  },
+  { code: "sy", value: "syria", label: "Syria", continent: "Asia" },
+  { code: "tw", value: "taiwan", label: "Taiwan", continent: "Asia" },
+  { code: "tj", value: "tajikistan", label: "Tajikistan", continent: "Asia" },
+  { code: "tz", value: "tanzania", label: "Tanzania", continent: "Africa" },
+  { code: "th", value: "thailand", label: "Thailand", continent: "Asia" },
+  { code: "tl", value: "timor-leste", label: "Timor-Leste", continent: "Asia" },
+  { code: "tg", value: "togo", label: "Togo", continent: "Africa" },
+  { code: "to", value: "tonga", label: "Tonga", continent: "Oceania" },
+  {
+    code: "tt",
+    value: "trinidad-and-tobago",
+    label: "Trinidad and Tobago",
+    continent: "North America",
+  },
+  { code: "tn", value: "tunisia", label: "Tunisia", continent: "Africa" },
+  { code: "tr", value: "turkey", label: "Turkey", continent: "Asia" },
+  {
+    code: "tm",
+    value: "turkmenistan",
+    label: "Turkmenistan",
+    continent: "Asia",
+  },
+  { code: "tv", value: "tuvalu", label: "Tuvalu", continent: "Oceania" },
+  { code: "ug", value: "uganda", label: "Uganda", continent: "Africa" },
+  { code: "ua", value: "ukraine", label: "Ukraine", continent: "Europe" },
+  {
+    code: "ae",
+    value: "united-arab-emirates",
+    label: "United Arab Emirates",
+    continent: "Asia",
+  },
+  {
+    code: "gb",
+    value: "united-kingdom",
+    label: "United Kingdom",
+    continent: "Europe",
+  },
+  {
+    code: "us",
+    value: "united-states",
+    label: "United States",
+    continent: "North America",
+  },
+  {
+    code: "uy",
+    value: "uruguay",
+    label: "Uruguay",
+    continent: "South America",
+  },
+  { code: "uz", value: "uzbekistan", label: "Uzbekistan", continent: "Asia" },
+  { code: "vu", value: "vanuatu", label: "Vanuatu", continent: "Oceania" },
+  {
+    code: "va",
+    value: "vatican-city",
+    label: "Vatican City",
+    continent: "Europe",
+  },
+  {
+    code: "ve",
+    value: "venezuela",
+    label: "Venezuela",
+    continent: "South America",
+  },
+  { code: "vn", value: "vietnam", label: "Vietnam", continent: "Asia" },
+  { code: "ye", value: "yemen", label: "Yemen", continent: "Asia" },
+  { code: "zm", value: "zambia", label: "Zambia", continent: "Africa" },
+  { code: "zw", value: "zimbabwe", label: "Zimbabwe", continent: "Africa" },
+]
+
+const items = [
+  {
+    label: "Select a framework",
+    value: null,
+  },
+  {
+    label: "React",
+    value: "react",
+  },
+  {
+    label: "Vue",
+    value: "vue",
+  },
+  {
+    label: "Angular",
+    value: "angular",
+  },
+  {
+    label: "Svelte",
+    value: "svelte",
+  },
+  {
+    label: "Solid",
+    value: "solid",
+  },
+  {
+    label: "Preact",
+    value: "preact",
+  },
+  {
+    label: "Next.js",
+    value: "next.js",
+  },
+]
+
+export function ComboboxInPopup() {
+  return (
+    <>
+      <Combobox items={countries} defaultValue={countries[0]}>
+        <ComboboxTrigger
+          render={
+            <Button
+              variant="outline"
+              className="w-64 justify-between font-normal"
+            />
+          }
+        >
+          <ComboboxValue />
+        </ComboboxTrigger>
+        <ComboboxContent>
+          <ComboboxInput showTrigger={false} placeholder="Search" />
+          <ComboboxEmpty>No items found.</ComboboxEmpty>
+          <ComboboxList>
+            {(item) => (
+              <ComboboxItem key={item.code} value={item}>
+                {item.label}
+              </ComboboxItem>
+            )}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/combobox-invalid.tsx b/apps/v4/examples/base/combobox-invalid.tsx
new file mode 100644
index 000000000..ba3c9f231
--- /dev/null
+++ b/apps/v4/examples/base/combobox-invalid.tsx
@@ -0,0 +1,100 @@
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/examples/base/ui/combobox"
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from "@/examples/base/ui/field"
+import { Select } from "@/examples/base/ui/select"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+const items = [
+  {
+    label: "Select a framework",
+    value: null,
+  },
+  {
+    label: "React",
+    value: "react",
+  },
+  {
+    label: "Vue",
+    value: "vue",
+  },
+  {
+    label: "Angular",
+    value: "angular",
+  },
+  {
+    label: "Svelte",
+    value: "svelte",
+  },
+  {
+    label: "Solid",
+    value: "solid",
+  },
+  {
+    label: "Preact",
+    value: "preact",
+  },
+  {
+    label: "Next.js",
+    value: "next.js",
+  },
+]
+
+export function ComboboxInvalid() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Combobox items={frameworks}>
+        <ComboboxInput placeholder="Select a framework" aria-invalid="true" />
+        <ComboboxContent>
+          <ComboboxEmpty>No items found.</ComboboxEmpty>
+          <ComboboxList>
+            {(item) => (
+              <ComboboxItem key={item} value={item}>
+                {item}
+              </ComboboxItem>
+            )}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+      <Field data-invalid>
+        <FieldLabel htmlFor="combobox-framework-invalid">Framework</FieldLabel>
+        <Combobox items={frameworks}>
+          <ComboboxInput
+            id="combobox-framework-invalid"
+            placeholder="Select a framework"
+            aria-invalid
+          />
+          <ComboboxContent>
+            <ComboboxEmpty>No items found.</ComboboxEmpty>
+            <ComboboxList>
+              {(item) => (
+                <ComboboxItem key={item} value={item}>
+                  {item}
+                </ComboboxItem>
+              )}
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+        <FieldDescription>Please select a valid framework.</FieldDescription>
+        <FieldError errors={[{ message: "This field is required." }]} />
+      </Field>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/combobox-large-list.tsx b/apps/v4/examples/base/combobox-large-list.tsx
new file mode 100644
index 000000000..c7fcc29ec
--- /dev/null
+++ b/apps/v4/examples/base/combobox-large-list.tsx
@@ -0,0 +1,65 @@
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/examples/base/ui/combobox"
+import { Item } from "@/examples/base/ui/item"
+import { Select } from "@/examples/base/ui/select"
+
+const largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)
+
+const items = [
+  {
+    label: "Select a framework",
+    value: null,
+  },
+  {
+    label: "React",
+    value: "react",
+  },
+  {
+    label: "Vue",
+    value: "vue",
+  },
+  {
+    label: "Angular",
+    value: "angular",
+  },
+  {
+    label: "Svelte",
+    value: "svelte",
+  },
+  {
+    label: "Solid",
+    value: "solid",
+  },
+  {
+    label: "Preact",
+    value: "preact",
+  },
+  {
+    label: "Next.js",
+    value: "next.js",
+  },
+]
+
+export function ComboboxLargeList() {
+  return (
+    <Combobox items={largeListItems}>
+      <ComboboxInput placeholder="Search from 100 items" />
+      <ComboboxContent>
+        <ComboboxEmpty>No items found.</ComboboxEmpty>
+        <ComboboxList>
+          {(item) => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/base/combobox-multiple-disabled.tsx b/apps/v4/examples/base/combobox-multiple-disabled.tsx
new file mode 100644
index 000000000..9e58e4fa8
--- /dev/null
+++ b/apps/v4/examples/base/combobox-multiple-disabled.tsx
@@ -0,0 +1,94 @@
+import * as React from "react"
+import {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxValue,
+  useComboboxAnchor,
+} from "@/examples/base/ui/combobox"
+import { Select } from "@/examples/base/ui/select"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+const items = [
+  {
+    label: "Select a framework",
+    value: null,
+  },
+  {
+    label: "React",
+    value: "react",
+  },
+  {
+    label: "Vue",
+    value: "vue",
+  },
+  {
+    label: "Angular",
+    value: "angular",
+  },
+  {
+    label: "Svelte",
+    value: "svelte",
+  },
+  {
+    label: "Solid",
+    value: "solid",
+  },
+  {
+    label: "Preact",
+    value: "preact",
+  },
+  {
+    label: "Next.js",
+    value: "next.js",
+  },
+]
+
+export function ComboboxMultipleDisabled() {
+  const anchor = useComboboxAnchor()
+
+  return (
+    <Combobox
+      multiple
+      autoHighlight
+      items={frameworks}
+      defaultValue={[frameworks[0], frameworks[1]]}
+      disabled
+    >
+      <ComboboxChips ref={anchor}>
+        <ComboboxValue>
+          {(values) => (
+            <React.Fragment>
+              {values.map((value: string) => (
+                <ComboboxChip key={value}>{value}</ComboboxChip>
+              ))}
+              <ComboboxChipsInput disabled />
+            </React.Fragment>
+          )}
+        </ComboboxValue>
+      </ComboboxChips>
+      <ComboboxContent anchor={anchor}>
+        <ComboboxEmpty>No items found.</ComboboxEmpty>
+        <ComboboxList>
+          {(item) => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/base/combobox-multiple-invalid.tsx b/apps/v4/examples/base/combobox-multiple-invalid.tsx
new file mode 100644
index 000000000..c8afbe755
--- /dev/null
+++ b/apps/v4/examples/base/combobox-multiple-invalid.tsx
@@ -0,0 +1,141 @@
+import * as React from "react"
+import {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxValue,
+  useComboboxAnchor,
+} from "@/examples/base/ui/combobox"
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from "@/examples/base/ui/field"
+import { Select } from "@/examples/base/ui/select"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+const items = [
+  {
+    label: "Select a framework",
+    value: null,
+  },
+  {
+    label: "React",
+    value: "react",
+  },
+  {
+    label: "Vue",
+    value: "vue",
+  },
+  {
+    label: "Angular",
+    value: "angular",
+  },
+  {
+    label: "Svelte",
+    value: "svelte",
+  },
+  {
+    label: "Solid",
+    value: "solid",
+  },
+  {
+    label: "Preact",
+    value: "preact",
+  },
+  {
+    label: "Next.js",
+    value: "next.js",
+  },
+]
+
+export function ComboboxMultipleInvalid() {
+  const anchor1 = useComboboxAnchor()
+  const anchor2 = useComboboxAnchor()
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Combobox
+        multiple
+        autoHighlight
+        items={frameworks}
+        defaultValue={[frameworks[0], frameworks[1]]}
+      >
+        <ComboboxChips ref={anchor1}>
+          <ComboboxValue>
+            {(values) => (
+              <React.Fragment>
+                {values.map((value: string) => (
+                  <ComboboxChip key={value}>{value}</ComboboxChip>
+                ))}
+                <ComboboxChipsInput aria-invalid="true" />
+              </React.Fragment>
+            )}
+          </ComboboxValue>
+        </ComboboxChips>
+        <ComboboxContent anchor={anchor1}>
+          <ComboboxEmpty>No items found.</ComboboxEmpty>
+          <ComboboxList>
+            {(item) => (
+              <ComboboxItem key={item} value={item}>
+                {item}
+              </ComboboxItem>
+            )}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+      <Field data-invalid>
+        <FieldLabel htmlFor="combobox-multiple-invalid">Frameworks</FieldLabel>
+        <Combobox
+          multiple
+          autoHighlight
+          items={frameworks}
+          defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}
+        >
+          <ComboboxChips ref={anchor2}>
+            <ComboboxValue>
+              {(values) => (
+                <React.Fragment>
+                  {values.map((value: string) => (
+                    <ComboboxChip key={value}>{value}</ComboboxChip>
+                  ))}
+                  <ComboboxChipsInput
+                    id="combobox-multiple-invalid"
+                    aria-invalid
+                  />
+                </React.Fragment>
+              )}
+            </ComboboxValue>
+          </ComboboxChips>
+          <ComboboxContent anchor={anchor2}>
+            <ComboboxEmpty>No items found.</ComboboxEmpty>
+            <ComboboxList>
+              {(item) => (
+                <ComboboxItem key={item} value={item}>
+                  {item}
+                </ComboboxItem>
+              )}
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+        <FieldDescription>
+          Please select at least one framework.
+        </FieldDescription>
+        <FieldError errors={[{ message: "This field is required." }]} />
+      </Field>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/combobox-multiple-no-remove.tsx b/apps/v4/examples/base/combobox-multiple-no-remove.tsx
new file mode 100644
index 000000000..6b3ab4ec3
--- /dev/null
+++ b/apps/v4/examples/base/combobox-multiple-no-remove.tsx
@@ -0,0 +1,95 @@
+import * as React from "react"
+import {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxValue,
+  useComboboxAnchor,
+} from "@/examples/base/ui/combobox"
+import { Select } from "@/examples/base/ui/select"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+const items = [
+  {
+    label: "Select a framework",
+    value: null,
+  },
+  {
+    label: "React",
+    value: "react",
+  },
+  {
+    label: "Vue",
+    value: "vue",
+  },
+  {
+    label: "Angular",
+    value: "angular",
+  },
+  {
+    label: "Svelte",
+    value: "svelte",
+  },
+  {
+    label: "Solid",
+    value: "solid",
+  },
+  {
+    label: "Preact",
+    value: "preact",
+  },
+  {
+    label: "Next.js",
+    value: "next.js",
+  },
+]
+
+export function ComboboxMultipleNoRemove() {
+  const anchor = useComboboxAnchor()
+
+  return (
+    <Combobox
+      multiple
+      autoHighlight
+      items={frameworks}
+      defaultValue={[frameworks[0], frameworks[1]]}
+    >
+      <ComboboxChips ref={anchor}>
+        <ComboboxValue>
+          {(values) => (
+            <React.Fragment>
+              {values.map((value: string) => (
+                <ComboboxChip key={value} showRemove={false}>
+                  {value}
+                </ComboboxChip>
+              ))}
+              <ComboboxChipsInput />
+            </React.Fragment>
+          )}
+        </ComboboxValue>
+      </ComboboxChips>
+      <ComboboxContent anchor={anchor}>
+        <ComboboxEmpty>No items found.</ComboboxEmpty>
+        <ComboboxList>
+          {(item) => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/base/combobox-multiple.tsx b/apps/v4/examples/base/combobox-multiple.tsx
new file mode 100644
index 000000000..c1951ac31
--- /dev/null
+++ b/apps/v4/examples/base/combobox-multiple.tsx
@@ -0,0 +1,93 @@
+import * as React from "react"
+import {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxValue,
+  useComboboxAnchor,
+} from "@/examples/base/ui/combobox"
+import { Select } from "@/examples/base/ui/select"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+const items = [
+  {
+    label: "Select a framework",
+    value: null,
+  },
+  {
+    label: "React",
+    value: "react",
+  },
+  {
+    label: "Vue",
+    value: "vue",
+  },
+  {
+    label: "Angular",
+    value: "angular",
+  },
+  {
+    label: "Svelte",
+    value: "svelte",
+  },
+  {
+    label: "Solid",
+    value: "solid",
+  },
+  {
+    label: "Preact",
+    value: "preact",
+  },
+  {
+    label: "Next.js",
+    value: "next.js",
+  },
+]
+
+export function ComboboxMultiple() {
+  const anchor = useComboboxAnchor()
+
+  return (
+    <Combobox
+      multiple
+      autoHighlight
+      items={frameworks}
+      defaultValue={[frameworks[0]]}
+    >
+      <ComboboxChips ref={anchor}>
+        <ComboboxValue>
+          {(values) => (
+            <React.Fragment>
+              {values.map((value: string) => (
+                <ComboboxChip key={value}>{value}</ComboboxChip>
+              ))}
+              <ComboboxChipsInput />
+            </React.Fragment>
+          )}
+        </ComboboxValue>
+      </ComboboxChips>
+      <ComboboxContent anchor={anchor}>
+        <ComboboxEmpty>No items found.</ComboboxEmpty>
+        <ComboboxList>
+          {(item) => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/base/combobox-with-clear.tsx b/apps/v4/examples/base/combobox-with-clear.tsx
new file mode 100644
index 000000000..8bebfda48
--- /dev/null
+++ b/apps/v4/examples/base/combobox-with-clear.tsx
@@ -0,0 +1,71 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/examples/base/ui/combobox"
+import { Select } from "@/examples/base/ui/select"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+const items = [
+  {
+    label: "Select a framework",
+    value: null,
+  },
+  {
+    label: "React",
+    value: "react",
+  },
+  {
+    label: "Vue",
+    value: "vue",
+  },
+  {
+    label: "Angular",
+    value: "angular",
+  },
+  {
+    label: "Svelte",
+    value: "svelte",
+  },
+  {
+    label: "Solid",
+    value: "solid",
+  },
+  {
+    label: "Preact",
+    value: "preact",
+  },
+  {
+    label: "Next.js",
+    value: "next.js",
+  },
+]
+
+export function ComboboxWithClear() {
+  return (
+    <Combobox items={frameworks} defaultValue={frameworks[0]}>
+      <ComboboxInput placeholder="Select a framework" showClear />
+      <ComboboxContent>
+        <ComboboxEmpty>No items found.</ComboboxEmpty>
+        <ComboboxList>
+          {(item) => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/base/combobox-with-custom-items.tsx b/apps/v4/examples/base/combobox-with-custom-items.tsx
new file mode 100644
index 000000000..3cab67466
--- /dev/null
+++ b/apps/v4/examples/base/combobox-with-custom-items.tsx
@@ -0,0 +1,491 @@
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/examples/base/ui/combobox"
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+import { Select } from "@/examples/base/ui/select"
+
+const countries = [
+  { code: "", value: "", continent: "", label: "Select country" },
+  { code: "af", value: "afghanistan", label: "Afghanistan", continent: "Asia" },
+  { code: "al", value: "albania", label: "Albania", continent: "Europe" },
+  { code: "dz", value: "algeria", label: "Algeria", continent: "Africa" },
+  { code: "ad", value: "andorra", label: "Andorra", continent: "Europe" },
+  { code: "ao", value: "angola", label: "Angola", continent: "Africa" },
+  {
+    code: "ar",
+    value: "argentina",
+    label: "Argentina",
+    continent: "South America",
+  },
+  { code: "am", value: "armenia", label: "Armenia", continent: "Asia" },
+  { code: "au", value: "australia", label: "Australia", continent: "Oceania" },
+  { code: "at", value: "austria", label: "Austria", continent: "Europe" },
+  { code: "az", value: "azerbaijan", label: "Azerbaijan", continent: "Asia" },
+  {
+    code: "bs",
+    value: "bahamas",
+    label: "Bahamas",
+    continent: "North America",
+  },
+  { code: "bh", value: "bahrain", label: "Bahrain", continent: "Asia" },
+  { code: "bd", value: "bangladesh", label: "Bangladesh", continent: "Asia" },
+  {
+    code: "bb",
+    value: "barbados",
+    label: "Barbados",
+    continent: "North America",
+  },
+  { code: "by", value: "belarus", label: "Belarus", continent: "Europe" },
+  { code: "be", value: "belgium", label: "Belgium", continent: "Europe" },
+  { code: "bz", value: "belize", label: "Belize", continent: "North America" },
+  { code: "bj", value: "benin", label: "Benin", continent: "Africa" },
+  { code: "bt", value: "bhutan", label: "Bhutan", continent: "Asia" },
+  {
+    code: "bo",
+    value: "bolivia",
+    label: "Bolivia",
+    continent: "South America",
+  },
+  {
+    code: "ba",
+    value: "bosnia-and-herzegovina",
+    label: "Bosnia and Herzegovina",
+    continent: "Europe",
+  },
+  { code: "bw", value: "botswana", label: "Botswana", continent: "Africa" },
+  { code: "br", value: "brazil", label: "Brazil", continent: "South America" },
+  { code: "bn", value: "brunei", label: "Brunei", continent: "Asia" },
+  { code: "bg", value: "bulgaria", label: "Bulgaria", continent: "Europe" },
+  {
+    code: "bf",
+    value: "burkina-faso",
+    label: "Burkina Faso",
+    continent: "Africa",
+  },
+  { code: "bi", value: "burundi", label: "Burundi", continent: "Africa" },
+  { code: "kh", value: "cambodia", label: "Cambodia", continent: "Asia" },
+  { code: "cm", value: "cameroon", label: "Cameroon", continent: "Africa" },
+  { code: "ca", value: "canada", label: "Canada", continent: "North America" },
+  { code: "cv", value: "cape-verde", label: "Cape Verde", continent: "Africa" },
+  {
+    code: "cf",
+    value: "central-african-republic",
+    label: "Central African Republic",
+    continent: "Africa",
+  },
+  { code: "td", value: "chad", label: "Chad", continent: "Africa" },
+  { code: "cl", value: "chile", label: "Chile", continent: "South America" },
+  { code: "cn", value: "china", label: "China", continent: "Asia" },
+  {
+    code: "co",
+    value: "colombia",
+    label: "Colombia",
+    continent: "South America",
+  },
+  { code: "km", value: "comoros", label: "Comoros", continent: "Africa" },
+  { code: "cg", value: "congo", label: "Congo", continent: "Africa" },
+  {
+    code: "cr",
+    value: "costa-rica",
+    label: "Costa Rica",
+    continent: "North America",
+  },
+  { code: "hr", value: "croatia", label: "Croatia", continent: "Europe" },
+  { code: "cu", value: "cuba", label: "Cuba", continent: "North America" },
+  { code: "cy", value: "cyprus", label: "Cyprus", continent: "Asia" },
+  {
+    code: "cz",
+    value: "czech-republic",
+    label: "Czech Republic",
+    continent: "Europe",
+  },
+  { code: "dk", value: "denmark", label: "Denmark", continent: "Europe" },
+  { code: "dj", value: "djibouti", label: "Djibouti", continent: "Africa" },
+  {
+    code: "dm",
+    value: "dominica",
+    label: "Dominica",
+    continent: "North America",
+  },
+  {
+    code: "do",
+    value: "dominican-republic",
+    label: "Dominican Republic",
+    continent: "North America",
+  },
+  {
+    code: "ec",
+    value: "ecuador",
+    label: "Ecuador",
+    continent: "South America",
+  },
+  { code: "eg", value: "egypt", label: "Egypt", continent: "Africa" },
+  {
+    code: "sv",
+    value: "el-salvador",
+    label: "El Salvador",
+    continent: "North America",
+  },
+  {
+    code: "gq",
+    value: "equatorial-guinea",
+    label: "Equatorial Guinea",
+    continent: "Africa",
+  },
+  { code: "er", value: "eritrea", label: "Eritrea", continent: "Africa" },
+  { code: "ee", value: "estonia", label: "Estonia", continent: "Europe" },
+  { code: "et", value: "ethiopia", label: "Ethiopia", continent: "Africa" },
+  { code: "fj", value: "fiji", label: "Fiji", continent: "Oceania" },
+  { code: "fi", value: "finland", label: "Finland", continent: "Europe" },
+  { code: "fr", value: "france", label: "France", continent: "Europe" },
+  { code: "ga", value: "gabon", label: "Gabon", continent: "Africa" },
+  { code: "gm", value: "gambia", label: "Gambia", continent: "Africa" },
+  { code: "ge", value: "georgia", label: "Georgia", continent: "Asia" },
+  { code: "de", value: "germany", label: "Germany", continent: "Europe" },
+  { code: "gh", value: "ghana", label: "Ghana", continent: "Africa" },
+  { code: "gr", value: "greece", label: "Greece", continent: "Europe" },
+  {
+    code: "gd",
+    value: "grenada",
+    label: "Grenada",
+    continent: "North America",
+  },
+  {
+    code: "gt",
+    value: "guatemala",
+    label: "Guatemala",
+    continent: "North America",
+  },
+  { code: "gn", value: "guinea", label: "Guinea", continent: "Africa" },
+  {
+    code: "gw",
+    value: "guinea-bissau",
+    label: "Guinea-Bissau",
+    continent: "Africa",
+  },
+  { code: "gy", value: "guyana", label: "Guyana", continent: "South America" },
+  { code: "ht", value: "haiti", label: "Haiti", continent: "North America" },
+  {
+    code: "hn",
+    value: "honduras",
+    label: "Honduras",
+    continent: "North America",
+  },
+  { code: "hu", value: "hungary", label: "Hungary", continent: "Europe" },
+  { code: "is", value: "iceland", label: "Iceland", continent: "Europe" },
+  { code: "in", value: "india", label: "India", continent: "Asia" },
+  { code: "id", value: "indonesia", label: "Indonesia", continent: "Asia" },
+  { code: "ir", value: "iran", label: "Iran", continent: "Asia" },
+  { code: "iq", value: "iraq", label: "Iraq", continent: "Asia" },
+  { code: "ie", value: "ireland", label: "Ireland", continent: "Europe" },
+  { code: "il", value: "israel", label: "Israel", continent: "Asia" },
+  { code: "it", value: "italy", label: "Italy", continent: "Europe" },
+  {
+    code: "jm",
+    value: "jamaica",
+    label: "Jamaica",
+    continent: "North America",
+  },
+  { code: "jp", value: "japan", label: "Japan", continent: "Asia" },
+  { code: "jo", value: "jordan", label: "Jordan", continent: "Asia" },
+  { code: "kz", value: "kazakhstan", label: "Kazakhstan", continent: "Asia" },
+  { code: "ke", value: "kenya", label: "Kenya", continent: "Africa" },
+  { code: "kw", value: "kuwait", label: "Kuwait", continent: "Asia" },
+  { code: "kg", value: "kyrgyzstan", label: "Kyrgyzstan", continent: "Asia" },
+  { code: "la", value: "laos", label: "Laos", continent: "Asia" },
+  { code: "lv", value: "latvia", label: "Latvia", continent: "Europe" },
+  { code: "lb", value: "lebanon", label: "Lebanon", continent: "Asia" },
+  { code: "ls", value: "lesotho", label: "Lesotho", continent: "Africa" },
+  { code: "lr", value: "liberia", label: "Liberia", continent: "Africa" },
+  { code: "ly", value: "libya", label: "Libya", continent: "Africa" },
+  {
+    code: "li",
+    value: "liechtenstein",
+    label: "Liechtenstein",
+    continent: "Europe",
+  },
+  { code: "lt", value: "lithuania", label: "Lithuania", continent: "Europe" },
+  { code: "lu", value: "luxembourg", label: "Luxembourg", continent: "Europe" },
+  { code: "mg", value: "madagascar", label: "Madagascar", continent: "Africa" },
+  { code: "mw", value: "malawi", label: "Malawi", continent: "Africa" },
+  { code: "my", value: "malaysia", label: "Malaysia", continent: "Asia" },
+  { code: "mv", value: "maldives", label: "Maldives", continent: "Asia" },
+  { code: "ml", value: "mali", label: "Mali", continent: "Africa" },
+  { code: "mt", value: "malta", label: "Malta", continent: "Europe" },
+  {
+    code: "mh",
+    value: "marshall-islands",
+    label: "Marshall Islands",
+    continent: "Oceania",
+  },
+  { code: "mr", value: "mauritania", label: "Mauritania", continent: "Africa" },
+  { code: "mu", value: "mauritius", label: "Mauritius", continent: "Africa" },
+  { code: "mx", value: "mexico", label: "Mexico", continent: "North America" },
+  {
+    code: "fm",
+    value: "micronesia",
+    label: "Micronesia",
+    continent: "Oceania",
+  },
+  { code: "md", value: "moldova", label: "Moldova", continent: "Europe" },
+  { code: "mc", value: "monaco", label: "Monaco", continent: "Europe" },
+  { code: "mn", value: "mongolia", label: "Mongolia", continent: "Asia" },
+  { code: "me", value: "montenegro", label: "Montenegro", continent: "Europe" },
+  { code: "ma", value: "morocco", label: "Morocco", continent: "Africa" },
+  { code: "mz", value: "mozambique", label: "Mozambique", continent: "Africa" },
+  { code: "mm", value: "myanmar", label: "Myanmar", continent: "Asia" },
+  { code: "na", value: "namibia", label: "Namibia", continent: "Africa" },
+  { code: "nr", value: "nauru", label: "Nauru", continent: "Oceania" },
+  { code: "np", value: "nepal", label: "Nepal", continent: "Asia" },
+  {
+    code: "nl",
+    value: "netherlands",
+    label: "Netherlands",
+    continent: "Europe",
+  },
+  {
+    code: "nz",
+    value: "new-zealand",
+    label: "New Zealand",
+    continent: "Oceania",
+  },
+  {
+    code: "ni",
+    value: "nicaragua",
+    label: "Nicaragua",
+    continent: "North America",
+  },
+  { code: "ne", value: "niger", label: "Niger", continent: "Africa" },
+  { code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" },
+  { code: "kp", value: "north-korea", label: "North Korea", continent: "Asia" },
+  {
+    code: "mk",
+    value: "north-macedonia",
+    label: "North Macedonia",
+    continent: "Europe",
+  },
+  { code: "no", value: "norway", label: "Norway", continent: "Europe" },
+  { code: "om", value: "oman", label: "Oman", continent: "Asia" },
+  { code: "pk", value: "pakistan", label: "Pakistan", continent: "Asia" },
+  { code: "pw", value: "palau", label: "Palau", continent: "Oceania" },
+  { code: "ps", value: "palestine", label: "Palestine", continent: "Asia" },
+  { code: "pa", value: "panama", label: "Panama", continent: "North America" },
+  {
+    code: "pg",
+    value: "papua-new-guinea",
+    label: "Papua New Guinea",
+    continent: "Oceania",
+  },
+  {
+    code: "py",
+    value: "paraguay",
+    label: "Paraguay",
+    continent: "South America",
+  },
+  { code: "pe", value: "peru", label: "Peru", continent: "South America" },
+  { code: "ph", value: "philippines", label: "Philippines", continent: "Asia" },
+  { code: "pl", value: "poland", label: "Poland", continent: "Europe" },
+  { code: "pt", value: "portugal", label: "Portugal", continent: "Europe" },
+  { code: "qa", value: "qatar", label: "Qatar", continent: "Asia" },
+  { code: "ro", value: "romania", label: "Romania", continent: "Europe" },
+  { code: "ru", value: "russia", label: "Russia", continent: "Europe" },
+  { code: "rw", value: "rwanda", label: "Rwanda", continent: "Africa" },
+  { code: "ws", value: "samoa", label: "Samoa", continent: "Oceania" },
+  { code: "sm", value: "san-marino", label: "San Marino", continent: "Europe" },
+  {
+    code: "sa",
+    value: "saudi-arabia",
+    label: "Saudi Arabia",
+    continent: "Asia",
+  },
+  { code: "sn", value: "senegal", label: "Senegal", continent: "Africa" },
+  { code: "rs", value: "serbia", label: "Serbia", continent: "Europe" },
+  { code: "sc", value: "seychelles", label: "Seychelles", continent: "Africa" },
+  {
+    code: "sl",
+    value: "sierra-leone",
+    label: "Sierra Leone",
+    continent: "Africa",
+  },
+  { code: "sg", value: "singapore", label: "Singapore", continent: "Asia" },
+  { code: "sk", value: "slovakia", label: "Slovakia", continent: "Europe" },
+  { code: "si", value: "slovenia", label: "Slovenia", continent: "Europe" },
+  {
+    code: "sb",
+    value: "solomon-islands",
+    label: "Solomon Islands",
+    continent: "Oceania",
+  },
+  { code: "so", value: "somalia", label: "Somalia", continent: "Africa" },
+  {
+    code: "za",
+    value: "south-africa",
+    label: "South Africa",
+    continent: "Africa",
+  },
+  { code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" },
+  {
+    code: "ss",
+    value: "south-sudan",
+    label: "South Sudan",
+    continent: "Africa",
+  },
+  { code: "es", value: "spain", label: "Spain", continent: "Europe" },
+  { code: "lk", value: "sri-lanka", label: "Sri Lanka", continent: "Asia" },
+  { code: "sd", value: "sudan", label: "Sudan", continent: "Africa" },
+  {
+    code: "sr",
+    value: "suriname",
+    label: "Suriname",
+    continent: "South America",
+  },
+  { code: "se", value: "sweden", label: "Sweden", continent: "Europe" },
+  {
+    code: "ch",
+    value: "switzerland",
+    label: "Switzerland",
+    continent: "Europe",
+  },
+  { code: "sy", value: "syria", label: "Syria", continent: "Asia" },
+  { code: "tw", value: "taiwan", label: "Taiwan", continent: "Asia" },
+  { code: "tj", value: "tajikistan", label: "Tajikistan", continent: "Asia" },
+  { code: "tz", value: "tanzania", label: "Tanzania", continent: "Africa" },
+  { code: "th", value: "thailand", label: "Thailand", continent: "Asia" },
+  { code: "tl", value: "timor-leste", label: "Timor-Leste", continent: "Asia" },
+  { code: "tg", value: "togo", label: "Togo", continent: "Africa" },
+  { code: "to", value: "tonga", label: "Tonga", continent: "Oceania" },
+  {
+    code: "tt",
+    value: "trinidad-and-tobago",
+    label: "Trinidad and Tobago",
+    continent: "North America",
+  },
+  { code: "tn", value: "tunisia", label: "Tunisia", continent: "Africa" },
+  { code: "tr", value: "turkey", label: "Turkey", continent: "Asia" },
+  {
+    code: "tm",
+    value: "turkmenistan",
+    label: "Turkmenistan",
+    continent: "Asia",
+  },
+  { code: "tv", value: "tuvalu", label: "Tuvalu", continent: "Oceania" },
+  { code: "ug", value: "uganda", label: "Uganda", continent: "Africa" },
+  { code: "ua", value: "ukraine", label: "Ukraine", continent: "Europe" },
+  {
+    code: "ae",
+    value: "united-arab-emirates",
+    label: "United Arab Emirates",
+    continent: "Asia",
+  },
+  {
+    code: "gb",
+    value: "united-kingdom",
+    label: "United Kingdom",
+    continent: "Europe",
+  },
+  {
+    code: "us",
+    value: "united-states",
+    label: "United States",
+    continent: "North America",
+  },
+  {
+    code: "uy",
+    value: "uruguay",
+    label: "Uruguay",
+    continent: "South America",
+  },
+  { code: "uz", value: "uzbekistan", label: "Uzbekistan", continent: "Asia" },
+  { code: "vu", value: "vanuatu", label: "Vanuatu", continent: "Oceania" },
+  {
+    code: "va",
+    value: "vatican-city",
+    label: "Vatican City",
+    continent: "Europe",
+  },
+  {
+    code: "ve",
+    value: "venezuela",
+    label: "Venezuela",
+    continent: "South America",
+  },
+  { code: "vn", value: "vietnam", label: "Vietnam", continent: "Asia" },
+  { code: "ye", value: "yemen", label: "Yemen", continent: "Asia" },
+  { code: "zm", value: "zambia", label: "Zambia", continent: "Africa" },
+  { code: "zw", value: "zimbabwe", label: "Zimbabwe", continent: "Africa" },
+]
+
+const items = [
+  {
+    label: "Select a framework",
+    value: null,
+  },
+  {
+    label: "React",
+    value: "react",
+  },
+  {
+    label: "Vue",
+    value: "vue",
+  },
+  {
+    label: "Angular",
+    value: "angular",
+  },
+  {
+    label: "Svelte",
+    value: "svelte",
+  },
+  {
+    label: "Solid",
+    value: "solid",
+  },
+  {
+    label: "Preact",
+    value: "preact",
+  },
+  {
+    label: "Next.js",
+    value: "next.js",
+  },
+]
+
+export function ComboboxWithCustomItems() {
+  return (
+    <Combobox
+      items={countries.filter((country) => country.code !== "")}
+      itemToStringValue={(country: (typeof countries)[number]) => country.label}
+    >
+      <ComboboxInput placeholder="Search countries..." />
+      <ComboboxContent>
+        <ComboboxEmpty>No countries found.</ComboboxEmpty>
+        <ComboboxList>
+          {(country) => (
+            <ComboboxItem key={country.code} value={country}>
+              <Item size="xs" className="p-0">
+                <ItemContent>
+                  <ItemTitle className="whitespace-nowrap">
+                    {country.label}
+                  </ItemTitle>
+                  <ItemDescription>
+                    {country.continent} ({country.code})
+                  </ItemDescription>
+                </ItemContent>
+              </Item>
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/base/combobox-with-form.tsx b/apps/v4/examples/base/combobox-with-form.tsx
new file mode 100644
index 000000000..3febdced0
--- /dev/null
+++ b/apps/v4/examples/base/combobox-with-form.tsx
@@ -0,0 +1,107 @@
+import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
+import { Card, CardContent, CardFooter } from "@/examples/base/ui/card"
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/examples/base/ui/combobox"
+import { Field, FieldGroup, FieldLabel } from "@/examples/base/ui/field"
+import { Select } from "@/examples/base/ui/select"
+import { toast } from "sonner"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+const items = [
+  {
+    label: "Select a framework",
+    value: null,
+  },
+  {
+    label: "React",
+    value: "react",
+  },
+  {
+    label: "Vue",
+    value: "vue",
+  },
+  {
+    label: "Angular",
+    value: "angular",
+  },
+  {
+    label: "Svelte",
+    value: "svelte",
+  },
+  {
+    label: "Solid",
+    value: "solid",
+  },
+  {
+    label: "Preact",
+    value: "preact",
+  },
+  {
+    label: "Next.js",
+    value: "next.js",
+  },
+]
+
+export function ComboboxWithForm() {
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    const formData = new FormData(event.target as HTMLFormElement)
+    const framework = formData.get("framework") as string
+    toast(`You selected ${framework} as your framework.`)
+  }
+
+  return (
+    <Card className="w-full max-w-sm" size="sm">
+      <CardContent>
+        <form
+          id="form-with-combobox"
+          className="w-full"
+          onSubmit={handleSubmit}
+        >
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="framework">Framework</FieldLabel>
+              <Combobox items={frameworks}>
+                <ComboboxInput
+                  id="framework"
+                  name="framework"
+                  placeholder="Select a framework"
+                  required
+                />
+                <ComboboxContent>
+                  <ComboboxEmpty>No items found.</ComboboxEmpty>
+                  <ComboboxList>
+                    {(item) => (
+                      <ComboboxItem key={item} value={item}>
+                        {item}
+                      </ComboboxItem>
+                    )}
+                  </ComboboxList>
+                </ComboboxContent>
+              </Combobox>
+            </Field>
+          </FieldGroup>
+        </form>
+      </CardContent>
+      <CardFooter>
+        <Button type="submit" form="form-with-combobox">
+          Submit
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/combobox-with-groups-and-separator.tsx b/apps/v4/examples/base/combobox-with-groups-and-separator.tsx
new file mode 100644
index 000000000..a0ebad2cb
--- /dev/null
+++ b/apps/v4/examples/base/combobox-with-groups-and-separator.tsx
@@ -0,0 +1,110 @@
+import {
+  Combobox,
+  ComboboxCollection,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxSeparator,
+} from "@/examples/base/ui/combobox"
+import { Select } from "@/examples/base/ui/select"
+
+const timezones = [
+  {
+    value: "Americas",
+    items: [
+      "(GMT-5) New York",
+      "(GMT-8) Los Angeles",
+      "(GMT-6) Chicago",
+      "(GMT-5) Toronto",
+      "(GMT-8) Vancouver",
+      "(GMT-3) São Paulo",
+    ],
+  },
+  {
+    value: "Europe",
+    items: [
+      "(GMT+0) London",
+      "(GMT+1) Paris",
+      "(GMT+1) Berlin",
+      "(GMT+1) Rome",
+      "(GMT+1) Madrid",
+      "(GMT+1) Amsterdam",
+    ],
+  },
+  {
+    value: "Asia/Pacific",
+    items: [
+      "(GMT+9) Tokyo",
+      "(GMT+8) Shanghai",
+      "(GMT+8) Singapore",
+      "(GMT+4) Dubai",
+      "(GMT+11) Sydney",
+      "(GMT+9) Seoul",
+    ],
+  },
+] as const
+
+const items = [
+  {
+    label: "Select a framework",
+    value: null,
+  },
+  {
+    label: "React",
+    value: "react",
+  },
+  {
+    label: "Vue",
+    value: "vue",
+  },
+  {
+    label: "Angular",
+    value: "angular",
+  },
+  {
+    label: "Svelte",
+    value: "svelte",
+  },
+  {
+    label: "Solid",
+    value: "solid",
+  },
+  {
+    label: "Preact",
+    value: "preact",
+  },
+  {
+    label: "Next.js",
+    value: "next.js",
+  },
+]
+
+export function ComboboxWithGroupsAndSeparator() {
+  return (
+    <Combobox items={timezones}>
+      <ComboboxInput placeholder="Select a timezone" />
+      <ComboboxContent>
+        <ComboboxEmpty>No timezones found.</ComboboxEmpty>
+        <ComboboxList>
+          {(group) => (
+            <ComboboxGroup key={group.value} items={group.items}>
+              <ComboboxLabel>{group.value}</ComboboxLabel>
+              <ComboboxCollection>
+                {(item) => (
+                  <ComboboxItem key={item} value={item}>
+                    {item}
+                  </ComboboxItem>
+                )}
+              </ComboboxCollection>
+              <ComboboxSeparator />
+            </ComboboxGroup>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/base/combobox-with-groups.tsx b/apps/v4/examples/base/combobox-with-groups.tsx
new file mode 100644
index 000000000..f978629fc
--- /dev/null
+++ b/apps/v4/examples/base/combobox-with-groups.tsx
@@ -0,0 +1,108 @@
+import {
+  Combobox,
+  ComboboxCollection,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+} from "@/examples/base/ui/combobox"
+import { Select } from "@/examples/base/ui/select"
+
+const timezones = [
+  {
+    value: "Americas",
+    items: [
+      "(GMT-5) New York",
+      "(GMT-8) Los Angeles",
+      "(GMT-6) Chicago",
+      "(GMT-5) Toronto",
+      "(GMT-8) Vancouver",
+      "(GMT-3) São Paulo",
+    ],
+  },
+  {
+    value: "Europe",
+    items: [
+      "(GMT+0) London",
+      "(GMT+1) Paris",
+      "(GMT+1) Berlin",
+      "(GMT+1) Rome",
+      "(GMT+1) Madrid",
+      "(GMT+1) Amsterdam",
+    ],
+  },
+  {
+    value: "Asia/Pacific",
+    items: [
+      "(GMT+9) Tokyo",
+      "(GMT+8) Shanghai",
+      "(GMT+8) Singapore",
+      "(GMT+4) Dubai",
+      "(GMT+11) Sydney",
+      "(GMT+9) Seoul",
+    ],
+  },
+] as const
+
+const items = [
+  {
+    label: "Select a framework",
+    value: null,
+  },
+  {
+    label: "React",
+    value: "react",
+  },
+  {
+    label: "Vue",
+    value: "vue",
+  },
+  {
+    label: "Angular",
+    value: "angular",
+  },
+  {
+    label: "Svelte",
+    value: "svelte",
+  },
+  {
+    label: "Solid",
+    value: "solid",
+  },
+  {
+    label: "Preact",
+    value: "preact",
+  },
+  {
+    label: "Next.js",
+    value: "next.js",
+  },
+]
+
+export function ComboboxWithGroups() {
+  return (
+    <Combobox items={timezones}>
+      <ComboboxInput placeholder="Select a timezone" />
+      <ComboboxContent>
+        <ComboboxEmpty>No timezones found.</ComboboxEmpty>
+        <ComboboxList>
+          {(group) => (
+            <ComboboxGroup key={group.value} items={group.items}>
+              <ComboboxLabel>{group.value}</ComboboxLabel>
+              <ComboboxCollection>
+                {(item) => (
+                  <ComboboxItem key={item} value={item}>
+                    {item}
+                  </ComboboxItem>
+                )}
+              </ComboboxCollection>
+            </ComboboxGroup>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/base/combobox-with-other-inputs.tsx b/apps/v4/examples/base/combobox-with-other-inputs.tsx
new file mode 100644
index 000000000..8126e6579
--- /dev/null
+++ b/apps/v4/examples/base/combobox-with-other-inputs.tsx
@@ -0,0 +1,115 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/examples/base/ui/combobox"
+import { Input } from "@/examples/base/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/base/ui/input-group"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+import { ChevronDownIcon } from "lucide-react"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+const items = [
+  {
+    label: "Select a framework",
+    value: null,
+  },
+  {
+    label: "React",
+    value: "react",
+  },
+  {
+    label: "Vue",
+    value: "vue",
+  },
+  {
+    label: "Angular",
+    value: "angular",
+  },
+  {
+    label: "Svelte",
+    value: "svelte",
+  },
+  {
+    label: "Solid",
+    value: "solid",
+  },
+  {
+    label: "Preact",
+    value: "preact",
+  },
+  {
+    label: "Next.js",
+    value: "next.js",
+  },
+]
+
+export function ComboboxWithOtherInputs() {
+  return (
+    <>
+      <Combobox items={frameworks}>
+        <ComboboxInput placeholder="Select a framework" className="w-52" />
+        <ComboboxContent>
+          <ComboboxEmpty>No items found.</ComboboxEmpty>
+          <ComboboxList>
+            {(item) => (
+              <ComboboxItem key={item} value={item}>
+                {item}
+              </ComboboxItem>
+            )}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+      <Select items={items}>
+        <SelectTrigger className="w-52">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            {items.map((item) => (
+              <SelectItem key={item.value} value={item.value}>
+                {item.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <Button
+        variant="outline"
+        className="text-muted-foreground w-52 justify-between font-normal"
+      >
+        Select a framework
+        <ChevronDownIcon />
+      </Button>
+      <Input placeholder="Select a framework" className="w-52" />
+      <InputGroup className="w-52">
+        <InputGroupInput placeholder="Select a framework" />
+        <InputGroupAddon align="inline-end">
+          <ChevronDownIcon />
+        </InputGroupAddon>
+      </InputGroup>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/comboxbox-input-addon.tsx b/apps/v4/examples/base/comboxbox-input-addon.tsx
new file mode 100644
index 000000000..8b9d4043b
--- /dev/null
+++ b/apps/v4/examples/base/comboxbox-input-addon.tsx
@@ -0,0 +1,115 @@
+import {
+  Combobox,
+  ComboboxCollection,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+} from "@/examples/base/ui/combobox"
+import { Input } from "@/examples/base/ui/input"
+import { InputGroup, InputGroupAddon } from "@/examples/base/ui/input-group"
+import { Select } from "@/examples/base/ui/select"
+import { GlobeIcon } from "lucide-react"
+
+const timezones = [
+  {
+    value: "Americas",
+    items: [
+      "(GMT-5) New York",
+      "(GMT-8) Los Angeles",
+      "(GMT-6) Chicago",
+      "(GMT-5) Toronto",
+      "(GMT-8) Vancouver",
+      "(GMT-3) São Paulo",
+    ],
+  },
+  {
+    value: "Europe",
+    items: [
+      "(GMT+0) London",
+      "(GMT+1) Paris",
+      "(GMT+1) Berlin",
+      "(GMT+1) Rome",
+      "(GMT+1) Madrid",
+      "(GMT+1) Amsterdam",
+    ],
+  },
+  {
+    value: "Asia/Pacific",
+    items: [
+      "(GMT+9) Tokyo",
+      "(GMT+8) Shanghai",
+      "(GMT+8) Singapore",
+      "(GMT+4) Dubai",
+      "(GMT+11) Sydney",
+      "(GMT+9) Seoul",
+    ],
+  },
+] as const
+
+const items = [
+  {
+    label: "Select a framework",
+    value: null,
+  },
+  {
+    label: "React",
+    value: "react",
+  },
+  {
+    label: "Vue",
+    value: "vue",
+  },
+  {
+    label: "Angular",
+    value: "angular",
+  },
+  {
+    label: "Svelte",
+    value: "svelte",
+  },
+  {
+    label: "Solid",
+    value: "solid",
+  },
+  {
+    label: "Preact",
+    value: "preact",
+  },
+  {
+    label: "Next.js",
+    value: "next.js",
+  },
+]
+
+export function ComboxboxInputAddon() {
+  return (
+    <Combobox items={timezones}>
+      <ComboboxInput placeholder="Select a timezone">
+        <InputGroupAddon>
+          <GlobeIcon />
+        </InputGroupAddon>
+      </ComboboxInput>
+      <ComboboxContent alignOffset={-28} className="w-60">
+        <ComboboxEmpty>No timezones found.</ComboboxEmpty>
+        <ComboboxList>
+          {(group) => (
+            <ComboboxGroup key={group.value} items={group.items}>
+              <ComboboxLabel>{group.value}</ComboboxLabel>
+              <ComboboxCollection>
+                {(item) => (
+                  <ComboboxItem key={item} value={item}>
+                    {item}
+                  </ComboboxItem>
+                )}
+              </ComboboxCollection>
+            </ComboboxGroup>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/base/command-basic.tsx b/apps/v4/examples/base/command-basic.tsx
new file mode 100644
index 000000000..984836011
--- /dev/null
+++ b/apps/v4/examples/base/command-basic.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/examples/base/ui/command"
+
+export function CommandBasic() {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Button onClick={() => setOpen(true)} variant="outline" className="w-fit">
+        Open Menu
+      </Button>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <Command>
+          <CommandInput placeholder="Type a command or search..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Suggestions">
+              <CommandItem>Calendar</CommandItem>
+              <CommandItem>Search Emoji</CommandItem>
+              <CommandItem>Calculator</CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </CommandDialog>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/command-many-items.tsx b/apps/v4/examples/base/command-many-items.tsx
new file mode 100644
index 000000000..1118a6671
--- /dev/null
+++ b/apps/v4/examples/base/command-many-items.tsx
@@ -0,0 +1,181 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/examples/base/ui/command"
+import {
+  BellIcon,
+  CalculatorIcon,
+  CalendarIcon,
+  ClipboardPasteIcon,
+  CodeIcon,
+  CopyIcon,
+  CreditCardIcon,
+  FileTextIcon,
+  FolderIcon,
+  FolderPlusIcon,
+  HelpCircleIcon,
+  HomeIcon,
+  ImageIcon,
+  InboxIcon,
+  LayoutGridIcon,
+  ListIcon,
+  PlusIcon,
+  ScissorsIcon,
+  SettingsIcon,
+  TrashIcon,
+  UserIcon,
+  ZoomInIcon,
+  ZoomOutIcon,
+} from "lucide-react"
+
+export function CommandManyItems() {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Button onClick={() => setOpen(true)} variant="outline" className="w-fit">
+        Open Menu
+      </Button>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <Command>
+          <CommandInput placeholder="Type a command or search..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Navigation">
+              <CommandItem>
+                <HomeIcon />
+                <span>Home</span>
+                <CommandShortcut>⌘H</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <InboxIcon />
+                <span>Inbox</span>
+                <CommandShortcut>⌘I</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <FileTextIcon />
+                <span>Documents</span>
+                <CommandShortcut>⌘D</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <FolderIcon />
+                <span>Folders</span>
+                <CommandShortcut>⌘F</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Actions">
+              <CommandItem>
+                <PlusIcon />
+                <span>New File</span>
+                <CommandShortcut>⌘N</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <FolderPlusIcon />
+                <span>New Folder</span>
+                <CommandShortcut>⇧⌘N</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <CopyIcon />
+                <span>Copy</span>
+                <CommandShortcut>⌘C</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <ScissorsIcon />
+                <span>Cut</span>
+                <CommandShortcut>⌘X</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <ClipboardPasteIcon />
+                <span>Paste</span>
+                <CommandShortcut>⌘V</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <TrashIcon />
+                <span>Delete</span>
+                <CommandShortcut>⌫</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="View">
+              <CommandItem>
+                <LayoutGridIcon />
+                <span>Grid View</span>
+              </CommandItem>
+              <CommandItem>
+                <ListIcon />
+                <span>List View</span>
+              </CommandItem>
+              <CommandItem>
+                <ZoomInIcon />
+                <span>Zoom In</span>
+                <CommandShortcut>⌘+</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <ZoomOutIcon />
+                <span>Zoom Out</span>
+                <CommandShortcut>⌘-</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Account">
+              <CommandItem>
+                <UserIcon />
+                <span>Profile</span>
+                <CommandShortcut>⌘P</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <CreditCardIcon />
+                <span>Billing</span>
+                <CommandShortcut>⌘B</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <SettingsIcon />
+                <span>Settings</span>
+                <CommandShortcut>⌘S</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <BellIcon />
+                <span>Notifications</span>
+              </CommandItem>
+              <CommandItem>
+                <HelpCircleIcon />
+                <span>Help & Support</span>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Tools">
+              <CommandItem>
+                <CalculatorIcon />
+                <span>Calculator</span>
+              </CommandItem>
+              <CommandItem>
+                <CalendarIcon />
+                <span>Calendar</span>
+              </CommandItem>
+              <CommandItem>
+                <ImageIcon />
+                <span>Image Editor</span>
+              </CommandItem>
+              <CommandItem>
+                <CodeIcon />
+                <span>Code Editor</span>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </CommandDialog>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/command-with-groups.tsx b/apps/v4/examples/base/command-with-groups.tsx
new file mode 100644
index 000000000..6477cc370
--- /dev/null
+++ b/apps/v4/examples/base/command-with-groups.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/examples/base/ui/command"
+import {
+  CalculatorIcon,
+  CalendarIcon,
+  CreditCardIcon,
+  SettingsIcon,
+  SmileIcon,
+  UserIcon,
+} from "lucide-react"
+
+export function CommandWithGroups() {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Button onClick={() => setOpen(true)} variant="outline" className="w-fit">
+        Open Menu
+      </Button>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <Command>
+          <CommandInput placeholder="Type a command or search..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Suggestions">
+              <CommandItem>
+                <CalendarIcon />
+                <span>Calendar</span>
+              </CommandItem>
+              <CommandItem>
+                <SmileIcon />
+                <span>Search Emoji</span>
+              </CommandItem>
+              <CommandItem>
+                <CalculatorIcon />
+                <span>Calculator</span>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Settings">
+              <CommandItem>
+                <UserIcon />
+                <span>Profile</span>
+                <CommandShortcut>⌘P</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <CreditCardIcon />
+                <span>Billing</span>
+                <CommandShortcut>⌘B</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <SettingsIcon />
+                <span>Settings</span>
+                <CommandShortcut>⌘S</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </CommandDialog>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/command-with-shortcuts.tsx b/apps/v4/examples/base/command-with-shortcuts.tsx
new file mode 100644
index 000000000..58ffeeeac
--- /dev/null
+++ b/apps/v4/examples/base/command-with-shortcuts.tsx
@@ -0,0 +1,52 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from "@/examples/base/ui/command"
+import { CreditCardIcon, SettingsIcon, UserIcon } from "lucide-react"
+
+export function CommandWithShortcuts() {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Button onClick={() => setOpen(true)} variant="outline" className="w-fit">
+        Open Menu
+      </Button>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <Command>
+          <CommandInput placeholder="Type a command or search..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Settings">
+              <CommandItem>
+                <UserIcon />
+                <span>Profile</span>
+                <CommandShortcut>⌘P</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <CreditCardIcon />
+                <span>Billing</span>
+                <CommandShortcut>⌘B</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <SettingsIcon />
+                <span>Settings</span>
+                <CommandShortcut>⌘S</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </CommandDialog>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/context-menu-basic.tsx b/apps/v4/examples/base/context-menu-basic.tsx
new file mode 100644
index 000000000..f336e2905
--- /dev/null
+++ b/apps/v4/examples/base/context-menu-basic.tsx
@@ -0,0 +1,24 @@
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/examples/base/ui/context-menu"
+
+export function ContextMenuBasic() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuGroup>
+          <ContextMenuItem>Back</ContextMenuItem>
+          <ContextMenuItem disabled>Forward</ContextMenuItem>
+          <ContextMenuItem>Reload</ContextMenuItem>
+        </ContextMenuGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/v4/examples/base/context-menu-in-dialog.tsx b/apps/v4/examples/base/context-menu-in-dialog.tsx
new file mode 100644
index 000000000..f21165692
--- /dev/null
+++ b/apps/v4/examples/base/context-menu-in-dialog.tsx
@@ -0,0 +1,89 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@/examples/base/ui/context-menu"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/base/ui/dialog"
+import {
+  ClipboardPasteIcon,
+  CopyIcon,
+  ScissorsIcon,
+  TrashIcon,
+} from "lucide-react"
+
+export function ContextMenuInDialog() {
+  return (
+    <>
+      <Dialog>
+        <DialogTrigger render={<Button variant="outline" />}>
+          Open Dialog
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Context Menu Example</DialogTitle>
+            <DialogDescription>
+              Right click on the area below to see the context menu.
+            </DialogDescription>
+          </DialogHeader>
+          <ContextMenu>
+            <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+              Right click here
+            </ContextMenuTrigger>
+            <ContextMenuContent>
+              <ContextMenuGroup>
+                <ContextMenuItem>
+                  <CopyIcon />
+                  Copy
+                </ContextMenuItem>
+                <ContextMenuItem>
+                  <ScissorsIcon />
+                  Cut
+                </ContextMenuItem>
+                <ContextMenuItem>
+                  <ClipboardPasteIcon />
+                  Paste
+                </ContextMenuItem>
+              </ContextMenuGroup>
+              <ContextMenuSeparator />
+              <ContextMenuSub>
+                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>
+                <ContextMenuSubContent>
+                  <ContextMenuGroup>
+                    <ContextMenuItem>Save Page...</ContextMenuItem>
+                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+                    <ContextMenuItem>Name Window...</ContextMenuItem>
+                  </ContextMenuGroup>
+                  <ContextMenuSeparator />
+                  <ContextMenuGroup>
+                    <ContextMenuItem>Developer Tools</ContextMenuItem>
+                  </ContextMenuGroup>
+                </ContextMenuSubContent>
+              </ContextMenuSub>
+              <ContextMenuSeparator />
+              <ContextMenuGroup>
+                <ContextMenuItem variant="destructive">
+                  <TrashIcon />
+                  Delete
+                </ContextMenuItem>
+              </ContextMenuGroup>
+            </ContextMenuContent>
+          </ContextMenu>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/context-menu-with-checkboxes.tsx b/apps/v4/examples/base/context-menu-with-checkboxes.tsx
new file mode 100644
index 000000000..aaf692b17
--- /dev/null
+++ b/apps/v4/examples/base/context-menu-with-checkboxes.tsx
@@ -0,0 +1,28 @@
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuTrigger,
+} from "@/examples/base/ui/context-menu"
+
+export function ContextMenuWithCheckboxes() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuGroup>
+          <ContextMenuCheckboxItem defaultChecked>
+            Show Bookmarks Bar
+          </ContextMenuCheckboxItem>
+          <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+          <ContextMenuCheckboxItem defaultChecked>
+            Show Developer Tools
+          </ContextMenuCheckboxItem>
+        </ContextMenuGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/v4/examples/base/context-menu-with-destructive.tsx b/apps/v4/examples/base/context-menu-with-destructive.tsx
new file mode 100644
index 000000000..ada6af5c8
--- /dev/null
+++ b/apps/v4/examples/base/context-menu-with-destructive.tsx
@@ -0,0 +1,42 @@
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/examples/base/ui/context-menu"
+import { ArchiveIcon, PencilIcon, ShareIcon, TrashIcon } from "lucide-react"
+
+export function ContextMenuWithDestructive() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuGroup>
+          <ContextMenuItem>
+            <PencilIcon />
+            Edit
+          </ContextMenuItem>
+          <ContextMenuItem>
+            <ShareIcon />
+            Share
+          </ContextMenuItem>
+        </ContextMenuGroup>
+        <ContextMenuSeparator />
+        <ContextMenuGroup>
+          <ContextMenuItem>
+            <ArchiveIcon />
+            Archive
+          </ContextMenuItem>
+          <ContextMenuItem variant="destructive">
+            <TrashIcon />
+            Delete
+          </ContextMenuItem>
+        </ContextMenuGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/v4/examples/base/context-menu-with-groups.tsx b/apps/v4/examples/base/context-menu-with-groups.tsx
new file mode 100644
index 000000000..4dd9b50b3
--- /dev/null
+++ b/apps/v4/examples/base/context-menu-with-groups.tsx
@@ -0,0 +1,71 @@
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuTrigger,
+} from "@/examples/base/ui/context-menu"
+
+export function ContextMenuWithGroups() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuGroup>
+          <ContextMenuLabel>File</ContextMenuLabel>
+          <ContextMenuItem>
+            New File
+            <ContextMenuShortcut>⌘N</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem>
+            Open File
+            <ContextMenuShortcut>⌘O</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem>
+            Save
+            <ContextMenuShortcut>⌘S</ContextMenuShortcut>
+          </ContextMenuItem>
+        </ContextMenuGroup>
+        <ContextMenuSeparator />
+        <ContextMenuGroup>
+          <ContextMenuLabel>Edit</ContextMenuLabel>
+          <ContextMenuItem>
+            Undo
+            <ContextMenuShortcut>⌘Z</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem>
+            Redo
+            <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>
+          </ContextMenuItem>
+        </ContextMenuGroup>
+        <ContextMenuSeparator />
+        <ContextMenuGroup>
+          <ContextMenuItem>
+            Cut
+            <ContextMenuShortcut>⌘X</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem>
+            Copy
+            <ContextMenuShortcut>⌘C</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem>
+            Paste
+            <ContextMenuShortcut>⌘V</ContextMenuShortcut>
+          </ContextMenuItem>
+        </ContextMenuGroup>
+        <ContextMenuSeparator />
+        <ContextMenuGroup>
+          <ContextMenuItem variant="destructive">
+            Delete
+            <ContextMenuShortcut>⌫</ContextMenuShortcut>
+          </ContextMenuItem>
+        </ContextMenuGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/v4/examples/base/context-menu-with-icons.tsx b/apps/v4/examples/base/context-menu-with-icons.tsx
new file mode 100644
index 000000000..f54faf3a5
--- /dev/null
+++ b/apps/v4/examples/base/context-menu-with-icons.tsx
@@ -0,0 +1,47 @@
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/examples/base/ui/context-menu"
+import {
+  ClipboardPasteIcon,
+  CopyIcon,
+  ScissorsIcon,
+  TrashIcon,
+} from "lucide-react"
+
+export function ContextMenuWithIcons() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuGroup>
+          <ContextMenuItem>
+            <CopyIcon />
+            Copy
+          </ContextMenuItem>
+          <ContextMenuItem>
+            <ScissorsIcon />
+            Cut
+          </ContextMenuItem>
+          <ContextMenuItem>
+            <ClipboardPasteIcon />
+            Paste
+          </ContextMenuItem>
+        </ContextMenuGroup>
+        <ContextMenuSeparator />
+        <ContextMenuGroup>
+          <ContextMenuItem variant="destructive">
+            <TrashIcon />
+            Delete
+          </ContextMenuItem>
+        </ContextMenuGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/v4/examples/base/context-menu-with-radio.tsx b/apps/v4/examples/base/context-menu-with-radio.tsx
new file mode 100644
index 000000000..e1c962803
--- /dev/null
+++ b/apps/v4/examples/base/context-menu-with-radio.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/examples/base/ui/context-menu"
+
+export function ContextMenuWithRadio() {
+  const [user, setUser] = React.useState("pedro")
+  const [theme, setTheme] = React.useState("light")
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuGroup>
+          <ContextMenuLabel>People</ContextMenuLabel>
+          <ContextMenuRadioGroup value={user} onValueChange={setUser}>
+            <ContextMenuRadioItem value="pedro">
+              Pedro Duarte
+            </ContextMenuRadioItem>
+            <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
+          </ContextMenuRadioGroup>
+        </ContextMenuGroup>
+        <ContextMenuSeparator />
+        <ContextMenuGroup>
+          <ContextMenuLabel>Theme</ContextMenuLabel>
+          <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>
+            <ContextMenuRadioItem value="light">Light</ContextMenuRadioItem>
+            <ContextMenuRadioItem value="dark">Dark</ContextMenuRadioItem>
+            <ContextMenuRadioItem value="system">System</ContextMenuRadioItem>
+          </ContextMenuRadioGroup>
+        </ContextMenuGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/v4/examples/base/context-menu-with-shortcuts.tsx b/apps/v4/examples/base/context-menu-with-shortcuts.tsx
new file mode 100644
index 000000000..c175fe54c
--- /dev/null
+++ b/apps/v4/examples/base/context-menu-with-shortcuts.tsx
@@ -0,0 +1,46 @@
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuTrigger,
+} from "@/examples/base/ui/context-menu"
+
+export function ContextMenuWithShortcuts() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuGroup>
+          <ContextMenuItem>
+            Back
+            <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem disabled>
+            Forward
+            <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem>
+            Reload
+            <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+          </ContextMenuItem>
+        </ContextMenuGroup>
+        <ContextMenuSeparator />
+        <ContextMenuGroup>
+          <ContextMenuItem>
+            Save
+            <ContextMenuShortcut>⌘S</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem>
+            Save As...
+            <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+          </ContextMenuItem>
+        </ContextMenuGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/v4/examples/base/context-menu-with-sides.tsx b/apps/v4/examples/base/context-menu-with-sides.tsx
new file mode 100644
index 000000000..272ca47ec
--- /dev/null
+++ b/apps/v4/examples/base/context-menu-with-sides.tsx
@@ -0,0 +1,62 @@
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/examples/base/ui/context-menu"
+
+export function ContextMenuWithSides() {
+  return (
+    <div className="grid grid-cols-2 gap-6">
+      <ContextMenu>
+        <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+          Right click (top)
+        </ContextMenuTrigger>
+        <ContextMenuContent side="top">
+          <ContextMenuGroup>
+            <ContextMenuItem>Back</ContextMenuItem>
+            <ContextMenuItem>Forward</ContextMenuItem>
+            <ContextMenuItem>Reload</ContextMenuItem>
+          </ContextMenuGroup>
+        </ContextMenuContent>
+      </ContextMenu>
+      <ContextMenu>
+        <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+          Right click (right)
+        </ContextMenuTrigger>
+        <ContextMenuContent side="right">
+          <ContextMenuGroup>
+            <ContextMenuItem>Back</ContextMenuItem>
+            <ContextMenuItem>Forward</ContextMenuItem>
+            <ContextMenuItem>Reload</ContextMenuItem>
+          </ContextMenuGroup>
+        </ContextMenuContent>
+      </ContextMenu>
+      <ContextMenu>
+        <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+          Right click (bottom)
+        </ContextMenuTrigger>
+        <ContextMenuContent side="bottom">
+          <ContextMenuGroup>
+            <ContextMenuItem>Back</ContextMenuItem>
+            <ContextMenuItem>Forward</ContextMenuItem>
+            <ContextMenuItem>Reload</ContextMenuItem>
+          </ContextMenuGroup>
+        </ContextMenuContent>
+      </ContextMenu>
+      <ContextMenu>
+        <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+          Right click (left)
+        </ContextMenuTrigger>
+        <ContextMenuContent side="left">
+          <ContextMenuGroup>
+            <ContextMenuItem>Back</ContextMenuItem>
+            <ContextMenuItem>Forward</ContextMenuItem>
+            <ContextMenuItem>Reload</ContextMenuItem>
+          </ContextMenuGroup>
+        </ContextMenuContent>
+      </ContextMenu>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/context-menu-with-submenu.tsx b/apps/v4/examples/base/context-menu-with-submenu.tsx
new file mode 100644
index 000000000..769270cfe
--- /dev/null
+++ b/apps/v4/examples/base/context-menu-with-submenu.tsx
@@ -0,0 +1,52 @@
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@/examples/base/ui/context-menu"
+
+export function ContextMenuWithSubmenu() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuGroup>
+          <ContextMenuItem>
+            Copy
+            <ContextMenuShortcut>⌘C</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem>
+            Cut
+            <ContextMenuShortcut>⌘X</ContextMenuShortcut>
+          </ContextMenuItem>
+        </ContextMenuGroup>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
+          <ContextMenuSubContent>
+            <ContextMenuGroup>
+              <ContextMenuItem>Save Page...</ContextMenuItem>
+              <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+              <ContextMenuItem>Name Window...</ContextMenuItem>
+            </ContextMenuGroup>
+            <ContextMenuSeparator />
+            <ContextMenuGroup>
+              <ContextMenuItem>Developer Tools</ContextMenuItem>
+            </ContextMenuGroup>
+            <ContextMenuSeparator />
+            <ContextMenuGroup>
+              <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
+            </ContextMenuGroup>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/v4/examples/base/data-picker-with-dropdowns.tsx b/apps/v4/examples/base/data-picker-with-dropdowns.tsx
new file mode 100644
index 000000000..d7c8b0259
--- /dev/null
+++ b/apps/v4/examples/base/data-picker-with-dropdowns.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
+import { Calendar } from "@/examples/base/ui/calendar"
+import { Field, FieldLabel } from "@/examples/base/ui/field"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/examples/base/ui/popover"
+import { format } from "date-fns"
+import { ChevronDownIcon } from "lucide-react"
+
+export function DataPickerWithDropdowns() {
+  const [date, setDate] = React.useState<Date>()
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <Field className="mx-auto w-72">
+      <Popover open={open} onOpenChange={setOpen}>
+        <FieldLabel htmlFor="date-picker-with-dropdowns-desktop">
+          Date
+        </FieldLabel>
+        <PopoverTrigger
+          render={
+            <Button
+              variant="outline"
+              id="date-picker-with-dropdowns-desktop"
+              className="justify-start px-2.5 font-normal"
+            />
+          }
+        >
+          <ChevronDownIcon className="ml-auto" />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={setDate}
+            captionLayout="dropdown"
+          />
+          <div className="flex gap-2 border-t p-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="w-full"
+              onClick={() => setOpen(false)}
+            >
+              Done
+            </Button>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/date-picker-simple.tsx b/apps/v4/examples/base/date-picker-simple.tsx
new file mode 100644
index 000000000..60d36a71b
--- /dev/null
+++ b/apps/v4/examples/base/date-picker-simple.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
+import { Calendar } from "@/examples/base/ui/calendar"
+import { Field, FieldLabel } from "@/examples/base/ui/field"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/examples/base/ui/popover"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+
+export function DatePickerSimple() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Field className="mx-auto w-72">
+      <FieldLabel htmlFor="date-picker-simple">Date</FieldLabel>
+      <Popover>
+        <PopoverTrigger
+          render={
+            <Button
+              variant="outline"
+              id="date-picker-simple"
+              className="justify-start px-2.5 font-normal"
+            />
+          }
+        >
+          <CalendarIcon />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar mode="single" selected={date} onSelect={setDate} />
+        </PopoverContent>
+      </Popover>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/date-picker-with-range.tsx b/apps/v4/examples/base/date-picker-with-range.tsx
index 26c515e28..1f335b50e 100644
--- a/apps/v4/examples/base/date-picker-with-range.tsx
+++ b/apps/v4/examples/base/date-picker-with-range.tsx
@@ -3,6 +3,7 @@
 import * as React from "react"
 import { Button } from "@/examples/base/ui/button"
 import { Calendar } from "@/examples/base/ui/calendar"
+import { Field, FieldLabel } from "@/examples/base/ui/field"
 import {
   Popover,
   PopoverContent,
@@ -12,28 +13,22 @@ import { addDays, format } from "date-fns"
 import { CalendarIcon } from "lucide-react"
 import { type DateRange } from "react-day-picker"
 
-import { cn } from "@/lib/utils"
-
-export function DatePickerWithRange({
-  className,
-}: React.HTMLAttributes<HTMLDivElement>) {
+export function DatePickerWithRange() {
   const [date, setDate] = React.useState<DateRange | undefined>({
-    from: new Date(2022, 0, 20),
-    to: addDays(new Date(2022, 0, 20), 20),
+    from: new Date(new Date().getFullYear(), 0, 20),
+    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),
   })
 
   return (
-    <div className={cn("grid gap-2", className)}>
+    <Field className="mx-auto w-72">
+      <FieldLabel htmlFor="date-picker-range">Date Picker Range</FieldLabel>
       <Popover>
         <PopoverTrigger
           render={
             <Button
-              id="date"
-              variant={"outline"}
-              className={cn(
-                "w-[300px] justify-start text-left font-normal",
-                !date && "text-muted-foreground"
-              )}
+              variant="outline"
+              id="date-picker-range"
+              className="justify-start px-2.5 font-normal"
             />
           }
         >
@@ -53,7 +48,6 @@ export function DatePickerWithRange({
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align="start">
           <Calendar
-            initialFocus
             mode="range"
             defaultMonth={date?.from}
             selected={date}
@@ -62,6 +56,6 @@ export function DatePickerWithRange({
           />
         </PopoverContent>
       </Popover>
-    </div>
+    </Field>
   )
 }
diff --git a/apps/v4/examples/base/default-item-group.tsx b/apps/v4/examples/base/default-item-group.tsx
new file mode 100644
index 000000000..be74af83b
--- /dev/null
+++ b/apps/v4/examples/base/default-item-group.tsx
@@ -0,0 +1,32 @@
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+
+export function DefaultItemGroup() {
+  return (
+    <ItemGroup>
+      <Item>
+        <ItemContent>
+          <ItemTitle>Item 1</ItemTitle>
+          <ItemDescription>First item in the group.</ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item>
+        <ItemContent>
+          <ItemTitle>Item 2</ItemTitle>
+          <ItemDescription>Second item in the group.</ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item>
+        <ItemContent>
+          <ItemTitle>Item 3</ItemTitle>
+          <ItemDescription>Third item in the group.</ItemDescription>
+        </ItemContent>
+      </Item>
+    </ItemGroup>
+  )
+}
diff --git a/apps/v4/examples/base/dialog-chat-settings.tsx b/apps/v4/examples/base/dialog-chat-settings.tsx
new file mode 100644
index 000000000..c7f653d1d
--- /dev/null
+++ b/apps/v4/examples/base/dialog-chat-settings.tsx
@@ -0,0 +1,429 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
+import { Checkbox } from "@/examples/base/ui/checkbox"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/base/ui/dialog"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+} from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/examples/base/ui/input-group"
+import { Kbd } from "@/examples/base/ui/kbd"
+import {
+  NativeSelect,
+  NativeSelectOption,
+} from "@/examples/base/ui/native-select"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+import { Switch } from "@/examples/base/ui/switch"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/examples/base/ui/tabs"
+import { Textarea } from "@/examples/base/ui/textarea"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/base/ui/tooltip"
+import { InfoIcon } from "lucide-react"
+
+const spokenLanguages = [
+  { label: "Auto", value: "auto" },
+  { label: "English", value: "en" },
+  { label: "Spanish", value: "es" },
+  { label: "French", value: "fr" },
+  { label: "German", value: "de" },
+  { label: "Italian", value: "it" },
+  { label: "Portuguese", value: "pt" },
+  { label: "Russian", value: "ru" },
+  { label: "Chinese", value: "zh" },
+  { label: "Japanese", value: "ja" },
+  { label: "Korean", value: "ko" },
+  { label: "Arabic", value: "ar" },
+  { label: "Hindi", value: "hi" },
+  { label: "Bengali", value: "bn" },
+  { label: "Telugu", value: "te" },
+  { label: "Marathi", value: "mr" },
+  { label: "Kannada", value: "kn" },
+  { label: "Malayalam", value: "ml" },
+]
+
+const voices = [
+  { label: "Samantha", value: "samantha" },
+  { label: "Alex", value: "alex" },
+  { label: "Fred", value: "fred" },
+  { label: "Victoria", value: "victoria" },
+  { label: "Tom", value: "tom" },
+  { label: "Karen", value: "karen" },
+  { label: "Sam", value: "sam" },
+  { label: "Daniel", value: "daniel" },
+]
+
+const themes = [
+  { label: "Light", value: "light" },
+  { label: "Dark", value: "dark" },
+  { label: "System", value: "system" },
+]
+
+const accents = [
+  { label: "Default", value: "default" },
+  { label: "Red", value: "red" },
+  { label: "Blue", value: "blue" },
+  { label: "Green", value: "green" },
+  { label: "Purple", value: "purple" },
+  { label: "Pink", value: "pink" },
+]
+
+export function DialogChatSettings() {
+  const [tab, setTab] = React.useState("general")
+  const [theme, setTheme] = React.useState("system")
+  const [accentColor, setAccentColor] = React.useState("default")
+  const [spokenLanguage, setSpokenLanguage] = React.useState("en")
+  const [voice, setVoice] = React.useState("samantha")
+
+  return (
+    <>
+      <Dialog>
+        <DialogTrigger render={<Button variant="outline" />}>
+          Chat Settings
+        </DialogTrigger>
+        <DialogContent className="min-w-md">
+          <DialogHeader>
+            <DialogTitle>Chat Settings</DialogTitle>
+            <DialogDescription>
+              Customize your chat settings: theme, accent color, spoken
+              language, voice, personality, and custom instructions.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-4">
+            <NativeSelect
+              value={tab}
+              onChange={(e) => setTab(e.target.value)}
+              className="w-full md:hidden"
+            >
+              <NativeSelectOption value="general">General</NativeSelectOption>
+              <NativeSelectOption value="notifications">
+                Notifications
+              </NativeSelectOption>
+              <NativeSelectOption value="personalization">
+                Personalization
+              </NativeSelectOption>
+              <NativeSelectOption value="security">Security</NativeSelectOption>
+            </NativeSelect>
+            <Tabs value={tab} onValueChange={setTab}>
+              <TabsList className="hidden w-full md:flex">
+                <TabsTrigger value="general">General</TabsTrigger>
+                <TabsTrigger value="notifications">Notifications</TabsTrigger>
+                <TabsTrigger value="personalization">
+                  Personalization
+                </TabsTrigger>
+                <TabsTrigger value="security">Security</TabsTrigger>
+              </TabsList>
+              <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]">
+                <TabsContent value="general">
+                  <FieldSet>
+                    <FieldGroup>
+                      <Field orientation="horizontal">
+                        <FieldLabel htmlFor="theme">Theme</FieldLabel>
+                        <Select
+                          items={themes}
+                          value={theme}
+                          onValueChange={(value) => setTheme(value as string)}
+                        >
+                          <SelectTrigger id="theme">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent align="end">
+                            <SelectGroup>
+                              {themes.map((theme) => (
+                                <SelectItem
+                                  key={theme.value}
+                                  value={theme.value}
+                                >
+                                  {theme.label}
+                                </SelectItem>
+                              ))}
+                            </SelectGroup>
+                          </SelectContent>
+                        </Select>
+                      </Field>
+                      <FieldSeparator />
+                      <Field orientation="horizontal">
+                        <FieldLabel htmlFor="accent-color">
+                          Accent Color
+                        </FieldLabel>
+                        <Select
+                          items={accents}
+                          value={accentColor}
+                          onValueChange={(value) =>
+                            setAccentColor(value as string)
+                          }
+                        >
+                          <SelectTrigger id="accent-color">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent align="end">
+                            <SelectGroup>
+                              {accents.map((accent) => (
+                                <SelectItem
+                                  key={accent.value}
+                                  value={accent.value}
+                                >
+                                  {accent.label}
+                                </SelectItem>
+                              ))}
+                            </SelectGroup>
+                          </SelectContent>
+                        </Select>
+                      </Field>
+                      <FieldSeparator />
+                      <Field orientation="responsive">
+                        <FieldContent>
+                          <FieldLabel htmlFor="spoken-language">
+                            Spoken Language
+                          </FieldLabel>
+                          <FieldDescription>
+                            For best results, select the language you mainly
+                            speak. If it&apos;s not listed, it may still be
+                            supported via auto-detection.
+                          </FieldDescription>
+                        </FieldContent>
+                        <Select
+                          items={spokenLanguages}
+                          value={spokenLanguage}
+                          onValueChange={(value) =>
+                            setSpokenLanguage(value as string)
+                          }
+                        >
+                          <SelectTrigger id="spoken-language">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent align="end">
+                            <SelectGroup>
+                              {spokenLanguages.map((language) => (
+                                <SelectItem
+                                  key={language.value}
+                                  value={language.value}
+                                >
+                                  {language.label}
+                                </SelectItem>
+                              ))}
+                            </SelectGroup>
+                          </SelectContent>
+                        </Select>
+                      </Field>
+                      <FieldSeparator />
+                      <Field orientation="horizontal">
+                        <FieldLabel htmlFor="voice">Voice</FieldLabel>
+                        <Select
+                          items={voices}
+                          value={voice}
+                          onValueChange={(value) => setVoice(value as string)}
+                        >
+                          <SelectTrigger id="voice">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent align="end">
+                            <SelectGroup>
+                              {voices.map((voice) => (
+                                <SelectItem
+                                  key={voice.value}
+                                  value={voice.value}
+                                >
+                                  {voice.label}
+                                </SelectItem>
+                              ))}
+                            </SelectGroup>
+                          </SelectContent>
+                        </Select>
+                      </Field>
+                    </FieldGroup>
+                  </FieldSet>
+                </TabsContent>
+                <TabsContent value="notifications">
+                  <FieldGroup>
+                    <FieldSet>
+                      <FieldLabel>Responses</FieldLabel>
+                      <FieldDescription>
+                        Get notified when ChatGPT responds to requests that take
+                        time, like research or image generation.
+                      </FieldDescription>
+                      <FieldGroup data-slot="checkbox-group">
+                        <Field orientation="horizontal">
+                          <Checkbox id="push" defaultChecked disabled />
+                          <FieldLabel htmlFor="push" className="font-normal">
+                            Push notifications
+                          </FieldLabel>
+                        </Field>
+                      </FieldGroup>
+                    </FieldSet>
+                    <FieldSeparator />
+                    <FieldSet>
+                      <FieldLabel>Tasks</FieldLabel>
+                      <FieldDescription>
+                        Get notified when tasks you&apos;ve created have
+                        updates. <a href="#">Manage tasks</a>
+                      </FieldDescription>
+                      <FieldGroup data-slot="checkbox-group">
+                        <Field orientation="horizontal">
+                          <Checkbox id="push-tasks" />
+                          <FieldLabel
+                            htmlFor="push-tasks"
+                            className="font-normal"
+                          >
+                            Push notifications
+                          </FieldLabel>
+                        </Field>
+                        <Field orientation="horizontal">
+                          <Checkbox id="email-tasks" />
+                          <FieldLabel
+                            htmlFor="email-tasks"
+                            className="font-normal"
+                          >
+                            Email notifications
+                          </FieldLabel>
+                        </Field>
+                      </FieldGroup>
+                    </FieldSet>
+                  </FieldGroup>
+                </TabsContent>
+                <TabsContent value="personalization">
+                  <FieldGroup>
+                    <Field orientation="responsive">
+                      <FieldLabel htmlFor="nickname">Nickname</FieldLabel>
+                      <InputGroup>
+                        <InputGroupInput
+                          id="nickname"
+                          placeholder="Broski"
+                          className="@md/field-group:max-w-[200px]"
+                        />
+                        <InputGroupAddon align="inline-end">
+                          <Tooltip>
+                            <TooltipTrigger
+                              render={<InputGroupButton size="icon-xs" />}
+                            >
+                              <InfoIcon />
+                            </TooltipTrigger>
+                            <TooltipContent className="flex items-center gap-2">
+                              Used to identify you in the chat. <Kbd>N</Kbd>
+                            </TooltipContent>
+                          </Tooltip>
+                        </InputGroupAddon>
+                      </InputGroup>
+                    </Field>
+                    <FieldSeparator />
+                    <Field
+                      orientation="responsive"
+                      className="@md/field-group:flex-col @2xl/field-group:flex-row"
+                    >
+                      <FieldContent>
+                        <FieldLabel htmlFor="about">More about you</FieldLabel>
+                        <FieldDescription>
+                          Tell us more about yourself. This will be used to help
+                          us personalize your experience.
+                        </FieldDescription>
+                      </FieldContent>
+                      <Textarea
+                        id="about"
+                        placeholder="I'm a software engineer..."
+                        className="min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]"
+                      />
+                    </Field>
+                    <FieldSeparator />
+                    <FieldLabel>
+                      <Field orientation="horizontal">
+                        <FieldContent>
+                          <FieldLabel htmlFor="customization">
+                            Enable customizations
+                          </FieldLabel>
+                          <FieldDescription>
+                            Enable customizations to make ChatGPT more
+                            personalized.
+                          </FieldDescription>
+                        </FieldContent>
+                        <Switch id="customization" defaultChecked />
+                      </Field>
+                    </FieldLabel>
+                  </FieldGroup>
+                </TabsContent>
+                <TabsContent value="security">
+                  <FieldGroup>
+                    <Field orientation="horizontal">
+                      <FieldContent>
+                        <FieldLabel htmlFor="2fa">
+                          Multi-factor authentication
+                        </FieldLabel>
+                        <FieldDescription>
+                          Enable multi-factor authentication to secure your
+                          account. If you do not have a two-factor
+                          authentication device, you can use a one-time code
+                          sent to your email.
+                        </FieldDescription>
+                      </FieldContent>
+                      <Switch id="2fa" />
+                    </Field>
+                    <FieldSeparator />
+                    <Field orientation="horizontal">
+                      <FieldContent>
+                        <FieldTitle>Log out</FieldTitle>
+                        <FieldDescription>
+                          Log out of your account on this device.
+                        </FieldDescription>
+                      </FieldContent>
+                      <Button variant="outline" size="sm">
+                        Log Out
+                      </Button>
+                    </Field>
+                    <FieldSeparator />
+                    <Field orientation="horizontal">
+                      <FieldContent>
+                        <FieldTitle>Log out of all devices</FieldTitle>
+                        <FieldDescription>
+                          This will log you out of all devices, including the
+                          current session. It may take up to 30 minutes for the
+                          changes to take effect.
+                        </FieldDescription>
+                      </FieldContent>
+                      <Button variant="outline" size="sm">
+                        Log Out All
+                      </Button>
+                    </Field>
+                  </FieldGroup>
+                </TabsContent>
+              </div>
+            </Tabs>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/dialog-no-close-button.tsx b/apps/v4/examples/base/dialog-no-close-button.tsx
new file mode 100644
index 000000000..1fae94823
--- /dev/null
+++ b/apps/v4/examples/base/dialog-no-close-button.tsx
@@ -0,0 +1,37 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/base/ui/dialog"
+
+export function DialogNoCloseButton() {
+  return (
+    <>
+      <Dialog>
+        <DialogTrigger render={<Button variant="outline" />}>
+          No Close Button
+        </DialogTrigger>
+        <DialogContent showCloseButton={false}>
+          <DialogHeader>
+            <DialogTitle>No Close Button</DialogTitle>
+            <DialogDescription>
+              This dialog doesn&apos;t have a close button in the top-right
+              corner.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <DialogClose render={<Button variant="outline" />}>
+              Close
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/dialog-scrollable-content.tsx b/apps/v4/examples/base/dialog-scrollable-content.tsx
new file mode 100644
index 000000000..de33bbc49
--- /dev/null
+++ b/apps/v4/examples/base/dialog-scrollable-content.tsx
@@ -0,0 +1,45 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/base/ui/dialog"
+
+export function DialogScrollableContent() {
+  return (
+    <>
+      <Dialog>
+        <DialogTrigger render={<Button variant="outline" />}>
+          Scrollable Content
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Scrollable Content</DialogTitle>
+            <DialogDescription>
+              This is a dialog with scrollable content.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
+            {Array.from({ length: 10 }).map((_, index) => (
+              <p
+                key={index}
+                className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+              >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+                sunt in culpa qui officia deserunt mollit anim id est laborum.
+              </p>
+            ))}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/dialog-with-form.tsx b/apps/v4/examples/base/dialog-with-form.tsx
new file mode 100644
index 000000000..eaf6b0302
--- /dev/null
+++ b/apps/v4/examples/base/dialog-with-form.tsx
@@ -0,0 +1,50 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/base/ui/dialog"
+import { Field, FieldGroup, FieldLabel } from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+
+export function DialogWithForm() {
+  return (
+    <Dialog>
+      <form>
+        <DialogTrigger render={<Button variant="outline" />}>
+          Edit Profile
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit profile</DialogTitle>
+            <DialogDescription>
+              Make changes to your profile here. Click save when you&apos;re
+              done. Your profile will be updated immediately.
+            </DialogDescription>
+          </DialogHeader>
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="name-1">Name</FieldLabel>
+              <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="username-1">Username</FieldLabel>
+              <Input id="username-1" name="username" defaultValue="@peduarte" />
+            </Field>
+          </FieldGroup>
+          <DialogFooter>
+            <DialogClose render={<Button variant="outline" />}>
+              Cancel
+            </DialogClose>
+            <Button type="submit">Save changes</Button>
+          </DialogFooter>
+        </DialogContent>
+      </form>
+    </Dialog>
+  )
+}
diff --git a/apps/v4/examples/base/dialog-with-sticky-footer.tsx b/apps/v4/examples/base/dialog-with-sticky-footer.tsx
new file mode 100644
index 000000000..4393ac2ce
--- /dev/null
+++ b/apps/v4/examples/base/dialog-with-sticky-footer.tsx
@@ -0,0 +1,52 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/base/ui/dialog"
+
+export function DialogWithStickyFooter() {
+  return (
+    <>
+      <Dialog>
+        <DialogTrigger render={<Button variant="outline" />}>
+          Sticky Footer
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Scrollable Content</DialogTitle>
+            <DialogDescription>
+              This is a dialog with scrollable content.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
+            {Array.from({ length: 10 }).map((_, index) => (
+              <p
+                key={index}
+                className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+              >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+                sunt in culpa qui officia deserunt mollit anim id est laborum.
+              </p>
+            ))}
+          </div>
+          <DialogFooter>
+            <DialogClose render={<Button variant="outline" />}>
+              Close
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/drawer-scrollable-content.tsx b/apps/v4/examples/base/drawer-scrollable-content.tsx
new file mode 100644
index 000000000..9e111cfbd
--- /dev/null
+++ b/apps/v4/examples/base/drawer-scrollable-content.tsx
@@ -0,0 +1,49 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/examples/base/ui/drawer"
+
+export function DrawerScrollableContent() {
+  return (
+    <Drawer direction="right">
+      <DrawerTrigger asChild>
+        <Button variant="outline">Scrollable Content</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Move Goal</DrawerTitle>
+          <DrawerDescription>Set your daily activity goal.</DrawerDescription>
+        </DrawerHeader>
+        <div className="no-scrollbar overflow-y-auto px-4">
+          {Array.from({ length: 10 }).map((_, index) => (
+            <p
+              key={index}
+              className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          ))}
+        </div>
+        <DrawerFooter>
+          <Button>Submit</Button>
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/apps/v4/examples/base/drawer-with-sides.tsx b/apps/v4/examples/base/drawer-with-sides.tsx
new file mode 100644
index 000000000..374ff8aad
--- /dev/null
+++ b/apps/v4/examples/base/drawer-with-sides.tsx
@@ -0,0 +1,65 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/examples/base/ui/drawer"
+
+const DRAWER_SIDES = ["top", "right", "bottom", "left"] as const
+
+export function DrawerWithSides() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {DRAWER_SIDES.map((side) => (
+        <Drawer
+          key={side}
+          direction={
+            side === "bottom" ? undefined : (side as "top" | "right" | "left")
+          }
+        >
+          <DrawerTrigger asChild>
+            <Button variant="outline" className="capitalize">
+              {side}
+            </Button>
+          </DrawerTrigger>
+          <DrawerContent className="data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]">
+            <DrawerHeader>
+              <DrawerTitle>Move Goal</DrawerTitle>
+              <DrawerDescription>
+                Set your daily activity goal.
+              </DrawerDescription>
+            </DrawerHeader>
+            <div className="no-scrollbar overflow-y-auto px-4">
+              {Array.from({ length: 10 }).map((_, index) => (
+                <p
+                  key={index}
+                  className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+                >
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+                  irure dolor in reprehenderit in voluptate velit esse cillum
+                  dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                  cupidatat non proident, sunt in culpa qui officia deserunt
+                  mollit anim id est laborum.
+                </p>
+              ))}
+            </div>
+            <DrawerFooter>
+              <Button>Submit</Button>
+              <DrawerClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/dropdown-menu-basic.tsx b/apps/v4/examples/base/dropdown-menu-basic.tsx
new file mode 100644
index 000000000..f68997c18
--- /dev/null
+++ b/apps/v4/examples/base/dropdown-menu-basic.tsx
@@ -0,0 +1,36 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui/dropdown-menu"
+
+export function DropdownMenuBasic() {
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={<Button variant="outline" className="w-fit" />}
+        >
+          Open
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>My Account</DropdownMenuLabel>
+            <DropdownMenuItem>Profile</DropdownMenuItem>
+            <DropdownMenuItem>Billing</DropdownMenuItem>
+            <DropdownMenuItem>Settings</DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>GitHub</DropdownMenuItem>
+          <DropdownMenuItem>Support</DropdownMenuItem>
+          <DropdownMenuItem disabled>API</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/dropdown-menu-complex.tsx b/apps/v4/examples/base/dropdown-menu-complex.tsx
new file mode 100644
index 000000000..6df391111
--- /dev/null
+++ b/apps/v4/examples/base/dropdown-menu-complex.tsx
@@ -0,0 +1,292 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui/dropdown-menu"
+import {
+  BellIcon,
+  CreditCardIcon,
+  DownloadIcon,
+  EyeIcon,
+  FileCodeIcon,
+  FileIcon,
+  FileTextIcon,
+  FolderIcon,
+  FolderOpenIcon,
+  FolderSearchIcon,
+  HelpCircleIcon,
+  KeyboardIcon,
+  LanguagesIcon,
+  LayoutIcon,
+  LogOutIcon,
+  MailIcon,
+  MonitorIcon,
+  MoonIcon,
+  MoreHorizontalIcon,
+  PaletteIcon,
+  SaveIcon,
+  SettingsIcon,
+  ShieldIcon,
+  SunIcon,
+  UserIcon,
+} from "lucide-react"
+
+export function DropdownMenuComplex() {
+  const [notifications, setNotifications] = React.useState({
+    email: true,
+    sms: false,
+    push: true,
+  })
+  const [theme, setTheme] = React.useState("light")
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={<Button variant="outline" className="w-fit" />}
+        >
+          Complex Menu
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48">
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>File</DropdownMenuLabel>
+            <DropdownMenuItem>
+              <FileIcon />
+              New File
+              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <FolderIcon />
+              New Folder
+              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>
+                <FolderOpenIcon />
+                Open Recent
+              </DropdownMenuSubTrigger>
+              <DropdownMenuPortal>
+                <DropdownMenuSubContent>
+                  <DropdownMenuGroup>
+                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>
+                    <DropdownMenuItem>
+                      <FileCodeIcon />
+                      Project Alpha
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <FileCodeIcon />
+                      Project Beta
+                    </DropdownMenuItem>
+                    <DropdownMenuSub>
+                      <DropdownMenuSubTrigger>
+                        <MoreHorizontalIcon />
+                        More Projects
+                      </DropdownMenuSubTrigger>
+                      <DropdownMenuPortal>
+                        <DropdownMenuSubContent>
+                          <DropdownMenuItem>
+                            <FileCodeIcon />
+                            Project Gamma
+                          </DropdownMenuItem>
+                          <DropdownMenuItem>
+                            <FileCodeIcon />
+                            Project Delta
+                          </DropdownMenuItem>
+                        </DropdownMenuSubContent>
+                      </DropdownMenuPortal>
+                    </DropdownMenuSub>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem>
+                      <FolderSearchIcon />
+                      Browse...
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                </DropdownMenuSubContent>
+              </DropdownMenuPortal>
+            </DropdownMenuSub>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <SaveIcon />
+              Save
+              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <DownloadIcon />
+              Export
+              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>View</DropdownMenuLabel>
+            <DropdownMenuCheckboxItem
+              checked={notifications.email}
+              onCheckedChange={(checked) =>
+                setNotifications({ ...notifications, email: checked === true })
+              }
+            >
+              <EyeIcon />
+              Show Sidebar
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem
+              checked={notifications.sms}
+              onCheckedChange={(checked) =>
+                setNotifications({ ...notifications, sms: checked === true })
+              }
+            >
+              <LayoutIcon />
+              Show Status Bar
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>
+                <PaletteIcon />
+                Theme
+              </DropdownMenuSubTrigger>
+              <DropdownMenuPortal>
+                <DropdownMenuSubContent>
+                  <DropdownMenuGroup>
+                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+                    <DropdownMenuRadioGroup
+                      value={theme}
+                      onValueChange={setTheme}
+                    >
+                      <DropdownMenuRadioItem value="light">
+                        <SunIcon />
+                        Light
+                      </DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="dark">
+                        <MoonIcon />
+                        Dark
+                      </DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="system">
+                        <MonitorIcon />
+                        System
+                      </DropdownMenuRadioItem>
+                    </DropdownMenuRadioGroup>
+                  </DropdownMenuGroup>
+                </DropdownMenuSubContent>
+              </DropdownMenuPortal>
+            </DropdownMenuSub>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>Account</DropdownMenuLabel>
+            <DropdownMenuItem>
+              <UserIcon />
+              Profile
+              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <CreditCardIcon />
+              Billing
+            </DropdownMenuItem>
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>
+                <SettingsIcon />
+                Settings
+              </DropdownMenuSubTrigger>
+              <DropdownMenuPortal>
+                <DropdownMenuSubContent>
+                  <DropdownMenuGroup>
+                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>
+                    <DropdownMenuItem>
+                      <KeyboardIcon />
+                      Keyboard Shortcuts
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <LanguagesIcon />
+                      Language
+                    </DropdownMenuItem>
+                    <DropdownMenuSub>
+                      <DropdownMenuSubTrigger>
+                        <BellIcon />
+                        Notifications
+                      </DropdownMenuSubTrigger>
+                      <DropdownMenuPortal>
+                        <DropdownMenuSubContent>
+                          <DropdownMenuGroup>
+                            <DropdownMenuLabel>
+                              Notification Types
+                            </DropdownMenuLabel>
+                            <DropdownMenuCheckboxItem
+                              checked={notifications.push}
+                              onCheckedChange={(checked) =>
+                                setNotifications({
+                                  ...notifications,
+                                  push: checked === true,
+                                })
+                              }
+                            >
+                              <BellIcon />
+                              Push Notifications
+                            </DropdownMenuCheckboxItem>
+                            <DropdownMenuCheckboxItem
+                              checked={notifications.email}
+                              onCheckedChange={(checked) =>
+                                setNotifications({
+                                  ...notifications,
+                                  email: checked === true,
+                                })
+                              }
+                            >
+                              <MailIcon />
+                              Email Notifications
+                            </DropdownMenuCheckboxItem>
+                          </DropdownMenuGroup>
+                        </DropdownMenuSubContent>
+                      </DropdownMenuPortal>
+                    </DropdownMenuSub>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem>
+                      <ShieldIcon />
+                      Privacy & Security
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                </DropdownMenuSubContent>
+              </DropdownMenuPortal>
+            </DropdownMenuSub>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <HelpCircleIcon />
+              Help & Support
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <FileTextIcon />
+              Documentation
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem variant="destructive">
+              <LogOutIcon />
+              Sign Out
+              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/dropdown-menu-in-dialog.tsx b/apps/v4/examples/base/dropdown-menu-in-dialog.tsx
new file mode 100644
index 000000000..64338aea9
--- /dev/null
+++ b/apps/v4/examples/base/dropdown-menu-in-dialog.tsx
@@ -0,0 +1,85 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/base/ui/dialog"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui/dropdown-menu"
+import {
+  ClipboardPasteIcon,
+  CopyIcon,
+  ScissorsIcon,
+  TrashIcon,
+} from "lucide-react"
+
+export function DropdownMenuInDialog() {
+  return (
+    <>
+      <Dialog>
+        <DialogTrigger render={<Button variant="outline" />}>
+          Open Dialog
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Dropdown Menu Example</DialogTitle>
+            <DialogDescription>
+              Click the button below to see the dropdown menu.
+            </DialogDescription>
+          </DialogHeader>
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              render={<Button variant="outline" className="w-fit" />}
+            >
+              Open Menu
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem>
+                <CopyIcon />
+                Copy
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <ScissorsIcon />
+                Cut
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <ClipboardPasteIcon />
+                Paste
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>
+                <DropdownMenuPortal>
+                  <DropdownMenuSubContent>
+                    <DropdownMenuItem>Save Page...</DropdownMenuItem>
+                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>
+                    <DropdownMenuItem>Name Window...</DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>
+                  </DropdownMenuSubContent>
+                </DropdownMenuPortal>
+              </DropdownMenuSub>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem variant="destructive">
+                <TrashIcon />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/dropdown-menu-with-avatar.tsx b/apps/v4/examples/base/dropdown-menu-with-avatar.tsx
new file mode 100644
index 000000000..a07c7ea0e
--- /dev/null
+++ b/apps/v4/examples/base/dropdown-menu-with-avatar.tsx
@@ -0,0 +1,90 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/examples/base/ui/avatar"
+import { Button } from "@/examples/base/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui/dropdown-menu"
+import {
+  BadgeCheckIcon,
+  BellIcon,
+  ChevronsUpDownIcon,
+  CreditCardIcon,
+  LogOutIcon,
+} from "lucide-react"
+
+export function DropdownMenuWithAvatar() {
+  const menuContent = (
+    <>
+      <DropdownMenuGroup>
+        <DropdownMenuItem>
+          <BadgeCheckIcon />
+          Account
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <CreditCardIcon />
+          Billing
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <BellIcon />
+          Notifications
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem>
+        <LogOutIcon />
+        Sign Out
+      </DropdownMenuItem>
+    </>
+  )
+
+  return (
+    <>
+      <div className="flex items-center justify-between gap-4">
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <Button
+                variant="outline"
+                className="h-12 justify-start px-2 md:max-w-[200px]"
+              />
+            }
+          >
+            <Avatar>
+              <AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
+              <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+            </Avatar>
+            <div className="grid flex-1 text-left text-sm leading-tight">
+              <span className="truncate font-semibold">shadcn</span>
+              <span className="text-muted-foreground truncate text-xs">
+                shadcn@example.com
+              </span>
+            </div>
+            <ChevronsUpDownIcon className="text-muted-foreground ml-auto" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-(--anchor-width) min-w-56">
+            {menuContent}
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <Button variant="ghost" size="icon" className="rounded-full" />
+            }
+          >
+            <Avatar>
+              <AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
+              <AvatarFallback>LR</AvatarFallback>
+            </Avatar>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" side="top">
+            {menuContent}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/dropdown-menu-with-checkboxes-icons.tsx b/apps/v4/examples/base/dropdown-menu-with-checkboxes-icons.tsx
new file mode 100644
index 000000000..214b3c7cf
--- /dev/null
+++ b/apps/v4/examples/base/dropdown-menu-with-checkboxes-icons.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui/dropdown-menu"
+import { BellIcon, MailIcon, MessageSquareIcon } from "lucide-react"
+
+export function DropdownMenuWithCheckboxesIcons() {
+  const [notifications, setNotifications] = React.useState({
+    email: true,
+    sms: false,
+    push: true,
+  })
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={<Button variant="outline" className="w-fit" />}
+        >
+          Notifications
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="min-w-56">
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>
+            <DropdownMenuCheckboxItem
+              checked={notifications.email}
+              onCheckedChange={(checked) =>
+                setNotifications({ ...notifications, email: checked === true })
+              }
+            >
+              <MailIcon />
+              Email notifications
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem
+              checked={notifications.sms}
+              onCheckedChange={(checked) =>
+                setNotifications({ ...notifications, sms: checked === true })
+              }
+            >
+              <MessageSquareIcon />
+              SMS notifications
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem
+              checked={notifications.push}
+              onCheckedChange={(checked) =>
+                setNotifications({ ...notifications, push: checked === true })
+              }
+            >
+              <BellIcon />
+              Push notifications
+            </DropdownMenuCheckboxItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/dropdown-menu-with-checkboxes.tsx b/apps/v4/examples/base/dropdown-menu-with-checkboxes.tsx
new file mode 100644
index 000000000..bd9eefd41
--- /dev/null
+++ b/apps/v4/examples/base/dropdown-menu-with-checkboxes.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui/dropdown-menu"
+import { ActivityIcon, LayoutIcon, PanelLeftIcon } from "lucide-react"
+
+export function DropdownMenuWithCheckboxes() {
+  const [showStatusBar, setShowStatusBar] = React.useState(true)
+  const [showActivityBar, setShowActivityBar] = React.useState(false)
+  const [showPanel, setShowPanel] = React.useState(false)
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={<Button variant="outline" className="w-fit" />}
+        >
+          Checkboxes
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="min-w-40">
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+            <DropdownMenuCheckboxItem
+              checked={showStatusBar}
+              onCheckedChange={setShowStatusBar}
+            >
+              <LayoutIcon />
+              Status Bar
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem
+              checked={showActivityBar}
+              onCheckedChange={setShowActivityBar}
+              disabled
+            >
+              <ActivityIcon />
+              Activity Bar
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem
+              checked={showPanel}
+              onCheckedChange={setShowPanel}
+            >
+              <PanelLeftIcon />
+              Panel
+            </DropdownMenuCheckboxItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/dropdown-menu-with-destructive.tsx b/apps/v4/examples/base/dropdown-menu-with-destructive.tsx
new file mode 100644
index 000000000..5ebde5146
--- /dev/null
+++ b/apps/v4/examples/base/dropdown-menu-with-destructive.tsx
@@ -0,0 +1,42 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui/dropdown-menu"
+import { ArchiveIcon, PencilIcon, ShareIcon, TrashIcon } from "lucide-react"
+
+export function DropdownMenuWithDestructive() {
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={<Button variant="outline" className="w-fit" />}
+        >
+          Actions
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>
+            <PencilIcon />
+            Edit
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <ShareIcon />
+            Share
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <ArchiveIcon />
+            Archive
+          </DropdownMenuItem>
+          <DropdownMenuItem variant="destructive">
+            <TrashIcon />
+            Delete
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/dropdown-menu-with-icons.tsx b/apps/v4/examples/base/dropdown-menu-with-icons.tsx
new file mode 100644
index 000000000..186d719d8
--- /dev/null
+++ b/apps/v4/examples/base/dropdown-menu-with-icons.tsx
@@ -0,0 +1,47 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui/dropdown-menu"
+import {
+  CreditCardIcon,
+  LogOutIcon,
+  SettingsIcon,
+  UserIcon,
+} from "lucide-react"
+
+export function DropdownMenuWithIcons() {
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={<Button variant="outline" className="w-fit" />}
+        >
+          Open
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>
+            <UserIcon />
+            Profile
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <CreditCardIcon />
+            Billing
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <SettingsIcon />
+            Settings
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem variant="destructive">
+            <LogOutIcon />
+            Log out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/dropdown-menu-with-radio-icons.tsx b/apps/v4/examples/base/dropdown-menu-with-radio-icons.tsx
new file mode 100644
index 000000000..e6e4ed6d8
--- /dev/null
+++ b/apps/v4/examples/base/dropdown-menu-with-radio-icons.tsx
@@ -0,0 +1,52 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui/dropdown-menu"
+import { Building2Icon, CreditCardIcon, WalletIcon } from "lucide-react"
+
+export function DropdownMenuWithRadioIcons() {
+  const [paymentMethod, setPaymentMethod] = React.useState("card")
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={<Button variant="outline" className="w-fit" />}
+        >
+          Payment Method
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="min-w-56">
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>
+            <DropdownMenuRadioGroup
+              value={paymentMethod}
+              onValueChange={setPaymentMethod}
+            >
+              <DropdownMenuRadioItem value="card">
+                <CreditCardIcon />
+                Credit Card
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="paypal">
+                <WalletIcon />
+                PayPal
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="bank">
+                <Building2Icon />
+                Bank Transfer
+              </DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/dropdown-menu-with-radio.tsx b/apps/v4/examples/base/dropdown-menu-with-radio.tsx
new file mode 100644
index 000000000..8c0ae26ec
--- /dev/null
+++ b/apps/v4/examples/base/dropdown-menu-with-radio.tsx
@@ -0,0 +1,52 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui/dropdown-menu"
+import { ArrowDownIcon, ArrowRightIcon, ArrowUpIcon } from "lucide-react"
+
+export function DropdownMenuWithRadio() {
+  const [position, setPosition] = React.useState("bottom")
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={<Button variant="outline" className="w-fit" />}
+        >
+          Radio Group
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+            <DropdownMenuRadioGroup
+              value={position}
+              onValueChange={setPosition}
+            >
+              <DropdownMenuRadioItem value="top">
+                <ArrowUpIcon />
+                Top
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="bottom">
+                <ArrowDownIcon />
+                Bottom
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="right" disabled>
+                <ArrowRightIcon />
+                Right
+              </DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/dropdown-menu-with-shortcuts.tsx b/apps/v4/examples/base/dropdown-menu-with-shortcuts.tsx
new file mode 100644
index 000000000..0176f69b8
--- /dev/null
+++ b/apps/v4/examples/base/dropdown-menu-with-shortcuts.tsx
@@ -0,0 +1,51 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui/dropdown-menu"
+
+export function DropdownMenuWithShortcuts() {
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={<Button variant="outline" className="w-fit" />}
+        >
+          Open
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>My Account</DropdownMenuLabel>
+            <DropdownMenuItem>
+              Profile
+              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              Billing
+              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              Settings
+              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              Keyboard shortcuts
+              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            Log out
+            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/dropdown-menu-with-submenu.tsx b/apps/v4/examples/base/dropdown-menu-with-submenu.tsx
new file mode 100644
index 000000000..35eeaba6f
--- /dev/null
+++ b/apps/v4/examples/base/dropdown-menu-with-submenu.tsx
@@ -0,0 +1,48 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui/dropdown-menu"
+
+export function DropdownMenuWithSubmenu() {
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={<Button variant="outline" className="w-fit" />}
+        >
+          Open
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuGroup>
+            <DropdownMenuItem>Team</DropdownMenuItem>
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
+              <DropdownMenuPortal>
+                <DropdownMenuSubContent>
+                  <DropdownMenuItem>Email</DropdownMenuItem>
+                  <DropdownMenuItem>Message</DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem>More...</DropdownMenuItem>
+                </DropdownMenuSubContent>
+              </DropdownMenuPortal>
+            </DropdownMenuSub>
+            <DropdownMenuItem>
+              New Team
+              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/empty-basic.tsx b/apps/v4/examples/base/empty-basic.tsx
new file mode 100644
index 000000000..6e252f351
--- /dev/null
+++ b/apps/v4/examples/base/empty-basic.tsx
@@ -0,0 +1,39 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/examples/base/ui/empty"
+import { ArrowUpRightIcon } from "lucide-react"
+
+export function EmptyBasic() {
+  return (
+    <Empty>
+      <EmptyHeader>
+        <EmptyTitle>No projects yet</EmptyTitle>
+        <EmptyDescription>
+          You haven&apos;t created any projects yet. Get started by creating
+          your first project.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <div className="flex gap-2">
+          <Button render={<a href="#" />} nativeButton={false}>
+            Create project
+          </Button>
+          <Button variant="outline">Import project</Button>
+        </div>
+        <Button
+          variant="link"
+          render={<a href="#" />}
+          className="text-muted-foreground"
+          nativeButton={false}
+        >
+          Learn more <ArrowUpRightIcon />
+        </Button>
+      </EmptyContent>
+    </Empty>
+  )
+}
diff --git a/apps/v4/examples/base/empty-in-card.tsx b/apps/v4/examples/base/empty-in-card.tsx
new file mode 100644
index 000000000..7a88d8c0f
--- /dev/null
+++ b/apps/v4/examples/base/empty-in-card.tsx
@@ -0,0 +1,43 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/examples/base/ui/empty"
+import { ArrowUpRightIcon, FolderIcon } from "lucide-react"
+
+export function EmptyInCard() {
+  return (
+    <Empty>
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <FolderIcon />
+        </EmptyMedia>
+        <EmptyTitle>No projects yet</EmptyTitle>
+        <EmptyDescription>
+          You haven&apos;t created any projects yet. Get started by creating
+          your first project.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <div className="flex gap-2">
+          <Button render={<a href="#" />} nativeButton={false}>
+            Create project
+          </Button>
+          <Button variant="outline">Import project</Button>
+        </div>
+        <Button
+          variant="link"
+          render={<a href="#" />}
+          className="text-muted-foreground"
+          nativeButton={false}
+        >
+          Learn more <ArrowUpRightIcon />
+        </Button>
+      </EmptyContent>
+    </Empty>
+  )
+}
diff --git a/apps/v4/examples/base/empty-with-border.tsx b/apps/v4/examples/base/empty-with-border.tsx
new file mode 100644
index 000000000..8f57b02d9
--- /dev/null
+++ b/apps/v4/examples/base/empty-with-border.tsx
@@ -0,0 +1,42 @@
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/examples/base/ui/empty"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/base/ui/input-group"
+import { Kbd } from "@/examples/base/ui/kbd"
+import { CircleDashedIcon } from "lucide-react"
+
+export function EmptyWithBorder() {
+  return (
+    <Empty className="border">
+      <EmptyHeader>
+        <EmptyTitle>404 - Not Found</EmptyTitle>
+        <EmptyDescription>
+          The page you&apos;re looking for doesn&apos;t exist. Try searching for
+          what you need below.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <InputGroup className="w-3/4">
+          <InputGroupInput placeholder="Try searching for pages..." />
+          <InputGroupAddon>
+            <CircleDashedIcon />
+          </InputGroupAddon>
+          <InputGroupAddon align="inline-end">
+            <Kbd>/</Kbd>
+          </InputGroupAddon>
+        </InputGroup>
+        <EmptyDescription>
+          Need help? <a href="#">Contact support</a>
+        </EmptyDescription>
+      </EmptyContent>
+    </Empty>
+  )
+}
diff --git a/apps/v4/examples/base/empty-with-icon.tsx b/apps/v4/examples/base/empty-with-icon.tsx
new file mode 100644
index 000000000..fcfdbb339
--- /dev/null
+++ b/apps/v4/examples/base/empty-with-icon.tsx
@@ -0,0 +1,33 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/examples/base/ui/empty"
+import { FolderIcon, PlusIcon } from "lucide-react"
+
+export function EmptyWithIcon() {
+  return (
+    <Empty className="border">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <FolderIcon />
+        </EmptyMedia>
+        <EmptyTitle>Nothing to see here</EmptyTitle>
+        <EmptyDescription>
+          No posts have been created yet. Get started by{" "}
+          <a href="#">creating your first post</a>.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button variant="outline">
+          <PlusIcon />
+          New Post
+        </Button>
+      </EmptyContent>
+    </Empty>
+  )
+}
diff --git a/apps/v4/examples/base/empty-with-muted-background-alt.tsx b/apps/v4/examples/base/empty-with-muted-background-alt.tsx
new file mode 100644
index 000000000..3130642e5
--- /dev/null
+++ b/apps/v4/examples/base/empty-with-muted-background-alt.tsx
@@ -0,0 +1,42 @@
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/examples/base/ui/empty"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/base/ui/input-group"
+import { Kbd } from "@/examples/base/ui/kbd"
+import { CircleDashedIcon } from "lucide-react"
+
+export function EmptyWithMutedBackgroundAlt() {
+  return (
+    <Empty className="bg-muted/50">
+      <EmptyHeader>
+        <EmptyTitle>404 - Not Found</EmptyTitle>
+        <EmptyDescription>
+          The page you&apos;re looking for doesn&apos;t exist. Try searching for
+          what you need below.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <InputGroup className="w-3/4">
+          <InputGroupInput placeholder="Try searching for pages..." />
+          <InputGroupAddon>
+            <CircleDashedIcon />
+          </InputGroupAddon>
+          <InputGroupAddon align="inline-end">
+            <Kbd>/</Kbd>
+          </InputGroupAddon>
+        </InputGroup>
+        <EmptyDescription>
+          Need help? <a href="#">Contact support</a>
+        </EmptyDescription>
+      </EmptyContent>
+    </Empty>
+  )
+}
diff --git a/apps/v4/examples/base/empty-with-muted-background.tsx b/apps/v4/examples/base/empty-with-muted-background.tsx
new file mode 100644
index 000000000..f530d1a2d
--- /dev/null
+++ b/apps/v4/examples/base/empty-with-muted-background.tsx
@@ -0,0 +1,33 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/examples/base/ui/empty"
+import { ArrowUpRightIcon } from "lucide-react"
+
+export function EmptyWithMutedBackground() {
+  return (
+    <Empty className="bg-muted">
+      <EmptyHeader>
+        <EmptyTitle>No results found</EmptyTitle>
+        <EmptyDescription>
+          No results found for your search. Try adjusting your search terms.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button>Try again</Button>
+        <Button
+          variant="link"
+          render={<a href="#" />}
+          className="text-muted-foreground"
+          nativeButton={false}
+        >
+          Learn more <ArrowUpRightIcon />
+        </Button>
+      </EmptyContent>
+    </Empty>
+  )
+}
diff --git a/apps/v4/examples/base/file-upload-list.tsx b/apps/v4/examples/base/file-upload-list.tsx
new file mode 100644
index 000000000..9bf0e7d6c
--- /dev/null
+++ b/apps/v4/examples/base/file-upload-list.tsx
@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from "react"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+import { Progress } from "@/examples/base/ui/progress"
+import { FileIcon } from "lucide-react"
+
+export function FileUploadList() {
+  const files = React.useMemo(
+    () => [
+      {
+        id: "1",
+        name: "document.pdf",
+        progress: 45,
+        timeRemaining: "2m 30s",
+      },
+      {
+        id: "2",
+        name: "presentation.pptx",
+        progress: 78,
+        timeRemaining: "45s",
+      },
+      {
+        id: "3",
+        name: "spreadsheet.xlsx",
+        progress: 12,
+        timeRemaining: "5m 12s",
+      },
+      {
+        id: "4",
+        name: "image.jpg",
+        progress: 100,
+        timeRemaining: "Complete",
+      },
+    ],
+    []
+  )
+
+  return (
+    <ItemGroup>
+      {files.map((file) => (
+        <Item key={file.id} size="xs" className="px-0">
+          <ItemMedia variant="icon">
+            <FileIcon className="size-5" />
+          </ItemMedia>
+          <ItemContent className="inline-block truncate">
+            <ItemTitle className="inline">{file.name}</ItemTitle>
+          </ItemContent>
+          <ItemContent>
+            <Progress value={file.progress} className="w-32" />
+          </ItemContent>
+          <ItemActions className="w-16 justify-end">
+            <span className="text-muted-foreground text-sm">
+              {file.timeRemaining}
+            </span>
+          </ItemActions>
+        </Item>
+      ))}
+    </ItemGroup>
+  )
+}
diff --git a/apps/v4/examples/base/hover-card-in-dialog.tsx b/apps/v4/examples/base/hover-card-in-dialog.tsx
new file mode 100644
index 000000000..c6a428f0f
--- /dev/null
+++ b/apps/v4/examples/base/hover-card-in-dialog.tsx
@@ -0,0 +1,52 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/base/ui/dialog"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/examples/base/ui/hover-card"
+
+export function HoverCardInDialog() {
+  return (
+    <>
+      <Dialog>
+        <DialogTrigger render={<Button variant="outline" />}>
+          Open Dialog
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Hover Card Example</DialogTitle>
+            <DialogDescription>
+              Hover over the button below to see the hover card.
+            </DialogDescription>
+          </DialogHeader>
+          <HoverCard>
+            <HoverCardTrigger
+              delay={100}
+              closeDelay={100}
+              render={<Button variant="outline" className="w-fit" />}
+            >
+              Hover me
+            </HoverCardTrigger>
+            <HoverCardContent>
+              <div className="style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col">
+                <h4 className="font-medium">Hover Card</h4>
+                <p>
+                  This hover card appears inside a dialog. Hover over the button
+                  to see it.
+                </p>
+              </div>
+            </HoverCardContent>
+          </HoverCard>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/hover-card-sides.tsx b/apps/v4/examples/base/hover-card-sides.tsx
new file mode 100644
index 000000000..462dc3913
--- /dev/null
+++ b/apps/v4/examples/base/hover-card-sides.tsx
@@ -0,0 +1,32 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/examples/base/ui/hover-card"
+
+const HOVER_CARD_SIDES = ["top", "right", "bottom", "left"] as const
+
+export function HoverCardSides() {
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-4">
+      {HOVER_CARD_SIDES.map((side) => (
+        <HoverCard key={side}>
+          <HoverCardTrigger
+            delay={100}
+            closeDelay={100}
+            render={<Button variant="outline" className="capitalize" />}
+          >
+            {side}
+          </HoverCardTrigger>
+          <HoverCardContent side={side}>
+            <div className="style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col">
+              <h4 className="font-medium">Hover Card</h4>
+              <p>This hover card appears on the {side} side of the trigger.</p>
+            </div>
+          </HoverCardContent>
+        </HoverCard>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/input-basic.tsx b/apps/v4/examples/base/input-basic.tsx
new file mode 100644
index 000000000..179a3540e
--- /dev/null
+++ b/apps/v4/examples/base/input-basic.tsx
@@ -0,0 +1,5 @@
+import { Input } from "@/examples/base/ui/input"
+
+export function InputBasic() {
+  return <Input type="email" placeholder="Email" />
+}
diff --git a/apps/v4/examples/base/input-disabled.tsx b/apps/v4/examples/base/input-disabled.tsx
index c3c01cfbf..f6862c244 100644
--- a/apps/v4/examples/base/input-disabled.tsx
+++ b/apps/v4/examples/base/input-disabled.tsx
@@ -1,5 +1,16 @@
+import { Field, FieldLabel } from "@/examples/base/ui/field"
 import { Input } from "@/examples/base/ui/input"
 
-export default function InputDisabled() {
-  return <Input disabled type="email" placeholder="Email" />
+export function InputDisabled() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="input-demo-disabled">Email</FieldLabel>
+      <Input
+        id="input-demo-disabled"
+        type="email"
+        placeholder="Email"
+        disabled
+      />
+    </Field>
+  )
 }
diff --git a/apps/v4/examples/base/input-fields.tsx b/apps/v4/examples/base/input-fields.tsx
new file mode 100644
index 000000000..99555c1be
--- /dev/null
+++ b/apps/v4/examples/base/input-fields.tsx
@@ -0,0 +1,80 @@
+import { Badge } from "@/examples/base/ui/badge"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+
+export function InputFields() {
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="input-basic">Basic Input</FieldLabel>
+        <Input id="input-basic" placeholder="Enter text" />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-with-desc">
+          Input with Description
+        </FieldLabel>
+        <Input id="input-with-desc" placeholder="Enter your username" />
+        <FieldDescription>
+          Choose a unique username for your account.
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-desc-first">Email Address</FieldLabel>
+        <FieldDescription>
+          We&apos;ll never share your email with anyone.
+        </FieldDescription>
+        <Input
+          id="input-desc-first"
+          type="email"
+          placeholder="email@example.com"
+        />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-required">
+          Required Field <span className="text-destructive">*</span>
+        </FieldLabel>
+        <Input
+          id="input-required"
+          placeholder="This field is required"
+          required
+        />
+        <FieldDescription>This field must be filled out.</FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-disabled">Disabled Input</FieldLabel>
+        <Input id="input-disabled" placeholder="Cannot edit" disabled />
+        <FieldDescription>This field is currently disabled.</FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-badge">
+          Input with Badge{" "}
+          <Badge variant="secondary" className="ml-auto">
+            Recommended
+          </Badge>
+        </FieldLabel>
+        <Input id="input-badge" placeholder="Enter value" />
+      </Field>
+      <Field data-invalid>
+        <FieldLabel htmlFor="input-invalid">Invalid Input</FieldLabel>
+        <Input
+          id="input-invalid"
+          placeholder="This field has an error"
+          aria-invalid
+        />
+        <FieldDescription>
+          This field contains validation errors.
+        </FieldDescription>
+      </Field>
+      <Field data-disabled>
+        <FieldLabel htmlFor="input-disabled-field">Disabled Field</FieldLabel>
+        <Input id="input-disabled-field" placeholder="Cannot edit" disabled />
+        <FieldDescription>This field is currently disabled.</FieldDescription>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/base/input-form.tsx b/apps/v4/examples/base/input-form.tsx
new file mode 100644
index 000000000..e37a9c0ad
--- /dev/null
+++ b/apps/v4/examples/base/input-form.tsx
@@ -0,0 +1,64 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+
+export function InputForm() {
+  return (
+    <form className="w-full">
+      <FieldGroup>
+        <Field>
+          <FieldLabel htmlFor="form-name">Name</FieldLabel>
+          <Input id="form-name" type="text" placeholder="John Doe" />
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="form-email">Email</FieldLabel>
+          <Input id="form-email" type="email" placeholder="john@example.com" />
+          <FieldDescription>
+            We&apos;ll never share your email with anyone.
+          </FieldDescription>
+        </Field>
+        <div className="grid grid-cols-2 gap-4">
+          <Field>
+            <FieldLabel htmlFor="form-phone">Phone</FieldLabel>
+            <Input id="form-phone" type="tel" placeholder="+1 (555) 123-4567" />
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="form-country">Country</FieldLabel>
+            <Select defaultValue="us">
+              <SelectTrigger id="form-country">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="us">United States</SelectItem>
+                <SelectItem value="uk">United Kingdom</SelectItem>
+                <SelectItem value="ca">Canada</SelectItem>
+              </SelectContent>
+            </Select>
+          </Field>
+        </div>
+        <Field>
+          <FieldLabel htmlFor="form-address">Address</FieldLabel>
+          <Input id="form-address" type="text" placeholder="123 Main St" />
+        </Field>
+        <Field orientation="horizontal">
+          <Button type="button" variant="outline">
+            Cancel
+          </Button>
+          <Button type="submit">Submit</Button>
+        </Field>
+      </FieldGroup>
+    </form>
+  )
+}
diff --git a/apps/v4/examples/base/input-group-basic.tsx b/apps/v4/examples/base/input-group-basic.tsx
new file mode 100644
index 000000000..788269685
--- /dev/null
+++ b/apps/v4/examples/base/input-group-basic.tsx
@@ -0,0 +1,42 @@
+import { Field, FieldGroup, FieldLabel } from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+import { InputGroup, InputGroupInput } from "@/examples/base/ui/input-group"
+
+export function InputGroupBasic() {
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="input-default-01">
+          Default (No Input Group)
+        </FieldLabel>
+        <Input placeholder="Placeholder" id="input-default-01" />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-group-02">Input Group</FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-group-02" placeholder="Placeholder" />
+        </InputGroup>
+      </Field>
+      <Field data-disabled="true">
+        <FieldLabel htmlFor="input-disabled-03">Disabled</FieldLabel>
+        <InputGroup>
+          <InputGroupInput
+            id="input-disabled-03"
+            placeholder="This field is disabled"
+            disabled
+          />
+        </InputGroup>
+      </Field>
+      <Field data-invalid="true">
+        <FieldLabel htmlFor="input-invalid-04">Invalid</FieldLabel>
+        <InputGroup>
+          <InputGroupInput
+            id="input-invalid-04"
+            placeholder="This field is invalid"
+            aria-invalid="true"
+          />
+        </InputGroup>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/base/input-group-in-card.tsx b/apps/v4/examples/base/input-group-in-card.tsx
new file mode 100644
index 000000000..b4fdc954d
--- /dev/null
+++ b/apps/v4/examples/base/input-group-in-card.tsx
@@ -0,0 +1,78 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/base/ui/card"
+import { Field, FieldGroup, FieldLabel } from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@/examples/base/ui/input-group"
+import { ExternalLinkIcon, MailIcon } from "lucide-react"
+
+export function InputGroupInCard() {
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>Card with Input Group</CardTitle>
+        <CardDescription>This is a card with an input group.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor="email-input">Email Address</FieldLabel>
+            <InputGroup>
+              <InputGroupInput
+                id="email-input"
+                type="email"
+                placeholder="you@example.com"
+              />
+              <InputGroupAddon align="inline-end">
+                <MailIcon />
+              </InputGroupAddon>
+            </InputGroup>
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="website-input">Website URL</FieldLabel>
+            <InputGroup>
+              <InputGroupAddon>
+                <InputGroupText>https://</InputGroupText>
+              </InputGroupAddon>
+              <InputGroupInput id="website-input" placeholder="example.com" />
+              <InputGroupAddon align="inline-end">
+                <ExternalLinkIcon />
+              </InputGroupAddon>
+            </InputGroup>
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="feedback-textarea">
+              Feedback & Comments
+            </FieldLabel>
+            <InputGroup>
+              <InputGroupTextarea
+                id="feedback-textarea"
+                placeholder="Share your thoughts..."
+                className="min-h-[100px]"
+              />
+              <InputGroupAddon align="block-end">
+                <InputGroupText>0/500 characters</InputGroupText>
+              </InputGroupAddon>
+            </InputGroup>
+          </Field>
+        </FieldGroup>
+      </CardContent>
+      <CardFooter className="justify-end gap-2">
+        <Button variant="outline">Cancel</Button>
+        <Button>Submit</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/input-group-textarea-examples.tsx b/apps/v4/examples/base/input-group-textarea-examples.tsx
new file mode 100644
index 000000000..1c25a5a8e
--- /dev/null
+++ b/apps/v4/examples/base/input-group-textarea-examples.tsx
@@ -0,0 +1,155 @@
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@/examples/base/ui/input-group"
+import { Textarea } from "@/examples/base/ui/textarea"
+import {
+  ArrowUpIcon,
+  CodeIcon,
+  CopyIcon,
+  InfoIcon,
+  RefreshCwIcon,
+} from "lucide-react"
+
+export function InputGroupTextareaExamples() {
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="textarea-header-footer-12">
+          Default Textarea (No Input Group)
+        </FieldLabel>
+        <Textarea
+          id="textarea-header-footer-12"
+          placeholder="Enter your text here..."
+        />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="textarea-header-footer-13">Input Group</FieldLabel>
+        <InputGroup>
+          <InputGroupTextarea
+            id="textarea-header-footer-13"
+            placeholder="Enter your text here..."
+          />
+        </InputGroup>
+        <FieldDescription>
+          This is a description of the input group.
+        </FieldDescription>
+      </Field>
+      <Field data-invalid="true">
+        <FieldLabel htmlFor="textarea-header-footer-14">Invalid</FieldLabel>
+        <InputGroup>
+          <InputGroupTextarea
+            id="textarea-header-footer-14"
+            placeholder="Enter your text here..."
+            aria-invalid="true"
+          />
+        </InputGroup>
+        <FieldDescription>
+          This is a description of the input group.
+        </FieldDescription>
+      </Field>
+      <Field data-disabled="true">
+        <FieldLabel htmlFor="textarea-header-footer-15">Disabled</FieldLabel>
+        <InputGroup>
+          <InputGroupTextarea
+            id="textarea-header-footer-15"
+            placeholder="Enter your text here..."
+            disabled
+          />
+        </InputGroup>
+        <FieldDescription>
+          This is a description of the input group.
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="prompt-31">Addon (block-start)</FieldLabel>
+        <InputGroup>
+          <InputGroupTextarea id="prompt-31" />
+          <InputGroupAddon align="block-start">
+            <InputGroupText>Ask, Search or Chat...</InputGroupText>
+            <InfoIcon className="text-muted-foreground ml-auto" />
+          </InputGroupAddon>
+        </InputGroup>
+        <FieldDescription>
+          This is a description of the input group.
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="textarea-header-footer-30">
+          Addon (block-end)
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupTextarea
+            id="textarea-header-footer-30"
+            placeholder="Enter your text here..."
+          />
+          <InputGroupAddon align="block-end">
+            <InputGroupText>0/280 characters</InputGroupText>
+            <InputGroupButton
+              variant="default"
+              size="icon-xs"
+              className="ml-auto rounded-full"
+            >
+              <ArrowUpIcon />
+              <span className="sr-only">Send</span>
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="textarea-comment-31">Addon (Buttons)</FieldLabel>
+        <InputGroup>
+          <InputGroupTextarea
+            id="textarea-comment-31"
+            placeholder="Share your thoughts..."
+            className="min-h-[120px]"
+          />
+          <InputGroupAddon align="block-end">
+            <InputGroupButton variant="ghost" className="ml-auto" size="sm">
+              Cancel
+            </InputGroupButton>
+            <InputGroupButton variant="default" size="sm">
+              Post Comment
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="textarea-code-32">Code Editor</FieldLabel>
+        <InputGroup>
+          <InputGroupTextarea
+            id="textarea-code-32"
+            placeholder="console.log('Hello, world!');"
+            className="min-h-[300px] py-3"
+          />
+          <InputGroupAddon align="block-start" className="border-b">
+            <InputGroupText className="font-mono font-medium">
+              <CodeIcon />
+              script.js
+            </InputGroupText>
+            <InputGroupButton size="icon-xs" className="ml-auto">
+              <RefreshCwIcon />
+            </InputGroupButton>
+            <InputGroupButton size="icon-xs" variant="ghost">
+              <CopyIcon />
+            </InputGroupButton>
+          </InputGroupAddon>
+          <InputGroupAddon align="block-end" className="border-t">
+            <InputGroupText>Line 1, Column 1</InputGroupText>
+            <InputGroupText className="ml-auto">JavaScript</InputGroupText>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/base/input-group-with-addons.tsx b/apps/v4/examples/base/input-group-with-addons.tsx
new file mode 100644
index 000000000..17ad2ced5
--- /dev/null
+++ b/apps/v4/examples/base/input-group-with-addons.tsx
@@ -0,0 +1,132 @@
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+} from "@/examples/base/ui/input-group"
+import {
+  CopyIcon,
+  EyeOffIcon,
+  InfoIcon,
+  MicIcon,
+  RadioIcon,
+  SearchIcon,
+  StarIcon,
+} from "lucide-react"
+import { toast } from "sonner"
+
+export function InputGroupWithAddons() {
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="input-icon-left-05">
+          Addon (inline-start)
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-icon-left-05" />
+          <InputGroupAddon>
+            <SearchIcon className="text-muted-foreground" />
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-icon-right-07">
+          Addon (inline-end)
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-icon-right-07" />
+          <InputGroupAddon align="inline-end">
+            <EyeOffIcon />
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-icon-both-09">
+          Addon (inline-start and inline-end)
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-icon-both-09" />
+          <InputGroupAddon>
+            <MicIcon className="text-muted-foreground" />
+          </InputGroupAddon>
+          <InputGroupAddon align="inline-end">
+            <RadioIcon className="animate-pulse text-red-500" />
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-addon-20">Addon (block-start)</FieldLabel>
+        <InputGroup className="h-auto">
+          <InputGroupInput id="input-addon-20" />
+          <InputGroupAddon align="block-start">
+            <InputGroupText>First Name</InputGroupText>
+            <InfoIcon className="text-muted-foreground ml-auto" />
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-addon-21">Addon (block-end)</FieldLabel>
+        <InputGroup className="h-auto">
+          <InputGroupInput id="input-addon-21" />
+          <InputGroupAddon align="block-end">
+            <InputGroupText>20/240 characters</InputGroupText>
+            <InfoIcon className="text-muted-foreground ml-auto" />
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-icon-both-10">Multiple Icons</FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-icon-both-10" />
+          <InputGroupAddon align="inline-end">
+            <StarIcon />
+            <InputGroupButton
+              size="icon-xs"
+              onClick={() => toast("Copied to clipboard")}
+            >
+              <CopyIcon />
+            </InputGroupButton>
+          </InputGroupAddon>
+          <InputGroupAddon>
+            <RadioIcon className="animate-pulse text-red-500" />
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-description-10">Description</FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-description-10" />
+          <InputGroupAddon align="inline-end">
+            <InfoIcon />
+          </InputGroupAddon>
+        </InputGroup>
+        <FieldDescription>
+          This is a description of the input group.
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-label-10">Label</FieldLabel>
+        <InputGroup>
+          <InputGroupAddon>
+            <FieldLabel htmlFor="input-label-10">Label</FieldLabel>
+          </InputGroupAddon>
+          <InputGroupInput id="input-label-10" />
+        </InputGroup>
+        <InputGroup>
+          <InputGroupInput id="input-optional-12" aria-label="Optional" />
+          <InputGroupAddon align="inline-end">
+            <InputGroupText>(optional)</InputGroupText>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/base/input-group-with-buttons.tsx b/apps/v4/examples/base/input-group-with-buttons.tsx
new file mode 100644
index 000000000..fbb25c978
--- /dev/null
+++ b/apps/v4/examples/base/input-group-with-buttons.tsx
@@ -0,0 +1,60 @@
+import { Button } from "@/examples/base/ui/button"
+import { Field, FieldGroup, FieldLabel } from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/examples/base/ui/input-group"
+import { CopyIcon, TrashIcon } from "lucide-react"
+
+export function InputGroupWithButtons() {
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="input-button-13">Button</FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-button-13" />
+          <InputGroupAddon>
+            <InputGroupButton>Default</InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+        <InputGroup>
+          <InputGroupInput id="input-button-14" />
+          <InputGroupAddon>
+            <InputGroupButton variant="outline">Outline</InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+        <InputGroup>
+          <InputGroupInput id="input-button-15" />
+          <InputGroupAddon>
+            <InputGroupButton variant="secondary">Secondary</InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+        <InputGroup>
+          <InputGroupInput id="input-button-16" />
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton variant="secondary">Button</InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+        <InputGroup>
+          <InputGroupInput id="input-button-17" />
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton size="icon-xs">
+              <CopyIcon />
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+        <InputGroup>
+          <InputGroupInput id="input-button-18" />
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton variant="secondary" size="icon-xs">
+              <TrashIcon />
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/base/input-group-with-kbd.tsx b/apps/v4/examples/base/input-group-with-kbd.tsx
new file mode 100644
index 000000000..8cb57a22a
--- /dev/null
+++ b/apps/v4/examples/base/input-group-with-kbd.tsx
@@ -0,0 +1,131 @@
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/base/ui/input-group"
+import { Kbd, KbdGroup } from "@/examples/base/ui/kbd"
+import { Spinner } from "@/examples/base/ui/spinner"
+import { CheckIcon, InfoIcon, SearchIcon, SparklesIcon } from "lucide-react"
+
+export function InputGroupWithKbd() {
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="input-kbd-22">Input Group with Kbd</FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-kbd-22" />
+          <InputGroupAddon>
+            <Kbd>⌘K</Kbd>
+          </InputGroupAddon>
+        </InputGroup>
+        <InputGroup>
+          <InputGroupInput id="input-kbd-23" />
+          <InputGroupAddon align="inline-end">
+            <Kbd>⌘K</Kbd>
+          </InputGroupAddon>
+        </InputGroup>
+        <InputGroup>
+          <InputGroupInput
+            id="input-search-apps-24"
+            placeholder="Search for Apps..."
+          />
+          <InputGroupAddon align="inline-end">Ask AI</InputGroupAddon>
+          <InputGroupAddon align="inline-end">
+            <Kbd>Tab</Kbd>
+          </InputGroupAddon>
+        </InputGroup>
+        <InputGroup>
+          <InputGroupInput
+            id="input-search-type-25"
+            placeholder="Type to search..."
+          />
+          <InputGroupAddon align="inline-start">
+            <SparklesIcon />
+          </InputGroupAddon>
+          <InputGroupAddon align="inline-end">
+            <KbdGroup>
+              <Kbd>Ctrl</Kbd>
+              <Kbd>C</Kbd>
+            </KbdGroup>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-username-26">Username</FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-username-26" defaultValue="shadcn" />
+          <InputGroupAddon align="inline-end">
+            <div className="flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800">
+              <CheckIcon className="size-3 text-white" />
+            </div>
+          </InputGroupAddon>
+        </InputGroup>
+        <FieldDescription className="text-green-700">
+          This username is available.
+        </FieldDescription>
+      </Field>
+      <InputGroup>
+        <InputGroupInput
+          id="input-search-docs-27"
+          placeholder="Search documentation..."
+        />
+        <InputGroupAddon>
+          <SearchIcon />
+        </InputGroupAddon>
+        <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
+      </InputGroup>
+      <InputGroup data-disabled="true">
+        <InputGroupInput
+          id="input-search-disabled-28"
+          placeholder="Search documentation..."
+          disabled
+        />
+        <InputGroupAddon>
+          <SearchIcon />
+        </InputGroupAddon>
+        <InputGroupAddon align="inline-end">Disabled</InputGroupAddon>
+      </InputGroup>
+      <FieldGroup className="grid grid-cols-2 gap-4">
+        <Field>
+          <FieldLabel htmlFor="input-group-11">First Name</FieldLabel>
+          <InputGroup>
+            <InputGroupInput id="input-group-11" placeholder="First Name" />
+            <InputGroupAddon align="inline-end">
+              <InfoIcon />
+            </InputGroupAddon>
+          </InputGroup>
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="input-group-12">Last Name</FieldLabel>
+          <InputGroup>
+            <InputGroupInput id="input-group-12" placeholder="Last Name" />
+            <InputGroupAddon align="inline-end">
+              <InfoIcon />
+            </InputGroupAddon>
+          </InputGroup>
+        </Field>
+      </FieldGroup>
+      <Field data-disabled="true">
+        <FieldLabel htmlFor="input-group-29">
+          Loading (&quot;data-disabled=&quot;true&quot;)
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-group-29" disabled defaultValue="shadcn" />
+          <InputGroupAddon align="inline-end">
+            <Spinner />
+          </InputGroupAddon>
+        </InputGroup>
+        <FieldDescription>
+          This is a description of the input group.
+        </FieldDescription>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/base/input-group-with-tooltip.tsx b/apps/v4/examples/base/input-group-with-tooltip.tsx
new file mode 100644
index 000000000..0b67a004e
--- /dev/null
+++ b/apps/v4/examples/base/input-group-with-tooltip.tsx
@@ -0,0 +1,159 @@
+import { Button } from "@/examples/base/ui/button"
+import { ButtonGroup, ButtonGroupText } from "@/examples/base/ui/button-group"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui/dropdown-menu"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/examples/base/ui/input-group"
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@/examples/base/ui/popover"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/base/ui/tooltip"
+import { ChevronDownIcon, InfoIcon, StarIcon } from "lucide-react"
+import { toast } from "sonner"
+
+export function InputGroupWithTooltip({
+  country,
+  setCountry,
+}: {
+  country: string
+  setCountry: (value: string) => void
+}) {
+  return (
+    <>
+      <FieldGroup>
+        <Field>
+          <FieldLabel htmlFor="input-tooltip-20">Tooltip</FieldLabel>
+          <InputGroup>
+            <InputGroupInput id="input-tooltip-20" />
+            <InputGroupAddon align="inline-end">
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <InputGroupButton className="rounded-full" size="icon-xs" />
+                  }
+                >
+                  <InfoIcon />
+                </TooltipTrigger>
+                <TooltipContent>This is content in a tooltip.</TooltipContent>
+              </Tooltip>
+            </InputGroupAddon>
+          </InputGroup>
+          <FieldDescription>
+            This is a description of the input group.
+          </FieldDescription>
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="input-dropdown-21">Dropdown</FieldLabel>
+          <InputGroup>
+            <InputGroupInput id="input-dropdown-21" />
+            <InputGroupAddon>
+              <DropdownMenu>
+                <DropdownMenuTrigger
+                  render={
+                    <InputGroupButton className="text-muted-foreground tabular-nums" />
+                  }
+                >
+                  {country} <ChevronDownIcon />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  align="start"
+                  className="min-w-16"
+                  sideOffset={10}
+                  alignOffset={-8}
+                >
+                  <DropdownMenuItem onClick={() => setCountry("+1")}>
+                    +1
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setCountry("+44")}>
+                    +44
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setCountry("+46")}>
+                    +46
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </InputGroupAddon>
+          </InputGroup>
+          <FieldDescription>
+            This is a description of the input group.
+          </FieldDescription>
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="input-secure-19">Popover</FieldLabel>
+          <InputGroup>
+            <Popover>
+              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>
+                <InputGroupButton variant="secondary" size="icon-xs">
+                  <InfoIcon />
+                </InputGroupButton>
+              </PopoverTrigger>
+              <PopoverContent align="start">
+                <PopoverHeader>
+                  <PopoverTitle>Your connection is not secure.</PopoverTitle>
+                  <PopoverDescription>
+                    You should not enter any sensitive information on this site.
+                  </PopoverDescription>
+                </PopoverHeader>
+              </PopoverContent>
+            </Popover>
+            <InputGroupAddon className="text-muted-foreground pl-1">
+              https://
+            </InputGroupAddon>
+            <InputGroupInput id="input-secure-19" />
+            <InputGroupAddon align="inline-end">
+              <InputGroupButton
+                size="icon-xs"
+                onClick={() => toast("Added to favorites")}
+              >
+                <StarIcon />
+              </InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+          <FieldDescription>
+            This is a description of the input group.
+          </FieldDescription>
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="url">Button Group</FieldLabel>
+          <ButtonGroup>
+            <ButtonGroupText>https://</ButtonGroupText>
+            <InputGroup>
+              <InputGroupInput id="url" />
+              <InputGroupAddon align="inline-end">
+                <InfoIcon />
+              </InputGroupAddon>
+            </InputGroup>
+            <ButtonGroupText>.com</ButtonGroupText>
+          </ButtonGroup>
+          <FieldDescription>
+            This is a description of the input group.
+          </FieldDescription>
+        </Field>
+      </FieldGroup>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/input-invalid.tsx b/apps/v4/examples/base/input-invalid.tsx
new file mode 100644
index 000000000..612b91a3f
--- /dev/null
+++ b/apps/v4/examples/base/input-invalid.tsx
@@ -0,0 +1,5 @@
+import { Input } from "@/examples/base/ui/input"
+
+export function InputInvalid() {
+  return <Input type="text" placeholder="Error" aria-invalid="true" />
+}
diff --git a/apps/v4/examples/base/input-otp-alphanumeric.tsx b/apps/v4/examples/base/input-otp-alphanumeric.tsx
new file mode 100644
index 000000000..3f67a2c25
--- /dev/null
+++ b/apps/v4/examples/base/input-otp-alphanumeric.tsx
@@ -0,0 +1,34 @@
+import { Field, FieldDescription, FieldLabel } from "@/examples/base/ui/field"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/examples/base/ui/input-otp"
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
+
+export function InputOTPAlphanumeric() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="alphanumeric">Alphanumeric</FieldLabel>
+      <FieldDescription>Accepts both letters and numbers.</FieldDescription>
+      <InputOTP
+        id="alphanumeric"
+        maxLength={6}
+        pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
+      >
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/input-otp-disabled.tsx b/apps/v4/examples/base/input-otp-disabled.tsx
new file mode 100644
index 000000000..aff63b4d0
--- /dev/null
+++ b/apps/v4/examples/base/input-otp-disabled.tsx
@@ -0,0 +1,28 @@
+import { Field, FieldLabel } from "@/examples/base/ui/field"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/examples/base/ui/input-otp"
+
+export function InputOTPDisabled() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="disabled">Disabled</FieldLabel>
+      <InputOTP id="disabled" maxLength={6} disabled value="123456">
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/input-otp-fields.tsx b/apps/v4/examples/base/input-otp-fields.tsx
new file mode 100644
index 000000000..733e35137
--- /dev/null
+++ b/apps/v4/examples/base/input-otp-fields.tsx
@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import { useState } from "react"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/examples/base/ui/input-otp"
+import { REGEXP_ONLY_DIGITS } from "input-otp"
+
+export function InputOTPFields() {
+  const [value, setValue] = useState("")
+  const [pinValue, setPinValue] = useState("")
+
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="otp-basic">Verification Code</FieldLabel>
+        <InputOTP id="otp-basic" maxLength={6}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+          </InputOTPGroup>
+        </InputOTP>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="otp-with-desc">Enter OTP</FieldLabel>
+        <InputOTP
+          id="otp-with-desc"
+          maxLength={6}
+          value={value}
+          onChange={setValue}
+        >
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+          </InputOTPGroup>
+        </InputOTP>
+        <FieldDescription>
+          Enter the 6-digit code sent to your email.
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="otp-separator">
+          Two-Factor Authentication
+        </FieldLabel>
+        <InputOTP id="otp-separator" maxLength={6}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+          </InputOTPGroup>
+          <InputOTPSeparator />
+          <InputOTPGroup>
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+          </InputOTPGroup>
+        </InputOTP>
+        <FieldDescription>
+          Enter the code from your authenticator app.
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="otp-pin">PIN Code</FieldLabel>
+        <InputOTP
+          id="otp-pin"
+          maxLength={4}
+          pattern={REGEXP_ONLY_DIGITS}
+          value={pinValue}
+          onChange={setPinValue}
+        >
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+            <InputOTPSlot index={3} />
+          </InputOTPGroup>
+        </InputOTP>
+        <FieldDescription>
+          Enter your 4-digit PIN (numbers only).
+        </FieldDescription>
+      </Field>
+      <Field data-invalid>
+        <FieldLabel htmlFor="otp-invalid">Invalid OTP</FieldLabel>
+        <InputOTP id="otp-invalid" maxLength={6}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} aria-invalid />
+            <InputOTPSlot index={1} aria-invalid />
+            <InputOTPSlot index={2} aria-invalid />
+            <InputOTPSlot index={3} aria-invalid />
+            <InputOTPSlot index={4} aria-invalid />
+            <InputOTPSlot index={5} aria-invalid />
+          </InputOTPGroup>
+        </InputOTP>
+        <FieldDescription>
+          This OTP field contains validation errors.
+        </FieldDescription>
+      </Field>
+      <Field data-disabled>
+        <FieldLabel htmlFor="otp-disabled-field">Disabled OTP</FieldLabel>
+        <InputOTP id="otp-disabled-field" maxLength={6} disabled>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+          </InputOTPGroup>
+        </InputOTP>
+        <FieldDescription>
+          This OTP field is currently disabled.
+        </FieldDescription>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/base/input-otp-form.tsx b/apps/v4/examples/base/input-otp-form.tsx
new file mode 100644
index 000000000..796c740be
--- /dev/null
+++ b/apps/v4/examples/base/input-otp-form.tsx
@@ -0,0 +1,76 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/base/ui/card"
+import { Field, FieldDescription, FieldLabel } from "@/examples/base/ui/field"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/examples/base/ui/input-otp"
+import { RefreshCwIcon } from "lucide-react"
+
+export function InputOTPForm() {
+  return (
+    <Card className="mx-auto max-w-md">
+      <CardHeader>
+        <CardTitle>Verify your login</CardTitle>
+        <CardDescription>
+          Enter the verification code we sent to your email address:{" "}
+          <span className="font-medium">m@example.com</span>.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form>
+          <Field>
+            <div className="flex items-center justify-between">
+              <FieldLabel htmlFor="otp-verification">
+                Verification code
+              </FieldLabel>
+              <Button variant="outline" size="xs">
+                <RefreshCwIcon />
+                Resend Code
+              </Button>
+            </div>
+            <InputOTP maxLength={6} id="otp-verification" required>
+              <InputOTPGroup className="style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
+                <InputOTPSlot index={0} />
+                <InputOTPSlot index={1} />
+                <InputOTPSlot index={2} />
+              </InputOTPGroup>
+              <InputOTPSeparator />
+              <InputOTPGroup className="style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
+                <InputOTPSlot index={3} />
+                <InputOTPSlot index={4} />
+                <InputOTPSlot index={5} />
+              </InputOTPGroup>
+            </InputOTP>
+            <FieldDescription>
+              <a href="#">I no longer have access to this email address.</a>
+            </FieldDescription>
+          </Field>
+        </form>
+      </CardContent>
+      <CardFooter className="flex-col gap-2">
+        <Button type="submit" className="w-full">
+          Verify
+        </Button>
+        <div className="text-muted-foreground text-sm">
+          Having trouble signing in?{" "}
+          <a
+            href="#"
+            className="hover:text-primary underline underline-offset-4 transition-colors"
+          >
+            Contact support
+          </a>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/input-otp-four-digits.tsx b/apps/v4/examples/base/input-otp-four-digits.tsx
new file mode 100644
index 000000000..779b64499
--- /dev/null
+++ b/apps/v4/examples/base/input-otp-four-digits.tsx
@@ -0,0 +1,24 @@
+import { Field, FieldDescription, FieldLabel } from "@/examples/base/ui/field"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from "@/examples/base/ui/input-otp"
+import { REGEXP_ONLY_DIGITS } from "input-otp"
+
+export function InputOTPFourDigits() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="four-digits">4 Digits</FieldLabel>
+      <FieldDescription>Common pattern for PIN codes.</FieldDescription>
+      <InputOTP id="four-digits" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+        </InputOTPGroup>
+      </InputOTP>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/input-otp-invalid.tsx b/apps/v4/examples/base/input-otp-invalid.tsx
new file mode 100644
index 000000000..aef01b910
--- /dev/null
+++ b/apps/v4/examples/base/input-otp-invalid.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from "@/examples/base/ui/field"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/examples/base/ui/input-otp"
+
+export function InputOTPInvalid() {
+  const [value, setValue] = React.useState("000000")
+
+  return (
+    <Field>
+      <FieldLabel htmlFor="invalid">Invalid State</FieldLabel>
+      <FieldDescription>
+        Example showing the invalid error state.
+      </FieldDescription>
+      <InputOTP id="invalid" maxLength={6} value={value} onChange={setValue}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} aria-invalid />
+          <InputOTPSlot index={1} aria-invalid />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={2} aria-invalid />
+          <InputOTPSlot index={3} aria-invalid />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={4} aria-invalid />
+          <InputOTPSlot index={5} aria-invalid />
+        </InputOTPGroup>
+      </InputOTP>
+      <FieldError errors={[{ message: "Invalid code. Please try again." }]} />
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/input-otp-pattern.tsx b/apps/v4/examples/base/input-otp-pattern.tsx
index 0ea47c306..8b8dae543 100644
--- a/apps/v4/examples/base/input-otp-pattern.tsx
+++ b/apps/v4/examples/base/input-otp-pattern.tsx
@@ -1,23 +1,25 @@
-"use client"
-
+import { Field, FieldLabel } from "@/examples/base/ui/field"
 import {
   InputOTP,
   InputOTPGroup,
   InputOTPSlot,
 } from "@/examples/base/ui/input-otp"
-import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
+import { REGEXP_ONLY_DIGITS } from "input-otp"
 
-export default function InputOTPPattern() {
+export function InputOTPPattern() {
   return (
-    <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
-      <InputOTPGroup>
-        <InputOTPSlot index={0} />
-        <InputOTPSlot index={1} />
-        <InputOTPSlot index={2} />
-        <InputOTPSlot index={3} />
-        <InputOTPSlot index={4} />
-        <InputOTPSlot index={5} />
-      </InputOTPGroup>
-    </InputOTP>
+    <Field>
+      <FieldLabel htmlFor="digits-only">Digits Only</FieldLabel>
+      <InputOTP id="digits-only" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    </Field>
   )
 }
diff --git a/apps/v4/examples/base/input-otp-simple.tsx b/apps/v4/examples/base/input-otp-simple.tsx
new file mode 100644
index 000000000..6391a2263
--- /dev/null
+++ b/apps/v4/examples/base/input-otp-simple.tsx
@@ -0,0 +1,28 @@
+import { Field, FieldLabel } from "@/examples/base/ui/field"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/examples/base/ui/input-otp"
+
+export function InputOTPSimple() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="simple">Simple</FieldLabel>
+      <InputOTP id="simple" maxLength={6}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/input-otp-with-separator.tsx b/apps/v4/examples/base/input-otp-with-separator.tsx
new file mode 100644
index 000000000..3fda38eac
--- /dev/null
+++ b/apps/v4/examples/base/input-otp-with-separator.tsx
@@ -0,0 +1,41 @@
+"use client"
+
+import * as React from "react"
+import { Field, FieldLabel } from "@/examples/base/ui/field"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/examples/base/ui/input-otp"
+
+export function InputOTPWithSeparator() {
+  const [value, setValue] = React.useState("123456")
+
+  return (
+    <Field>
+      <FieldLabel htmlFor="with-separator">With Separator</FieldLabel>
+      <InputOTP
+        id="with-separator"
+        maxLength={6}
+        value={value}
+        onChange={setValue}
+      >
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/input-types.tsx b/apps/v4/examples/base/input-types.tsx
new file mode 100644
index 000000000..eb4fa91ca
--- /dev/null
+++ b/apps/v4/examples/base/input-types.tsx
@@ -0,0 +1,49 @@
+import { Field, FieldLabel } from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+
+export function InputTypes() {
+  return (
+    <div className="flex w-full flex-col gap-6">
+      <Field>
+        <FieldLabel htmlFor="input-demo-password">Password</FieldLabel>
+        <Input
+          id="input-demo-password"
+          type="password"
+          placeholder="Password"
+        />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-demo-tel">Phone</FieldLabel>
+        <Input id="input-demo-tel" type="tel" placeholder="+1 (555) 123-4567" />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-demo-url">URL</FieldLabel>
+        <Input
+          id="input-demo-url"
+          type="url"
+          placeholder="https://example.com"
+        />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-demo-search">Search</FieldLabel>
+        <Input id="input-demo-search" type="search" placeholder="Search" />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-demo-number">Number</FieldLabel>
+        <Input id="input-demo-number" type="number" placeholder="123" />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-demo-date">Date</FieldLabel>
+        <Input id="input-demo-date" type="date" />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-demo-time">Time</FieldLabel>
+        <Input id="input-demo-time" type="time" />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-demo-file">File</FieldLabel>
+        <Input id="input-demo-file" type="file" />
+      </Field>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/input-with-button.tsx b/apps/v4/examples/base/input-with-button.tsx
index e9495da38..7f5bb414e 100644
--- a/apps/v4/examples/base/input-with-button.tsx
+++ b/apps/v4/examples/base/input-with-button.tsx
@@ -1,13 +1,11 @@
 import { Button } from "@/examples/base/ui/button"
 import { Input } from "@/examples/base/ui/input"
 
-export default function InputWithButton() {
+export function InputWithButton() {
   return (
-    <div className="flex w-full max-w-sm items-center gap-2">
-      <Input type="email" placeholder="Email" />
-      <Button type="submit" variant="outline">
-        Subscribe
-      </Button>
+    <div className="flex w-full gap-2">
+      <Input type="search" placeholder="Search..." className="flex-1" />
+      <Button>Search</Button>
     </div>
   )
 }
diff --git a/apps/v4/examples/base/input-with-description.tsx b/apps/v4/examples/base/input-with-description.tsx
new file mode 100644
index 000000000..dbabe6d3a
--- /dev/null
+++ b/apps/v4/examples/base/input-with-description.tsx
@@ -0,0 +1,18 @@
+import { Field, FieldDescription, FieldLabel } from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+
+export function InputWithDescription() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="input-demo-username">Username</FieldLabel>
+      <Input
+        id="input-demo-username"
+        type="text"
+        placeholder="Enter your username"
+      />
+      <FieldDescription>
+        Choose a unique username for your account.
+      </FieldDescription>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/input-with-label.tsx b/apps/v4/examples/base/input-with-label.tsx
index b644273f5..33e2a7dc6 100644
--- a/apps/v4/examples/base/input-with-label.tsx
+++ b/apps/v4/examples/base/input-with-label.tsx
@@ -1,11 +1,15 @@
+import { Field, FieldLabel } from "@/examples/base/ui/field"
 import { Input } from "@/examples/base/ui/input"
-import { Label } from "@/examples/base/ui/label"
 
-export default function InputWithLabel() {
+export function InputWithLabel() {
   return (
-    <div className="grid w-full max-w-sm items-center gap-3">
-      <Label htmlFor="email">Email</Label>
-      <Input type="email" id="email" placeholder="Email" />
-    </div>
+    <Field>
+      <FieldLabel htmlFor="input-demo-email">Email</FieldLabel>
+      <Input
+        id="input-demo-email"
+        type="email"
+        placeholder="name@example.com"
+      />
+    </Field>
   )
 }
diff --git a/apps/v4/examples/base/input-with-native-select.tsx b/apps/v4/examples/base/input-with-native-select.tsx
new file mode 100644
index 000000000..703e0e3e9
--- /dev/null
+++ b/apps/v4/examples/base/input-with-native-select.tsx
@@ -0,0 +1,19 @@
+import { Input } from "@/examples/base/ui/input"
+import {
+  NativeSelect,
+  NativeSelectOption,
+} from "@/examples/base/ui/native-select"
+import { Select } from "@/examples/base/ui/select"
+
+export function InputWithNativeSelect() {
+  return (
+    <div className="flex w-full gap-2">
+      <Input type="tel" placeholder="(555) 123-4567" className="flex-1" />
+      <NativeSelect defaultValue="+1">
+        <NativeSelectOption value="+1">+1</NativeSelectOption>
+        <NativeSelectOption value="+44">+44</NativeSelectOption>
+        <NativeSelectOption value="+46">+46</NativeSelectOption>
+      </NativeSelect>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/input-with-select.tsx b/apps/v4/examples/base/input-with-select.tsx
new file mode 100644
index 000000000..a84659433
--- /dev/null
+++ b/apps/v4/examples/base/input-with-select.tsx
@@ -0,0 +1,26 @@
+import { Input } from "@/examples/base/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+
+export function InputWithSelect() {
+  return (
+    <div className="flex w-full gap-2">
+      <Input type="text" placeholder="Enter amount" className="flex-1" />
+      <Select defaultValue="usd">
+        <SelectTrigger className="w-32">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="usd">USD</SelectItem>
+          <SelectItem value="eur">EUR</SelectItem>
+          <SelectItem value="gbp">GBP</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/item-default-extra-small.tsx b/apps/v4/examples/base/item-default-extra-small.tsx
new file mode 100644
index 000000000..f8ad5e916
--- /dev/null
+++ b/apps/v4/examples/base/item-default-extra-small.tsx
@@ -0,0 +1,112 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemDefaultExtraSmall() {
+  return (
+    <>
+      <Item size="xs">
+        <ItemContent>
+          <ItemTitle>Title Only</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item size="xs">
+        <ItemContent>
+          <ItemTitle>Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item size="xs">
+        <ItemContent>
+          <ItemTitle>Title + Description</ItemTitle>
+          <ItemDescription>
+            This is a description that provides additional context.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item size="xs">
+        <ItemContent>
+          <ItemTitle>Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            This item includes a title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description</ItemTitle>
+          <ItemDescription>
+            This item includes media, title, and description.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            Complete item with all components: media, title, description, and
+            button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item size="xs">
+        <ItemContent>
+          <ItemTitle>Multiple Actions</ItemTitle>
+          <ItemDescription>
+            Item with multiple action buttons in the actions area.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Cancel
+          </Button>
+          <Button size="sm">Confirm</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/item-default-small.tsx b/apps/v4/examples/base/item-default-small.tsx
new file mode 100644
index 000000000..88045dcdd
--- /dev/null
+++ b/apps/v4/examples/base/item-default-small.tsx
@@ -0,0 +1,112 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemDefaultSmall() {
+  return (
+    <>
+      <Item size="sm">
+        <ItemContent>
+          <ItemTitle>Title Only</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item size="sm">
+        <ItemContent>
+          <ItemTitle>Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item size="sm">
+        <ItemContent>
+          <ItemTitle>Title + Description</ItemTitle>
+          <ItemDescription>
+            This is a description that provides additional context.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item size="sm">
+        <ItemContent>
+          <ItemTitle>Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            This item includes a title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description</ItemTitle>
+          <ItemDescription>
+            This item includes media, title, and description.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            Complete item with all components: media, title, description, and
+            button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item size="sm">
+        <ItemContent>
+          <ItemTitle>Multiple Actions</ItemTitle>
+          <ItemDescription>
+            Item with multiple action buttons in the actions area.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Cancel
+          </Button>
+          <Button size="sm">Confirm</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/item-default-with-image.tsx b/apps/v4/examples/base/item-default-with-image.tsx
new file mode 100644
index 000000000..76d5da1af
--- /dev/null
+++ b/apps/v4/examples/base/item-default-with-image.tsx
@@ -0,0 +1,74 @@
+import Image from "next/image"
+import { Button } from "@/examples/base/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+
+export function ItemDefaultWithImage() {
+  return (
+    <>
+      <Item>
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/Project"
+            alt="Project"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Project Dashboard</ItemTitle>
+          <ItemDescription>
+            Overview of project settings and configuration.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item>
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/Document"
+            alt="Document"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Document</ItemTitle>
+          <ItemDescription>A document with metadata displayed.</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            View
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item>
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/File"
+            alt="File"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>File Attachment</ItemTitle>
+          <ItemDescription>
+            Complete file with image, title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Download</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/item-default.tsx b/apps/v4/examples/base/item-default.tsx
new file mode 100644
index 000000000..7845c5465
--- /dev/null
+++ b/apps/v4/examples/base/item-default.tsx
@@ -0,0 +1,108 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemDefault() {
+  return (
+    <>
+      <Item>
+        <ItemContent>
+          <ItemTitle>Title Only</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item>
+        <ItemContent>
+          <ItemTitle>Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item>
+        <ItemContent>
+          <ItemTitle>Title + Description</ItemTitle>
+          <ItemDescription>
+            This is a description that provides additional context.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item>
+        <ItemContent>
+          <ItemTitle>Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            This item includes a title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item>
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item>
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item>
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description</ItemTitle>
+          <ItemDescription>
+            This item includes media, title, and description.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item>
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            Complete item with all components: media, title, description, and
+            button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item>
+        <ItemContent>
+          <ItemTitle>Multiple Actions</ItemTitle>
+          <ItemDescription>
+            Item with multiple action buttons in the actions area.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Cancel
+          </Button>
+          <Button size="sm">Confirm</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/item-footer-examples.tsx b/apps/v4/examples/base/item-footer-examples.tsx
new file mode 100644
index 000000000..fd1bedb04
--- /dev/null
+++ b/apps/v4/examples/base/item-footer-examples.tsx
@@ -0,0 +1,54 @@
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+
+export function ItemFooterExamples() {
+  return (
+    <>
+      <Item>
+        <ItemContent>
+          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>
+          <ItemDescription>
+            Financial overview including revenue, expenses, and growth metrics
+            for the fourth quarter.
+          </ItemDescription>
+        </ItemContent>
+        <ItemFooter>
+          <span className="text-muted-foreground text-sm">
+            Last updated 2 hours ago
+          </span>
+        </ItemFooter>
+      </Item>
+      <Item variant="outline">
+        <ItemContent>
+          <ItemTitle>User Research Findings</ItemTitle>
+          <ItemDescription>
+            Insights from interviews and surveys conducted with 50+ users across
+            different demographics.
+          </ItemDescription>
+        </ItemContent>
+        <ItemFooter>
+          <span className="text-muted-foreground text-sm">
+            Created by Sarah Chen
+          </span>
+        </ItemFooter>
+      </Item>
+      <Item variant="muted">
+        <ItemContent>
+          <ItemTitle>Product Roadmap</ItemTitle>
+          <ItemDescription>
+            Planned features and improvements scheduled for the next three
+            months.
+          </ItemDescription>
+        </ItemContent>
+        <ItemFooter>
+          <span className="text-muted-foreground text-sm">12 comments</span>
+        </ItemFooter>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/item-header-and-footer-examples.tsx b/apps/v4/examples/base/item-header-and-footer-examples.tsx
new file mode 100644
index 000000000..4726b9370
--- /dev/null
+++ b/apps/v4/examples/base/item-header-and-footer-examples.tsx
@@ -0,0 +1,66 @@
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemHeader,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+
+export function ItemHeaderAndFooterExamples() {
+  return (
+    <>
+      <Item>
+        <ItemHeader>
+          <span className="text-sm font-medium">Team Project</span>
+        </ItemHeader>
+        <ItemContent>
+          <ItemTitle>Website Redesign</ItemTitle>
+          <ItemDescription>
+            Complete overhaul of the company website with modern design
+            principles and improved user experience.
+          </ItemDescription>
+        </ItemContent>
+        <ItemFooter>
+          <span className="text-muted-foreground text-sm">
+            Updated 5 minutes ago
+          </span>
+        </ItemFooter>
+      </Item>
+      <Item variant="outline">
+        <ItemHeader>
+          <span className="text-sm font-medium">Client Work</span>
+        </ItemHeader>
+        <ItemContent>
+          <ItemTitle>Mobile App Development</ItemTitle>
+          <ItemDescription>
+            Building a cross-platform mobile application for iOS and Android
+            with React Native.
+          </ItemDescription>
+        </ItemContent>
+        <ItemFooter>
+          <span className="text-muted-foreground text-sm">
+            Status: In Progress
+          </span>
+        </ItemFooter>
+      </Item>
+      <Item variant="muted">
+        <ItemHeader>
+          <span className="text-sm font-medium">Documentation</span>
+        </ItemHeader>
+        <ItemContent>
+          <ItemTitle>API Integration Guide</ItemTitle>
+          <ItemDescription>
+            Step-by-step instructions for integrating third-party APIs with
+            authentication and error handling.
+          </ItemDescription>
+        </ItemContent>
+        <ItemFooter>
+          <span className="text-muted-foreground text-sm">
+            Category: Technical • 3 attachments
+          </span>
+        </ItemFooter>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/item-header-examples.tsx b/apps/v4/examples/base/item-header-examples.tsx
new file mode 100644
index 000000000..72269ba70
--- /dev/null
+++ b/apps/v4/examples/base/item-header-examples.tsx
@@ -0,0 +1,50 @@
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemHeader,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+
+export function ItemHeaderExamples() {
+  return (
+    <>
+      <Item>
+        <ItemHeader>
+          <span className="text-sm font-medium">Design System</span>
+        </ItemHeader>
+        <ItemContent>
+          <ItemTitle>Component Library</ItemTitle>
+          <ItemDescription>
+            A comprehensive collection of reusable UI components for building
+            consistent interfaces.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline">
+        <ItemHeader>
+          <span className="text-sm font-medium">Marketing</span>
+        </ItemHeader>
+        <ItemContent>
+          <ItemTitle>Campaign Analytics</ItemTitle>
+          <ItemDescription>
+            Track performance metrics and engagement rates across all marketing
+            channels.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="muted">
+        <ItemHeader>
+          <span className="text-sm font-medium">Engineering</span>
+        </ItemHeader>
+        <ItemContent>
+          <ItemTitle>API Documentation</ItemTitle>
+          <ItemDescription>
+            Complete reference guide for all available endpoints and
+            authentication methods.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/item-link-default.tsx b/apps/v4/examples/base/item-link-default.tsx
new file mode 100644
index 000000000..5f2d6a77f
--- /dev/null
+++ b/apps/v4/examples/base/item-link-default.tsx
@@ -0,0 +1,65 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemLinkDefault() {
+  return (
+    <>
+      <ItemGroup>
+        <Item render={<a href="#" />}>
+          <ItemContent>
+            <ItemTitle>Title Only (Link)</ItemTitle>
+          </ItemContent>
+        </Item>
+        <Item render={<a href="#" />}>
+          <ItemContent>
+            <ItemTitle>Title + Description (Link)</ItemTitle>
+            <ItemDescription>
+              Clickable item with title and description.
+            </ItemDescription>
+          </ItemContent>
+        </Item>
+        <Item render={<a href="#" />}>
+          <ItemMedia variant="icon">
+            <InboxIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Media + Title (Link)</ItemTitle>
+          </ItemContent>
+        </Item>
+        <Item render={<a href="#" />}>
+          <ItemMedia variant="icon">
+            <InboxIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Media + Title + Description (Link)</ItemTitle>
+            <ItemDescription>
+              Complete link item with media, title, and description.
+            </ItemDescription>
+          </ItemContent>
+        </Item>
+        <Item render={<a href="#" />}>
+          <ItemContent>
+            <ItemTitle>With Actions (Link)</ItemTitle>
+            <ItemDescription>
+              Link item that also has action buttons.
+            </ItemDescription>
+          </ItemContent>
+          <ItemActions>
+            <Button variant="outline" size="sm">
+              Share
+            </Button>
+          </ItemActions>
+        </Item>
+      </ItemGroup>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/item-link-muted.tsx b/apps/v4/examples/base/item-link-muted.tsx
new file mode 100644
index 000000000..dd6a477a1
--- /dev/null
+++ b/apps/v4/examples/base/item-link-muted.tsx
@@ -0,0 +1,65 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemLinkMuted() {
+  return (
+    <>
+      <ItemGroup>
+        <Item variant="muted" render={<a href="#" />}>
+          <ItemContent>
+            <ItemTitle>Title Only (Link)</ItemTitle>
+          </ItemContent>
+        </Item>
+        <Item variant="muted" render={<a href="#" />}>
+          <ItemContent>
+            <ItemTitle>Title + Description (Link)</ItemTitle>
+            <ItemDescription>
+              Clickable item with title and description.
+            </ItemDescription>
+          </ItemContent>
+        </Item>
+        <Item variant="muted" render={<a href="#" />}>
+          <ItemMedia variant="icon">
+            <InboxIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Media + Title (Link)</ItemTitle>
+          </ItemContent>
+        </Item>
+        <Item variant="muted" render={<a href="#" />}>
+          <ItemMedia variant="icon">
+            <InboxIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Media + Title + Description (Link)</ItemTitle>
+            <ItemDescription>
+              Complete link item with media, title, and description.
+            </ItemDescription>
+          </ItemContent>
+        </Item>
+        <Item variant="muted" render={<a href="#" />}>
+          <ItemContent>
+            <ItemTitle>With Actions (Link)</ItemTitle>
+            <ItemDescription>
+              Link item that also has action buttons.
+            </ItemDescription>
+          </ItemContent>
+          <ItemActions>
+            <Button variant="outline" size="sm">
+              Share
+            </Button>
+          </ItemActions>
+        </Item>
+      </ItemGroup>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/item-link-outline.tsx b/apps/v4/examples/base/item-link-outline.tsx
new file mode 100644
index 000000000..c1497aa3a
--- /dev/null
+++ b/apps/v4/examples/base/item-link-outline.tsx
@@ -0,0 +1,65 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemLinkOutline() {
+  return (
+    <>
+      <ItemGroup>
+        <Item variant="outline" render={<a href="#" />}>
+          <ItemContent>
+            <ItemTitle>Title Only (Link)</ItemTitle>
+          </ItemContent>
+        </Item>
+        <Item variant="outline" render={<a href="#" />}>
+          <ItemContent>
+            <ItemTitle>Title + Description (Link)</ItemTitle>
+            <ItemDescription>
+              Clickable item with title and description.
+            </ItemDescription>
+          </ItemContent>
+        </Item>
+        <Item variant="outline" render={<a href="#" />}>
+          <ItemMedia variant="icon">
+            <InboxIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Media + Title (Link)</ItemTitle>
+          </ItemContent>
+        </Item>
+        <Item variant="outline" render={<a href="#" />}>
+          <ItemMedia variant="icon">
+            <InboxIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Media + Title + Description (Link)</ItemTitle>
+            <ItemDescription>
+              Complete link item with media, title, and description.
+            </ItemDescription>
+          </ItemContent>
+        </Item>
+        <Item variant="outline" render={<a href="#" />}>
+          <ItemContent>
+            <ItemTitle>With Actions (Link)</ItemTitle>
+            <ItemDescription>
+              Link item that also has action buttons.
+            </ItemDescription>
+          </ItemContent>
+          <ItemActions>
+            <Button variant="outline" size="sm">
+              Share
+            </Button>
+          </ItemActions>
+        </Item>
+      </ItemGroup>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/item-muted-extra-small.tsx b/apps/v4/examples/base/item-muted-extra-small.tsx
new file mode 100644
index 000000000..c0b0419a6
--- /dev/null
+++ b/apps/v4/examples/base/item-muted-extra-small.tsx
@@ -0,0 +1,112 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemMutedExtraSmall() {
+  return (
+    <>
+      <Item variant="muted" size="xs">
+        <ItemContent>
+          <ItemTitle>Title Only</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="muted" size="xs">
+        <ItemContent>
+          <ItemTitle>Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted" size="xs">
+        <ItemContent>
+          <ItemTitle>Title + Description</ItemTitle>
+          <ItemDescription>
+            This is a description that provides additional context.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="muted" size="xs">
+        <ItemContent>
+          <ItemTitle>Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            This item includes a title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted" size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="muted" size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted" size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description</ItemTitle>
+          <ItemDescription>
+            This item includes media, title, and description.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="muted" size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            Complete item with all components: media, title, description, and
+            button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted" size="xs">
+        <ItemContent>
+          <ItemTitle>Multiple Actions</ItemTitle>
+          <ItemDescription>
+            Item with multiple action buttons in the actions area.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Cancel
+          </Button>
+          <Button size="sm">Confirm</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/item-muted-small.tsx b/apps/v4/examples/base/item-muted-small.tsx
new file mode 100644
index 000000000..637eb7953
--- /dev/null
+++ b/apps/v4/examples/base/item-muted-small.tsx
@@ -0,0 +1,112 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemMutedSmall() {
+  return (
+    <>
+      <Item variant="muted" size="sm">
+        <ItemContent>
+          <ItemTitle>Title Only</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="muted" size="sm">
+        <ItemContent>
+          <ItemTitle>Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted" size="sm">
+        <ItemContent>
+          <ItemTitle>Title + Description</ItemTitle>
+          <ItemDescription>
+            This is a description that provides additional context.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="muted" size="sm">
+        <ItemContent>
+          <ItemTitle>Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            This item includes a title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted" size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="muted" size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted" size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description</ItemTitle>
+          <ItemDescription>
+            This item includes media, title, and description.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="muted" size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            Complete item with all components: media, title, description, and
+            button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted" size="sm">
+        <ItemContent>
+          <ItemTitle>Multiple Actions</ItemTitle>
+          <ItemDescription>
+            Item with multiple action buttons in the actions area.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Cancel
+          </Button>
+          <Button size="sm">Confirm</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/item-muted-with-image.tsx b/apps/v4/examples/base/item-muted-with-image.tsx
new file mode 100644
index 000000000..02ff5f597
--- /dev/null
+++ b/apps/v4/examples/base/item-muted-with-image.tsx
@@ -0,0 +1,74 @@
+import Image from "next/image"
+import { Button } from "@/examples/base/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+
+export function ItemMutedWithImage() {
+  return (
+    <>
+      <Item variant="muted">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/Project"
+            alt="Project"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Project Dashboard</ItemTitle>
+          <ItemDescription>
+            Overview of project settings and configuration.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="muted">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/Document"
+            alt="Document"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Document</ItemTitle>
+          <ItemDescription>A document with metadata displayed.</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            View
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/File"
+            alt="File"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>File Attachment</ItemTitle>
+          <ItemDescription>
+            Complete file with image, title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Download</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/item-muted.tsx b/apps/v4/examples/base/item-muted.tsx
new file mode 100644
index 000000000..97ba1e935
--- /dev/null
+++ b/apps/v4/examples/base/item-muted.tsx
@@ -0,0 +1,108 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function MutedVariantItems() {
+  return (
+    <>
+      <Item variant="muted">
+        <ItemContent>
+          <ItemTitle>Title Only</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="muted">
+        <ItemContent>
+          <ItemTitle>Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted">
+        <ItemContent>
+          <ItemTitle>Title + Description</ItemTitle>
+          <ItemDescription>
+            This is a description that provides additional context.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="muted">
+        <ItemContent>
+          <ItemTitle>Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            This item includes a title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="muted">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description</ItemTitle>
+          <ItemDescription>
+            This item includes media, title, and description.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="muted">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            Complete item with all components: media, title, description, and
+            button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted">
+        <ItemContent>
+          <ItemTitle>Multiple Actions</ItemTitle>
+          <ItemDescription>
+            Item with multiple action buttons in the actions area.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Cancel
+          </Button>
+          <Button size="sm">Confirm</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/item-outline-extra-small.tsx b/apps/v4/examples/base/item-outline-extra-small.tsx
new file mode 100644
index 000000000..d318be868
--- /dev/null
+++ b/apps/v4/examples/base/item-outline-extra-small.tsx
@@ -0,0 +1,112 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemOutlineExtraSmall() {
+  return (
+    <>
+      <Item variant="outline" size="xs">
+        <ItemContent>
+          <ItemTitle>Title Only</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" size="xs">
+        <ItemContent>
+          <ItemTitle>Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="xs">
+        <ItemContent>
+          <ItemTitle>Title + Description</ItemTitle>
+          <ItemDescription>
+            This is a description that provides additional context.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" size="xs">
+        <ItemContent>
+          <ItemTitle>Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            This item includes a title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description</ItemTitle>
+          <ItemDescription>
+            This item includes media, title, and description.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            Complete item with all components: media, title, description, and
+            button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="xs">
+        <ItemContent>
+          <ItemTitle>Multiple Actions</ItemTitle>
+          <ItemDescription>
+            Item with multiple action buttons in the actions area.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Cancel
+          </Button>
+          <Button size="sm">Confirm</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/item-outline-small.tsx b/apps/v4/examples/base/item-outline-small.tsx
new file mode 100644
index 000000000..50c028828
--- /dev/null
+++ b/apps/v4/examples/base/item-outline-small.tsx
@@ -0,0 +1,112 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemOutlineSmall() {
+  return (
+    <>
+      <Item variant="outline" size="sm">
+        <ItemContent>
+          <ItemTitle>Title Only</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" size="sm">
+        <ItemContent>
+          <ItemTitle>Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="sm">
+        <ItemContent>
+          <ItemTitle>Title + Description</ItemTitle>
+          <ItemDescription>
+            This is a description that provides additional context.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" size="sm">
+        <ItemContent>
+          <ItemTitle>Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            This item includes a title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description</ItemTitle>
+          <ItemDescription>
+            This item includes media, title, and description.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            Complete item with all components: media, title, description, and
+            button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="sm">
+        <ItemContent>
+          <ItemTitle>Multiple Actions</ItemTitle>
+          <ItemDescription>
+            Item with multiple action buttons in the actions area.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Cancel
+          </Button>
+          <Button size="sm">Confirm</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/item-outline-with-image-extra-small.tsx b/apps/v4/examples/base/item-outline-with-image-extra-small.tsx
new file mode 100644
index 000000000..8c4ced685
--- /dev/null
+++ b/apps/v4/examples/base/item-outline-with-image-extra-small.tsx
@@ -0,0 +1,66 @@
+import Image from "next/image"
+import { Button } from "@/examples/base/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+
+export function ItemOutlineWithImageExtraSmall() {
+  return (
+    <>
+      <Item variant="outline" size="xs">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/Project"
+            alt="Project"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Project Dashboard</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" size="xs">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/Document"
+            alt="Document"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Document</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            View
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="xs">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/File"
+            alt="File"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>File Attachment</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Download</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/item-outline-with-image-small.tsx b/apps/v4/examples/base/item-outline-with-image-small.tsx
new file mode 100644
index 000000000..c1cc68755
--- /dev/null
+++ b/apps/v4/examples/base/item-outline-with-image-small.tsx
@@ -0,0 +1,74 @@
+import Image from "next/image"
+import { Button } from "@/examples/base/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+
+export function ItemOutlineWithImageSmall() {
+  return (
+    <>
+      <Item variant="outline" size="sm">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/Project"
+            alt="Project"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Project Dashboard</ItemTitle>
+          <ItemDescription>
+            Overview of project settings and configuration.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" size="sm">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/Document"
+            alt="Document"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Document</ItemTitle>
+          <ItemDescription>A document with metadata displayed.</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            View
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="sm">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/File"
+            alt="File"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>File Attachment</ItemTitle>
+          <ItemDescription>
+            Complete file with image, title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Download</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/item-outline-with-image.tsx b/apps/v4/examples/base/item-outline-with-image.tsx
new file mode 100644
index 000000000..db47972bb
--- /dev/null
+++ b/apps/v4/examples/base/item-outline-with-image.tsx
@@ -0,0 +1,74 @@
+import Image from "next/image"
+import { Button } from "@/examples/base/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+
+export function OutlineVariantItemsWithImage() {
+  return (
+    <>
+      <Item variant="outline">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/Project"
+            alt="Project"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Project Dashboard</ItemTitle>
+          <ItemDescription>
+            Overview of project settings and configuration.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/Document"
+            alt="Document"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Document</ItemTitle>
+          <ItemDescription>A document with metadata displayed.</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            View
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/File"
+            alt="File"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>File Attachment</ItemTitle>
+          <ItemDescription>
+            Complete file with image, title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Download</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/item-outline.tsx b/apps/v4/examples/base/item-outline.tsx
new file mode 100644
index 000000000..cec7b20d2
--- /dev/null
+++ b/apps/v4/examples/base/item-outline.tsx
@@ -0,0 +1,108 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function OutlineVariantItems() {
+  return (
+    <>
+      <Item variant="outline">
+        <ItemContent>
+          <ItemTitle>Title Only</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="outline">
+        <ItemContent>
+          <ItemTitle>Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline">
+        <ItemContent>
+          <ItemTitle>Title + Description</ItemTitle>
+          <ItemDescription>
+            This is a description that provides additional context.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline">
+        <ItemContent>
+          <ItemTitle>Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            This item includes a title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description</ItemTitle>
+          <ItemDescription>
+            This item includes media, title, and description.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            Complete item with all components: media, title, description, and
+            button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline">
+        <ItemContent>
+          <ItemTitle>Multiple Actions</ItemTitle>
+          <ItemDescription>
+            Item with multiple action buttons in the actions area.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Cancel
+          </Button>
+          <Button size="sm">Confirm</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/item-separator-example.tsx b/apps/v4/examples/base/item-separator-example.tsx
new file mode 100644
index 000000000..849ef2955
--- /dev/null
+++ b/apps/v4/examples/base/item-separator-example.tsx
@@ -0,0 +1,56 @@
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemSeparatorExample() {
+  return (
+    <ItemGroup>
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Inbox</ItemTitle>
+          <ItemDescription>View all incoming messages.</ItemDescription>
+        </ItemContent>
+      </Item>
+      <ItemSeparator />
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Sent</ItemTitle>
+          <ItemDescription>View all sent messages.</ItemDescription>
+        </ItemContent>
+      </Item>
+      <ItemSeparator />
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Drafts</ItemTitle>
+          <ItemDescription>View all draft messages.</ItemDescription>
+        </ItemContent>
+      </Item>
+      <ItemSeparator />
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Archive</ItemTitle>
+          <ItemDescription>View archived messages.</ItemDescription>
+        </ItemContent>
+      </Item>
+    </ItemGroup>
+  )
+}
diff --git a/apps/v4/examples/base/kbd-arrow-keys.tsx b/apps/v4/examples/base/kbd-arrow-keys.tsx
new file mode 100644
index 000000000..ef244b555
--- /dev/null
+++ b/apps/v4/examples/base/kbd-arrow-keys.tsx
@@ -0,0 +1,12 @@
+import { Kbd } from "@/examples/base/ui/kbd"
+
+export function KbdArrowKeys() {
+  return (
+    <div className="flex items-center gap-2">
+      <Kbd>↑</Kbd>
+      <Kbd>↓</Kbd>
+      <Kbd>←</Kbd>
+      <Kbd>→</Kbd>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/kbd-basic.tsx b/apps/v4/examples/base/kbd-basic.tsx
new file mode 100644
index 000000000..346ca291b
--- /dev/null
+++ b/apps/v4/examples/base/kbd-basic.tsx
@@ -0,0 +1,11 @@
+import { Kbd } from "@/examples/base/ui/kbd"
+
+export function KbdBasic() {
+  return (
+    <div className="flex items-center gap-2">
+      <Kbd>Ctrl</Kbd>
+      <Kbd>⌘K</Kbd>
+      <Kbd>Ctrl + B</Kbd>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/kbd-group-example.tsx b/apps/v4/examples/base/kbd-group-example.tsx
new file mode 100644
index 000000000..b1b592d92
--- /dev/null
+++ b/apps/v4/examples/base/kbd-group-example.tsx
@@ -0,0 +1,11 @@
+import { Kbd, KbdGroup } from "@/examples/base/ui/kbd"
+
+export function KbdGroupExample() {
+  return (
+    <KbdGroup>
+      <Kbd>Ctrl</Kbd>
+      <Kbd>Shift</Kbd>
+      <Kbd>P</Kbd>
+    </KbdGroup>
+  )
+}
diff --git a/apps/v4/examples/base/kbd-in-input-group.tsx b/apps/v4/examples/base/kbd-in-input-group.tsx
new file mode 100644
index 000000000..69c01db64
--- /dev/null
+++ b/apps/v4/examples/base/kbd-in-input-group.tsx
@@ -0,0 +1,17 @@
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/base/ui/input-group"
+import { Kbd } from "@/examples/base/ui/kbd"
+
+export function KbdInInputGroup() {
+  return (
+    <InputGroup>
+      <InputGroupInput />
+      <InputGroupAddon>
+        <Kbd>Space</Kbd>
+      </InputGroupAddon>
+    </InputGroup>
+  )
+}
diff --git a/apps/v4/examples/base/kbd-in-tooltip.tsx b/apps/v4/examples/base/kbd-in-tooltip.tsx
new file mode 100644
index 000000000..0229bcbab
--- /dev/null
+++ b/apps/v4/examples/base/kbd-in-tooltip.tsx
@@ -0,0 +1,25 @@
+import { Button } from "@/examples/base/ui/button"
+import { Kbd } from "@/examples/base/ui/kbd"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/base/ui/tooltip"
+import { SaveIcon } from "lucide-react"
+
+export function KbdInTooltip() {
+  return (
+    <>
+      <Tooltip>
+        <TooltipTrigger render={<Button size="icon-sm" variant="outline" />}>
+          <SaveIcon />
+        </TooltipTrigger>
+        <TooltipContent className="pr-1.5">
+          <div className="flex items-center gap-2">
+            Save Changes <Kbd>S</Kbd>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/kbd-modifier-keys.tsx b/apps/v4/examples/base/kbd-modifier-keys.tsx
new file mode 100644
index 000000000..d669c9ff0
--- /dev/null
+++ b/apps/v4/examples/base/kbd-modifier-keys.tsx
@@ -0,0 +1,10 @@
+import { Kbd } from "@/examples/base/ui/kbd"
+
+export function KbdModifierKeys() {
+  return (
+    <div className="flex items-center gap-2">
+      <Kbd>⌘</Kbd>
+      <Kbd>C</Kbd>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/kbd-with-icons-and-text.tsx b/apps/v4/examples/base/kbd-with-icons-and-text.tsx
new file mode 100644
index 000000000..3f8ca9a86
--- /dev/null
+++ b/apps/v4/examples/base/kbd-with-icons-and-text.tsx
@@ -0,0 +1,17 @@
+import { Kbd, KbdGroup } from "@/examples/base/ui/kbd"
+import { ArrowLeftIcon, CircleDashedIcon } from "lucide-react"
+
+export function KbdWithIconsAndText() {
+  return (
+    <KbdGroup>
+      <Kbd>
+        <ArrowLeftIcon />
+        Left
+      </Kbd>
+      <Kbd>
+        <CircleDashedIcon />
+        Voice Enabled
+      </Kbd>
+    </KbdGroup>
+  )
+}
diff --git a/apps/v4/examples/base/kbd-with-icons.tsx b/apps/v4/examples/base/kbd-with-icons.tsx
new file mode 100644
index 000000000..b9405a964
--- /dev/null
+++ b/apps/v4/examples/base/kbd-with-icons.tsx
@@ -0,0 +1,18 @@
+import { Kbd, KbdGroup } from "@/examples/base/ui/kbd"
+import { ArrowLeftIcon, ArrowRightIcon, CircleDashedIcon } from "lucide-react"
+
+export function KbdWithIcons() {
+  return (
+    <KbdGroup>
+      <Kbd>
+        <CircleDashedIcon />
+      </Kbd>
+      <Kbd>
+        <ArrowLeftIcon />
+      </Kbd>
+      <Kbd>
+        <ArrowRightIcon />
+      </Kbd>
+    </KbdGroup>
+  )
+}
diff --git a/apps/v4/examples/base/kbd-with-samp.tsx b/apps/v4/examples/base/kbd-with-samp.tsx
new file mode 100644
index 000000000..716e2502d
--- /dev/null
+++ b/apps/v4/examples/base/kbd-with-samp.tsx
@@ -0,0 +1,9 @@
+import { Kbd } from "@/examples/base/ui/kbd"
+
+export function KbdWithSamp() {
+  return (
+    <Kbd>
+      <samp>File</samp>
+    </Kbd>
+  )
+}
diff --git a/apps/v4/examples/base/label-disabled.tsx b/apps/v4/examples/base/label-disabled.tsx
new file mode 100644
index 000000000..b58a490a7
--- /dev/null
+++ b/apps/v4/examples/base/label-disabled.tsx
@@ -0,0 +1,12 @@
+import { Field } from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+import { Label } from "@/examples/base/ui/label"
+
+export function LabelDisabled() {
+  return (
+    <Field data-disabled={true}>
+      <Label htmlFor="label-demo-disabled">Disabled</Label>
+      <Input id="label-demo-disabled" placeholder="Disabled" disabled />
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/label-with-checkbox.tsx b/apps/v4/examples/base/label-with-checkbox.tsx
new file mode 100644
index 000000000..372d25344
--- /dev/null
+++ b/apps/v4/examples/base/label-with-checkbox.tsx
@@ -0,0 +1,12 @@
+import { Checkbox } from "@/examples/base/ui/checkbox"
+import { Field } from "@/examples/base/ui/field"
+import { Label } from "@/examples/base/ui/label"
+
+export function LabelWithCheckbox() {
+  return (
+    <Field orientation="horizontal">
+      <Checkbox id="label-demo-terms" />
+      <Label htmlFor="label-demo-terms">Accept terms and conditions</Label>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/label-with-input.tsx b/apps/v4/examples/base/label-with-input.tsx
new file mode 100644
index 000000000..e28077c37
--- /dev/null
+++ b/apps/v4/examples/base/label-with-input.tsx
@@ -0,0 +1,12 @@
+import { Field } from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+import { Label } from "@/examples/base/ui/label"
+
+export function LabelWithInput() {
+  return (
+    <Field>
+      <Label htmlFor="label-demo-username">Username</Label>
+      <Input id="label-demo-username" placeholder="Username" />
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/label-with-textarea.tsx b/apps/v4/examples/base/label-with-textarea.tsx
new file mode 100644
index 000000000..455ba2377
--- /dev/null
+++ b/apps/v4/examples/base/label-with-textarea.tsx
@@ -0,0 +1,12 @@
+import { Field } from "@/examples/base/ui/field"
+import { Label } from "@/examples/base/ui/label"
+import { Textarea } from "@/examples/base/ui/textarea"
+
+export function LabelWithTextarea() {
+  return (
+    <Field>
+      <Label htmlFor="label-demo-message">Message</Label>
+      <Textarea id="label-demo-message" placeholder="Message" />
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/menubar-basic.tsx b/apps/v4/examples/base/menubar-basic.tsx
new file mode 100644
index 000000000..8b6495cd7
--- /dev/null
+++ b/apps/v4/examples/base/menubar-basic.tsx
@@ -0,0 +1,47 @@
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from "@/examples/base/ui/menubar"
+
+export function MenubarBasic() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            New Window <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>New Incognito Window</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>
+            Print... <MenubarShortcut>⌘P</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Cut</MenubarItem>
+          <MenubarItem>Copy</MenubarItem>
+          <MenubarItem>Paste</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/v4/examples/base/menubar-destructive.tsx b/apps/v4/examples/base/menubar-destructive.tsx
new file mode 100644
index 000000000..eb611c30a
--- /dev/null
+++ b/apps/v4/examples/base/menubar-destructive.tsx
@@ -0,0 +1,65 @@
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from "@/examples/base/ui/menubar"
+import {
+  FileIcon,
+  FolderIcon,
+  LogOutIcon,
+  SettingsIcon,
+  TrashIcon,
+  UserIcon,
+} from "lucide-react"
+
+export function MenubarDestructive() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent className="w-40">
+          <MenubarItem>
+            <FileIcon />
+            New File <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            <FolderIcon />
+            Open Folder
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem variant="destructive">
+            <TrashIcon />
+            Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Account</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            <UserIcon />
+            Profile
+          </MenubarItem>
+          <MenubarItem>
+            <SettingsIcon />
+            Settings
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem variant="destructive">
+            <LogOutIcon />
+            Sign out
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem variant="destructive">
+            <TrashIcon />
+            Delete
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/v4/examples/base/menubar-format.tsx b/apps/v4/examples/base/menubar-format.tsx
new file mode 100644
index 000000000..189d0f292
--- /dev/null
+++ b/apps/v4/examples/base/menubar-format.tsx
@@ -0,0 +1,48 @@
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from "@/examples/base/ui/menubar"
+import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
+
+export function MenubarFormat() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>Format</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            <BoldIcon />
+            Bold <MenubarShortcut>⌘B</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            <ItalicIcon />
+            Italic <MenubarShortcut>⌘I</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            <UnderlineIcon />
+            Underline <MenubarShortcut>⌘U</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>
+          <MenubarCheckboxItem>Code</MenubarCheckboxItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>
+          <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Zoom In</MenubarItem>
+          <MenubarItem inset>Zoom Out</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/v4/examples/base/menubar-in-dialog.tsx b/apps/v4/examples/base/menubar-in-dialog.tsx
new file mode 100644
index 000000000..a86d92580
--- /dev/null
+++ b/apps/v4/examples/base/menubar-in-dialog.tsx
@@ -0,0 +1,93 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/base/ui/dialog"
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@/examples/base/ui/menubar"
+import {
+  ClipboardPasteIcon,
+  CopyIcon,
+  ScissorsIcon,
+  TrashIcon,
+} from "lucide-react"
+
+export function MenubarInDialog() {
+  return (
+    <>
+      <Dialog>
+        <DialogTrigger render={<Button variant="outline" />}>
+          Open Dialog
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Menubar Example</DialogTitle>
+            <DialogDescription>
+              Use the menubar below to see the menu options.
+            </DialogDescription>
+          </DialogHeader>
+          <Menubar>
+            <MenubarMenu>
+              <MenubarTrigger>File</MenubarTrigger>
+              <MenubarContent>
+                <MenubarItem>
+                  <CopyIcon />
+                  Copy
+                </MenubarItem>
+                <MenubarItem>
+                  <ScissorsIcon />
+                  Cut
+                </MenubarItem>
+                <MenubarItem>
+                  <ClipboardPasteIcon />
+                  Paste
+                </MenubarItem>
+                <MenubarSeparator />
+                <MenubarSub>
+                  <MenubarSubTrigger>More Options</MenubarSubTrigger>
+                  <MenubarSubContent>
+                    <MenubarItem>Save Page...</MenubarItem>
+                    <MenubarItem>Create Shortcut...</MenubarItem>
+                    <MenubarItem>Name Window...</MenubarItem>
+                    <MenubarSeparator />
+                    <MenubarItem>Developer Tools</MenubarItem>
+                  </MenubarSubContent>
+                </MenubarSub>
+                <MenubarSeparator />
+                <MenubarItem variant="destructive">
+                  <TrashIcon />
+                  Delete
+                </MenubarItem>
+              </MenubarContent>
+            </MenubarMenu>
+            <MenubarMenu>
+              <MenubarTrigger>Edit</MenubarTrigger>
+              <MenubarContent>
+                <MenubarItem>
+                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+                </MenubarItem>
+                <MenubarItem>
+                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+                </MenubarItem>
+              </MenubarContent>
+            </MenubarMenu>
+          </Menubar>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/menubar-insert.tsx b/apps/v4/examples/base/menubar-insert.tsx
new file mode 100644
index 000000000..055ff5bae
--- /dev/null
+++ b/apps/v4/examples/base/menubar-insert.tsx
@@ -0,0 +1,64 @@
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@/examples/base/ui/menubar"
+import {
+  CheckIcon,
+  ImageIcon,
+  LinkIcon,
+  SearchIcon,
+  TableIcon,
+} from "lucide-react"
+
+export function MenubarInsert() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>Insert</MenubarTrigger>
+        <MenubarContent>
+          <MenubarSub>
+            <MenubarSubTrigger>
+              <ImageIcon />
+              Media
+            </MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Image</MenubarItem>
+              <MenubarItem>Video</MenubarItem>
+              <MenubarItem>Audio</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>
+            <LinkIcon />
+            Link <MenubarShortcut>⌘K</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            <TableIcon />
+            Table
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Tools</MenubarTrigger>
+        <MenubarContent className="w-44">
+          <MenubarItem>
+            <SearchIcon />
+            Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            <CheckIcon />
+            Spell Check
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/v4/examples/base/menubar-with-checkboxes.tsx b/apps/v4/examples/base/menubar-with-checkboxes.tsx
new file mode 100644
index 000000000..54e94af7c
--- /dev/null
+++ b/apps/v4/examples/base/menubar-with-checkboxes.tsx
@@ -0,0 +1,41 @@
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from "@/examples/base/ui/menubar"
+
+export function MenubarWithCheckboxes() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent className="w-64">
+          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+          <MenubarCheckboxItem checked>
+            Always Show Full URLs
+          </MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarItem inset>
+            Reload <MenubarShortcut>⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled inset>
+            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Format</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>
+          <MenubarCheckboxItem>Code</MenubarCheckboxItem>
+          <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/v4/examples/base/menubar-with-icons.tsx b/apps/v4/examples/base/menubar-with-icons.tsx
new file mode 100644
index 000000000..4239cc634
--- /dev/null
+++ b/apps/v4/examples/base/menubar-with-icons.tsx
@@ -0,0 +1,56 @@
+import {
+  Menubar,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from "@/examples/base/ui/menubar"
+import { CircleDashedIcon, FileIcon, FolderIcon, SaveIcon } from "lucide-react"
+
+export function MenubarWithIcons() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            <FileIcon />
+            New File <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            <FolderIcon />
+            Open Folder
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>
+            <SaveIcon />
+            Save <MenubarShortcut>⌘S</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>More</MenubarTrigger>
+        <MenubarContent>
+          <MenubarGroup>
+            <MenubarItem>
+              <CircleDashedIcon />
+              Settings
+            </MenubarItem>
+            <MenubarItem>
+              <CircleDashedIcon />
+              Help
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem variant="destructive">
+              <CircleDashedIcon />
+              Delete
+            </MenubarItem>
+          </MenubarGroup>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/v4/examples/base/menubar-with-radio.tsx b/apps/v4/examples/base/menubar-with-radio.tsx
new file mode 100644
index 000000000..564ca4e6e
--- /dev/null
+++ b/apps/v4/examples/base/menubar-with-radio.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarTrigger,
+} from "@/examples/base/ui/menubar"
+
+export function MenubarWithRadio() {
+  const [user, setUser] = React.useState("benoit")
+  const [theme, setTheme] = React.useState("system")
+
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>Profiles</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value={user} onValueChange={setUser}>
+            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+            <MenubarRadioItem value="luis">Luis</MenubarRadioItem>
+          </MenubarRadioGroup>
+          <MenubarSeparator />
+          <MenubarItem inset>Edit...</MenubarItem>
+          <MenubarItem inset>Add Profile...</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Theme</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value={theme} onValueChange={setTheme}>
+            <MenubarRadioItem value="light">Light</MenubarRadioItem>
+            <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
+            <MenubarRadioItem value="system">System</MenubarRadioItem>
+          </MenubarRadioGroup>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/v4/examples/base/menubar-with-shortcuts.tsx b/apps/v4/examples/base/menubar-with-shortcuts.tsx
new file mode 100644
index 000000000..cad511057
--- /dev/null
+++ b/apps/v4/examples/base/menubar-with-shortcuts.tsx
@@ -0,0 +1,51 @@
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from "@/examples/base/ui/menubar"
+
+export function MenubarWithShortcuts() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            New Window <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Print... <MenubarShortcut>⌘P</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>
+            Cut <MenubarShortcut>⌘X</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Copy <MenubarShortcut>⌘C</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Paste <MenubarShortcut>⌘V</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/v4/examples/base/menubar-with-submenu.tsx b/apps/v4/examples/base/menubar-with-submenu.tsx
new file mode 100644
index 000000000..14f802dc4
--- /dev/null
+++ b/apps/v4/examples/base/menubar-with-submenu.tsx
@@ -0,0 +1,60 @@
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@/examples/base/ui/menubar"
+
+export function MenubarWithSubmenu() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarSub>
+            <MenubarSubTrigger>Share</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Email link</MenubarItem>
+              <MenubarItem>Messages</MenubarItem>
+              <MenubarItem>Notes</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>
+            Print... <MenubarShortcut>⌘P</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Find</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Find...</MenubarItem>
+              <MenubarItem>Find Next</MenubarItem>
+              <MenubarItem>Find Previous</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>Cut</MenubarItem>
+          <MenubarItem>Copy</MenubarItem>
+          <MenubarItem>Paste</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/v4/examples/base/muted-item-group.tsx b/apps/v4/examples/base/muted-item-group.tsx
new file mode 100644
index 000000000..8cd94878d
--- /dev/null
+++ b/apps/v4/examples/base/muted-item-group.tsx
@@ -0,0 +1,49 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+
+export function MutedItemGroup() {
+  return (
+    <ItemGroup>
+      <Item variant="muted">
+        <ItemContent>
+          <ItemTitle>Item 1</ItemTitle>
+          <ItemDescription>First item in muted group.</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted">
+        <ItemContent>
+          <ItemTitle>Item 2</ItemTitle>
+          <ItemDescription>Second item in muted group.</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted">
+        <ItemContent>
+          <ItemTitle>Item 3</ItemTitle>
+          <ItemDescription>Third item in muted group.</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+    </ItemGroup>
+  )
+}
diff --git a/apps/v4/examples/base/native-select-basic.tsx b/apps/v4/examples/base/native-select-basic.tsx
new file mode 100644
index 000000000..195e6a7db
--- /dev/null
+++ b/apps/v4/examples/base/native-select-basic.tsx
@@ -0,0 +1,19 @@
+import {
+  NativeSelect,
+  NativeSelectOption,
+} from "@/examples/base/ui/native-select"
+
+export function NativeSelectBasic() {
+  return (
+    <NativeSelect>
+      <NativeSelectOption value="">Select a fruit</NativeSelectOption>
+      <NativeSelectOption value="apple">Apple</NativeSelectOption>
+      <NativeSelectOption value="banana">Banana</NativeSelectOption>
+      <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
+      <NativeSelectOption value="grapes" disabled>
+        Grapes
+      </NativeSelectOption>
+      <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
+    </NativeSelect>
+  )
+}
diff --git a/apps/v4/examples/base/native-select-disabled.tsx b/apps/v4/examples/base/native-select-disabled.tsx
index 698af00d5..bd1574161 100644
--- a/apps/v4/examples/base/native-select-disabled.tsx
+++ b/apps/v4/examples/base/native-select-disabled.tsx
@@ -3,14 +3,13 @@ import {
   NativeSelectOption,
 } from "@/examples/base/ui/native-select"
 
-export default function NativeSelectDisabled() {
+export function NativeSelectDisabled() {
   return (
     <NativeSelect disabled>
-      <NativeSelectOption value="">Select priority</NativeSelectOption>
-      <NativeSelectOption value="low">Low</NativeSelectOption>
-      <NativeSelectOption value="medium">Medium</NativeSelectOption>
-      <NativeSelectOption value="high">High</NativeSelectOption>
-      <NativeSelectOption value="critical">Critical</NativeSelectOption>
+      <NativeSelectOption value="">Disabled</NativeSelectOption>
+      <NativeSelectOption value="apple">Apple</NativeSelectOption>
+      <NativeSelectOption value="banana">Banana</NativeSelectOption>
+      <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
     </NativeSelect>
   )
 }
diff --git a/apps/v4/examples/base/native-select-fields.tsx b/apps/v4/examples/base/native-select-fields.tsx
new file mode 100644
index 000000000..83bb6ec2c
--- /dev/null
+++ b/apps/v4/examples/base/native-select-fields.tsx
@@ -0,0 +1,101 @@
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/base/ui/field"
+import {
+  NativeSelect,
+  NativeSelectOptGroup,
+  NativeSelectOption,
+} from "@/examples/base/ui/native-select"
+import { Select } from "@/examples/base/ui/select"
+
+export function NativeSelectFields() {
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="native-select-basic">
+          Basic Native Select
+        </FieldLabel>
+        <NativeSelect id="native-select-basic">
+          <NativeSelectOption value="">Choose an option</NativeSelectOption>
+          <NativeSelectOption value="option1">Option 1</NativeSelectOption>
+          <NativeSelectOption value="option2">Option 2</NativeSelectOption>
+          <NativeSelectOption value="option3">Option 3</NativeSelectOption>
+        </NativeSelect>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="native-select-country">Country</FieldLabel>
+        <NativeSelect id="native-select-country">
+          <NativeSelectOption value="">Select your country</NativeSelectOption>
+          <NativeSelectOption value="us">United States</NativeSelectOption>
+          <NativeSelectOption value="uk">United Kingdom</NativeSelectOption>
+          <NativeSelectOption value="ca">Canada</NativeSelectOption>
+        </NativeSelect>
+        <FieldDescription>
+          Select the country where you currently reside.
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="native-select-timezone">Timezone</FieldLabel>
+        <FieldDescription>
+          Choose your local timezone for accurate scheduling.
+        </FieldDescription>
+        <NativeSelect id="native-select-timezone">
+          <NativeSelectOption value="">Select timezone</NativeSelectOption>
+          <NativeSelectOption value="utc">UTC</NativeSelectOption>
+          <NativeSelectOption value="est">Eastern Time</NativeSelectOption>
+          <NativeSelectOption value="pst">Pacific Time</NativeSelectOption>
+        </NativeSelect>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="native-select-grouped">Grouped Options</FieldLabel>
+        <NativeSelect id="native-select-grouped">
+          <NativeSelectOption value="">Select a region</NativeSelectOption>
+          <NativeSelectOptGroup label="North America">
+            <NativeSelectOption value="us">United States</NativeSelectOption>
+            <NativeSelectOption value="ca">Canada</NativeSelectOption>
+            <NativeSelectOption value="mx">Mexico</NativeSelectOption>
+          </NativeSelectOptGroup>
+          <NativeSelectOptGroup label="Europe">
+            <NativeSelectOption value="uk">United Kingdom</NativeSelectOption>
+            <NativeSelectOption value="fr">France</NativeSelectOption>
+            <NativeSelectOption value="de">Germany</NativeSelectOption>
+          </NativeSelectOptGroup>
+        </NativeSelect>
+        <FieldDescription>
+          Native select with grouped options using optgroup.
+        </FieldDescription>
+      </Field>
+      <Field data-invalid>
+        <FieldLabel htmlFor="native-select-invalid">
+          Invalid Native Select
+        </FieldLabel>
+        <NativeSelect id="native-select-invalid" aria-invalid>
+          <NativeSelectOption value="">
+            This field has an error
+          </NativeSelectOption>
+          <NativeSelectOption value="option1">Option 1</NativeSelectOption>
+          <NativeSelectOption value="option2">Option 2</NativeSelectOption>
+          <NativeSelectOption value="option3">Option 3</NativeSelectOption>
+        </NativeSelect>
+        <FieldDescription>
+          This field contains validation errors.
+        </FieldDescription>
+      </Field>
+      <Field data-disabled>
+        <FieldLabel htmlFor="native-select-disabled-field">
+          Disabled Field
+        </FieldLabel>
+        <NativeSelect id="native-select-disabled-field" disabled>
+          <NativeSelectOption value="">Cannot select</NativeSelectOption>
+          <NativeSelectOption value="option1">Option 1</NativeSelectOption>
+          <NativeSelectOption value="option2">Option 2</NativeSelectOption>
+          <NativeSelectOption value="option3">Option 3</NativeSelectOption>
+        </NativeSelect>
+        <FieldDescription>This field is currently disabled.</FieldDescription>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/base/native-select-invalid.tsx b/apps/v4/examples/base/native-select-invalid.tsx
index 79741484a..1fe5435a5 100644
--- a/apps/v4/examples/base/native-select-invalid.tsx
+++ b/apps/v4/examples/base/native-select-invalid.tsx
@@ -3,14 +3,13 @@ import {
   NativeSelectOption,
 } from "@/examples/base/ui/native-select"
 
-export default function NativeSelectInvalid() {
+export function NativeSelectInvalid() {
   return (
     <NativeSelect aria-invalid="true">
-      <NativeSelectOption value="">Select role</NativeSelectOption>
-      <NativeSelectOption value="admin">Admin</NativeSelectOption>
-      <NativeSelectOption value="editor">Editor</NativeSelectOption>
-      <NativeSelectOption value="viewer">Viewer</NativeSelectOption>
-      <NativeSelectOption value="guest">Guest</NativeSelectOption>
+      <NativeSelectOption value="">Error state</NativeSelectOption>
+      <NativeSelectOption value="apple">Apple</NativeSelectOption>
+      <NativeSelectOption value="banana">Banana</NativeSelectOption>
+      <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
     </NativeSelect>
   )
 }
diff --git a/apps/v4/examples/base/native-select-sizes.tsx b/apps/v4/examples/base/native-select-sizes.tsx
new file mode 100644
index 000000000..4ed3168d5
--- /dev/null
+++ b/apps/v4/examples/base/native-select-sizes.tsx
@@ -0,0 +1,23 @@
+import {
+  NativeSelect,
+  NativeSelectOption,
+} from "@/examples/base/ui/native-select"
+
+export function NativeSelectSizes() {
+  return (
+    <div className="flex flex-col gap-4">
+      <NativeSelect size="sm">
+        <NativeSelectOption value="">Select a fruit</NativeSelectOption>
+        <NativeSelectOption value="apple">Apple</NativeSelectOption>
+        <NativeSelectOption value="banana">Banana</NativeSelectOption>
+        <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
+      </NativeSelect>
+      <NativeSelect size="default">
+        <NativeSelectOption value="">Select a fruit</NativeSelectOption>
+        <NativeSelectOption value="apple">Apple</NativeSelectOption>
+        <NativeSelectOption value="banana">Banana</NativeSelectOption>
+        <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
+      </NativeSelect>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/native-select-with-field.tsx b/apps/v4/examples/base/native-select-with-field.tsx
new file mode 100644
index 000000000..1348d5931
--- /dev/null
+++ b/apps/v4/examples/base/native-select-with-field.tsx
@@ -0,0 +1,21 @@
+import { Field, FieldDescription, FieldLabel } from "@/examples/base/ui/field"
+import {
+  NativeSelect,
+  NativeSelectOption,
+} from "@/examples/base/ui/native-select"
+
+export function NativeSelectWithField() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="native-select-country">Country</FieldLabel>
+      <NativeSelect id="native-select-country">
+        <NativeSelectOption value="">Select a country</NativeSelectOption>
+        <NativeSelectOption value="us">United States</NativeSelectOption>
+        <NativeSelectOption value="uk">United Kingdom</NativeSelectOption>
+        <NativeSelectOption value="ca">Canada</NativeSelectOption>
+        <NativeSelectOption value="au">Australia</NativeSelectOption>
+      </NativeSelect>
+      <FieldDescription>Select your country of residence.</FieldDescription>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/native-select-with-groups.tsx b/apps/v4/examples/base/native-select-with-groups.tsx
new file mode 100644
index 000000000..3d9006bc9
--- /dev/null
+++ b/apps/v4/examples/base/native-select-with-groups.tsx
@@ -0,0 +1,23 @@
+import {
+  NativeSelect,
+  NativeSelectOptGroup,
+  NativeSelectOption,
+} from "@/examples/base/ui/native-select"
+
+export function NativeSelectWithGroups() {
+  return (
+    <NativeSelect>
+      <NativeSelectOption value="">Select a food</NativeSelectOption>
+      <NativeSelectOptGroup label="Fruits">
+        <NativeSelectOption value="apple">Apple</NativeSelectOption>
+        <NativeSelectOption value="banana">Banana</NativeSelectOption>
+        <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
+      </NativeSelectOptGroup>
+      <NativeSelectOptGroup label="Vegetables">
+        <NativeSelectOption value="carrot">Carrot</NativeSelectOption>
+        <NativeSelectOption value="broccoli">Broccoli</NativeSelectOption>
+        <NativeSelectOption value="spinach">Spinach</NativeSelectOption>
+      </NativeSelectOptGroup>
+    </NativeSelect>
+  )
+}
diff --git a/apps/v4/examples/base/navigation-menu-basic.tsx b/apps/v4/examples/base/navigation-menu-basic.tsx
new file mode 100644
index 000000000..319bd71e0
--- /dev/null
+++ b/apps/v4/examples/base/navigation-menu-basic.tsx
@@ -0,0 +1,152 @@
+import * as React from "react"
+import Link from "next/link"
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/examples/base/ui/navigation-menu"
+import { CircleAlertIcon } from "lucide-react"
+
+const components: { title: string; href: string; description: string }[] = [
+  {
+    title: "Alert Dialog",
+    href: "/docs/primitives/alert-dialog",
+    description:
+      "A modal dialog that interrupts the user with important content and expects a response.",
+  },
+  {
+    title: "Hover Card",
+    href: "/docs/primitives/hover-card",
+    description:
+      "For sighted users to preview content available behind a link.",
+  },
+  {
+    title: "Progress",
+    href: "/docs/primitives/progress",
+    description:
+      "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+  },
+  {
+    title: "Scroll-area",
+    href: "/docs/primitives/scroll-area",
+    description: "Visually or semantically separates content.",
+  },
+  {
+    title: "Tabs",
+    href: "/docs/primitives/tabs",
+    description:
+      "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+  },
+  {
+    title: "Tooltip",
+    href: "/docs/primitives/tooltip",
+    description:
+      "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+  },
+]
+
+function ListItem({
+  title,
+  children,
+  href,
+  ...props
+}: React.ComponentPropsWithoutRef<"li"> & { href: string }) {
+  return (
+    <li {...props}>
+      <NavigationMenuLink render={<Link href={href} />}>
+        <div className="style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1">
+          <div className="leading-none font-medium">{title}</div>
+          <div className="text-muted-foreground line-clamp-2">{children}</div>
+        </div>
+      </NavigationMenuLink>
+    </li>
+  )
+}
+
+export function NavigationMenuBasic() {
+  return (
+    <>
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <ul className="w-96">
+                <ListItem href="/docs" title="Introduction">
+                  Re-usable components built with Tailwind CSS.
+                </ListItem>
+                <ListItem href="/docs/installation" title="Installation">
+                  How to install dependencies and structure your app.
+                </ListItem>
+                <ListItem href="/docs/primitives/typography" title="Typography">
+                  Styles for headings, paragraphs, lists...etc
+                </ListItem>
+              </ul>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <ul className="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+                {components.map((component) => (
+                  <ListItem
+                    key={component.title}
+                    title={component.title}
+                    href={component.href}
+                  >
+                    {component.description}
+                  </ListItem>
+                ))}
+              </ul>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <ul className="grid w-[200px]">
+                <li>
+                  <NavigationMenuLink
+                    render={
+                      <Link href="#" className="flex-row items-center gap-2" />
+                    }
+                  >
+                    <CircleAlertIcon />
+                    Backlog
+                  </NavigationMenuLink>
+                  <NavigationMenuLink
+                    render={
+                      <Link href="#" className="flex-row items-center gap-2" />
+                    }
+                  >
+                    <CircleAlertIcon />
+                    To Do
+                  </NavigationMenuLink>
+                  <NavigationMenuLink
+                    render={
+                      <Link href="#" className="flex-row items-center gap-2" />
+                    }
+                  >
+                    <CircleAlertIcon />
+                    Done
+                  </NavigationMenuLink>
+                </li>
+              </ul>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+          <NavigationMenuItem>
+            <NavigationMenuLink
+              render={<Link href="/docs" />}
+              className={navigationMenuTriggerStyle()}
+            >
+              Documentation
+            </NavigationMenuLink>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/outline-item-group.tsx b/apps/v4/examples/base/outline-item-group.tsx
new file mode 100644
index 000000000..def2e92f9
--- /dev/null
+++ b/apps/v4/examples/base/outline-item-group.tsx
@@ -0,0 +1,43 @@
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function OutlineItemGroup() {
+  return (
+    <ItemGroup>
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Item 1</ItemTitle>
+          <ItemDescription>First item with icon.</ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Item 2</ItemTitle>
+          <ItemDescription>Second item with icon.</ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Item 3</ItemTitle>
+          <ItemDescription>Third item with icon.</ItemDescription>
+        </ItemContent>
+      </Item>
+    </ItemGroup>
+  )
+}
diff --git a/apps/v4/examples/base/pagination-basic.tsx b/apps/v4/examples/base/pagination-basic.tsx
new file mode 100644
index 000000000..d2641ffbb
--- /dev/null
+++ b/apps/v4/examples/base/pagination-basic.tsx
@@ -0,0 +1,38 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/examples/base/ui/pagination"
+
+export function PaginationBasic() {
+  return (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#" isActive>
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">3</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
diff --git a/apps/v4/examples/base/pagination-icons-only.tsx b/apps/v4/examples/base/pagination-icons-only.tsx
new file mode 100644
index 000000000..0188e43c7
--- /dev/null
+++ b/apps/v4/examples/base/pagination-icons-only.tsx
@@ -0,0 +1,49 @@
+import { Field, FieldLabel } from "@/examples/base/ui/field"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/examples/base/ui/pagination"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+
+export function PaginationIconsOnly() {
+  return (
+    <div className="flex items-center justify-between gap-4">
+      <Field orientation="horizontal" className="w-fit">
+        <FieldLabel htmlFor="select-rows-per-page">Rows per page</FieldLabel>
+        <Select defaultValue="25">
+          <SelectTrigger className="w-20" id="select-rows-per-page">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent align="start">
+            <SelectGroup>
+              <SelectItem value="10">10</SelectItem>
+              <SelectItem value="25">25</SelectItem>
+              <SelectItem value="50">50</SelectItem>
+              <SelectItem value="100">100</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </Field>
+      <Pagination className="mx-0 w-auto">
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious href="#" />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext href="#" />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/pagination-simple.tsx b/apps/v4/examples/base/pagination-simple.tsx
new file mode 100644
index 000000000..90885621d
--- /dev/null
+++ b/apps/v4/examples/base/pagination-simple.tsx
@@ -0,0 +1,32 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+} from "@/examples/base/ui/pagination"
+
+export function PaginationSimple() {
+  return (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationLink href="#">1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#" isActive>
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">3</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">4</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">5</PaginationLink>
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
diff --git a/apps/v4/examples/base/popover-alignments.tsx b/apps/v4/examples/base/popover-alignments.tsx
new file mode 100644
index 000000000..2270e305d
--- /dev/null
+++ b/apps/v4/examples/base/popover-alignments.tsx
@@ -0,0 +1,39 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/examples/base/ui/popover"
+
+export function PopoverAlignments() {
+  return (
+    <>
+      <div className="flex gap-6">
+        <Popover>
+          <PopoverTrigger render={<Button variant="outline" size="sm" />}>
+            Start
+          </PopoverTrigger>
+          <PopoverContent align="start" className="w-40">
+            Aligned to start
+          </PopoverContent>
+        </Popover>
+        <Popover>
+          <PopoverTrigger render={<Button variant="outline" size="sm" />}>
+            Center
+          </PopoverTrigger>
+          <PopoverContent align="center" className="w-40">
+            Aligned to center
+          </PopoverContent>
+        </Popover>
+        <Popover>
+          <PopoverTrigger render={<Button variant="outline" size="sm" />}>
+            End
+          </PopoverTrigger>
+          <PopoverContent align="end" className="w-40">
+            Aligned to end
+          </PopoverContent>
+        </Popover>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/popover-basic.tsx b/apps/v4/examples/base/popover-basic.tsx
new file mode 100644
index 000000000..21a790f8f
--- /dev/null
+++ b/apps/v4/examples/base/popover-basic.tsx
@@ -0,0 +1,29 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@/examples/base/ui/popover"
+
+export function PopoverBasic() {
+  return (
+    <>
+      <Popover>
+        <PopoverTrigger render={<Button variant="outline" className="w-fit" />}>
+          Open Popover
+        </PopoverTrigger>
+        <PopoverContent align="start">
+          <PopoverHeader>
+            <PopoverTitle>Dimensions</PopoverTitle>
+            <PopoverDescription>
+              Set the dimensions for the layer.
+            </PopoverDescription>
+          </PopoverHeader>
+        </PopoverContent>
+      </Popover>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/popover-in-dialog.tsx b/apps/v4/examples/base/popover-in-dialog.tsx
new file mode 100644
index 000000000..11cf5ba0e
--- /dev/null
+++ b/apps/v4/examples/base/popover-in-dialog.tsx
@@ -0,0 +1,53 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/base/ui/dialog"
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@/examples/base/ui/popover"
+
+export function PopoverInDialog() {
+  return (
+    <>
+      <Dialog>
+        <DialogTrigger render={<Button variant="outline" />}>
+          Open Dialog
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Popover Example</DialogTitle>
+            <DialogDescription>
+              Click the button below to see the popover.
+            </DialogDescription>
+          </DialogHeader>
+          <Popover>
+            <PopoverTrigger
+              render={<Button variant="outline" className="w-fit" />}
+            >
+              Open Popover
+            </PopoverTrigger>
+            <PopoverContent align="start">
+              <PopoverHeader>
+                <PopoverTitle>Popover in Dialog</PopoverTitle>
+                <PopoverDescription>
+                  This popover appears inside a dialog. Click the button to open
+                  it.
+                </PopoverDescription>
+              </PopoverHeader>
+            </PopoverContent>
+          </Popover>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/popover-with-form.tsx b/apps/v4/examples/base/popover-with-form.tsx
new file mode 100644
index 000000000..db8f86a7f
--- /dev/null
+++ b/apps/v4/examples/base/popover-with-form.tsx
@@ -0,0 +1,45 @@
+import { Button } from "@/examples/base/ui/button"
+import { Field, FieldGroup, FieldLabel } from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@/examples/base/ui/popover"
+
+export function PopoverWithForm() {
+  return (
+    <>
+      <Popover>
+        <PopoverTrigger render={<Button variant="outline" />}>
+          Open Popover
+        </PopoverTrigger>
+        <PopoverContent className="w-64" align="start">
+          <PopoverHeader>
+            <PopoverTitle>Dimensions</PopoverTitle>
+            <PopoverDescription>
+              Set the dimensions for the layer.
+            </PopoverDescription>
+          </PopoverHeader>
+          <FieldGroup className="gap-4">
+            <Field orientation="horizontal">
+              <FieldLabel htmlFor="width" className="w-1/2">
+                Width
+              </FieldLabel>
+              <Input id="width" defaultValue="100%" />
+            </Field>
+            <Field orientation="horizontal">
+              <FieldLabel htmlFor="height" className="w-1/2">
+                Height
+              </FieldLabel>
+              <Input id="height" defaultValue="25px" />
+            </Field>
+          </FieldGroup>
+        </PopoverContent>
+      </Popover>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/progress-controlled.tsx b/apps/v4/examples/base/progress-controlled.tsx
new file mode 100644
index 000000000..32dc14259
--- /dev/null
+++ b/apps/v4/examples/base/progress-controlled.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+import { Progress } from "@/examples/base/ui/progress"
+import { Slider } from "@/examples/base/ui/slider"
+
+export function ProgressControlled() {
+  const [value, setValue] = React.useState(50)
+
+  return (
+    <div className="flex w-full flex-col gap-4">
+      <Progress value={value} className="w-full" />
+      <Slider
+        value={value}
+        onValueChange={(value) => setValue(value as number)}
+        min={0}
+        max={100}
+        step={1}
+      />
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/progress-values.tsx b/apps/v4/examples/base/progress-values.tsx
new file mode 100644
index 000000000..8ded71cb1
--- /dev/null
+++ b/apps/v4/examples/base/progress-values.tsx
@@ -0,0 +1,13 @@
+import { Progress } from "@/examples/base/ui/progress"
+
+export function ProgressValues() {
+  return (
+    <div className="flex w-full flex-col gap-4">
+      <Progress value={0} />
+      <Progress value={25} className="w-full" />
+      <Progress value={50} />
+      <Progress value={75} />
+      <Progress value={100} />
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/progress-with-label.tsx b/apps/v4/examples/base/progress-with-label.tsx
new file mode 100644
index 000000000..356558065
--- /dev/null
+++ b/apps/v4/examples/base/progress-with-label.tsx
@@ -0,0 +1,14 @@
+import {
+  Progress,
+  ProgressLabel,
+  ProgressValue,
+} from "@/examples/base/ui/progress"
+
+export function ProgressWithLabel() {
+  return (
+    <Progress value={56}>
+      <ProgressLabel>Upload progress</ProgressLabel>
+      <ProgressValue />
+    </Progress>
+  )
+}
diff --git a/apps/v4/examples/base/radio-fields.tsx b/apps/v4/examples/base/radio-fields.tsx
new file mode 100644
index 000000000..793b6ebfe
--- /dev/null
+++ b/apps/v4/examples/base/radio-fields.tsx
@@ -0,0 +1,149 @@
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+  FieldTitle,
+} from "@/examples/base/ui/field"
+import { RadioGroup, RadioGroupItem } from "@/examples/base/ui/radio-group"
+
+export function RadioFields() {
+  return (
+    <FieldGroup>
+      <FieldSet>
+        <FieldLegend variant="label">Subscription Plan</FieldLegend>
+        <RadioGroup defaultValue="free">
+          <Field orientation="horizontal">
+            <RadioGroupItem value="free" id="radio-free" />
+            <FieldLabel htmlFor="radio-free" className="font-normal">
+              Free Plan
+            </FieldLabel>
+          </Field>
+          <Field orientation="horizontal">
+            <RadioGroupItem value="pro" id="radio-pro" />
+            <FieldLabel htmlFor="radio-pro" className="font-normal">
+              Pro Plan
+            </FieldLabel>
+          </Field>
+          <Field orientation="horizontal">
+            <RadioGroupItem value="enterprise" id="radio-enterprise" />
+            <FieldLabel htmlFor="radio-enterprise" className="font-normal">
+              Enterprise
+            </FieldLabel>
+          </Field>
+        </RadioGroup>
+      </FieldSet>
+      <FieldSet>
+        <FieldLegend variant="label">Battery Level</FieldLegend>
+        <FieldDescription>
+          Choose your preferred battery level.
+        </FieldDescription>
+        <RadioGroup>
+          <Field orientation="horizontal">
+            <RadioGroupItem value="high" id="battery-high" />
+            <FieldLabel htmlFor="battery-high">High</FieldLabel>
+          </Field>
+          <Field orientation="horizontal">
+            <RadioGroupItem value="medium" id="battery-medium" />
+            <FieldLabel htmlFor="battery-medium">Medium</FieldLabel>
+          </Field>
+          <Field orientation="horizontal">
+            <RadioGroupItem value="low" id="battery-low" />
+            <FieldLabel htmlFor="battery-low">Low</FieldLabel>
+          </Field>
+        </RadioGroup>
+      </FieldSet>
+      <RadioGroup className="gap-6">
+        <Field orientation="horizontal">
+          <RadioGroupItem value="option1" id="radio-content-1" />
+          <FieldContent>
+            <FieldLabel htmlFor="radio-content-1">Enable Touch ID</FieldLabel>
+            <FieldDescription>
+              Enable Touch ID to quickly unlock your device.
+            </FieldDescription>
+          </FieldContent>
+        </Field>
+        <Field orientation="horizontal">
+          <RadioGroupItem value="option2" id="radio-content-2" />
+          <FieldContent>
+            <FieldLabel htmlFor="radio-content-2">
+              Enable Touch ID and Face ID to make it even faster to unlock your
+              device. This is a long label to test the layout.
+            </FieldLabel>
+            <FieldDescription>
+              Enable Touch ID to quickly unlock your device.
+            </FieldDescription>
+          </FieldContent>
+        </Field>
+      </RadioGroup>
+      <RadioGroup className="gap-3">
+        <FieldLabel htmlFor="radio-title-1">
+          <Field orientation="horizontal">
+            <RadioGroupItem value="title1" id="radio-title-1" />
+            <FieldContent>
+              <FieldTitle>Enable Touch ID</FieldTitle>
+              <FieldDescription>
+                Enable Touch ID to quickly unlock your device.
+              </FieldDescription>
+            </FieldContent>
+          </Field>
+        </FieldLabel>
+        <FieldLabel htmlFor="radio-title-2">
+          <Field orientation="horizontal">
+            <RadioGroupItem value="title2" id="radio-title-2" />
+            <FieldContent>
+              <FieldTitle>
+                Enable Touch ID and Face ID to make it even faster to unlock
+                your device. This is a long label to test the layout.
+              </FieldTitle>
+              <FieldDescription>
+                Enable Touch ID to quickly unlock your device.
+              </FieldDescription>
+            </FieldContent>
+          </Field>
+        </FieldLabel>
+      </RadioGroup>
+      <FieldSet>
+        <FieldLegend variant="label">Invalid Radio Group</FieldLegend>
+        <RadioGroup>
+          <Field data-invalid orientation="horizontal">
+            <RadioGroupItem
+              value="invalid1"
+              id="radio-invalid-1"
+              aria-invalid
+            />
+            <FieldLabel htmlFor="radio-invalid-1">Invalid Option 1</FieldLabel>
+          </Field>
+          <Field data-invalid orientation="horizontal">
+            <RadioGroupItem
+              value="invalid2"
+              id="radio-invalid-2"
+              aria-invalid
+            />
+            <FieldLabel htmlFor="radio-invalid-2">Invalid Option 2</FieldLabel>
+          </Field>
+        </RadioGroup>
+      </FieldSet>
+      <FieldSet>
+        <FieldLegend variant="label">Disabled Radio Group</FieldLegend>
+        <RadioGroup disabled>
+          <Field data-disabled orientation="horizontal">
+            <RadioGroupItem value="disabled1" id="radio-disabled-1" disabled />
+            <FieldLabel htmlFor="radio-disabled-1">
+              Disabled Option 1
+            </FieldLabel>
+          </Field>
+          <Field data-disabled orientation="horizontal">
+            <RadioGroupItem value="disabled2" id="radio-disabled-2" disabled />
+            <FieldLabel htmlFor="radio-disabled-2">
+              Disabled Option 2
+            </FieldLabel>
+          </Field>
+        </RadioGroup>
+      </FieldSet>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/base/radio-group-basic.tsx b/apps/v4/examples/base/radio-group-basic.tsx
new file mode 100644
index 000000000..91e6c1f27
--- /dev/null
+++ b/apps/v4/examples/base/radio-group-basic.tsx
@@ -0,0 +1,27 @@
+import { Field, FieldLabel } from "@/examples/base/ui/field"
+import { RadioGroup, RadioGroupItem } from "@/examples/base/ui/radio-group"
+
+export function RadioGroupBasic() {
+  return (
+    <RadioGroup defaultValue="comfortable">
+      <Field orientation="horizontal">
+        <RadioGroupItem value="default" id="r1" />
+        <FieldLabel htmlFor="r1" className="font-normal">
+          Default
+        </FieldLabel>
+      </Field>
+      <Field orientation="horizontal">
+        <RadioGroupItem value="comfortable" id="r2" />
+        <FieldLabel htmlFor="r2" className="font-normal">
+          Comfortable
+        </FieldLabel>
+      </Field>
+      <Field orientation="horizontal">
+        <RadioGroupItem value="compact" id="r3" />
+        <FieldLabel htmlFor="r3" className="font-normal">
+          Compact
+        </FieldLabel>
+      </Field>
+    </RadioGroup>
+  )
+}
diff --git a/apps/v4/examples/base/radio-group-disabled.tsx b/apps/v4/examples/base/radio-group-disabled.tsx
new file mode 100644
index 000000000..d6217b144
--- /dev/null
+++ b/apps/v4/examples/base/radio-group-disabled.tsx
@@ -0,0 +1,27 @@
+import { Field, FieldLabel } from "@/examples/base/ui/field"
+import { RadioGroup, RadioGroupItem } from "@/examples/base/ui/radio-group"
+
+export function RadioGroupDisabled() {
+  return (
+    <RadioGroup defaultValue="option2" disabled>
+      <Field orientation="horizontal">
+        <RadioGroupItem value="option1" id="disabled-1" />
+        <FieldLabel htmlFor="disabled-1" className="font-normal">
+          Option 1
+        </FieldLabel>
+      </Field>
+      <Field orientation="horizontal">
+        <RadioGroupItem value="option2" id="disabled-2" />
+        <FieldLabel htmlFor="disabled-2" className="font-normal">
+          Option 2
+        </FieldLabel>
+      </Field>
+      <Field orientation="horizontal">
+        <RadioGroupItem value="option3" id="disabled-3" />
+        <FieldLabel htmlFor="disabled-3" className="font-normal">
+          Option 3
+        </FieldLabel>
+      </Field>
+    </RadioGroup>
+  )
+}
diff --git a/apps/v4/examples/base/radio-group-grid.tsx b/apps/v4/examples/base/radio-group-grid.tsx
new file mode 100644
index 000000000..d98af9b0e
--- /dev/null
+++ b/apps/v4/examples/base/radio-group-grid.tsx
@@ -0,0 +1,33 @@
+import { Field, FieldLabel } from "@/examples/base/ui/field"
+import { RadioGroup, RadioGroupItem } from "@/examples/base/ui/radio-group"
+
+export function RadioGroupGrid() {
+  return (
+    <RadioGroup defaultValue="medium" className="grid grid-cols-2 gap-2">
+      <FieldLabel htmlFor="size-small">
+        <Field orientation="horizontal">
+          <RadioGroupItem value="small" id="size-small" />
+          <div className="font-medium">Small</div>
+        </Field>
+      </FieldLabel>
+      <FieldLabel htmlFor="size-medium">
+        <Field orientation="horizontal">
+          <RadioGroupItem value="medium" id="size-medium" />
+          <div className="font-medium">Medium</div>
+        </Field>
+      </FieldLabel>
+      <FieldLabel htmlFor="size-large">
+        <Field orientation="horizontal">
+          <RadioGroupItem value="large" id="size-large" />
+          <div className="font-medium">Large</div>
+        </Field>
+      </FieldLabel>
+      <FieldLabel htmlFor="size-xlarge">
+        <Field orientation="horizontal">
+          <RadioGroupItem value="xlarge" id="size-xlarge" />
+          <div className="font-medium">X-Large</div>
+        </Field>
+      </FieldLabel>
+    </RadioGroup>
+  )
+}
diff --git a/apps/v4/examples/base/radio-group-invalid.tsx b/apps/v4/examples/base/radio-group-invalid.tsx
new file mode 100644
index 000000000..5e87e3c66
--- /dev/null
+++ b/apps/v4/examples/base/radio-group-invalid.tsx
@@ -0,0 +1,39 @@
+import {
+  Field,
+  FieldDescription,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@/examples/base/ui/field"
+import { RadioGroup, RadioGroupItem } from "@/examples/base/ui/radio-group"
+
+export function RadioGroupInvalid() {
+  return (
+    <FieldSet>
+      <FieldLegend>Notification Preferences</FieldLegend>
+      <FieldDescription>
+        Choose how you want to receive notifications.
+      </FieldDescription>
+      <RadioGroup defaultValue="email">
+        <Field orientation="horizontal" data-invalid>
+          <RadioGroupItem value="email" id="invalid-email" aria-invalid />
+          <FieldLabel htmlFor="invalid-email" className="font-normal">
+            Email only
+          </FieldLabel>
+        </Field>
+        <Field orientation="horizontal" data-invalid>
+          <RadioGroupItem value="sms" id="invalid-sms" aria-invalid />
+          <FieldLabel htmlFor="invalid-sms" className="font-normal">
+            SMS only
+          </FieldLabel>
+        </Field>
+        <Field orientation="horizontal" data-invalid>
+          <RadioGroupItem value="both" id="invalid-both" aria-invalid />
+          <FieldLabel htmlFor="invalid-both" className="font-normal">
+            Both Email & SMS
+          </FieldLabel>
+        </Field>
+      </RadioGroup>
+    </FieldSet>
+  )
+}
diff --git a/apps/v4/examples/base/radio-group-with-descriptions.tsx b/apps/v4/examples/base/radio-group-with-descriptions.tsx
new file mode 100644
index 000000000..0f174098a
--- /dev/null
+++ b/apps/v4/examples/base/radio-group-with-descriptions.tsx
@@ -0,0 +1,41 @@
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldLabel,
+} from "@/examples/base/ui/field"
+import { RadioGroup, RadioGroupItem } from "@/examples/base/ui/radio-group"
+
+export function RadioGroupWithDescriptions() {
+  return (
+    <RadioGroup defaultValue="plus">
+      <FieldLabel htmlFor="plus-plan">
+        <Field orientation="horizontal">
+          <FieldContent>
+            <div className="font-medium">Plus</div>
+            <FieldDescription>For individuals and small teams</FieldDescription>
+          </FieldContent>
+          <RadioGroupItem value="plus" id="plus-plan" />
+        </Field>
+      </FieldLabel>
+      <FieldLabel htmlFor="pro-plan">
+        <Field orientation="horizontal">
+          <FieldContent>
+            <div className="font-medium">Pro</div>
+            <FieldDescription>For growing businesses</FieldDescription>
+          </FieldContent>
+          <RadioGroupItem value="pro" id="pro-plan" />
+        </Field>
+      </FieldLabel>
+      <FieldLabel htmlFor="enterprise-plan">
+        <Field orientation="horizontal">
+          <FieldContent>
+            <div className="font-medium">Enterprise</div>
+            <FieldDescription>For large teams and enterprises</FieldDescription>
+          </FieldContent>
+          <RadioGroupItem value="enterprise" id="enterprise-plan" />
+        </Field>
+      </FieldLabel>
+    </RadioGroup>
+  )
+}
diff --git a/apps/v4/examples/base/radio-group-with-field-set.tsx b/apps/v4/examples/base/radio-group-with-field-set.tsx
new file mode 100644
index 000000000..e4a9ff447
--- /dev/null
+++ b/apps/v4/examples/base/radio-group-with-field-set.tsx
@@ -0,0 +1,37 @@
+import {
+  Field,
+  FieldDescription,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@/examples/base/ui/field"
+import { RadioGroup, RadioGroupItem } from "@/examples/base/ui/radio-group"
+
+export function RadioGroupWithFieldSet() {
+  return (
+    <FieldSet>
+      <FieldLegend>Battery Level</FieldLegend>
+      <FieldDescription>Choose your preferred battery level.</FieldDescription>
+      <RadioGroup defaultValue="medium">
+        <Field orientation="horizontal">
+          <RadioGroupItem value="high" id="battery-high" />
+          <FieldLabel htmlFor="battery-high" className="font-normal">
+            High
+          </FieldLabel>
+        </Field>
+        <Field orientation="horizontal">
+          <RadioGroupItem value="medium" id="battery-medium" />
+          <FieldLabel htmlFor="battery-medium" className="font-normal">
+            Medium
+          </FieldLabel>
+        </Field>
+        <Field orientation="horizontal">
+          <RadioGroupItem value="low" id="battery-low" />
+          <FieldLabel htmlFor="battery-low" className="font-normal">
+            Low
+          </FieldLabel>
+        </Field>
+      </RadioGroup>
+    </FieldSet>
+  )
+}
diff --git a/apps/v4/examples/base/resizable-controlled.tsx b/apps/v4/examples/base/resizable-controlled.tsx
new file mode 100644
index 000000000..d6e00a3b7
--- /dev/null
+++ b/apps/v4/examples/base/resizable-controlled.tsx
@@ -0,0 +1,34 @@
+"use client"
+
+import * as React from "react"
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/examples/base/ui/resizable"
+
+export function ResizableControlled() {
+  const [sizes, setSizes] = React.useState([30, 70])
+
+  return (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="min-h-[200px] rounded-lg border"
+      onLayout={(newSizes) => {
+        setSizes(newSizes)
+      }}
+    >
+      <ResizablePanel defaultSize={30} minSize={20}>
+        <div className="flex h-full flex-col items-center justify-center gap-2 p-6">
+          <span className="font-semibold">{Math.round(sizes[0] ?? 30)}%</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={70} minSize={30}>
+        <div className="flex h-full flex-col items-center justify-center gap-2 p-6">
+          <span className="font-semibold">{Math.round(sizes[1] ?? 70)}%</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/v4/examples/base/resizable-horizontal.tsx b/apps/v4/examples/base/resizable-horizontal.tsx
new file mode 100644
index 000000000..ffd716a13
--- /dev/null
+++ b/apps/v4/examples/base/resizable-horizontal.tsx
@@ -0,0 +1,26 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/examples/base/ui/resizable"
+
+export function ResizableHorizontal() {
+  return (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="min-h-[200px] rounded-lg border"
+    >
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Sidebar</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Content</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/v4/examples/base/resizable-nested.tsx b/apps/v4/examples/base/resizable-nested.tsx
new file mode 100644
index 000000000..602fa4444
--- /dev/null
+++ b/apps/v4/examples/base/resizable-nested.tsx
@@ -0,0 +1,33 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/examples/base/ui/resizable"
+
+export function ResizableNested() {
+  return (
+    <ResizablePanelGroup direction="horizontal" className="rounded-lg border">
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-[200px] items-center justify-center p-6">
+          <span className="font-semibold">One</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={50}>
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel defaultSize={25}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Two</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel defaultSize={75}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Three</span>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/v4/examples/base/resizable-vertical.tsx b/apps/v4/examples/base/resizable-vertical.tsx
index d02c19c45..b77929b40 100644
--- a/apps/v4/examples/base/resizable-vertical.tsx
+++ b/apps/v4/examples/base/resizable-vertical.tsx
@@ -4,11 +4,11 @@ import {
   ResizablePanelGroup,
 } from "@/examples/base/ui/resizable"
 
-export default function ResizableDemo() {
+export function ResizableVertical() {
   return (
     <ResizablePanelGroup
       direction="vertical"
-      className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
+      className="min-h-[200px] rounded-lg border"
     >
       <ResizablePanel defaultSize={25}>
         <div className="flex h-full items-center justify-center p-6">
diff --git a/apps/v4/examples/base/resizable-with-handle.tsx b/apps/v4/examples/base/resizable-with-handle.tsx
new file mode 100644
index 000000000..da92bf86e
--- /dev/null
+++ b/apps/v4/examples/base/resizable-with-handle.tsx
@@ -0,0 +1,26 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/examples/base/ui/resizable"
+
+export function ResizableWithHandle() {
+  return (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="min-h-[200px] rounded-lg border"
+    >
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Sidebar</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Content</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/v4/examples/base/scroll-area-horizontal.tsx b/apps/v4/examples/base/scroll-area-horizontal.tsx
new file mode 100644
index 000000000..d7b6cf7e4
--- /dev/null
+++ b/apps/v4/examples/base/scroll-area-horizontal.tsx
@@ -0,0 +1,46 @@
+import Image from "next/image"
+import { ScrollArea, ScrollBar } from "@/examples/base/ui/scroll-area"
+
+const works = [
+  {
+    artist: "Ornella Binni",
+    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Tom Byrom",
+    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Vladimir Malyav",
+    art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
+  },
+] as const
+
+export function ScrollAreaHorizontal() {
+  return (
+    <ScrollArea className="mx-auto w-full max-w-96 rounded-md border p-4">
+      <div className="flex gap-4">
+        {works.map((artwork) => (
+          <figure key={artwork.artist} className="shrink-0">
+            <div className="overflow-hidden rounded-md">
+              <Image
+                src={artwork.art}
+                alt={`Photo by ${artwork.artist}`}
+                className="aspect-[3/4] h-fit w-fit object-cover"
+                width={300}
+                height={400}
+              />
+            </div>
+            <figcaption className="text-muted-foreground pt-2 text-xs">
+              Photo by{" "}
+              <span className="text-foreground font-semibold">
+                {artwork.artist}
+              </span>
+            </figcaption>
+          </figure>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  )
+}
diff --git a/apps/v4/examples/base/scroll-area-vertical.tsx b/apps/v4/examples/base/scroll-area-vertical.tsx
new file mode 100644
index 000000000..c39c37817
--- /dev/null
+++ b/apps/v4/examples/base/scroll-area-vertical.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import { ScrollArea } from "@/examples/base/ui/scroll-area"
+import { Separator } from "@/examples/base/ui/separator"
+
+const tags = Array.from({ length: 50 }).map(
+  (_, i, a) => `v1.2.0-beta.${a.length - i}`
+)
+
+export function ScrollAreaVertical() {
+  return (
+    <ScrollArea className="mx-auto h-72 w-48 rounded-md border">
+      <div className="p-4">
+        <h4 className="mb-4 text-sm leading-none font-medium">Tags</h4>
+        {tags.map((tag) => (
+          <React.Fragment key={tag}>
+            <div className="text-sm">{tag}</div>
+            <Separator className="my-2" />
+          </React.Fragment>
+        ))}
+      </div>
+    </ScrollArea>
+  )
+}
diff --git a/apps/v4/examples/base/select-basic.tsx b/apps/v4/examples/base/select-basic.tsx
new file mode 100644
index 000000000..8adfcce56
--- /dev/null
+++ b/apps/v4/examples/base/select-basic.tsx
@@ -0,0 +1,35 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+
+export function SelectBasic() {
+  const items = [
+    { label: "Select a fruit", value: null },
+    { label: "Apple", value: "apple" },
+    { label: "Banana", value: "banana" },
+    { label: "Blueberry", value: "blueberry" },
+    { label: "Grapes", value: "grapes" },
+    { label: "Pineapple", value: "pineapple" },
+  ]
+  return (
+    <Select items={items}>
+      <SelectTrigger>
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          {items.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/apps/v4/examples/base/select-disabled.tsx b/apps/v4/examples/base/select-disabled.tsx
new file mode 100644
index 000000000..ad67781c4
--- /dev/null
+++ b/apps/v4/examples/base/select-disabled.tsx
@@ -0,0 +1,39 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+
+export function SelectDisabled() {
+  const items = [
+    { label: "Select a fruit", value: null },
+    { label: "Apple", value: "apple" },
+    { label: "Banana", value: "banana" },
+    { label: "Blueberry", value: "blueberry" },
+    { label: "Grapes", value: "grapes", disabled: true },
+    { label: "Pineapple", value: "pineapple" },
+  ]
+  return (
+    <Select items={items} disabled>
+      <SelectTrigger>
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          {items.map((item) => (
+            <SelectItem
+              key={item.value}
+              value={item.value}
+              disabled={item.disabled}
+            >
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/apps/v4/examples/base/select-fields.tsx b/apps/v4/examples/base/select-fields.tsx
new file mode 100644
index 000000000..01d178785
--- /dev/null
+++ b/apps/v4/examples/base/select-fields.tsx
@@ -0,0 +1,147 @@
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/base/ui/field"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+
+export function SelectFields() {
+  const basicItems = [
+    { label: "Choose an option", value: null },
+    { label: "Option 1", value: "option1" },
+    { label: "Option 2", value: "option2" },
+    { label: "Option 3", value: "option3" },
+  ]
+  const countryItems = [
+    { label: "Select your country", value: null },
+    { label: "United States", value: "us" },
+    { label: "United Kingdom", value: "uk" },
+    { label: "Canada", value: "ca" },
+  ]
+  const timezoneItems = [
+    { label: "Select timezone", value: null },
+    { label: "UTC", value: "utc" },
+    { label: "Eastern Time", value: "est" },
+    { label: "Pacific Time", value: "pst" },
+  ]
+  const invalidItems = [
+    { label: "This field has an error", value: null },
+    { label: "Option 1", value: "option1" },
+    { label: "Option 2", value: "option2" },
+    { label: "Option 3", value: "option3" },
+  ]
+  const disabledItems = [
+    { label: "Cannot select", value: null },
+    { label: "Option 1", value: "option1" },
+    { label: "Option 2", value: "option2" },
+    { label: "Option 3", value: "option3" },
+  ]
+
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="select-basic">Basic Select</FieldLabel>
+        <Select items={basicItems}>
+          <SelectTrigger id="select-basic">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {basicItems.map((item) => (
+                <SelectItem key={item.value} value={item.value}>
+                  {item.label}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="select-country">Country</FieldLabel>
+        <Select items={countryItems}>
+          <SelectTrigger id="select-country">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {countryItems.map((item) => (
+                <SelectItem key={item.value} value={item.value}>
+                  {item.label}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <FieldDescription>
+          Select the country where you currently reside.
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="select-timezone">Timezone</FieldLabel>
+        <FieldDescription>
+          Choose your local timezone for accurate scheduling.
+        </FieldDescription>
+        <Select items={timezoneItems}>
+          <SelectTrigger id="select-timezone">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {timezoneItems.map((item) => (
+                <SelectItem key={item.value} value={item.value}>
+                  {item.label}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </Field>
+      <Field data-invalid>
+        <FieldLabel htmlFor="select-invalid">Invalid Select</FieldLabel>
+        <Select items={invalidItems}>
+          <SelectTrigger id="select-invalid" aria-invalid>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {invalidItems.map((item) => (
+                <SelectItem key={item.value} value={item.value}>
+                  {item.label}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <FieldDescription>
+          This field contains validation errors.
+        </FieldDescription>
+      </Field>
+      <Field data-disabled>
+        <FieldLabel htmlFor="select-disabled-field">Disabled Field</FieldLabel>
+        <Select items={disabledItems} disabled>
+          <SelectTrigger id="select-disabled-field">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {disabledItems.map((item) => (
+                <SelectItem key={item.value} value={item.value}>
+                  {item.label}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <FieldDescription>This field is currently disabled.</FieldDescription>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/base/select-in-dialog.tsx b/apps/v4/examples/base/select-in-dialog.tsx
new file mode 100644
index 000000000..c1d73477e
--- /dev/null
+++ b/apps/v4/examples/base/select-in-dialog.tsx
@@ -0,0 +1,59 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/base/ui/dialog"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+
+export function SelectInDialog() {
+  const items = [
+    { label: "Select a fruit", value: null },
+    { label: "Apple", value: "apple" },
+    { label: "Banana", value: "banana" },
+    { label: "Blueberry", value: "blueberry" },
+    { label: "Grapes", value: "grapes" },
+    { label: "Pineapple", value: "pineapple" },
+  ]
+  return (
+    <>
+      <Dialog>
+        <DialogTrigger render={<Button variant="outline" />}>
+          Open Dialog
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Select Example</DialogTitle>
+            <DialogDescription>
+              Use the select below to choose a fruit.
+            </DialogDescription>
+          </DialogHeader>
+          <Select items={items}>
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                {items.map((item) => (
+                  <SelectItem key={item.value} value={item.value}>
+                    {item.label}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/select-inline.tsx b/apps/v4/examples/base/select-inline.tsx
new file mode 100644
index 000000000..18e613daf
--- /dev/null
+++ b/apps/v4/examples/base/select-inline.tsx
@@ -0,0 +1,47 @@
+import { Input } from "@/examples/base/ui/input"
+import {
+  NativeSelect,
+  NativeSelectOption,
+} from "@/examples/base/ui/native-select"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+
+export function SelectInline() {
+  const items = [
+    { label: "Filter", value: null },
+    { label: "All", value: "all" },
+    { label: "Active", value: "active" },
+    { label: "Inactive", value: "inactive" },
+  ]
+  return (
+    <div className="flex items-center gap-2">
+      <Input placeholder="Search..." className="flex-1" />
+      <Select items={items}>
+        <SelectTrigger className="w-[140px]">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            {items.map((item) => (
+              <SelectItem key={item.value} value={item.value}>
+                {item.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <NativeSelect className="w-[140px]">
+        <NativeSelectOption value="">Sort by</NativeSelectOption>
+        <NativeSelectOption value="name">Name</NativeSelectOption>
+        <NativeSelectOption value="date">Date</NativeSelectOption>
+        <NativeSelectOption value="status">Status</NativeSelectOption>
+      </NativeSelect>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/select-invalid.tsx b/apps/v4/examples/base/select-invalid.tsx
new file mode 100644
index 000000000..6cdf368d3
--- /dev/null
+++ b/apps/v4/examples/base/select-invalid.tsx
@@ -0,0 +1,56 @@
+import { Field, FieldError, FieldLabel } from "@/examples/base/ui/field"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+
+export function SelectInvalid() {
+  const items = [
+    { label: "Select a fruit", value: null },
+    { label: "Apple", value: "apple" },
+    { label: "Banana", value: "banana" },
+    { label: "Blueberry", value: "blueberry" },
+    { label: "Grapes", value: "grapes" },
+    { label: "Pineapple", value: "pineapple" },
+  ]
+  return (
+    <div className="flex flex-col gap-4">
+      <Select items={items}>
+        <SelectTrigger aria-invalid="true">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            {items.map((item) => (
+              <SelectItem key={item.value} value={item.value}>
+                {item.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <Field data-invalid>
+        <FieldLabel htmlFor="select-fruit-invalid">Favorite Fruit</FieldLabel>
+        <Select items={items}>
+          <SelectTrigger id="select-fruit-invalid" aria-invalid>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {items.map((item) => (
+                <SelectItem key={item.value} value={item.value}>
+                  {item.label}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <FieldError errors={[{ message: "Please select a valid fruit." }]} />
+      </Field>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/select-item-aligned.tsx b/apps/v4/examples/base/select-item-aligned.tsx
new file mode 100644
index 000000000..d551c00e5
--- /dev/null
+++ b/apps/v4/examples/base/select-item-aligned.tsx
@@ -0,0 +1,40 @@
+import { Item } from "@/examples/base/ui/item"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+
+export function SelectItemAligned() {
+  const items = [
+    { label: "Select a fruit", value: null },
+    { label: "Apple", value: "apple" },
+    { label: "Banana", value: "banana" },
+    { label: "Blueberry", value: "blueberry" },
+    { label: "Grapes", value: "grapes", disabled: true },
+    { label: "Pineapple", value: "pineapple" },
+  ]
+  return (
+    <Select items={items}>
+      <SelectTrigger>
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent alignItemWithTrigger={true}>
+        <SelectGroup>
+          {items.map((item) => (
+            <SelectItem
+              key={item.value}
+              value={item.value}
+              disabled={item.disabled}
+            >
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/apps/v4/examples/base/select-large-list.tsx b/apps/v4/examples/base/select-large-list.tsx
new file mode 100644
index 000000000..fa8ad12bb
--- /dev/null
+++ b/apps/v4/examples/base/select-large-list.tsx
@@ -0,0 +1,35 @@
+import { Item } from "@/examples/base/ui/item"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+
+export function SelectLargeList() {
+  const items = [
+    { label: "Select an item", value: null },
+    ...Array.from({ length: 100 }).map((_, i) => ({
+      label: `Item ${i}`,
+      value: `item-${i}`,
+    })),
+  ]
+  return (
+    <Select items={items}>
+      <SelectTrigger>
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          {items.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/apps/v4/examples/base/select-multiple.tsx b/apps/v4/examples/base/select-multiple.tsx
new file mode 100644
index 000000000..2f6d1227e
--- /dev/null
+++ b/apps/v4/examples/base/select-multiple.tsx
@@ -0,0 +1,46 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+
+export function SelectMultiple() {
+  const items = [
+    { label: "Apple", value: "apple" },
+    { label: "Banana", value: "banana" },
+    { label: "Blueberry", value: "blueberry" },
+    { label: "Grapes", value: "grapes" },
+    { label: "Pineapple", value: "pineapple" },
+    { label: "Strawberry", value: "strawberry" },
+    { label: "Watermelon", value: "watermelon" },
+  ]
+  return (
+    <Select items={items} multiple defaultValue={[]}>
+      <SelectTrigger className="w-72">
+        <SelectValue>
+          {(value: string[]) => {
+            if (value.length === 0) {
+              return "Select fruits"
+            }
+            if (value.length === 1) {
+              return items.find((item) => item.value === value[0])?.label
+            }
+            return `${value.length} fruits selected`
+          }}
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          {items.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/apps/v4/examples/base/select-plan.tsx b/apps/v4/examples/base/select-plan.tsx
new file mode 100644
index 000000000..77b3421d3
--- /dev/null
+++ b/apps/v4/examples/base/select-plan.tsx
@@ -0,0 +1,66 @@
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from "@/examples/base/ui/item"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+
+const plans = [
+  {
+    name: "Starter",
+    description: "Perfect for individuals getting started.",
+  },
+  {
+    name: "Professional",
+    description: "Ideal for growing teams and businesses.",
+  },
+  {
+    name: "Enterprise",
+    description: "Advanced features for large organizations.",
+  },
+]
+
+function SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {
+  return (
+    <Item size="xs" className="w-full p-0">
+      <ItemContent className="gap-0">
+        <ItemTitle>{plan.name}</ItemTitle>
+        <ItemDescription className="text-xs">
+          {plan.description}
+        </ItemDescription>
+      </ItemContent>
+    </Item>
+  )
+}
+
+export function SelectPlan() {
+  return (
+    <Select
+      defaultValue={plans[0]}
+      itemToStringValue={(plan: (typeof plans)[number]) => plan.name}
+    >
+      <SelectTrigger className="h-auto! w-72">
+        <SelectValue>
+          {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          {plans.map((plan) => (
+            <SelectItem key={plan.name} value={plan}>
+              <SelectPlanItem plan={plan} />
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/apps/v4/examples/base/select-sizes.tsx b/apps/v4/examples/base/select-sizes.tsx
new file mode 100644
index 000000000..37d340dfb
--- /dev/null
+++ b/apps/v4/examples/base/select-sizes.tsx
@@ -0,0 +1,49 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+
+export function SelectSizes() {
+  const items = [
+    { label: "Select a fruit", value: null },
+    { label: "Apple", value: "apple" },
+    { label: "Banana", value: "banana" },
+    { label: "Blueberry", value: "blueberry" },
+  ]
+  return (
+    <div className="flex flex-col gap-4">
+      <Select items={items}>
+        <SelectTrigger size="sm">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            {items.map((item) => (
+              <SelectItem key={item.value} value={item.value}>
+                {item.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <Select items={items}>
+        <SelectTrigger size="default">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            {items.map((item) => (
+              <SelectItem key={item.value} value={item.value}>
+                {item.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/select-with-button.tsx b/apps/v4/examples/base/select-with-button.tsx
new file mode 100644
index 000000000..56fb3b7e4
--- /dev/null
+++ b/apps/v4/examples/base/select-with-button.tsx
@@ -0,0 +1,58 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+
+export function SelectWithButton() {
+  const items = [
+    { label: "Select a fruit", value: null },
+    { label: "Apple", value: "apple" },
+    { label: "Banana", value: "banana" },
+    { label: "Blueberry", value: "blueberry" },
+  ]
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-2">
+        <Select items={items}>
+          <SelectTrigger size="sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {items.map((item) => (
+                <SelectItem key={item.value} value={item.value}>
+                  {item.label}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <Button variant="outline" size="sm">
+          Submit
+        </Button>
+      </div>
+      <div className="flex items-center gap-2">
+        <Select items={items}>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {items.map((item) => (
+                <SelectItem key={item.value} value={item.value}>
+                  {item.label}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <Button variant="outline">Submit</Button>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/select-with-field.tsx b/apps/v4/examples/base/select-with-field.tsx
new file mode 100644
index 000000000..c350fac7e
--- /dev/null
+++ b/apps/v4/examples/base/select-with-field.tsx
@@ -0,0 +1,42 @@
+import { Field, FieldDescription, FieldLabel } from "@/examples/base/ui/field"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+
+export function SelectWithField() {
+  const items = [
+    { label: "Select a fruit", value: null },
+    { label: "Apple", value: "apple" },
+    { label: "Banana", value: "banana" },
+    { label: "Blueberry", value: "blueberry" },
+    { label: "Grapes", value: "grapes" },
+    { label: "Pineapple", value: "pineapple" },
+  ]
+  return (
+    <Field>
+      <FieldLabel htmlFor="select-fruit">Favorite Fruit</FieldLabel>
+      <Select items={items}>
+        <SelectTrigger id="select-fruit">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            {items.map((item) => (
+              <SelectItem key={item.value} value={item.value}>
+                {item.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <FieldDescription>
+        Choose your favorite fruit from the list.
+      </FieldDescription>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/select-with-groups.tsx b/apps/v4/examples/base/select-with-groups.tsx
new file mode 100644
index 000000000..7b515c30a
--- /dev/null
+++ b/apps/v4/examples/base/select-with-groups.tsx
@@ -0,0 +1,54 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+
+export function SelectWithGroups() {
+  const fruits = [
+    { label: "Apple", value: "apple" },
+    { label: "Banana", value: "banana" },
+    { label: "Blueberry", value: "blueberry" },
+  ]
+  const vegetables = [
+    { label: "Carrot", value: "carrot" },
+    { label: "Broccoli", value: "broccoli" },
+    { label: "Spinach", value: "spinach" },
+  ]
+  const allItems = [
+    { label: "Select a fruit", value: null },
+    ...fruits,
+    ...vegetables,
+  ]
+  return (
+    <Select items={allItems}>
+      <SelectTrigger>
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Fruits</SelectLabel>
+          {fruits.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectLabel>Vegetables</SelectLabel>
+          {vegetables.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/apps/v4/examples/base/select-with-icons.tsx b/apps/v4/examples/base/select-with-icons.tsx
new file mode 100644
index 000000000..70d985527
--- /dev/null
+++ b/apps/v4/examples/base/select-with-icons.tsx
@@ -0,0 +1,82 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+import { ChartBarIcon, ChartLineIcon, ChartPieIcon } from "lucide-react"
+
+export function SelectWithIcons() {
+  const items = [
+    {
+      label: (
+        <>
+          <ChartLineIcon />
+          Chart Type
+        </>
+      ),
+      value: null,
+    },
+    {
+      label: (
+        <>
+          <ChartLineIcon />
+          Line
+        </>
+      ),
+      value: "line",
+    },
+    {
+      label: (
+        <>
+          <ChartBarIcon />
+          Bar
+        </>
+      ),
+      value: "bar",
+    },
+    {
+      label: (
+        <>
+          <ChartPieIcon />
+          Pie
+        </>
+      ),
+      value: "pie",
+    },
+  ]
+  return (
+    <div className="flex flex-col gap-4">
+      <Select items={items}>
+        <SelectTrigger size="sm">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            {items.map((item) => (
+              <SelectItem key={item.value} value={item.value}>
+                {item.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <Select items={items}>
+        <SelectTrigger size="default">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            {items.map((item) => (
+              <SelectItem key={item.value} value={item.value}>
+                {item.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/separator-horizontal.tsx b/apps/v4/examples/base/separator-horizontal.tsx
new file mode 100644
index 000000000..37c99f3b0
--- /dev/null
+++ b/apps/v4/examples/base/separator-horizontal.tsx
@@ -0,0 +1,19 @@
+import { Separator } from "@/examples/base/ui/separator"
+
+export function SeparatorHorizontal() {
+  return (
+    <div className="style-lyra:text-xs/relaxed flex flex-col gap-4 text-sm">
+      <div className="flex flex-col gap-1">
+        <div className="leading-none font-medium">shadcn/ui</div>
+        <div className="text-muted-foreground">
+          The Foundation for your Design System
+        </div>
+      </div>
+      <Separator />
+      <div>
+        A set of beautifully designed components that you can customize, extend,
+        and build on.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/separator-in-list.tsx b/apps/v4/examples/base/separator-in-list.tsx
new file mode 100644
index 000000000..9a7c0ba6b
--- /dev/null
+++ b/apps/v4/examples/base/separator-in-list.tsx
@@ -0,0 +1,22 @@
+import { Separator } from "@/examples/base/ui/separator"
+
+export function SeparatorInList() {
+  return (
+    <div className="style-lyra:text-xs/relaxed flex flex-col gap-2 text-sm">
+      <dl className="flex items-center justify-between">
+        <dt>Item 1</dt>
+        <dd className="text-muted-foreground">Value 1</dd>
+      </dl>
+      <Separator />
+      <dl className="flex items-center justify-between">
+        <dt>Item 2</dt>
+        <dd className="text-muted-foreground">Value 2</dd>
+      </dl>
+      <Separator />
+      <dl className="flex items-center justify-between">
+        <dt>Item 3</dt>
+        <dd className="text-muted-foreground">Value 3</dd>
+      </dl>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/separator-vertical-menu.tsx b/apps/v4/examples/base/separator-vertical-menu.tsx
new file mode 100644
index 000000000..9651a9763
--- /dev/null
+++ b/apps/v4/examples/base/separator-vertical-menu.tsx
@@ -0,0 +1,26 @@
+import { Separator } from "@/examples/base/ui/separator"
+
+export function SeparatorVerticalMenu() {
+  return (
+    <div className="style-lyra:text-xs/relaxed flex items-center gap-2 text-sm md:gap-4">
+      <div className="flex flex-col gap-1">
+        <span className="font-medium">Settings</span>
+        <span className="text-muted-foreground text-xs">
+          Manage preferences
+        </span>
+      </div>
+      <Separator orientation="vertical" />
+      <div className="flex flex-col gap-1">
+        <span className="font-medium">Account</span>
+        <span className="text-muted-foreground text-xs">
+          Profile & security
+        </span>
+      </div>
+      <Separator orientation="vertical" />
+      <div className="flex flex-col gap-1">
+        <span className="font-medium">Help</span>
+        <span className="text-muted-foreground text-xs">Support & docs</span>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/separator-vertical.tsx b/apps/v4/examples/base/separator-vertical.tsx
new file mode 100644
index 000000000..a015025c8
--- /dev/null
+++ b/apps/v4/examples/base/separator-vertical.tsx
@@ -0,0 +1,13 @@
+import { Separator } from "@/examples/base/ui/separator"
+
+export function SeparatorVertical() {
+  return (
+    <div className="style-lyra:text-xs/relaxed flex h-5 items-center gap-4 text-sm">
+      <div>Blog</div>
+      <Separator orientation="vertical" />
+      <div>Docs</div>
+      <Separator orientation="vertical" />
+      <div>Source</div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/sheet-no-close-button.tsx b/apps/v4/examples/base/sheet-no-close-button.tsx
new file mode 100644
index 000000000..f07428e4e
--- /dev/null
+++ b/apps/v4/examples/base/sheet-no-close-button.tsx
@@ -0,0 +1,30 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/examples/base/ui/sheet"
+
+export function SheetNoCloseButton() {
+  return (
+    <>
+      <Sheet>
+        <SheetTrigger render={<Button variant="outline" />}>
+          No Close Button
+        </SheetTrigger>
+        <SheetContent showCloseButton={false}>
+          <SheetHeader>
+            <SheetTitle>No Close Button</SheetTitle>
+            <SheetDescription>
+              This sheet doesn&apos;t have a close button in the top-right
+              corner. You can only close it using the button below.
+            </SheetDescription>
+          </SheetHeader>
+        </SheetContent>
+      </Sheet>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/sheet-with-form.tsx b/apps/v4/examples/base/sheet-with-form.tsx
new file mode 100644
index 000000000..853572fac
--- /dev/null
+++ b/apps/v4/examples/base/sheet-with-form.tsx
@@ -0,0 +1,48 @@
+import { Button } from "@/examples/base/ui/button"
+import { Field, FieldGroup, FieldLabel } from "@/examples/base/ui/field"
+import { Input } from "@/examples/base/ui/input"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/examples/base/ui/sheet"
+
+export function SheetWithForm() {
+  return (
+    <>
+      <Sheet>
+        <SheetTrigger render={<Button variant="outline" />}>Open</SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Edit profile</SheetTitle>
+            <SheetDescription>
+              Make changes to your profile here. Click save when you&apos;re
+              done.
+            </SheetDescription>
+          </SheetHeader>
+          <div className="style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4">
+            <FieldGroup>
+              <Field>
+                <FieldLabel htmlFor="sheet-demo-name">Name</FieldLabel>
+                <Input id="sheet-demo-name" defaultValue="Pedro Duarte" />
+              </Field>
+              <Field>
+                <FieldLabel htmlFor="sheet-demo-username">Username</FieldLabel>
+                <Input id="sheet-demo-username" defaultValue="@peduarte" />
+              </Field>
+            </FieldGroup>
+          </div>
+          <SheetFooter>
+            <Button type="submit">Save changes</Button>
+            <SheetClose render={<Button variant="outline" />}>Close</SheetClose>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/sheet-with-sides.tsx b/apps/v4/examples/base/sheet-with-sides.tsx
new file mode 100644
index 000000000..5e5b12836
--- /dev/null
+++ b/apps/v4/examples/base/sheet-with-sides.tsx
@@ -0,0 +1,64 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/examples/base/ui/sheet"
+
+const SHEET_SIDES = ["top", "right", "bottom", "left"] as const
+
+export function SheetWithSides() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {SHEET_SIDES.map((side) => (
+        <Sheet key={side}>
+          <SheetTrigger
+            render={<Button variant="outline" className="capitalize" />}
+          >
+            {side}
+          </SheetTrigger>
+          <SheetContent
+            side={side}
+            className="data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]"
+          >
+            <SheetHeader>
+              <SheetTitle>Edit profile</SheetTitle>
+              <SheetDescription>
+                Make changes to your profile here. Click save when you&apos;re
+                done.
+              </SheetDescription>
+            </SheetHeader>
+            <div className="no-scrollbar style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4 overflow-y-auto">
+              {Array.from({ length: 10 }).map((_, index) => (
+                <p
+                  key={index}
+                  className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+                >
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+                  irure dolor in reprehenderit in voluptate velit esse cillum
+                  dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                  cupidatat non proident, sunt in culpa qui officia deserunt
+                  mollit anim id est laborum.
+                </p>
+              ))}
+            </div>
+            <SheetFooter>
+              <Button type="submit">Save changes</Button>
+              <SheetClose render={<Button variant="outline" />}>
+                Cancel
+              </SheetClose>
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/skeleton-avatar.tsx b/apps/v4/examples/base/skeleton-avatar.tsx
new file mode 100644
index 000000000..ba6441498
--- /dev/null
+++ b/apps/v4/examples/base/skeleton-avatar.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from "@/examples/base/ui/skeleton"
+
+export function SkeletonAvatar() {
+  return (
+    <div className="flex w-full items-center gap-4">
+      <Skeleton className="size-10 shrink-0 rounded-full" />
+      <div className="grid gap-2">
+        <Skeleton className="h-4 w-[150px]" />
+        <Skeleton className="h-4 w-[100px]" />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/skeleton-card.tsx b/apps/v4/examples/base/skeleton-card.tsx
index 6f605157d..68cdbbd30 100644
--- a/apps/v4/examples/base/skeleton-card.tsx
+++ b/apps/v4/examples/base/skeleton-card.tsx
@@ -1,13 +1,16 @@
+import { Card, CardContent, CardHeader } from "@/examples/base/ui/card"
 import { Skeleton } from "@/examples/base/ui/skeleton"
 
 export function SkeletonCard() {
   return (
-    <div className="flex flex-col space-y-3">
-      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
-      </div>
-    </div>
+    <Card className="w-full">
+      <CardHeader>
+        <Skeleton className="h-4 w-2/3" />
+        <Skeleton className="h-4 w-1/2" />
+      </CardHeader>
+      <CardContent>
+        <Skeleton className="aspect-square w-full" />
+      </CardContent>
+    </Card>
   )
 }
diff --git a/apps/v4/examples/base/skeleton-form.tsx b/apps/v4/examples/base/skeleton-form.tsx
new file mode 100644
index 000000000..11c37f11d
--- /dev/null
+++ b/apps/v4/examples/base/skeleton-form.tsx
@@ -0,0 +1,17 @@
+import { Skeleton } from "@/examples/base/ui/skeleton"
+
+export function SkeletonForm() {
+  return (
+    <div className="flex w-full flex-col gap-7">
+      <div className="flex flex-col gap-3">
+        <Skeleton className="h-4 w-20" />
+        <Skeleton className="h-10 w-full" />
+      </div>
+      <div className="flex flex-col gap-3">
+        <Skeleton className="h-4 w-24" />
+        <Skeleton className="h-10 w-full" />
+      </div>
+      <Skeleton className="h-9 w-24" />
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/skeleton-table.tsx b/apps/v4/examples/base/skeleton-table.tsx
new file mode 100644
index 000000000..d5b093d60
--- /dev/null
+++ b/apps/v4/examples/base/skeleton-table.tsx
@@ -0,0 +1,23 @@
+import { Skeleton } from "@/examples/base/ui/skeleton"
+
+export function SkeletonTable() {
+  return (
+    <div className="flex w-full flex-col gap-2">
+      <div className="flex gap-4">
+        <Skeleton className="h-4 flex-1" />
+        <Skeleton className="h-4 w-24" />
+        <Skeleton className="h-4 w-20" />
+      </div>
+      <div className="flex gap-4">
+        <Skeleton className="h-4 flex-1" />
+        <Skeleton className="h-4 w-24" />
+        <Skeleton className="h-4 w-20" />
+      </div>
+      <div className="flex gap-4">
+        <Skeleton className="h-4 flex-1" />
+        <Skeleton className="h-4 w-24" />
+        <Skeleton className="h-4 w-20" />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/skeleton-text.tsx b/apps/v4/examples/base/skeleton-text.tsx
new file mode 100644
index 000000000..556af4b37
--- /dev/null
+++ b/apps/v4/examples/base/skeleton-text.tsx
@@ -0,0 +1,11 @@
+import { Skeleton } from "@/examples/base/ui/skeleton"
+
+export function SkeletonText() {
+  return (
+    <div className="flex w-full flex-col gap-2">
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-3/4" />
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/slider-basic.tsx b/apps/v4/examples/base/slider-basic.tsx
new file mode 100644
index 000000000..d6bef3219
--- /dev/null
+++ b/apps/v4/examples/base/slider-basic.tsx
@@ -0,0 +1,5 @@
+import { Slider } from "@/examples/base/ui/slider"
+
+export function SliderBasic() {
+  return <Slider defaultValue={50} max={100} step={1} />
+}
diff --git a/apps/v4/examples/base/slider-controlled.tsx b/apps/v4/examples/base/slider-controlled.tsx
new file mode 100644
index 000000000..ea5f10acc
--- /dev/null
+++ b/apps/v4/examples/base/slider-controlled.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { Label } from "@/examples/base/ui/label"
+import { Slider } from "@/examples/base/ui/slider"
+
+export function SliderControlled() {
+  const [value, setValue] = React.useState([0.3, 0.7])
+
+  return (
+    <div className="grid w-full gap-3">
+      <div className="flex items-center justify-between gap-2">
+        <Label htmlFor="slider-demo-temperature">Temperature</Label>
+        <span className="text-muted-foreground text-sm">
+          {value.join(", ")}
+        </span>
+      </div>
+      <Slider
+        id="slider-demo-temperature"
+        value={value}
+        onValueChange={(value) => setValue(value as number[])}
+        min={0}
+        max={1}
+        step={0.1}
+      />
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/slider-disabled.tsx b/apps/v4/examples/base/slider-disabled.tsx
new file mode 100644
index 000000000..357db50a8
--- /dev/null
+++ b/apps/v4/examples/base/slider-disabled.tsx
@@ -0,0 +1,5 @@
+import { Slider } from "@/examples/base/ui/slider"
+
+export function SliderDisabled() {
+  return <Slider defaultValue={[50]} max={100} step={1} disabled />
+}
diff --git a/apps/v4/examples/base/slider-fields.tsx b/apps/v4/examples/base/slider-fields.tsx
new file mode 100644
index 000000000..98e44aaf9
--- /dev/null
+++ b/apps/v4/examples/base/slider-fields.tsx
@@ -0,0 +1,119 @@
+"use client"
+
+import * as React from "react"
+import { useState } from "react"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/base/ui/field"
+import { Slider } from "@/examples/base/ui/slider"
+
+export function SliderFields() {
+  const [volume, setVolume] = useState([50])
+  const [brightness, setBrightness] = useState([75])
+  const [temperature, setTemperature] = useState([0.3, 0.7])
+  const [priceRange, setPriceRange] = useState([25, 75])
+  const [colorBalance, setColorBalance] = useState([10, 20, 70])
+
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="slider-volume">Volume</FieldLabel>
+        <Slider
+          id="slider-volume"
+          value={volume}
+          onValueChange={(value) => setVolume(value as number[])}
+          max={100}
+          step={1}
+        />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="slider-brightness">Screen Brightness</FieldLabel>
+        <Slider
+          id="slider-brightness"
+          value={brightness}
+          onValueChange={(value) => setBrightness(value as number[])}
+          max={100}
+          step={5}
+        />
+        <FieldDescription>
+          Current brightness: {brightness[0]}%
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="slider-quality">Video Quality</FieldLabel>
+        <FieldDescription>Higher quality uses more bandwidth.</FieldDescription>
+        <Slider
+          id="slider-quality"
+          defaultValue={[720]}
+          max={1080}
+          min={360}
+          step={360}
+        />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="slider-temperature">Temperature Range</FieldLabel>
+        <Slider
+          id="slider-temperature"
+          value={temperature}
+          onValueChange={(value) => setTemperature(value as number[])}
+          min={0}
+          max={1}
+          step={0.1}
+        />
+        <FieldDescription>
+          Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="slider-price-range">Price Range</FieldLabel>
+        <Slider
+          id="slider-price-range"
+          value={priceRange}
+          onValueChange={(value) => setPriceRange(value as number[])}
+          max={100}
+          step={5}
+        />
+        <FieldDescription>
+          ${priceRange[0]} - ${priceRange[1]}
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="slider-color-balance">Color Balance</FieldLabel>
+        <Slider
+          id="slider-color-balance"
+          value={colorBalance}
+          onValueChange={(value) => setColorBalance(value as number[])}
+          max={100}
+          step={10}
+        />
+        <FieldDescription>
+          Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{" "}
+          {colorBalance[2]}%
+        </FieldDescription>
+      </Field>
+      <Field data-invalid>
+        <FieldLabel htmlFor="slider-invalid">Invalid Slider</FieldLabel>
+        <Slider
+          id="slider-invalid"
+          defaultValue={[30]}
+          max={100}
+          aria-invalid
+        />
+        <FieldDescription>This slider has validation errors.</FieldDescription>
+      </Field>
+      <Field data-disabled>
+        <FieldLabel htmlFor="slider-disabled-field">Disabled Slider</FieldLabel>
+        <Slider
+          id="slider-disabled-field"
+          defaultValue={[50]}
+          max={100}
+          disabled
+        />
+        <FieldDescription>This slider is currently disabled.</FieldDescription>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/base/slider-multiple.tsx b/apps/v4/examples/base/slider-multiple.tsx
new file mode 100644
index 000000000..4d5cd1819
--- /dev/null
+++ b/apps/v4/examples/base/slider-multiple.tsx
@@ -0,0 +1,5 @@
+import { Slider } from "@/examples/base/ui/slider"
+
+export function SliderMultiple() {
+  return <Slider defaultValue={[10, 20, 70]} max={100} step={10} />
+}
diff --git a/apps/v4/examples/base/slider-range.tsx b/apps/v4/examples/base/slider-range.tsx
new file mode 100644
index 000000000..332d69ca2
--- /dev/null
+++ b/apps/v4/examples/base/slider-range.tsx
@@ -0,0 +1,5 @@
+import { Slider } from "@/examples/base/ui/slider"
+
+export function SliderRange() {
+  return <Slider defaultValue={[25, 50]} max={100} step={5} />
+}
diff --git a/apps/v4/examples/base/slider-vertical.tsx b/apps/v4/examples/base/slider-vertical.tsx
new file mode 100644
index 000000000..6eec36e8b
--- /dev/null
+++ b/apps/v4/examples/base/slider-vertical.tsx
@@ -0,0 +1,22 @@
+import { Slider } from "@/examples/base/ui/slider"
+
+export function SliderVertical() {
+  return (
+    <div className="flex items-center gap-6">
+      <Slider
+        defaultValue={[50]}
+        max={100}
+        step={1}
+        orientation="vertical"
+        className="h-40"
+      />
+      <Slider
+        defaultValue={[25]}
+        max={100}
+        step={1}
+        orientation="vertical"
+        className="h-40"
+      />
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/sonner-basic.tsx b/apps/v4/examples/base/sonner-basic.tsx
new file mode 100644
index 000000000..e225f578f
--- /dev/null
+++ b/apps/v4/examples/base/sonner-basic.tsx
@@ -0,0 +1,14 @@
+import { Button } from "@/examples/base/ui/button"
+import { toast } from "sonner"
+
+export function SonnerBasic() {
+  return (
+    <Button
+      onClick={() => toast("Event has been created")}
+      variant="outline"
+      className="w-fit"
+    >
+      Show Toast
+    </Button>
+  )
+}
diff --git a/apps/v4/examples/base/sonner-with-description.tsx b/apps/v4/examples/base/sonner-with-description.tsx
new file mode 100644
index 000000000..f6e13508e
--- /dev/null
+++ b/apps/v4/examples/base/sonner-with-description.tsx
@@ -0,0 +1,18 @@
+import { Button } from "@/examples/base/ui/button"
+import { toast } from "sonner"
+
+export function SonnerWithDescription() {
+  return (
+    <Button
+      onClick={() =>
+        toast("Event has been created", {
+          description: "Monday, January 3rd at 6:00pm",
+        })
+      }
+      variant="outline"
+      className="w-fit"
+    >
+      Show Toast
+    </Button>
+  )
+}
diff --git a/apps/v4/examples/base/spinner-basic.tsx b/apps/v4/examples/base/spinner-basic.tsx
index e4fce2620..196ca3f30 100644
--- a/apps/v4/examples/base/spinner-basic.tsx
+++ b/apps/v4/examples/base/spinner-basic.tsx
@@ -2,8 +2,9 @@ import { Spinner } from "@/examples/base/ui/spinner"
 
 export function SpinnerBasic() {
   return (
-    <div className="flex flex-col items-center justify-center gap-8">
+    <div className="flex items-center gap-6">
       <Spinner />
+      <Spinner className="size-6" />
     </div>
   )
 }
diff --git a/apps/v4/examples/base/spinner-in-badges.tsx b/apps/v4/examples/base/spinner-in-badges.tsx
new file mode 100644
index 000000000..d83fbac31
--- /dev/null
+++ b/apps/v4/examples/base/spinner-in-badges.tsx
@@ -0,0 +1,25 @@
+import { Badge } from "@/examples/base/ui/badge"
+import { Spinner } from "@/examples/base/ui/spinner"
+
+export function SpinnerInBadges() {
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-4">
+      <Badge>
+        <Spinner data-icon="inline-start" />
+        Badge
+      </Badge>
+      <Badge variant="secondary">
+        <Spinner data-icon="inline-start" />
+        Badge
+      </Badge>
+      <Badge variant="destructive">
+        <Spinner data-icon="inline-start" />
+        Badge
+      </Badge>
+      <Badge variant="outline">
+        <Spinner data-icon="inline-start" />
+        Badge
+      </Badge>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/spinner-in-buttons.tsx b/apps/v4/examples/base/spinner-in-buttons.tsx
new file mode 100644
index 000000000..d3029050f
--- /dev/null
+++ b/apps/v4/examples/base/spinner-in-buttons.tsx
@@ -0,0 +1,22 @@
+import { Button } from "@/examples/base/ui/button"
+import { Spinner } from "@/examples/base/ui/spinner"
+
+export function SpinnerInButtons() {
+  return (
+    <div className="flex flex-wrap items-center gap-4">
+      <Button>
+        <Spinner data-icon="inline-start" /> Submit
+      </Button>
+      <Button disabled>
+        <Spinner data-icon="inline-start" /> Disabled
+      </Button>
+      <Button variant="outline" disabled>
+        <Spinner data-icon="inline-start" /> Outline
+      </Button>
+      <Button variant="outline" size="icon" disabled>
+        <Spinner data-icon="inline-start" />
+        <span className="sr-only">Loading...</span>
+      </Button>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/spinner-in-empty.tsx b/apps/v4/examples/base/spinner-in-empty.tsx
new file mode 100644
index 000000000..95ae548e9
--- /dev/null
+++ b/apps/v4/examples/base/spinner-in-empty.tsx
@@ -0,0 +1,44 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/examples/base/ui/empty"
+import { Spinner } from "@/examples/base/ui/spinner"
+import { ArrowRightIcon } from "lucide-react"
+
+export function SpinnerInEmpty() {
+  return (
+    <Empty className="min-h-[300px]">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <Spinner />
+        </EmptyMedia>
+        <EmptyTitle>No projects yet</EmptyTitle>
+        <EmptyDescription>
+          You haven&apos;t created any projects yet. Get started by creating
+          your first project.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <div className="flex gap-2">
+          <Button render={<a href="#" />} nativeButton={false}>
+            Create project
+          </Button>
+          <Button variant="outline">Import project</Button>
+        </div>
+        <Button
+          variant="link"
+          render={<a href="#" />}
+          nativeButton={false}
+          className="text-muted-foreground"
+        >
+          Learn more <ArrowRightIcon />
+        </Button>
+      </EmptyContent>
+    </Empty>
+  )
+}
diff --git a/apps/v4/examples/base/spinner-in-input-group.tsx b/apps/v4/examples/base/spinner-in-input-group.tsx
new file mode 100644
index 000000000..3f9c5460f
--- /dev/null
+++ b/apps/v4/examples/base/spinner-in-input-group.tsx
@@ -0,0 +1,21 @@
+import { Field, FieldLabel } from "@/examples/base/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/base/ui/input-group"
+import { Spinner } from "@/examples/base/ui/spinner"
+
+export function SpinnerInInputGroup() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="input-group-spinner">Input Group</FieldLabel>
+      <InputGroup>
+        <InputGroupInput id="input-group-spinner" />
+        <InputGroupAddon>
+          <Spinner />
+        </InputGroupAddon>
+      </InputGroup>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/switch-basic.tsx b/apps/v4/examples/base/switch-basic.tsx
new file mode 100644
index 000000000..25422d832
--- /dev/null
+++ b/apps/v4/examples/base/switch-basic.tsx
@@ -0,0 +1,11 @@
+import { Field, FieldLabel } from "@/examples/base/ui/field"
+import { Switch } from "@/examples/base/ui/switch"
+
+export function SwitchBasic() {
+  return (
+    <Field orientation="horizontal">
+      <Switch id="switch-basic" />
+      <FieldLabel htmlFor="switch-basic">Airplane Mode</FieldLabel>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/switch-disabled.tsx b/apps/v4/examples/base/switch-disabled.tsx
new file mode 100644
index 000000000..f55124510
--- /dev/null
+++ b/apps/v4/examples/base/switch-disabled.tsx
@@ -0,0 +1,17 @@
+import { Label } from "@/examples/base/ui/label"
+import { Switch } from "@/examples/base/ui/switch"
+
+export function SwitchDisabled() {
+  return (
+    <div className="flex flex-col gap-12">
+      <div className="flex items-center gap-2">
+        <Switch id="switch-disabled-unchecked" disabled />
+        <Label htmlFor="switch-disabled-unchecked">Disabled (Unchecked)</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <Switch id="switch-disabled-checked" defaultChecked disabled />
+        <Label htmlFor="switch-disabled-checked">Disabled (Checked)</Label>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/switch-fields.tsx b/apps/v4/examples/base/switch-fields.tsx
new file mode 100644
index 000000000..6239a9410
--- /dev/null
+++ b/apps/v4/examples/base/switch-fields.tsx
@@ -0,0 +1,77 @@
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/base/ui/field"
+import { Switch } from "@/examples/base/ui/switch"
+
+export function SwitchFields() {
+  return (
+    <FieldGroup>
+      <Field orientation="horizontal">
+        <FieldContent>
+          <FieldLabel htmlFor="switch-airplane">Airplane Mode</FieldLabel>
+          <FieldDescription>
+            Turn on airplane mode to disable all connections.
+          </FieldDescription>
+        </FieldContent>
+        <Switch id="switch-airplane" />
+      </Field>
+      <Field orientation="horizontal">
+        <FieldLabel htmlFor="switch-dark">Dark Mode</FieldLabel>
+        <Switch id="switch-dark" />
+      </Field>
+      <Field orientation="horizontal">
+        <Switch id="switch-marketing" />
+        <FieldContent>
+          <FieldLabel htmlFor="switch-marketing">Marketing Emails</FieldLabel>
+          <FieldDescription>
+            Receive emails about new products, features, and more.
+          </FieldDescription>
+        </FieldContent>
+      </Field>
+      <Field>
+        <FieldLabel>Privacy Settings</FieldLabel>
+        <FieldDescription>Manage your privacy preferences.</FieldDescription>
+        <Field orientation="horizontal">
+          <Switch id="switch-profile" defaultChecked />
+          <FieldContent>
+            <FieldLabel htmlFor="switch-profile" className="font-normal">
+              Make profile visible to others
+            </FieldLabel>
+          </FieldContent>
+        </Field>
+        <Field orientation="horizontal">
+          <Switch id="switch-email" />
+          <FieldContent>
+            <FieldLabel htmlFor="switch-email" className="font-normal">
+              Show email on profile
+            </FieldLabel>
+          </FieldContent>
+        </Field>
+      </Field>
+      <Field data-invalid orientation="horizontal">
+        <FieldContent>
+          <FieldLabel htmlFor="switch-invalid">Invalid Switch</FieldLabel>
+          <FieldDescription>
+            This switch has validation errors.
+          </FieldDescription>
+        </FieldContent>
+        <Switch id="switch-invalid" aria-invalid />
+      </Field>
+      <Field data-disabled orientation="horizontal">
+        <FieldContent>
+          <FieldLabel htmlFor="switch-disabled-field">
+            Disabled Switch
+          </FieldLabel>
+          <FieldDescription>
+            This switch is currently disabled.
+          </FieldDescription>
+        </FieldContent>
+        <Switch id="switch-disabled-field" disabled />
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/base/switch-sizes.tsx b/apps/v4/examples/base/switch-sizes.tsx
new file mode 100644
index 000000000..57c7a1187
--- /dev/null
+++ b/apps/v4/examples/base/switch-sizes.tsx
@@ -0,0 +1,17 @@
+import { Label } from "@/examples/base/ui/label"
+import { Switch } from "@/examples/base/ui/switch"
+
+export function SwitchSizes() {
+  return (
+    <div className="flex flex-col gap-12">
+      <div className="flex items-center gap-2">
+        <Switch id="switch-size-sm" size="sm" />
+        <Label htmlFor="switch-size-sm">Small</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <Switch id="switch-size-default" size="default" />
+        <Label htmlFor="switch-size-default">Default</Label>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/switch-with-description.tsx b/apps/v4/examples/base/switch-with-description.tsx
new file mode 100644
index 000000000..313557673
--- /dev/null
+++ b/apps/v4/examples/base/switch-with-description.tsx
@@ -0,0 +1,25 @@
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldLabel,
+  FieldTitle,
+} from "@/examples/base/ui/field"
+import { Switch } from "@/examples/base/ui/switch"
+
+export function SwitchWithDescription() {
+  return (
+    <FieldLabel htmlFor="switch-focus-mode">
+      <Field orientation="horizontal">
+        <FieldContent>
+          <FieldTitle>Share across devices</FieldTitle>
+          <FieldDescription>
+            Focus is shared across devices, and turns off when you leave the
+            app.
+          </FieldDescription>
+        </FieldContent>
+        <Switch id="switch-focus-mode" />
+      </Field>
+    </FieldLabel>
+  )
+}
diff --git a/apps/v4/examples/base/switch-with-label.tsx b/apps/v4/examples/base/switch-with-label.tsx
new file mode 100644
index 000000000..db019bc5f
--- /dev/null
+++ b/apps/v4/examples/base/switch-with-label.tsx
@@ -0,0 +1,11 @@
+import { Label } from "@/examples/base/ui/label"
+import { Switch } from "@/examples/base/ui/switch"
+
+export function SwitchWithLabel() {
+  return (
+    <div className="flex items-center gap-2">
+      <Switch id="switch-bluetooth" defaultChecked />
+      <Label htmlFor="switch-bluetooth">Bluetooth</Label>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/table-basic.tsx b/apps/v4/examples/base/table-basic.tsx
new file mode 100644
index 000000000..84052e178
--- /dev/null
+++ b/apps/v4/examples/base/table-basic.tsx
@@ -0,0 +1,80 @@
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/examples/base/ui/table"
+
+const invoices = [
+  {
+    invoice: "INV001",
+    paymentStatus: "Paid",
+    totalAmount: "$250.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV002",
+    paymentStatus: "Pending",
+    totalAmount: "$150.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV003",
+    paymentStatus: "Unpaid",
+    totalAmount: "$350.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV004",
+    paymentStatus: "Paid",
+    totalAmount: "$450.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV005",
+    paymentStatus: "Paid",
+    totalAmount: "$550.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV006",
+    paymentStatus: "Pending",
+    totalAmount: "$200.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV007",
+    paymentStatus: "Unpaid",
+    totalAmount: "$300.00",
+    paymentMethod: "Credit Card",
+  },
+]
+
+export function TableBasic() {
+  return (
+    <Table>
+      <TableCaption>A list of your recent invoices.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[100px]">Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.slice(0, 3).map((invoice) => (
+          <TableRow key={invoice.invoice}>
+            <TableCell className="font-medium">{invoice.invoice}</TableCell>
+            <TableCell>{invoice.paymentStatus}</TableCell>
+            <TableCell>{invoice.paymentMethod}</TableCell>
+            <TableCell className="text-right">{invoice.totalAmount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/apps/v4/examples/base/table-simple.tsx b/apps/v4/examples/base/table-simple.tsx
new file mode 100644
index 000000000..2559e8a36
--- /dev/null
+++ b/apps/v4/examples/base/table-simple.tsx
@@ -0,0 +1,39 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/examples/base/ui/table"
+
+export function TableSimple() {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead className="text-right">Role</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell className="font-medium">Sarah Chen</TableCell>
+          <TableCell>sarah.chen@acme.com</TableCell>
+          <TableCell className="text-right">Admin</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">Marc Rodriguez</TableCell>
+          <TableCell>marcus.rodriguez@acme.com</TableCell>
+          <TableCell className="text-right">User</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">Emily Watson</TableCell>
+          <TableCell>emily.watson@acme.com</TableCell>
+          <TableCell className="text-right">User</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/apps/v4/examples/base/table-with-actions.tsx b/apps/v4/examples/base/table-with-actions.tsx
new file mode 100644
index 000000000..c24bfda7d
--- /dev/null
+++ b/apps/v4/examples/base/table-with-actions.tsx
@@ -0,0 +1,107 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui/dropdown-menu"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/examples/base/ui/table"
+import { MoreHorizontalIcon } from "lucide-react"
+
+export function TableWithActions() {
+  return (
+    <>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Product</TableHead>
+            <TableHead>Price</TableHead>
+            <TableHead className="text-right">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell className="font-medium">Wireless Mouse</TableCell>
+            <TableCell>$29.99</TableCell>
+            <TableCell className="text-right">
+              <DropdownMenu>
+                <DropdownMenuTrigger
+                  render={
+                    <Button variant="ghost" size="icon" className="size-8" />
+                  }
+                >
+                  <MoreHorizontalIcon />
+                  <span className="sr-only">Open menu</span>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem>Edit</DropdownMenuItem>
+                  <DropdownMenuItem>Duplicate</DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem variant="destructive">
+                    Delete
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell className="font-medium">Mechanical Keyboard</TableCell>
+            <TableCell>$129.99</TableCell>
+            <TableCell className="text-right">
+              <DropdownMenu>
+                <DropdownMenuTrigger
+                  render={
+                    <Button variant="ghost" size="icon" className="size-8" />
+                  }
+                >
+                  <MoreHorizontalIcon />
+                  <span className="sr-only">Open menu</span>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem>Edit</DropdownMenuItem>
+                  <DropdownMenuItem>Duplicate</DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem variant="destructive">
+                    Delete
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell className="font-medium">USB-C Hub</TableCell>
+            <TableCell>$49.99</TableCell>
+            <TableCell className="text-right">
+              <DropdownMenu>
+                <DropdownMenuTrigger
+                  render={
+                    <Button variant="ghost" size="icon" className="size-8" />
+                  }
+                >
+                  <MoreHorizontalIcon />
+                  <span className="sr-only">Open menu</span>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem>Edit</DropdownMenuItem>
+                  <DropdownMenuItem>Duplicate</DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem variant="destructive">
+                    Delete
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/table-with-badges.tsx b/apps/v4/examples/base/table-with-badges.tsx
new file mode 100644
index 000000000..df98a12db
--- /dev/null
+++ b/apps/v4/examples/base/table-with-badges.tsx
@@ -0,0 +1,63 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/examples/base/ui/table"
+
+export function TableWithBadges() {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Task</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead className="text-right">Priority</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell className="font-medium">Design homepage</TableCell>
+          <TableCell>
+            <span className="inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400">
+              Completed
+            </span>
+          </TableCell>
+          <TableCell className="text-right">
+            <span className="inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400">
+              High
+            </span>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">Implement API</TableCell>
+          <TableCell>
+            <span className="inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400">
+              In Progress
+            </span>
+          </TableCell>
+          <TableCell className="text-right">
+            <span className="inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400">
+              Medium
+            </span>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">Write tests</TableCell>
+          <TableCell>
+            <span className="inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400">
+              Pending
+            </span>
+          </TableCell>
+          <TableCell className="text-right">
+            <span className="inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400">
+              Low
+            </span>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/apps/v4/examples/base/table-with-footer.tsx b/apps/v4/examples/base/table-with-footer.tsx
new file mode 100644
index 000000000..368e0b1d4
--- /dev/null
+++ b/apps/v4/examples/base/table-with-footer.tsx
@@ -0,0 +1,87 @@
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/examples/base/ui/table"
+
+const invoices = [
+  {
+    invoice: "INV001",
+    paymentStatus: "Paid",
+    totalAmount: "$250.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV002",
+    paymentStatus: "Pending",
+    totalAmount: "$150.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV003",
+    paymentStatus: "Unpaid",
+    totalAmount: "$350.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV004",
+    paymentStatus: "Paid",
+    totalAmount: "$450.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV005",
+    paymentStatus: "Paid",
+    totalAmount: "$550.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV006",
+    paymentStatus: "Pending",
+    totalAmount: "$200.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV007",
+    paymentStatus: "Unpaid",
+    totalAmount: "$300.00",
+    paymentMethod: "Credit Card",
+  },
+]
+
+export function TableWithFooter() {
+  return (
+    <Table>
+      <TableCaption>A list of your recent invoices.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[100px]">Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.slice(0, 3).map((invoice) => (
+          <TableRow key={invoice.invoice}>
+            <TableCell className="font-medium">{invoice.invoice}</TableCell>
+            <TableCell>{invoice.paymentStatus}</TableCell>
+            <TableCell>{invoice.paymentMethod}</TableCell>
+            <TableCell className="text-right">{invoice.totalAmount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className="text-right">$2,500.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  )
+}
diff --git a/apps/v4/examples/base/table-with-input.tsx b/apps/v4/examples/base/table-with-input.tsx
new file mode 100644
index 000000000..01c361de2
--- /dev/null
+++ b/apps/v4/examples/base/table-with-input.tsx
@@ -0,0 +1,61 @@
+import { Input } from "@/examples/base/ui/input"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/examples/base/ui/table"
+
+export function TableWithInput() {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Product</TableHead>
+          <TableHead>Quantity</TableHead>
+          <TableHead>Price</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell className="font-medium">Wireless Mouse</TableCell>
+          <TableCell>
+            <Input
+              type="number"
+              defaultValue="1"
+              className="h-8 w-20"
+              min="0"
+            />
+          </TableCell>
+          <TableCell>$29.99</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">Mechanical Keyboard</TableCell>
+          <TableCell>
+            <Input
+              type="number"
+              defaultValue="2"
+              className="h-8 w-20"
+              min="0"
+            />
+          </TableCell>
+          <TableCell>$129.99</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">USB-C Hub</TableCell>
+          <TableCell>
+            <Input
+              type="number"
+              defaultValue="1"
+              className="h-8 w-20"
+              min="0"
+            />
+          </TableCell>
+          <TableCell>$49.99</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/apps/v4/examples/base/table-with-select.tsx b/apps/v4/examples/base/table-with-select.tsx
new file mode 100644
index 000000000..e89ecff32
--- /dev/null
+++ b/apps/v4/examples/base/table-with-select.tsx
@@ -0,0 +1,87 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/examples/base/ui/table"
+
+const people = [
+  { value: "sarah", label: "Sarah Chen" },
+  { value: "marcus", label: "Marc Rodriguez" },
+  { value: "emily", label: "Emily Watson" },
+  { value: "david", label: "David Kim" },
+]
+
+const tasks = [
+  {
+    task: "Design homepage",
+    assignee: "sarah",
+    status: "In Progress",
+  },
+  {
+    task: "Implement API",
+    assignee: "marcus",
+    status: "Pending",
+  },
+  {
+    task: "Write tests",
+    assignee: "emily",
+    status: "Not Started",
+  },
+]
+
+export function TableWithSelect() {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Task</TableHead>
+          <TableHead>Assignee</TableHead>
+          <TableHead>Status</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {tasks.map((item) => (
+          <TableRow key={item.task}>
+            <TableCell className="font-medium">{item.task}</TableCell>
+            <TableCell>
+              <Select
+                items={people}
+                defaultValue={people.find(
+                  (person) => person.value === item.assignee
+                )}
+                itemToStringValue={(item) => {
+                  return item.value
+                }}
+              >
+                <SelectTrigger className="w-40" size="sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    {people.map((person) => (
+                      <SelectItem key={person.value} value={person}>
+                        {person.label}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </TableCell>
+            <TableCell>{item.status}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/apps/v4/examples/base/tabs-basic.tsx b/apps/v4/examples/base/tabs-basic.tsx
new file mode 100644
index 000000000..ccf4d9644
--- /dev/null
+++ b/apps/v4/examples/base/tabs-basic.tsx
@@ -0,0 +1,12 @@
+import { Tabs, TabsList, TabsTrigger } from "@/examples/base/ui/tabs"
+
+export function TabsBasic() {
+  return (
+    <Tabs defaultValue="home">
+      <TabsList>
+        <TabsTrigger value="home">Home</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+      </TabsList>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/base/tabs-disabled.tsx b/apps/v4/examples/base/tabs-disabled.tsx
new file mode 100644
index 000000000..eed3f4476
--- /dev/null
+++ b/apps/v4/examples/base/tabs-disabled.tsx
@@ -0,0 +1,14 @@
+import { Tabs, TabsList, TabsTrigger } from "@/examples/base/ui/tabs"
+
+export function TabsDisabled() {
+  return (
+    <Tabs defaultValue="home">
+      <TabsList>
+        <TabsTrigger value="home">Home</TabsTrigger>
+        <TabsTrigger value="settings" disabled>
+          Disabled
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/base/tabs-icon-only.tsx b/apps/v4/examples/base/tabs-icon-only.tsx
new file mode 100644
index 000000000..762a26a23
--- /dev/null
+++ b/apps/v4/examples/base/tabs-icon-only.tsx
@@ -0,0 +1,20 @@
+import { Tabs, TabsList, TabsTrigger } from "@/examples/base/ui/tabs"
+import { HomeIcon, SearchIcon, SettingsIcon } from "lucide-react"
+
+export function TabsIconOnly() {
+  return (
+    <Tabs defaultValue="home">
+      <TabsList>
+        <TabsTrigger value="home">
+          <HomeIcon />
+        </TabsTrigger>
+        <TabsTrigger value="search">
+          <SearchIcon />
+        </TabsTrigger>
+        <TabsTrigger value="settings">
+          <SettingsIcon />
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/base/tabs-line-disabled.tsx b/apps/v4/examples/base/tabs-line-disabled.tsx
new file mode 100644
index 000000000..6ee3604a7
--- /dev/null
+++ b/apps/v4/examples/base/tabs-line-disabled.tsx
@@ -0,0 +1,15 @@
+import { Tabs, TabsList, TabsTrigger } from "@/examples/base/ui/tabs"
+
+export function TabsLineDisabled() {
+  return (
+    <Tabs defaultValue="overview">
+      <TabsList variant="line">
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="analytics">Analytics</TabsTrigger>
+        <TabsTrigger value="reports" disabled>
+          Reports
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/base/tabs-line-with-content.tsx b/apps/v4/examples/base/tabs-line-with-content.tsx
new file mode 100644
index 000000000..7de07fe49
--- /dev/null
+++ b/apps/v4/examples/base/tabs-line-with-content.tsx
@@ -0,0 +1,29 @@
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/examples/base/ui/tabs"
+
+export function TabsLineWithContent() {
+  return (
+    <Tabs defaultValue="account">
+      <TabsList variant="line">
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+        <TabsTrigger value="notifications">Notifications</TabsTrigger>
+      </TabsList>
+      <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <TabsContent value="account">
+          Manage your account preferences and profile information.
+        </TabsContent>
+        <TabsContent value="password">
+          Update your password to keep your account secure.
+        </TabsContent>
+        <TabsContent value="notifications">
+          Configure how you receive notifications and alerts.
+        </TabsContent>
+      </div>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/base/tabs-line.tsx b/apps/v4/examples/base/tabs-line.tsx
new file mode 100644
index 000000000..34326e166
--- /dev/null
+++ b/apps/v4/examples/base/tabs-line.tsx
@@ -0,0 +1,13 @@
+import { Tabs, TabsList, TabsTrigger } from "@/examples/base/ui/tabs"
+
+export function TabsLine() {
+  return (
+    <Tabs defaultValue="overview">
+      <TabsList variant="line">
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="analytics">Analytics</TabsTrigger>
+        <TabsTrigger value="reports">Reports</TabsTrigger>
+      </TabsList>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/base/tabs-multiple.tsx b/apps/v4/examples/base/tabs-multiple.tsx
new file mode 100644
index 000000000..5a42eb39d
--- /dev/null
+++ b/apps/v4/examples/base/tabs-multiple.tsx
@@ -0,0 +1,14 @@
+import { Tabs, TabsList, TabsTrigger } from "@/examples/base/ui/tabs"
+
+export function TabsMultiple() {
+  return (
+    <Tabs defaultValue="overview">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="analytics">Analytics</TabsTrigger>
+        <TabsTrigger value="reports">Reports</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+      </TabsList>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/base/tabs-variants-comparison.tsx b/apps/v4/examples/base/tabs-variants-comparison.tsx
new file mode 100644
index 000000000..8d81c3b26
--- /dev/null
+++ b/apps/v4/examples/base/tabs-variants-comparison.tsx
@@ -0,0 +1,20 @@
+import { Tabs, TabsList, TabsTrigger } from "@/examples/base/ui/tabs"
+
+export function TabsVariantsComparison() {
+  return (
+    <div className="flex gap-4">
+      <Tabs defaultValue="overview">
+        <TabsList>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="analytics">Analytics</TabsTrigger>
+        </TabsList>
+      </Tabs>
+      <Tabs defaultValue="overview">
+        <TabsList variant="line">
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="analytics">Analytics</TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/tabs-vertical.tsx b/apps/v4/examples/base/tabs-vertical.tsx
new file mode 100644
index 000000000..81043f658
--- /dev/null
+++ b/apps/v4/examples/base/tabs-vertical.tsx
@@ -0,0 +1,31 @@
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/examples/base/ui/tabs"
+
+export function TabsVertical() {
+  return (
+    <Tabs defaultValue="account" orientation="vertical">
+      <TabsList>
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+        <TabsTrigger value="notifications">Notifications</TabsTrigger>
+      </TabsList>
+      <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <TabsContent value="account">
+          Manage your account preferences and profile information.
+        </TabsContent>
+        <TabsContent value="password">
+          Update your password to keep your account secure. Use a strong
+          password with a mix of letters, numbers, and symbols.
+        </TabsContent>
+        <TabsContent value="notifications">
+          Configure how you receive notifications and alerts. Choose which types
+          of notifications you want to receive and how you want to receive them.
+        </TabsContent>
+      </div>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/base/tabs-with-content.tsx b/apps/v4/examples/base/tabs-with-content.tsx
new file mode 100644
index 000000000..3b0706e81
--- /dev/null
+++ b/apps/v4/examples/base/tabs-with-content.tsx
@@ -0,0 +1,29 @@
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/examples/base/ui/tabs"
+
+export function TabsWithContent() {
+  return (
+    <Tabs defaultValue="account">
+      <TabsList>
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+        <TabsTrigger value="notifications">Notifications</TabsTrigger>
+      </TabsList>
+      <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <TabsContent value="account">
+          Manage your account preferences and profile information.
+        </TabsContent>
+        <TabsContent value="password">
+          Update your password to keep your account secure.
+        </TabsContent>
+        <TabsContent value="notifications">
+          Configure how you receive notifications and alerts.
+        </TabsContent>
+      </div>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/base/tabs-with-dropdown.tsx b/apps/v4/examples/base/tabs-with-dropdown.tsx
new file mode 100644
index 000000000..bdcd6440b
--- /dev/null
+++ b/apps/v4/examples/base/tabs-with-dropdown.tsx
@@ -0,0 +1,57 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui/dropdown-menu"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/examples/base/ui/tabs"
+import { MoreHorizontalIcon } from "lucide-react"
+
+export function TabsWithDropdown() {
+  return (
+    <>
+      <Tabs defaultValue="overview">
+        <div className="flex items-center justify-between">
+          <TabsList>
+            <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger value="analytics">Analytics</TabsTrigger>
+            <TabsTrigger value="reports">Reports</TabsTrigger>
+          </TabsList>
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              render={<Button variant="ghost" size="icon" className="size-8" />}
+            >
+              <MoreHorizontalIcon />
+              <span className="sr-only">More options</span>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem>Settings</DropdownMenuItem>
+              <DropdownMenuItem>Export</DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>Archive</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+          <TabsContent value="overview">
+            View your dashboard metrics and key performance indicators.
+          </TabsContent>
+          <TabsContent value="analytics">
+            Detailed analytics and insights about your data.
+          </TabsContent>
+          <TabsContent value="reports">
+            Generate and view custom reports.
+          </TabsContent>
+        </div>
+      </Tabs>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/tabs-with-icons.tsx b/apps/v4/examples/base/tabs-with-icons.tsx
new file mode 100644
index 000000000..9da4b0f6f
--- /dev/null
+++ b/apps/v4/examples/base/tabs-with-icons.tsx
@@ -0,0 +1,19 @@
+import { Tabs, TabsList, TabsTrigger } from "@/examples/base/ui/tabs"
+import { AppWindowIcon, CodeIcon } from "lucide-react"
+
+export function TabsWithIcons() {
+  return (
+    <Tabs defaultValue="preview">
+      <TabsList>
+        <TabsTrigger value="preview">
+          <AppWindowIcon />
+          Preview
+        </TabsTrigger>
+        <TabsTrigger value="code">
+          <CodeIcon />
+          Code
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/base/tabs-with-input-and-button.tsx b/apps/v4/examples/base/tabs-with-input-and-button.tsx
new file mode 100644
index 000000000..a49e7cc9f
--- /dev/null
+++ b/apps/v4/examples/base/tabs-with-input-and-button.tsx
@@ -0,0 +1,36 @@
+import { Button } from "@/examples/base/ui/button"
+import { Input } from "@/examples/base/ui/input"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/examples/base/ui/tabs"
+
+export function TabsWithInputAndButton() {
+  return (
+    <Tabs defaultValue="overview" className="mx-auto w-full max-w-lg">
+      <div className="flex items-center gap-4">
+        <TabsList>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="analytics">Analytics</TabsTrigger>
+        </TabsList>
+        <div className="ml-auto flex items-center gap-2">
+          <Input placeholder="Search..." className="w-44" />
+          <Button>Action</Button>
+        </div>
+      </div>
+      <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <TabsContent value="overview">
+          View your dashboard metrics and key performance indicators.
+        </TabsContent>
+        <TabsContent value="analytics">
+          Detailed analytics and insights about your data.
+        </TabsContent>
+        <TabsContent value="reports">
+          Generate and view custom reports.
+        </TabsContent>
+      </div>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/base/textarea-basic.tsx b/apps/v4/examples/base/textarea-basic.tsx
new file mode 100644
index 000000000..2be4d6b3e
--- /dev/null
+++ b/apps/v4/examples/base/textarea-basic.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from "@/examples/base/ui/textarea"
+
+export function TextareaBasic() {
+  return <Textarea placeholder="Type your message here." />
+}
diff --git a/apps/v4/examples/base/textarea-disabled.tsx b/apps/v4/examples/base/textarea-disabled.tsx
index 4ae0b44ed..613046c43 100644
--- a/apps/v4/examples/base/textarea-disabled.tsx
+++ b/apps/v4/examples/base/textarea-disabled.tsx
@@ -1,5 +1,15 @@
+import { Field, FieldLabel } from "@/examples/base/ui/field"
 import { Textarea } from "@/examples/base/ui/textarea"
 
-export default function TextareaDisabled() {
-  return <Textarea placeholder="Type your message here." disabled />
+export function TextareaDisabled() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="textarea-demo-disabled">Message</FieldLabel>
+      <Textarea
+        id="textarea-demo-disabled"
+        placeholder="Type your message here."
+        disabled
+      />
+    </Field>
+  )
 }
diff --git a/apps/v4/examples/base/textarea-fields.tsx b/apps/v4/examples/base/textarea-fields.tsx
new file mode 100644
index 000000000..931a1e2d6
--- /dev/null
+++ b/apps/v4/examples/base/textarea-fields.tsx
@@ -0,0 +1,67 @@
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/base/ui/field"
+import { Textarea } from "@/examples/base/ui/textarea"
+
+export function TextareaFields() {
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="textarea-basic">Basic Textarea</FieldLabel>
+        <Textarea id="textarea-basic" placeholder="Enter your message" />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="textarea-comments">Comments</FieldLabel>
+        <Textarea
+          id="textarea-comments"
+          placeholder="Share your thoughts..."
+          className="min-h-[100px]"
+        />
+        <FieldDescription>Maximum 500 characters allowed.</FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="textarea-bio">Bio</FieldLabel>
+        <FieldDescription>
+          Tell us about yourself in a few sentences.
+        </FieldDescription>
+        <Textarea
+          id="textarea-bio"
+          placeholder="I am a..."
+          className="min-h-[120px]"
+        />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="textarea-desc-after">Message</FieldLabel>
+        <Textarea id="textarea-desc-after" placeholder="Enter your message" />
+        <FieldDescription>
+          Enter your message so it is long enough to test the layout.
+        </FieldDescription>
+      </Field>
+      <Field data-invalid>
+        <FieldLabel htmlFor="textarea-invalid">Invalid Textarea</FieldLabel>
+        <Textarea
+          id="textarea-invalid"
+          placeholder="This field has an error"
+          aria-invalid
+        />
+        <FieldDescription>
+          This field contains validation errors.
+        </FieldDescription>
+      </Field>
+      <Field data-disabled>
+        <FieldLabel htmlFor="textarea-disabled-field">
+          Disabled Field
+        </FieldLabel>
+        <Textarea
+          id="textarea-disabled-field"
+          placeholder="Cannot edit"
+          disabled
+        />
+        <FieldDescription>This field is currently disabled.</FieldDescription>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/base/textarea-invalid.tsx b/apps/v4/examples/base/textarea-invalid.tsx
new file mode 100644
index 000000000..f4dd9f203
--- /dev/null
+++ b/apps/v4/examples/base/textarea-invalid.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from "@/examples/base/ui/textarea"
+
+export function TextareaInvalid() {
+  return <Textarea placeholder="Type your message here." aria-invalid="true" />
+}
diff --git a/apps/v4/examples/base/textarea-with-description.tsx b/apps/v4/examples/base/textarea-with-description.tsx
new file mode 100644
index 000000000..bd534637d
--- /dev/null
+++ b/apps/v4/examples/base/textarea-with-description.tsx
@@ -0,0 +1,18 @@
+import { Field, FieldDescription, FieldLabel } from "@/examples/base/ui/field"
+import { Textarea } from "@/examples/base/ui/textarea"
+
+export function TextareaWithDescription() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="textarea-demo-message-2">Message</FieldLabel>
+      <Textarea
+        id="textarea-demo-message-2"
+        placeholder="Type your message here."
+        rows={6}
+      />
+      <FieldDescription>
+        Type your message and press enter to send.
+      </FieldDescription>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/textarea-with-label.tsx b/apps/v4/examples/base/textarea-with-label.tsx
index a49765040..124f28ee1 100644
--- a/apps/v4/examples/base/textarea-with-label.tsx
+++ b/apps/v4/examples/base/textarea-with-label.tsx
@@ -1,11 +1,15 @@
-import { Label } from "@/examples/base/ui/label"
+import { Field, FieldLabel } from "@/examples/base/ui/field"
 import { Textarea } from "@/examples/base/ui/textarea"
 
-export default function TextareaWithLabel() {
+export function TextareaWithLabel() {
   return (
-    <div className="grid w-full gap-3">
-      <Label htmlFor="message">Your message</Label>
-      <Textarea placeholder="Type your message here." id="message" />
-    </div>
+    <Field>
+      <FieldLabel htmlFor="textarea-demo-message">Message</FieldLabel>
+      <Textarea
+        id="textarea-demo-message"
+        placeholder="Type your message here."
+        rows={6}
+      />
+    </Field>
   )
 }
diff --git a/apps/v4/examples/base/toggle-basic.tsx b/apps/v4/examples/base/toggle-basic.tsx
new file mode 100644
index 000000000..6fd00737e
--- /dev/null
+++ b/apps/v4/examples/base/toggle-basic.tsx
@@ -0,0 +1,18 @@
+import { Toggle } from "@/examples/base/ui/toggle"
+import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
+
+export function ToggleBasic() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Toggle aria-label="Toggle bold" defaultPressed>
+        <BoldIcon />
+      </Toggle>
+      <Toggle aria-label="Toggle italic">
+        <ItalicIcon />
+      </Toggle>
+      <Toggle aria-label="Toggle underline">
+        <UnderlineIcon />
+      </Toggle>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/toggle-disabled.tsx b/apps/v4/examples/base/toggle-disabled.tsx
index 3cba27b69..e1cbc9d92 100644
--- a/apps/v4/examples/base/toggle-disabled.tsx
+++ b/apps/v4/examples/base/toggle-disabled.tsx
@@ -1,10 +1,14 @@
 import { Toggle } from "@/examples/base/ui/toggle"
-import { Underline } from "lucide-react"
 
 export function ToggleDisabled() {
   return (
-    <Toggle aria-label="Toggle italic" disabled>
-      <Underline className="h-4 w-4" />
-    </Toggle>
+    <div className="flex flex-wrap items-center gap-2">
+      <Toggle aria-label="Toggle disabled" disabled>
+        Disabled
+      </Toggle>
+      <Toggle variant="outline" aria-label="Toggle disabled outline" disabled>
+        Disabled
+      </Toggle>
+    </div>
   )
 }
diff --git a/apps/v4/examples/base/toggle-group-basic.tsx b/apps/v4/examples/base/toggle-group-basic.tsx
new file mode 100644
index 000000000..e8cb11939
--- /dev/null
+++ b/apps/v4/examples/base/toggle-group-basic.tsx
@@ -0,0 +1,18 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/base/ui/toggle-group"
+import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
+
+export function ToggleGroupBasic() {
+  return (
+    <ToggleGroup multiple spacing={1}>
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <BoldIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <ItalicIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <UnderlineIcon />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/examples/base/toggle-group-date-range.tsx b/apps/v4/examples/base/toggle-group-date-range.tsx
new file mode 100644
index 000000000..b74d0419b
--- /dev/null
+++ b/apps/v4/examples/base/toggle-group-date-range.tsx
@@ -0,0 +1,25 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/base/ui/toggle-group"
+
+export function ToggleGroupDateRange() {
+  return (
+    <ToggleGroup
+      defaultValue={["today"]}
+      variant="outline"
+      size="sm"
+      spacing={2}
+    >
+      <ToggleGroupItem value="today" aria-label="Today">
+        Today
+      </ToggleGroupItem>
+      <ToggleGroupItem value="week" aria-label="This Week">
+        This Week
+      </ToggleGroupItem>
+      <ToggleGroupItem value="month" aria-label="This Month">
+        This Month
+      </ToggleGroupItem>
+      <ToggleGroupItem value="year" aria-label="This Year">
+        This Year
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/examples/base/toggle-group-filter.tsx b/apps/v4/examples/base/toggle-group-filter.tsx
new file mode 100644
index 000000000..9dc7b34ca
--- /dev/null
+++ b/apps/v4/examples/base/toggle-group-filter.tsx
@@ -0,0 +1,20 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/base/ui/toggle-group"
+
+export function ToggleGroupFilter() {
+  return (
+    <ToggleGroup defaultValue={["all"]} variant="outline" size="sm">
+      <ToggleGroupItem value="all" aria-label="All">
+        All
+      </ToggleGroupItem>
+      <ToggleGroupItem value="active" aria-label="Active">
+        Active
+      </ToggleGroupItem>
+      <ToggleGroupItem value="completed" aria-label="Completed">
+        Completed
+      </ToggleGroupItem>
+      <ToggleGroupItem value="archived" aria-label="Archived">
+        Archived
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/examples/base/toggle-group-outline-with-icons.tsx b/apps/v4/examples/base/toggle-group-outline-with-icons.tsx
new file mode 100644
index 000000000..9ecdf2745
--- /dev/null
+++ b/apps/v4/examples/base/toggle-group-outline-with-icons.tsx
@@ -0,0 +1,18 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/base/ui/toggle-group"
+import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
+
+export function ToggleGroupOutlineWithIcons() {
+  return (
+    <ToggleGroup variant="outline" multiple size="sm">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <BoldIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <ItalicIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <UnderlineIcon />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/examples/base/toggle-group-outline.tsx b/apps/v4/examples/base/toggle-group-outline.tsx
index 009c353a8..bcf64437a 100644
--- a/apps/v4/examples/base/toggle-group-outline.tsx
+++ b/apps/v4/examples/base/toggle-group-outline.tsx
@@ -1,17 +1,13 @@
 import { ToggleGroup, ToggleGroupItem } from "@/examples/base/ui/toggle-group"
-import { Bold, Italic, Underline } from "lucide-react"
 
 export function ToggleGroupOutline() {
   return (
-    <ToggleGroup variant="outline">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <Bold className="h-4 w-4" />
+    <ToggleGroup variant="outline" defaultValue={["all"]}>
+      <ToggleGroupItem value="all" aria-label="Toggle all">
+        All
       </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <Italic className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-        <Underline className="h-4 w-4" />
+      <ToggleGroupItem value="missed" aria-label="Toggle missed">
+        Missed
       </ToggleGroupItem>
     </ToggleGroup>
   )
diff --git a/apps/v4/examples/base/toggle-group-sizes.tsx b/apps/v4/examples/base/toggle-group-sizes.tsx
new file mode 100644
index 000000000..62038c2d3
--- /dev/null
+++ b/apps/v4/examples/base/toggle-group-sizes.tsx
@@ -0,0 +1,36 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/base/ui/toggle-group"
+
+export function ToggleGroupSizes() {
+  return (
+    <div className="flex flex-col gap-4">
+      <ToggleGroup size="sm" defaultValue={["top"]} variant="outline">
+        <ToggleGroupItem value="top" aria-label="Toggle top">
+          Top
+        </ToggleGroupItem>
+        <ToggleGroupItem value="bottom" aria-label="Toggle bottom">
+          Bottom
+        </ToggleGroupItem>
+        <ToggleGroupItem value="left" aria-label="Toggle left">
+          Left
+        </ToggleGroupItem>
+        <ToggleGroupItem value="right" aria-label="Toggle right">
+          Right
+        </ToggleGroupItem>
+      </ToggleGroup>
+      <ToggleGroup defaultValue={["top"]} variant="outline">
+        <ToggleGroupItem value="top" aria-label="Toggle top">
+          Top
+        </ToggleGroupItem>
+        <ToggleGroupItem value="bottom" aria-label="Toggle bottom">
+          Bottom
+        </ToggleGroupItem>
+        <ToggleGroupItem value="left" aria-label="Toggle left">
+          Left
+        </ToggleGroupItem>
+        <ToggleGroupItem value="right" aria-label="Toggle right">
+          Right
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/toggle-group-sort.tsx b/apps/v4/examples/base/toggle-group-sort.tsx
new file mode 100644
index 000000000..d4fc0f2eb
--- /dev/null
+++ b/apps/v4/examples/base/toggle-group-sort.tsx
@@ -0,0 +1,21 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/base/ui/toggle-group"
+import { ArrowDownIcon, ArrowUpIcon, TrendingUpIcon } from "lucide-react"
+
+export function ToggleGroupSort() {
+  return (
+    <ToggleGroup defaultValue={["newest"]} variant="outline" size="sm">
+      <ToggleGroupItem value="newest" aria-label="Newest">
+        <ArrowDownIcon />
+        Newest
+      </ToggleGroupItem>
+      <ToggleGroupItem value="oldest" aria-label="Oldest">
+        <ArrowUpIcon />
+        Oldest
+      </ToggleGroupItem>
+      <ToggleGroupItem value="popular" aria-label="Popular">
+        <TrendingUpIcon />
+        Popular
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/examples/base/toggle-group-spacing.tsx b/apps/v4/examples/base/toggle-group-spacing.tsx
index 8b8020d54..fd9c8437f 100644
--- a/apps/v4/examples/base/toggle-group-spacing.tsx
+++ b/apps/v4/examples/base/toggle-group-spacing.tsx
@@ -1,32 +1,19 @@
 import { ToggleGroup, ToggleGroupItem } from "@/examples/base/ui/toggle-group"
-import { BookmarkIcon, HeartIcon, StarIcon } from "lucide-react"
 
 export function ToggleGroupSpacing() {
   return (
-    <ToggleGroup variant="outline" spacing={2} size="sm">
-      <ToggleGroupItem
-        value="star"
-        aria-label="Toggle star"
-        className="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-yellow-500 data-[state=on]:*:[svg]:stroke-yellow-500"
-      >
-        <StarIcon />
-        Star
+    <ToggleGroup size="sm" defaultValue={["top"]} variant="outline" spacing={2}>
+      <ToggleGroupItem value="top" aria-label="Toggle top">
+        Top
       </ToggleGroupItem>
-      <ToggleGroupItem
-        value="heart"
-        aria-label="Toggle heart"
-        className="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-red-500 data-[state=on]:*:[svg]:stroke-red-500"
-      >
-        <HeartIcon />
-        Heart
+      <ToggleGroupItem value="bottom" aria-label="Toggle bottom">
+        Bottom
       </ToggleGroupItem>
-      <ToggleGroupItem
-        value="bookmark"
-        aria-label="Toggle bookmark"
-        className="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500"
-      >
-        <BookmarkIcon />
-        Bookmark
+      <ToggleGroupItem value="left" aria-label="Toggle left">
+        Left
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right" aria-label="Toggle right">
+        Right
       </ToggleGroupItem>
     </ToggleGroup>
   )
diff --git a/apps/v4/examples/base/toggle-group-vertical-outline-with-icons.tsx b/apps/v4/examples/base/toggle-group-vertical-outline-with-icons.tsx
new file mode 100644
index 000000000..2da47a993
--- /dev/null
+++ b/apps/v4/examples/base/toggle-group-vertical-outline-with-icons.tsx
@@ -0,0 +1,18 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/base/ui/toggle-group"
+import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
+
+export function ToggleGroupVerticalOutlineWithIcons() {
+  return (
+    <ToggleGroup variant="outline" multiple orientation="vertical" size="sm">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <BoldIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <ItalicIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <UnderlineIcon />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/examples/base/toggle-group-vertical-outline.tsx b/apps/v4/examples/base/toggle-group-vertical-outline.tsx
new file mode 100644
index 000000000..c5603fcc8
--- /dev/null
+++ b/apps/v4/examples/base/toggle-group-vertical-outline.tsx
@@ -0,0 +1,25 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/base/ui/toggle-group"
+
+export function ToggleGroupVerticalOutline() {
+  return (
+    <ToggleGroup
+      variant="outline"
+      defaultValue={["all"]}
+      orientation="vertical"
+      size="sm"
+    >
+      <ToggleGroupItem value="all" aria-label="Toggle all">
+        All
+      </ToggleGroupItem>
+      <ToggleGroupItem value="active" aria-label="Toggle active">
+        Active
+      </ToggleGroupItem>
+      <ToggleGroupItem value="completed" aria-label="Toggle completed">
+        Completed
+      </ToggleGroupItem>
+      <ToggleGroupItem value="archived" aria-label="Toggle archived">
+        Archived
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/examples/base/toggle-group-vertical-with-spacing.tsx b/apps/v4/examples/base/toggle-group-vertical-with-spacing.tsx
new file mode 100644
index 000000000..df421e075
--- /dev/null
+++ b/apps/v4/examples/base/toggle-group-vertical-with-spacing.tsx
@@ -0,0 +1,26 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/base/ui/toggle-group"
+
+export function ToggleGroupVerticalWithSpacing() {
+  return (
+    <ToggleGroup
+      size="sm"
+      defaultValue={["top"]}
+      variant="outline"
+      orientation="vertical"
+      spacing={1}
+    >
+      <ToggleGroupItem value="top" aria-label="Toggle top">
+        Top
+      </ToggleGroupItem>
+      <ToggleGroupItem value="bottom" aria-label="Toggle bottom">
+        Bottom
+      </ToggleGroupItem>
+      <ToggleGroupItem value="left" aria-label="Toggle left">
+        Left
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right" aria-label="Toggle right">
+        Right
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/examples/base/toggle-group-vertical.tsx b/apps/v4/examples/base/toggle-group-vertical.tsx
new file mode 100644
index 000000000..272b9870b
--- /dev/null
+++ b/apps/v4/examples/base/toggle-group-vertical.tsx
@@ -0,0 +1,18 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/base/ui/toggle-group"
+import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
+
+export function ToggleGroupVertical() {
+  return (
+    <ToggleGroup multiple orientation="vertical" spacing={1}>
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <BoldIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <ItalicIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <UnderlineIcon />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/examples/base/toggle-group-with-icons.tsx b/apps/v4/examples/base/toggle-group-with-icons.tsx
new file mode 100644
index 000000000..60ed12701
--- /dev/null
+++ b/apps/v4/examples/base/toggle-group-with-icons.tsx
@@ -0,0 +1,33 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/base/ui/toggle-group"
+import { BookmarkIcon, HeartIcon, StarIcon } from "lucide-react"
+
+export function ToggleGroupWithIcons() {
+  return (
+    <ToggleGroup multiple variant="outline" spacing={2} size="sm">
+      <ToggleGroupItem
+        value="star"
+        aria-label="Toggle star"
+        className="aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent"
+      >
+        <StarIcon />
+        Star
+      </ToggleGroupItem>
+      <ToggleGroupItem
+        value="heart"
+        aria-label="Toggle heart"
+        className="aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent"
+      >
+        <HeartIcon />
+        Heart
+      </ToggleGroupItem>
+      <ToggleGroupItem
+        value="bookmark"
+        aria-label="Toggle bookmark"
+        className="aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent"
+      >
+        <BookmarkIcon />
+        Bookmark
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/examples/base/toggle-group-with-input-and-select.tsx b/apps/v4/examples/base/toggle-group-with-input-and-select.tsx
new file mode 100644
index 000000000..dae6ff614
--- /dev/null
+++ b/apps/v4/examples/base/toggle-group-with-input-and-select.tsx
@@ -0,0 +1,45 @@
+import { Input } from "@/examples/base/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/base/ui/select"
+import { ToggleGroup, ToggleGroupItem } from "@/examples/base/ui/toggle-group"
+
+export function ToggleGroupWithInputAndSelect() {
+  const items = [
+    { label: "All", value: "all" },
+    { label: "Active", value: "active" },
+    { label: "Archived", value: "archived" },
+  ]
+  return (
+    <div className="flex items-center gap-2">
+      <Input type="search" placeholder="Search..." className="flex-1" />
+      <Select items={items} defaultValue={items[0]}>
+        <SelectTrigger className="w-32">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            {items.map((item) => (
+              <SelectItem key={item.value} value={item.value}>
+                {item.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <ToggleGroup defaultValue={["grid"]} variant="outline">
+        <ToggleGroupItem value="grid" aria-label="Grid view">
+          Grid
+        </ToggleGroupItem>
+        <ToggleGroupItem value="list" aria-label="List view">
+          List
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/toggle-outline.tsx b/apps/v4/examples/base/toggle-outline.tsx
index 9a7d253ae..62b424d46 100644
--- a/apps/v4/examples/base/toggle-outline.tsx
+++ b/apps/v4/examples/base/toggle-outline.tsx
@@ -1,10 +1,17 @@
 import { Toggle } from "@/examples/base/ui/toggle"
-import { Italic } from "lucide-react"
+import { BoldIcon, ItalicIcon } from "lucide-react"
 
 export function ToggleOutline() {
   return (
-    <Toggle variant="outline" aria-label="Toggle italic">
-      <Italic />
-    </Toggle>
+    <div className="flex flex-wrap items-center gap-2">
+      <Toggle variant="outline" aria-label="Toggle italic">
+        <ItalicIcon />
+        Italic
+      </Toggle>
+      <Toggle variant="outline" aria-label="Toggle bold">
+        <BoldIcon />
+        Bold
+      </Toggle>
+    </div>
   )
 }
diff --git a/apps/v4/examples/base/toggle-sizes.tsx b/apps/v4/examples/base/toggle-sizes.tsx
new file mode 100644
index 000000000..b25b77b9d
--- /dev/null
+++ b/apps/v4/examples/base/toggle-sizes.tsx
@@ -0,0 +1,17 @@
+import { Toggle } from "@/examples/base/ui/toggle"
+
+export function ToggleSizes() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Toggle variant="outline" aria-label="Toggle small" size="sm">
+        Small
+      </Toggle>
+      <Toggle variant="outline" aria-label="Toggle default" size="default">
+        Default
+      </Toggle>
+      <Toggle variant="outline" aria-label="Toggle large" size="lg">
+        Large
+      </Toggle>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/toggle-with-button-icon-text.tsx b/apps/v4/examples/base/toggle-with-button-icon-text.tsx
new file mode 100644
index 000000000..44904c4e0
--- /dev/null
+++ b/apps/v4/examples/base/toggle-with-button-icon-text.tsx
@@ -0,0 +1,44 @@
+import { Button } from "@/examples/base/ui/button"
+import { Toggle } from "@/examples/base/ui/toggle"
+import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
+
+export function ToggleWithButtonIconText() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-2">
+        <Button size="sm" variant="outline">
+          <BoldIcon />
+          Button
+        </Button>
+        <Toggle variant="outline" aria-label="Toggle sm icon text" size="sm">
+          <BoldIcon />
+          Toggle
+        </Toggle>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button size="default" variant="outline">
+          <ItalicIcon />
+          Button
+        </Button>
+        <Toggle
+          variant="outline"
+          aria-label="Toggle default icon text"
+          size="default"
+        >
+          <ItalicIcon />
+          Toggle
+        </Toggle>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button size="lg" variant="outline">
+          <UnderlineIcon />
+          Button
+        </Button>
+        <Toggle variant="outline" aria-label="Toggle lg icon text" size="lg">
+          <UnderlineIcon />
+          Toggle
+        </Toggle>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/toggle-with-button-icon.tsx b/apps/v4/examples/base/toggle-with-button-icon.tsx
new file mode 100644
index 000000000..eb70b865d
--- /dev/null
+++ b/apps/v4/examples/base/toggle-with-button-icon.tsx
@@ -0,0 +1,38 @@
+import { Button } from "@/examples/base/ui/button"
+import { Toggle } from "@/examples/base/ui/toggle"
+import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
+
+export function ToggleWithButtonIcon() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-2">
+        <Button variant="outline" size="icon-sm">
+          <BoldIcon />
+        </Button>
+        <Toggle variant="outline" aria-label="Toggle sm icon" size="sm">
+          <BoldIcon />
+        </Toggle>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button variant="outline" size="icon">
+          <ItalicIcon />
+        </Button>
+        <Toggle
+          variant="outline"
+          aria-label="Toggle default icon"
+          size="default"
+        >
+          <ItalicIcon />
+        </Toggle>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button variant="outline" size="icon-lg">
+          <UnderlineIcon />
+        </Button>
+        <Toggle variant="outline" aria-label="Toggle lg icon" size="lg">
+          <UnderlineIcon />
+        </Toggle>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/toggle-with-button-text.tsx b/apps/v4/examples/base/toggle-with-button-text.tsx
new file mode 100644
index 000000000..73425c263
--- /dev/null
+++ b/apps/v4/examples/base/toggle-with-button-text.tsx
@@ -0,0 +1,33 @@
+import { Button } from "@/examples/base/ui/button"
+import { Toggle } from "@/examples/base/ui/toggle"
+
+export function ToggleWithButtonText() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-2">
+        <Button size="sm" variant="outline">
+          Button
+        </Button>
+        <Toggle variant="outline" aria-label="Toggle sm" size="sm">
+          Toggle
+        </Toggle>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button size="default" variant="outline">
+          Button
+        </Button>
+        <Toggle variant="outline" aria-label="Toggle default" size="default">
+          Toggle
+        </Toggle>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button size="lg" variant="outline">
+          Button
+        </Button>
+        <Toggle variant="outline" aria-label="Toggle lg" size="lg">
+          Toggle
+        </Toggle>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/toggle-with-icon.tsx b/apps/v4/examples/base/toggle-with-icon.tsx
new file mode 100644
index 000000000..77d434f03
--- /dev/null
+++ b/apps/v4/examples/base/toggle-with-icon.tsx
@@ -0,0 +1,16 @@
+import { Toggle } from "@/examples/base/ui/toggle"
+import { BookmarkIcon } from "lucide-react"
+
+export function ToggleWithIcon() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Toggle aria-label="Toggle bookmark" defaultPressed>
+        <BookmarkIcon className="group-data-[state=on]/toggle:fill-accent-foreground" />
+      </Toggle>
+      <Toggle variant="outline" aria-label="Toggle bookmark outline">
+        <BookmarkIcon className="group-data-[state=on]/toggle:fill-accent-foreground" />
+        Bookmark
+      </Toggle>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/tooltip-basic.tsx b/apps/v4/examples/base/tooltip-basic.tsx
new file mode 100644
index 000000000..3ebf484df
--- /dev/null
+++ b/apps/v4/examples/base/tooltip-basic.tsx
@@ -0,0 +1,21 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/base/ui/tooltip"
+
+export function TooltipBasic() {
+  return (
+    <>
+      <Tooltip>
+        <TooltipTrigger render={<Button variant="outline" className="w-fit" />}>
+          Show Tooltip
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Add to library</p>
+        </TooltipContent>
+      </Tooltip>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/tooltip-disabled.tsx b/apps/v4/examples/base/tooltip-disabled.tsx
new file mode 100644
index 000000000..58deed037
--- /dev/null
+++ b/apps/v4/examples/base/tooltip-disabled.tsx
@@ -0,0 +1,23 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/base/ui/tooltip"
+
+export function TooltipDisabled() {
+  return (
+    <>
+      <Tooltip>
+        <TooltipTrigger render={<span className="inline-block w-fit" />}>
+          <Button variant="outline" disabled>
+            Disabled
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>This feature is currently unavailable</p>
+        </TooltipContent>
+      </Tooltip>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/tooltip-formatted.tsx b/apps/v4/examples/base/tooltip-formatted.tsx
new file mode 100644
index 000000000..03b5394d6
--- /dev/null
+++ b/apps/v4/examples/base/tooltip-formatted.tsx
@@ -0,0 +1,24 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/base/ui/tooltip"
+
+export function TooltipFormatted() {
+  return (
+    <>
+      <Tooltip>
+        <TooltipTrigger render={<Button variant="outline" className="w-fit" />}>
+          Status
+        </TooltipTrigger>
+        <TooltipContent>
+          <div className="flex flex-col gap-1">
+            <p className="font-semibold">Active</p>
+            <p className="text-xs opacity-80">Last updated 2 hours ago</p>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/tooltip-long-content.tsx b/apps/v4/examples/base/tooltip-long-content.tsx
new file mode 100644
index 000000000..84b0195e4
--- /dev/null
+++ b/apps/v4/examples/base/tooltip-long-content.tsx
@@ -0,0 +1,22 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/base/ui/tooltip"
+
+export function TooltipLongContent() {
+  return (
+    <>
+      <Tooltip>
+        <TooltipTrigger render={<Button variant="outline" className="w-fit" />}>
+          Show Tooltip
+        </TooltipTrigger>
+        <TooltipContent>
+          To learn more about how this works, check out the docs. If you have
+          any questions, please reach out to us.
+        </TooltipContent>
+      </Tooltip>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/tooltip-on-link.tsx b/apps/v4/examples/base/tooltip-on-link.tsx
new file mode 100644
index 000000000..5eacf163d
--- /dev/null
+++ b/apps/v4/examples/base/tooltip-on-link.tsx
@@ -0,0 +1,26 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/base/ui/tooltip"
+
+export function TooltipOnLink() {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <a
+            href="#"
+            className="text-primary w-fit text-sm underline-offset-4 hover:underline"
+            onClick={(e) => e.preventDefault()}
+          />
+        }
+      >
+        Learn more
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Click to read the documentation</p>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
diff --git a/apps/v4/examples/base/tooltip-sides.tsx b/apps/v4/examples/base/tooltip-sides.tsx
new file mode 100644
index 000000000..edcfe6d12
--- /dev/null
+++ b/apps/v4/examples/base/tooltip-sides.tsx
@@ -0,0 +1,25 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/base/ui/tooltip"
+
+export function TooltipSides() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {(["top", "right", "bottom", "left"] as const).map((side) => (
+        <Tooltip key={side}>
+          <TooltipTrigger
+            render={<Button variant="outline" className="w-fit capitalize" />}
+          >
+            {side}
+          </TooltipTrigger>
+          <TooltipContent side={side}>
+            <p>Add to library</p>
+          </TooltipContent>
+        </Tooltip>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/v4/examples/base/tooltip-with-icon.tsx b/apps/v4/examples/base/tooltip-with-icon.tsx
new file mode 100644
index 000000000..10d52d375
--- /dev/null
+++ b/apps/v4/examples/base/tooltip-with-icon.tsx
@@ -0,0 +1,23 @@
+import { Button } from "@/examples/base/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/base/ui/tooltip"
+import { InfoIcon } from "lucide-react"
+
+export function TooltipWithIcon() {
+  return (
+    <>
+      <Tooltip>
+        <TooltipTrigger render={<Button variant="ghost" size="icon" />}>
+          <InfoIcon />
+          <span className="sr-only">Info</span>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Additional information</p>
+        </TooltipContent>
+      </Tooltip>
+    </>
+  )
+}
diff --git a/apps/v4/examples/base/tooltip-with-keyboard.tsx b/apps/v4/examples/base/tooltip-with-keyboard.tsx
new file mode 100644
index 000000000..8dc9868f8
--- /dev/null
+++ b/apps/v4/examples/base/tooltip-with-keyboard.tsx
@@ -0,0 +1,25 @@
+import { Button } from "@/examples/base/ui/button"
+import { Kbd } from "@/examples/base/ui/kbd"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/base/ui/tooltip"
+import { SaveIcon } from "lucide-react"
+
+export function TooltipWithKeyboard() {
+  return (
+    <>
+      <Tooltip>
+        <TooltipTrigger render={<Button variant="outline" size="icon-sm" />}>
+          <SaveIcon />
+        </TooltipTrigger>
+        <TooltipContent className="pr-1.5">
+          <div className="flex items-center gap-2">
+            Save Changes <Kbd>S</Kbd>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/accordion-basic.tsx b/apps/v4/examples/radix/accordion-basic.tsx
new file mode 100644
index 000000000..eb0d0fe22
--- /dev/null
+++ b/apps/v4/examples/radix/accordion-basic.tsx
@@ -0,0 +1,39 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/examples/radix/ui/accordion"
+
+export function AccordionBasic() {
+  const items = [
+    {
+      value: "item-1",
+      trigger: "Is it accessible?",
+      content: "Yes. It adheres to the WAI-ARIA design pattern.",
+    },
+    {
+      value: "item-2",
+      trigger: "Is it styled?",
+      content:
+        "Yes. It comes with default styles that matches the other components' aesthetic.",
+    },
+    {
+      value: "item-3",
+      trigger: "Is it animated?",
+      content:
+        "Yes. It's animated by default, but you can disable it if you prefer.",
+    },
+  ]
+
+  return (
+    <Accordion type="single" collapsible className="mx-auto max-w-lg">
+      {items.map((item) => (
+        <AccordionItem key={item.value} value={item.value}>
+          <AccordionTrigger>{item.trigger}</AccordionTrigger>
+          <AccordionContent>{item.content}</AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  )
+}
diff --git a/apps/v4/examples/radix/accordion-in-card.tsx b/apps/v4/examples/radix/accordion-in-card.tsx
new file mode 100644
index 000000000..d8705b404
--- /dev/null
+++ b/apps/v4/examples/radix/accordion-in-card.tsx
@@ -0,0 +1,143 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/examples/radix/ui/accordion"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/examples/radix/ui/card"
+import { ArrowUpRightIcon } from "lucide-react"
+
+export function AccordionInCard() {
+  const items = [
+    {
+      value: "plans",
+      trigger: "What subscription plans do you offer?",
+      content: (
+        <>
+          <p>
+            We offer three subscription tiers: Starter ($9/month), Professional
+            ($29/month), and Enterprise ($99/month). Each plan includes
+            increasing storage limits, API access, priority support, and team
+            collaboration features.
+          </p>
+          <p>
+            <a href="#">Annual billing is available</a> with a 20% discount. All
+            plans include a 14-day free trial with no credit card required.
+          </p>
+          <Button size="sm">
+            View plans
+            <ArrowUpRightIcon />
+          </Button>
+        </>
+      ),
+    },
+    {
+      value: "billing",
+      trigger: "How does billing work?",
+      content: (
+        <>
+          <p>
+            Billing occurs automatically at the start of each billing cycle. We
+            accept all major credit cards, PayPal, and ACH transfers for
+            enterprise customers.
+          </p>
+          <p>
+            You&apos;ll receive an invoice via email after each payment. You can
+            update your payment method or billing information anytime in your
+            account settings. Failed payments will trigger automated retry
+            attempts and email notifications.
+          </p>
+        </>
+      ),
+    },
+    {
+      value: "upgrade",
+      trigger: "Can I upgrade or downgrade my plan?",
+      content: (
+        <>
+          <p>
+            Yes, you can change your plan at any time. When upgrading,
+            you&apos;ll be charged a prorated amount for the remainder of your
+            billing cycle and immediately gain access to new features.
+          </p>
+          <p>
+            When downgrading, the change takes effect at the end of your current
+            billing period, and you&apos;ll retain access to premium features
+            until then. No refunds are provided for downgrades.
+          </p>
+        </>
+      ),
+    },
+    {
+      value: "cancel",
+      trigger: "How do I cancel my subscription?",
+      content: (
+        <>
+          <p>
+            You can cancel your subscription anytime from your account settings.
+            There are no cancellation fees or penalties. Your access will
+            continue until the end of your current billing period.
+          </p>
+          <p>
+            After cancellation, your data is retained for 30 days in case you
+            want to reactivate. You can export all your data before or after
+            canceling. We&apos;d love to hear your feedback about why
+            you&apos;re leaving.
+          </p>
+        </>
+      ),
+    },
+    {
+      value: "refund",
+      trigger: "What is your refund policy?",
+      content: (
+        <>
+          <p>
+            We offer a 30-day money-back guarantee for new subscriptions. If
+            you&apos;re not satisfied within the first 30 days, contact our
+            support team for a full refund.
+          </p>
+          <p>
+            After 30 days, we don&apos;t provide refunds for partial billing
+            periods, but you can cancel anytime to avoid future charges.
+            Enterprise customers have custom refund terms outlined in their
+            contracts.
+          </p>
+        </>
+      ),
+    },
+  ]
+
+  return (
+    <Card className="mx-auto w-full max-w-lg gap-4">
+      <CardHeader>
+        <CardTitle>Subscription & Billing</CardTitle>
+        <CardDescription>
+          Common questions about your account, plans, and payments
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Accordion
+          type="single"
+          collapsible
+          defaultValue="plans"
+          className="style-maia:rounded-md style-mira:rounded-md"
+        >
+          {items.map((item) => (
+            <AccordionItem key={item.value} value={item.value}>
+              <AccordionTrigger>{item.trigger}</AccordionTrigger>
+              <AccordionContent>{item.content}</AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/accordion-multiple.tsx b/apps/v4/examples/radix/accordion-multiple.tsx
index b6746bf82..442350033 100644
--- a/apps/v4/examples/radix/accordion-multiple.tsx
+++ b/apps/v4/examples/radix/accordion-multiple.tsx
@@ -5,42 +5,32 @@ import {
   AccordionTrigger,
 } from "@/examples/radix/ui/accordion"
 
-export default function AccordionMultiple() {
+export function AccordionMultiple() {
+  const items = [
+    {
+      value: "item-1",
+      trigger:
+        "What are the key considerations when implementing a comprehensive enterprise-level authentication system?",
+      content:
+        "Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.",
+    },
+    {
+      value: "item-2",
+      trigger:
+        "How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?",
+      content:
+        "Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.",
+    },
+  ]
+
   return (
-    <Accordion type="multiple" className="w-full max-w-md">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>
-          What are the key considerations when implementing a comprehensive
-          enterprise-level authentication system?
-        </AccordionTrigger>
-        <AccordionContent>
-          Implementing a robust enterprise authentication system requires
-          careful consideration of multiple factors. This includes secure
-          password hashing and storage, multi-factor authentication (MFA)
-          implementation, session management, OAuth2 and SSO integration,
-          regular security audits, rate limiting to prevent brute force attacks,
-          and maintaining detailed audit logs. Additionally, you&apos;ll need to
-          consider scalability, performance impact, and compliance with relevant
-          data protection regulations such as GDPR or HIPAA.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>
-          How does modern distributed system architecture handle eventual
-          consistency and data synchronization across multiple regions?
-        </AccordionTrigger>
-        <AccordionContent>
-          Modern distributed systems employ various strategies to maintain data
-          consistency across regions. This often involves using techniques like
-          CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip
-          protocols. Systems might implement event sourcing patterns, utilize
-          message queues for asynchronous updates, and employ sophisticated
-          conflict resolution strategies. Popular solutions like Amazon&apos;s
-          DynamoDB and Google&apos;s Spanner demonstrate different approaches to
-          solving these challenges, balancing between consistency, availability,
-          and partition tolerance as described in the CAP theorem.
-        </AccordionContent>
-      </AccordionItem>
+    <Accordion type="multiple" className="mx-auto max-w-lg">
+      {items.map((item) => (
+        <AccordionItem key={item.value} value={item.value}>
+          <AccordionTrigger>{item.trigger}</AccordionTrigger>
+          <AccordionContent>{item.content}</AccordionContent>
+        </AccordionItem>
+      ))}
     </Accordion>
   )
 }
diff --git a/apps/v4/examples/radix/accordion-with-borders.tsx b/apps/v4/examples/radix/accordion-with-borders.tsx
new file mode 100644
index 000000000..0789dd39c
--- /dev/null
+++ b/apps/v4/examples/radix/accordion-with-borders.tsx
@@ -0,0 +1,63 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/examples/radix/ui/accordion"
+
+export function AccordionWithBorders() {
+  const items = [
+    {
+      value: "billing",
+      trigger: "How does billing work?",
+      content:
+        "We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.",
+    },
+    {
+      value: "security",
+      trigger: "Is my data secure?",
+      content:
+        "Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.",
+    },
+    {
+      value: "integration",
+      trigger: "What integrations do you support?",
+      content: (
+        <>
+          <p>
+            We integrate with 500+ popular tools including Slack, Zapier,
+            Salesforce, HubSpot, and more. You can also build custom
+            integrations using our REST API and webhooks.{" "}
+          </p>
+          <p>
+            Our API documentation includes code examples in 10+ programming
+            languages.
+          </p>
+        </>
+      ),
+    },
+  ]
+
+  return (
+    <Accordion
+      type="single"
+      collapsible
+      className="style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg"
+    >
+      {items.map((item) => (
+        <AccordionItem
+          key={item.value}
+          value={item.value}
+          className="style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg"
+        >
+          <AccordionTrigger className="style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium">
+            {item.trigger}
+          </AccordionTrigger>
+          <AccordionContent className="text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0">
+            {item.content}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  )
+}
diff --git a/apps/v4/examples/radix/accordion-with-disabled.tsx b/apps/v4/examples/radix/accordion-with-disabled.tsx
new file mode 100644
index 000000000..f6079ffc9
--- /dev/null
+++ b/apps/v4/examples/radix/accordion-with-disabled.tsx
@@ -0,0 +1,56 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/examples/radix/ui/accordion"
+
+export function AccordionWithDisabled() {
+  const items = [
+    {
+      value: "item-1",
+      trigger: "Can I access my account history?",
+      content:
+        "Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.",
+      disabled: false,
+    },
+    {
+      value: "item-2",
+      trigger: "Premium feature information",
+      content:
+        "This section contains information about premium features. Upgrade your plan to access this content.",
+      disabled: true,
+    },
+    {
+      value: "item-3",
+      trigger: "How do I update my email address?",
+      content:
+        "You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.",
+      disabled: false,
+    },
+  ]
+
+  return (
+    <Accordion
+      type="single"
+      collapsible
+      className="style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border"
+    >
+      {items.map((item) => (
+        <AccordionItem
+          key={item.value}
+          value={item.value}
+          disabled={item.disabled}
+          className="data-open:bg-muted/50 p-1"
+        >
+          <AccordionTrigger className="style-nova:px-2.5 style-lyra:px-2 style-vega:px-4">
+            {item.trigger}
+          </AccordionTrigger>
+          <AccordionContent className="style-nova:px-2.5 style-lyra:px-2 style-vega:px-4">
+            {item.content}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  )
+}
diff --git a/apps/v4/examples/radix/alert-dialog-basic.tsx b/apps/v4/examples/radix/alert-dialog-basic.tsx
new file mode 100644
index 000000000..73bed568f
--- /dev/null
+++ b/apps/v4/examples/radix/alert-dialog-basic.tsx
@@ -0,0 +1,35 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/examples/radix/ui/alert-dialog"
+import { Button } from "@/examples/radix/ui/button"
+
+export function AlertDialogBasic() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">Default</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/apps/v4/examples/radix/alert-dialog-destructive.tsx b/apps/v4/examples/radix/alert-dialog-destructive.tsx
new file mode 100644
index 000000000..a317ed20a
--- /dev/null
+++ b/apps/v4/examples/radix/alert-dialog-destructive.tsx
@@ -0,0 +1,40 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/examples/radix/ui/alert-dialog"
+import { Button } from "@/examples/radix/ui/button"
+import { Trash2Icon } from "lucide-react"
+
+export function AlertDialogDestructive() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive">Delete Chat</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent size="sm">
+        <AlertDialogHeader>
+          <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
+            <Trash2Icon />
+          </AlertDialogMedia>
+          <AlertDialogTitle>Delete chat?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will permanently delete this chat conversation. View{" "}
+            <a href="#">Settings</a> delete any memories saved during this chat.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel variant="ghost">Cancel</AlertDialogCancel>
+          <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/apps/v4/examples/radix/alert-dialog-in-dialog.tsx b/apps/v4/examples/radix/alert-dialog-in-dialog.tsx
new file mode 100644
index 000000000..0ab94cbd0
--- /dev/null
+++ b/apps/v4/examples/radix/alert-dialog-in-dialog.tsx
@@ -0,0 +1,59 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/examples/radix/ui/alert-dialog"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/radix/ui/dialog"
+
+export function AlertDialogInDialog() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Alert Dialog Example</DialogTitle>
+          <DialogDescription>
+            Click the button below to open an alert dialog.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button>Open Alert Dialog</Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent size="sm">
+              <AlertDialogHeader>
+                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This action cannot be undone. This will permanently delete
+                  your account and remove your data from our servers.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction>Continue</AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/v4/examples/radix/alert-dialog-small-with-media.tsx b/apps/v4/examples/radix/alert-dialog-small-with-media.tsx
new file mode 100644
index 000000000..894c5f340
--- /dev/null
+++ b/apps/v4/examples/radix/alert-dialog-small-with-media.tsx
@@ -0,0 +1,39 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/examples/radix/ui/alert-dialog"
+import { Button } from "@/examples/radix/ui/button"
+import { BluetoothIcon } from "lucide-react"
+
+export function AlertDialogSmallWithMedia() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">Small (Media)</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent size="sm">
+        <AlertDialogHeader>
+          <AlertDialogMedia>
+            <BluetoothIcon />
+          </AlertDialogMedia>
+          <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
+          <AlertDialogDescription>
+            Do you want to allow the USB accessory to connect to this device?
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
+          <AlertDialogAction>Allow</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/apps/v4/examples/radix/alert-dialog-small.tsx b/apps/v4/examples/radix/alert-dialog-small.tsx
new file mode 100644
index 000000000..481d24e39
--- /dev/null
+++ b/apps/v4/examples/radix/alert-dialog-small.tsx
@@ -0,0 +1,34 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/examples/radix/ui/alert-dialog"
+import { Button } from "@/examples/radix/ui/button"
+
+export function AlertDialogSmall() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">Small</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent size="sm">
+        <AlertDialogHeader>
+          <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
+          <AlertDialogDescription>
+            Do you want to allow the USB accessory to connect to this device?
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
+          <AlertDialogAction>Allow</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/apps/v4/examples/radix/alert-dialog-with-media.tsx b/apps/v4/examples/radix/alert-dialog-with-media.tsx
new file mode 100644
index 000000000..ad9496cf6
--- /dev/null
+++ b/apps/v4/examples/radix/alert-dialog-with-media.tsx
@@ -0,0 +1,40 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/examples/radix/ui/alert-dialog"
+import { Button } from "@/examples/radix/ui/button"
+import { BluetoothIcon } from "lucide-react"
+
+export function AlertDialogWithMedia() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">Default (Media)</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogMedia>
+            <BluetoothIcon />
+          </AlertDialogMedia>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will permanently delete your account and remove your data from
+            our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/apps/v4/examples/radix/alert-example1.tsx b/apps/v4/examples/radix/alert-example1.tsx
new file mode 100644
index 000000000..d991c1ab5
--- /dev/null
+++ b/apps/v4/examples/radix/alert-example1.tsx
@@ -0,0 +1,22 @@
+import { Alert, AlertDescription, AlertTitle } from "@/examples/radix/ui/alert"
+
+export function AlertExample1() {
+  return (
+    <div className="mx-auto flex w-full max-w-lg flex-col gap-4">
+      <Alert>
+        <AlertTitle>Success! Your changes have been saved.</AlertTitle>
+      </Alert>
+      <Alert>
+        <AlertTitle>Success! Your changes have been saved.</AlertTitle>
+        <AlertDescription>
+          This is an alert with title and description.
+        </AlertDescription>
+      </Alert>
+      <Alert>
+        <AlertDescription>
+          This one has a description only. No title. No icon.
+        </AlertDescription>
+      </Alert>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/alert-example2.tsx b/apps/v4/examples/radix/alert-example2.tsx
new file mode 100644
index 000000000..105b176a5
--- /dev/null
+++ b/apps/v4/examples/radix/alert-example2.tsx
@@ -0,0 +1,62 @@
+import { Alert, AlertDescription, AlertTitle } from "@/examples/radix/ui/alert"
+import { CircleAlertIcon } from "lucide-react"
+
+export function AlertExample2() {
+  return (
+    <div className="mx-auto flex w-full max-w-lg flex-col gap-4">
+      <Alert>
+        <CircleAlertIcon />
+        <AlertTitle>
+          Let&apos;s try one with icon, title and a <a href="#">link</a>.
+        </AlertTitle>
+      </Alert>
+      <Alert>
+        <CircleAlertIcon />
+        <AlertDescription>
+          This one has an icon and a description only. No title.{" "}
+          <a href="#">But it has a link</a> and a <a href="#">second link</a>.
+        </AlertDescription>
+      </Alert>
+
+      <Alert>
+        <CircleAlertIcon />
+        <AlertTitle>Success! Your changes have been saved</AlertTitle>
+        <AlertDescription>
+          This is an alert with icon, title and description.
+        </AlertDescription>
+      </Alert>
+      <Alert>
+        <CircleAlertIcon />
+        <AlertTitle>
+          This is a very long alert title that demonstrates how the component
+          handles extended text content and potentially wraps across multiple
+          lines
+        </AlertTitle>
+      </Alert>
+      <Alert>
+        <CircleAlertIcon />
+        <AlertDescription>
+          This is a very long alert description that demonstrates how the
+          component handles extended text content and potentially wraps across
+          multiple lines
+        </AlertDescription>
+      </Alert>
+      <Alert>
+        <CircleAlertIcon />
+        <AlertTitle>
+          This is an extremely long alert title that spans multiple lines to
+          demonstrate how the component handles very lengthy headings while
+          maintaining readability and proper text wrapping behavior
+        </AlertTitle>
+        <AlertDescription>
+          This is an equally long description that contains detailed information
+          about the alert. It shows how the component can accommodate extensive
+          content while preserving proper spacing, alignment, and readability
+          across different screen sizes and viewport widths. This helps ensure
+          the user experience remains consistent regardless of the content
+          length.
+        </AlertDescription>
+      </Alert>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/alert-example3.tsx b/apps/v4/examples/radix/alert-example3.tsx
new file mode 100644
index 000000000..c47e5fae4
--- /dev/null
+++ b/apps/v4/examples/radix/alert-example3.tsx
@@ -0,0 +1,31 @@
+import { Alert, AlertDescription, AlertTitle } from "@/examples/radix/ui/alert"
+import { CircleAlertIcon } from "lucide-react"
+
+export function AlertExample3() {
+  return (
+    <div className="mx-auto flex w-full max-w-lg flex-col gap-4">
+      <Alert variant="destructive">
+        <CircleAlertIcon />
+        <AlertTitle>Something went wrong!</AlertTitle>
+        <AlertDescription>
+          Your session has expired. Please log in again.
+        </AlertDescription>
+      </Alert>
+      <Alert variant="destructive">
+        <CircleAlertIcon />
+        <AlertTitle>Unable to process your payment.</AlertTitle>
+        <AlertDescription>
+          <p>
+            Please verify your <a href="#">billing information</a> and try
+            again.
+          </p>
+          <ul className="list-inside list-disc">
+            <li>Check your card details</li>
+            <li>Ensure sufficient funds</li>
+            <li>Verify billing address</li>
+          </ul>
+        </AlertDescription>
+      </Alert>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/alert-example4.tsx b/apps/v4/examples/radix/alert-example4.tsx
new file mode 100644
index 000000000..015bdc77b
--- /dev/null
+++ b/apps/v4/examples/radix/alert-example4.tsx
@@ -0,0 +1,34 @@
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+} from "@/examples/radix/ui/alert"
+import { Badge } from "@/examples/radix/ui/badge"
+import { Button } from "@/examples/radix/ui/button"
+import { CircleAlertIcon } from "lucide-react"
+
+export function AlertExample4() {
+  return (
+    <div className="mx-auto flex w-full max-w-lg flex-col gap-4">
+      <Alert>
+        <CircleAlertIcon />
+        <AlertTitle>The selected emails have been marked as spam.</AlertTitle>
+        <AlertAction>
+          <Button size="xs">Undo</Button>
+        </AlertAction>
+      </Alert>
+      <Alert>
+        <CircleAlertIcon />
+        <AlertTitle>The selected emails have been marked as spam.</AlertTitle>
+        <AlertDescription>
+          This is a very long alert title that demonstrates how the component
+          handles extended text content.
+        </AlertDescription>
+        <AlertAction>
+          <Badge variant="secondary">Badge</Badge>
+        </AlertAction>
+      </Alert>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/aspect-ratio16x9.tsx b/apps/v4/examples/radix/aspect-ratio16x9.tsx
new file mode 100644
index 000000000..7b17d4f4b
--- /dev/null
+++ b/apps/v4/examples/radix/aspect-ratio16x9.tsx
@@ -0,0 +1,15 @@
+import Image from "next/image"
+import { AspectRatio } from "@/examples/radix/ui/aspect-ratio"
+
+export function AspectRatio16x9() {
+  return (
+    <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
+      <Image
+        src="https://avatar.vercel.sh/shadcn1"
+        alt="Photo"
+        fill
+        className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
+      />
+    </AspectRatio>
+  )
+}
diff --git a/apps/v4/examples/radix/aspect-ratio1x1.tsx b/apps/v4/examples/radix/aspect-ratio1x1.tsx
new file mode 100644
index 000000000..a44fc609f
--- /dev/null
+++ b/apps/v4/examples/radix/aspect-ratio1x1.tsx
@@ -0,0 +1,15 @@
+import Image from "next/image"
+import { AspectRatio } from "@/examples/radix/ui/aspect-ratio"
+
+export function AspectRatio1x1() {
+  return (
+    <AspectRatio ratio={1 / 1} className="bg-muted rounded-lg">
+      <Image
+        src="https://avatar.vercel.sh/shadcn1"
+        alt="Photo"
+        fill
+        className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
+      />
+    </AspectRatio>
+  )
+}
diff --git a/apps/v4/examples/radix/aspect-ratio21x9.tsx b/apps/v4/examples/radix/aspect-ratio21x9.tsx
new file mode 100644
index 000000000..6d6c868c5
--- /dev/null
+++ b/apps/v4/examples/radix/aspect-ratio21x9.tsx
@@ -0,0 +1,15 @@
+import Image from "next/image"
+import { AspectRatio } from "@/examples/radix/ui/aspect-ratio"
+
+export function AspectRatio21x9() {
+  return (
+    <AspectRatio ratio={21 / 9} className="bg-muted rounded-lg">
+      <Image
+        src="https://avatar.vercel.sh/shadcn1"
+        alt="Photo"
+        fill
+        className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
+      />
+    </AspectRatio>
+  )
+}
diff --git a/apps/v4/examples/radix/aspect-ratio9x16.tsx b/apps/v4/examples/radix/aspect-ratio9x16.tsx
new file mode 100644
index 000000000..9ba781dd5
--- /dev/null
+++ b/apps/v4/examples/radix/aspect-ratio9x16.tsx
@@ -0,0 +1,15 @@
+import Image from "next/image"
+import { AspectRatio } from "@/examples/radix/ui/aspect-ratio"
+
+export function AspectRatio9x16() {
+  return (
+    <AspectRatio ratio={9 / 16} className="bg-muted rounded-lg">
+      <Image
+        src="https://avatar.vercel.sh/shadcn1"
+        alt="Photo"
+        fill
+        className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
+      />
+    </AspectRatio>
+  )
+}
diff --git a/apps/v4/examples/radix/avatar-group-example.tsx b/apps/v4/examples/radix/avatar-group-example.tsx
new file mode 100644
index 000000000..0f176d018
--- /dev/null
+++ b/apps/v4/examples/radix/avatar-group-example.tsx
@@ -0,0 +1,73 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarImage,
+} from "@/examples/radix/ui/avatar"
+
+export function AvatarGroupExample() {
+  return (
+    <>
+      <AvatarGroup>
+        <Avatar size="sm">
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar size="sm">
+          <AvatarImage
+            src="https://github.com/maxleiter.png"
+            alt="@maxleiter"
+          />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar size="sm">
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+      </AvatarGroup>
+      <AvatarGroup>
+        <Avatar>
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage
+            src="https://github.com/maxleiter.png"
+            alt="@maxleiter"
+          />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+      </AvatarGroup>
+      <AvatarGroup>
+        <Avatar size="lg">
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarImage
+            src="https://github.com/maxleiter.png"
+            alt="@maxleiter"
+          />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+      </AvatarGroup>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/avatar-group-with-count.tsx b/apps/v4/examples/radix/avatar-group-with-count.tsx
new file mode 100644
index 000000000..ad9189ebf
--- /dev/null
+++ b/apps/v4/examples/radix/avatar-group-with-count.tsx
@@ -0,0 +1,77 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarImage,
+} from "@/examples/radix/ui/avatar"
+
+export function AvatarGroupWithCount() {
+  return (
+    <>
+      <AvatarGroup>
+        <Avatar size="sm">
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar size="sm">
+          <AvatarImage
+            src="https://github.com/maxleiter.png"
+            alt="@maxleiter"
+          />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar size="sm">
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+        <AvatarGroupCount>+3</AvatarGroupCount>
+      </AvatarGroup>
+      <AvatarGroup>
+        <Avatar>
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage
+            src="https://github.com/maxleiter.png"
+            alt="@maxleiter"
+          />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+        <AvatarGroupCount>+3</AvatarGroupCount>
+      </AvatarGroup>
+      <AvatarGroup>
+        <Avatar size="lg">
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarImage
+            src="https://github.com/maxleiter.png"
+            alt="@maxleiter"
+          />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+        <AvatarGroupCount>+3</AvatarGroupCount>
+      </AvatarGroup>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/avatar-group-with-icon-count.tsx b/apps/v4/examples/radix/avatar-group-with-icon-count.tsx
new file mode 100644
index 000000000..06f2c63b7
--- /dev/null
+++ b/apps/v4/examples/radix/avatar-group-with-icon-count.tsx
@@ -0,0 +1,90 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarImage,
+} from "@/examples/radix/ui/avatar"
+import { PlusIcon } from "lucide-react"
+
+export function AvatarGroupWithIconCount() {
+  return (
+    <>
+      <AvatarGroup>
+        <Avatar size="sm">
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar size="sm">
+          <AvatarImage
+            src="https://github.com/maxleiter.png"
+            alt="@maxleiter"
+          />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar size="sm">
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+        <AvatarGroupCount>
+          <PlusIcon />
+        </AvatarGroupCount>
+      </AvatarGroup>
+      <AvatarGroup>
+        <Avatar>
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage
+            src="https://github.com/maxleiter.png"
+            alt="@maxleiter"
+          />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+        <AvatarGroupCount>
+          <PlusIcon />
+        </AvatarGroupCount>
+      </AvatarGroup>
+      <AvatarGroup>
+        <Avatar size="lg">
+          <AvatarImage
+            src="https://github.com/shadcn.png"
+            alt="@shadcn"
+            className="grayscale"
+          />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarImage
+            src="https://github.com/maxleiter.png"
+            alt="@maxleiter"
+            className="grayscale"
+          />
+          <AvatarFallback>LR</AvatarFallback>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarImage
+            src="https://github.com/evilrabbit.png"
+            alt="@evilrabbit"
+            className="grayscale"
+          />
+          <AvatarFallback>ER</AvatarFallback>
+        </Avatar>
+        <AvatarGroupCount>
+          <PlusIcon />
+        </AvatarGroupCount>
+      </AvatarGroup>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/avatar-in-empty.tsx b/apps/v4/examples/radix/avatar-in-empty.tsx
new file mode 100644
index 000000000..9a0c32215
--- /dev/null
+++ b/apps/v4/examples/radix/avatar-in-empty.tsx
@@ -0,0 +1,67 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarImage,
+} from "@/examples/radix/ui/avatar"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/examples/radix/ui/empty"
+import { PlusIcon } from "lucide-react"
+
+export function AvatarInEmpty() {
+  return (
+    <Empty className="w-full flex-none border">
+      <EmptyHeader>
+        <EmptyMedia>
+          <AvatarGroup>
+            <Avatar size="lg">
+              <AvatarImage
+                src="https://github.com/shadcn.png"
+                alt="@shadcn"
+                className="grayscale"
+              />
+              <AvatarFallback>CN</AvatarFallback>
+            </Avatar>
+            <Avatar size="lg">
+              <AvatarImage
+                src="https://github.com/maxleiter.png"
+                alt="@maxleiter"
+                className="grayscale"
+              />
+              <AvatarFallback>LR</AvatarFallback>
+            </Avatar>
+            <Avatar size="lg">
+              <AvatarImage
+                src="https://github.com/evilrabbit.png"
+                alt="@evilrabbit"
+                className="grayscale"
+              />
+              <AvatarFallback>ER</AvatarFallback>
+            </Avatar>
+            <AvatarGroupCount>
+              <PlusIcon />
+            </AvatarGroupCount>
+          </AvatarGroup>
+        </EmptyMedia>
+        <EmptyTitle>No Team Members</EmptyTitle>
+        <EmptyDescription>
+          Invite your team to collaborate on this project.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button>
+          <PlusIcon />
+          Invite Members
+        </Button>
+      </EmptyContent>
+    </Empty>
+  )
+}
diff --git a/apps/v4/examples/radix/avatar-sizes.tsx b/apps/v4/examples/radix/avatar-sizes.tsx
new file mode 100644
index 000000000..462e5b913
--- /dev/null
+++ b/apps/v4/examples/radix/avatar-sizes.tsx
@@ -0,0 +1,33 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/examples/radix/ui/avatar"
+
+export function AvatarSizes() {
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-2">
+        <Avatar size="sm">
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Avatar size="sm">
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/avatar-with-badge-icon.tsx b/apps/v4/examples/radix/avatar-with-badge-icon.tsx
new file mode 100644
index 000000000..c87b28c33
--- /dev/null
+++ b/apps/v4/examples/radix/avatar-with-badge-icon.tsx
@@ -0,0 +1,66 @@
+import {
+  Avatar,
+  AvatarBadge,
+  AvatarFallback,
+  AvatarImage,
+} from "@/examples/radix/ui/avatar"
+import { CheckIcon, PlusIcon } from "lucide-react"
+
+export function AvatarWithBadgeIcon() {
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-2">
+        <Avatar size="sm">
+          <AvatarImage
+            src="https://github.com/pranathip.png"
+            alt="@pranathip"
+          />
+          <AvatarFallback>PP</AvatarFallback>
+          <AvatarBadge>
+            <PlusIcon />
+          </AvatarBadge>
+        </Avatar>
+        <Avatar>
+          <AvatarImage
+            src="https://github.com/pranathip.png"
+            alt="@pranathip"
+          />
+          <AvatarFallback>PP</AvatarFallback>
+          <AvatarBadge>
+            <PlusIcon />
+          </AvatarBadge>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarImage
+            src="https://github.com/pranathip.png"
+            alt="@pranathip"
+          />
+          <AvatarFallback>PP</AvatarFallback>
+          <AvatarBadge>
+            <PlusIcon />
+          </AvatarBadge>
+        </Avatar>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Avatar size="sm">
+          <AvatarFallback>PP</AvatarFallback>
+          <AvatarBadge>
+            <CheckIcon />
+          </AvatarBadge>
+        </Avatar>
+        <Avatar>
+          <AvatarFallback>PP</AvatarFallback>
+          <AvatarBadge>
+            <CheckIcon />
+          </AvatarBadge>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarFallback>PP</AvatarFallback>
+          <AvatarBadge>
+            <CheckIcon />
+          </AvatarBadge>
+        </Avatar>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/avatar-with-badge.tsx b/apps/v4/examples/radix/avatar-with-badge.tsx
new file mode 100644
index 000000000..6c50e870b
--- /dev/null
+++ b/apps/v4/examples/radix/avatar-with-badge.tsx
@@ -0,0 +1,53 @@
+import {
+  Avatar,
+  AvatarBadge,
+  AvatarFallback,
+  AvatarImage,
+} from "@/examples/radix/ui/avatar"
+
+export function AvatarWithBadge() {
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-2">
+        <Avatar size="sm">
+          <AvatarImage
+            src="https://github.com/jorgezreik.png"
+            alt="@jorgezreik"
+          />
+          <AvatarFallback>JZ</AvatarFallback>
+          <AvatarBadge />
+        </Avatar>
+        <Avatar>
+          <AvatarImage
+            src="https://github.com/jorgezreik.png"
+            alt="@jorgezreik"
+          />
+          <AvatarFallback>JZ</AvatarFallback>
+          <AvatarBadge />
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarImage
+            src="https://github.com/jorgezreik.png"
+            alt="@jorgezreik"
+          />
+          <AvatarFallback>JZ</AvatarFallback>
+          <AvatarBadge />
+        </Avatar>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Avatar size="sm">
+          <AvatarFallback>JZ</AvatarFallback>
+          <AvatarBadge />
+        </Avatar>
+        <Avatar>
+          <AvatarFallback>JZ</AvatarFallback>
+          <AvatarBadge />
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarFallback>JZ</AvatarFallback>
+          <AvatarBadge />
+        </Avatar>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/badge-as-link.tsx b/apps/v4/examples/radix/badge-as-link.tsx
new file mode 100644
index 000000000..63f98e02c
--- /dev/null
+++ b/apps/v4/examples/radix/badge-as-link.tsx
@@ -0,0 +1,39 @@
+import { Badge } from "@/examples/radix/ui/badge"
+import { ArrowUpRightIcon } from "lucide-react"
+
+export function BadgeAsLink() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Badge asChild>
+        <a href="#">
+          Link <ArrowUpRightIcon />
+        </a>
+      </Badge>
+      <Badge asChild variant="secondary">
+        <a href="#">
+          Link <ArrowUpRightIcon />
+        </a>
+      </Badge>
+      <Badge asChild variant="destructive">
+        <a href="#">
+          Link <ArrowUpRightIcon />
+        </a>
+      </Badge>
+      <Badge asChild variant="outline">
+        <a href="#">
+          Link <ArrowUpRightIcon />
+        </a>
+      </Badge>
+      <Badge asChild variant="ghost">
+        <a href="#">
+          Link <ArrowUpRightIcon />
+        </a>
+      </Badge>
+      <Badge asChild variant="link">
+        <a href="#">
+          Link <ArrowUpRightIcon />
+        </a>
+      </Badge>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/badge-custom-colors.tsx b/apps/v4/examples/radix/badge-custom-colors.tsx
new file mode 100644
index 000000000..f90c4b096
--- /dev/null
+++ b/apps/v4/examples/radix/badge-custom-colors.tsx
@@ -0,0 +1,35 @@
+import { Badge } from "@/examples/radix/ui/badge"
+
+export function BadgeCustomColors() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Badge className="bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50">
+        Blue
+      </Badge>
+      <Badge className="bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50">
+        Green
+      </Badge>
+      <Badge className="bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50">
+        Sky
+      </Badge>
+      <Badge className="bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50">
+        Purple
+      </Badge>
+      <Badge className="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300">
+        Blue
+      </Badge>
+      <Badge className="bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300">
+        Green
+      </Badge>
+      <Badge className="bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300">
+        Sky
+      </Badge>
+      <Badge className="bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300">
+        Purple
+      </Badge>
+      <Badge className="bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300">
+        Red
+      </Badge>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/badge-long-text.tsx b/apps/v4/examples/radix/badge-long-text.tsx
new file mode 100644
index 000000000..c5a1be7be
--- /dev/null
+++ b/apps/v4/examples/radix/badge-long-text.tsx
@@ -0,0 +1,11 @@
+import { Badge } from "@/examples/radix/ui/badge"
+
+export function BadgeLongText() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Badge variant="secondary">
+        A badge with a lot of text to see how it wraps
+      </Badge>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/badge-variants.tsx b/apps/v4/examples/radix/badge-variants.tsx
new file mode 100644
index 000000000..576b5c51f
--- /dev/null
+++ b/apps/v4/examples/radix/badge-variants.tsx
@@ -0,0 +1,14 @@
+import { Badge } from "@/examples/radix/ui/badge"
+
+export function BadgeVariants() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Badge>Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="outline">Outline</Badge>
+      <Badge variant="ghost">Ghost</Badge>
+      <Badge variant="link">Link</Badge>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/badge-with-icon-left.tsx b/apps/v4/examples/radix/badge-with-icon-left.tsx
new file mode 100644
index 000000000..e09915cb0
--- /dev/null
+++ b/apps/v4/examples/radix/badge-with-icon-left.tsx
@@ -0,0 +1,33 @@
+import { Badge } from "@/examples/radix/ui/badge"
+import { BadgeCheck } from "lucide-react"
+
+export function BadgeWithIconLeft() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Badge>
+        <BadgeCheck />
+        Default
+      </Badge>
+      <Badge variant="secondary">
+        <BadgeCheck />
+        Secondary
+      </Badge>
+      <Badge variant="destructive">
+        <BadgeCheck />
+        Destructive
+      </Badge>
+      <Badge variant="outline">
+        <BadgeCheck />
+        Outline
+      </Badge>
+      <Badge variant="ghost">
+        <BadgeCheck />
+        Ghost
+      </Badge>
+      <Badge variant="link">
+        <BadgeCheck />
+        Link
+      </Badge>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/badge-with-icon-right.tsx b/apps/v4/examples/radix/badge-with-icon-right.tsx
new file mode 100644
index 000000000..318f631c6
--- /dev/null
+++ b/apps/v4/examples/radix/badge-with-icon-right.tsx
@@ -0,0 +1,33 @@
+import { Badge } from "@/examples/radix/ui/badge"
+import { ArrowRightIcon } from "lucide-react"
+
+export function BadgeWithIconRight() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Badge>
+        Default
+        <ArrowRightIcon />
+      </Badge>
+      <Badge variant="secondary">
+        Secondary
+        <ArrowRightIcon />
+      </Badge>
+      <Badge variant="destructive">
+        Destructive
+        <ArrowRightIcon />
+      </Badge>
+      <Badge variant="outline">
+        Outline
+        <ArrowRightIcon />
+      </Badge>
+      <Badge variant="ghost">
+        Ghost
+        <ArrowRightIcon />
+      </Badge>
+      <Badge variant="link">
+        Link
+        <ArrowRightIcon />
+      </Badge>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/badge-with-spinner.tsx b/apps/v4/examples/radix/badge-with-spinner.tsx
new file mode 100644
index 000000000..c50761111
--- /dev/null
+++ b/apps/v4/examples/radix/badge-with-spinner.tsx
@@ -0,0 +1,33 @@
+import { Badge } from "@/examples/radix/ui/badge"
+import { Spinner } from "@/examples/radix/ui/spinner"
+
+export function BadgeWithSpinner() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Badge>
+        <Spinner data-icon="inline-start" />
+        Default
+      </Badge>
+      <Badge variant="secondary">
+        <Spinner data-icon="inline-start" />
+        Secondary
+      </Badge>
+      <Badge variant="destructive">
+        <Spinner data-icon="inline-start" />
+        Destructive
+      </Badge>
+      <Badge variant="outline">
+        <Spinner data-icon="inline-start" />
+        Outline
+      </Badge>
+      <Badge variant="ghost">
+        <Spinner data-icon="inline-start" />
+        Ghost
+      </Badge>
+      <Badge variant="link">
+        <Spinner data-icon="inline-start" />
+        Link
+      </Badge>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/breadcrumb-basic.tsx b/apps/v4/examples/radix/breadcrumb-basic.tsx
new file mode 100644
index 000000000..fed5de94e
--- /dev/null
+++ b/apps/v4/examples/radix/breadcrumb-basic.tsx
@@ -0,0 +1,28 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/examples/radix/ui/breadcrumb"
+
+export function BreadcrumbBasic() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/v4/examples/radix/breadcrumb-with-dropdown.tsx b/apps/v4/examples/radix/breadcrumb-with-dropdown.tsx
new file mode 100644
index 000000000..a35007a8b
--- /dev/null
+++ b/apps/v4/examples/radix/breadcrumb-with-dropdown.tsx
@@ -0,0 +1,52 @@
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/examples/radix/ui/breadcrumb"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/examples/radix/ui/dropdown-menu"
+
+export function BreadcrumbWithDropdown() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="icon-sm" variant="ghost">
+                <BreadcrumbEllipsis />
+                <span className="sr-only">Toggle menu</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem>Documentation</DropdownMenuItem>
+              <DropdownMenuItem>Themes</DropdownMenuItem>
+              <DropdownMenuItem>GitHub</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/v4/examples/radix/breadcrumb-with-link.tsx b/apps/v4/examples/radix/breadcrumb-with-link.tsx
new file mode 100644
index 000000000..c8b99dc32
--- /dev/null
+++ b/apps/v4/examples/radix/breadcrumb-with-link.tsx
@@ -0,0 +1,38 @@
+import Link from "next/link"
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/examples/radix/ui/breadcrumb"
+
+export function BreadcrumbWithLink() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href="#">Home</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbEllipsis />
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href="#">Components</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/v4/examples/radix/button-examples.tsx b/apps/v4/examples/radix/button-examples.tsx
new file mode 100644
index 000000000..087397d82
--- /dev/null
+++ b/apps/v4/examples/radix/button-examples.tsx
@@ -0,0 +1,21 @@
+import { Button } from "@/examples/radix/ui/button"
+import { ArrowRightIcon } from "lucide-react"
+
+export function ButtonExamples() {
+  return (
+    <div className="flex flex-wrap items-center gap-4">
+      <div className="flex items-center gap-2">
+        <Button variant="outline">Cancel</Button>
+        <Button>
+          Submit <ArrowRightIcon />
+        </Button>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button variant="destructive">Delete</Button>
+        <Button size="icon">
+          <ArrowRightIcon />
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/button-group-basic.tsx b/apps/v4/examples/radix/button-group-basic.tsx
new file mode 100644
index 000000000..d4d9d06f0
--- /dev/null
+++ b/apps/v4/examples/radix/button-group-basic.tsx
@@ -0,0 +1,13 @@
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
+
+export function ButtonGroupBasic() {
+  return (
+    <div className="flex flex-col gap-4">
+      <ButtonGroup>
+        <Button variant="outline">Button</Button>
+        <Button variant="outline">Another Button</Button>
+      </ButtonGroup>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/button-group-navigation.tsx b/apps/v4/examples/radix/button-group-navigation.tsx
new file mode 100644
index 000000000..142d1705d
--- /dev/null
+++ b/apps/v4/examples/radix/button-group-navigation.tsx
@@ -0,0 +1,23 @@
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
+
+export function ButtonGroupNavigation() {
+  return (
+    <ButtonGroup>
+      <ButtonGroup>
+        <Button variant="outline">
+          <ArrowLeftIcon />
+        </Button>
+        <Button variant="outline">
+          <ArrowRightIcon />
+        </Button>
+      </ButtonGroup>
+      <ButtonGroup aria-label="Single navigation button">
+        <Button variant="outline" size="icon">
+          <ArrowLeftIcon />
+        </Button>
+      </ButtonGroup>
+    </ButtonGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/button-group-nested.tsx b/apps/v4/examples/radix/button-group-nested.tsx
index a86c3d978..f777c4a6f 100644
--- a/apps/v4/examples/radix/button-group-nested.tsx
+++ b/apps/v4/examples/radix/button-group-nested.tsx
@@ -1,36 +1,38 @@
-"use client"
-
 import { Button } from "@/examples/radix/ui/button"
 import { ButtonGroup } from "@/examples/radix/ui/button-group"
-import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
+import { Input } from "@/examples/radix/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/radix/ui/input-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/radix/ui/tooltip"
+import { AudioLinesIcon, PlusIcon } from "lucide-react"
 
-export default function ButtonGroupNested() {
+export function ButtonGroupNested() {
   return (
     <ButtonGroup>
       <ButtonGroup>
-        <Button variant="outline" size="sm">
-          1
-        </Button>
-        <Button variant="outline" size="sm">
-          2
-        </Button>
-        <Button variant="outline" size="sm">
-          3
-        </Button>
-        <Button variant="outline" size="sm">
-          4
-        </Button>
-        <Button variant="outline" size="sm">
-          5
+        <Button variant="outline" size="icon">
+          <PlusIcon />
         </Button>
       </ButtonGroup>
       <ButtonGroup>
-        <Button variant="outline" size="icon-sm" aria-label="Previous">
-          <ArrowLeftIcon />
-        </Button>
-        <Button variant="outline" size="icon-sm" aria-label="Next">
-          <ArrowRightIcon />
-        </Button>
+        <InputGroup>
+          <InputGroupInput placeholder="Send a message..." />
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <InputGroupAddon align="inline-end">
+                <AudioLinesIcon />
+              </InputGroupAddon>
+            </TooltipTrigger>
+            <TooltipContent>Voice Mode</TooltipContent>
+          </Tooltip>
+        </InputGroup>
       </ButtonGroup>
     </ButtonGroup>
   )
diff --git a/apps/v4/examples/radix/button-group-pagination-split.tsx b/apps/v4/examples/radix/button-group-pagination-split.tsx
new file mode 100644
index 000000000..cfacd0d83
--- /dev/null
+++ b/apps/v4/examples/radix/button-group-pagination-split.tsx
@@ -0,0 +1,35 @@
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
+
+export function ButtonGroupPaginationSplit() {
+  return (
+    <ButtonGroup>
+      <ButtonGroup>
+        <Button variant="outline" size="sm">
+          1
+        </Button>
+        <Button variant="outline" size="sm">
+          2
+        </Button>
+        <Button variant="outline" size="sm">
+          3
+        </Button>
+        <Button variant="outline" size="sm">
+          4
+        </Button>
+        <Button variant="outline" size="sm">
+          5
+        </Button>
+      </ButtonGroup>
+      <ButtonGroup>
+        <Button variant="outline" size="icon-xs">
+          <ArrowLeftIcon />
+        </Button>
+        <Button variant="outline" size="icon-xs">
+          <ArrowRightIcon />
+        </Button>
+      </ButtonGroup>
+    </ButtonGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/button-group-pagination.tsx b/apps/v4/examples/radix/button-group-pagination.tsx
new file mode 100644
index 000000000..b8c613e05
--- /dev/null
+++ b/apps/v4/examples/radix/button-group-pagination.tsx
@@ -0,0 +1,33 @@
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
+
+export function ButtonGroupPagination() {
+  return (
+    <ButtonGroup>
+      <Button variant="outline" size="sm">
+        <ArrowLeftIcon />
+        Previous
+      </Button>
+      <Button variant="outline" size="sm">
+        1
+      </Button>
+      <Button variant="outline" size="sm">
+        2
+      </Button>
+      <Button variant="outline" size="sm">
+        3
+      </Button>
+      <Button variant="outline" size="sm">
+        4
+      </Button>
+      <Button variant="outline" size="sm">
+        5
+      </Button>
+      <Button variant="outline" size="sm">
+        Next
+        <ArrowRightIcon />
+      </Button>
+    </ButtonGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/button-group-text-alignment.tsx b/apps/v4/examples/radix/button-group-text-alignment.tsx
new file mode 100644
index 000000000..3cb836196
--- /dev/null
+++ b/apps/v4/examples/radix/button-group-text-alignment.tsx
@@ -0,0 +1,26 @@
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
+import { Field } from "@/examples/radix/ui/field"
+import { Label } from "@/examples/radix/ui/label"
+
+export function ButtonGroupTextAlignment() {
+  return (
+    <Field>
+      <Label id="alignment-label">Text Alignment</Label>
+      <ButtonGroup aria-labelledby="alignment-label">
+        <Button variant="outline" size="sm">
+          Left
+        </Button>
+        <Button variant="outline" size="sm">
+          Center
+        </Button>
+        <Button variant="outline" size="sm">
+          Right
+        </Button>
+        <Button variant="outline" size="sm">
+          Justify
+        </Button>
+      </ButtonGroup>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/button-group-vertical-nested.tsx b/apps/v4/examples/radix/button-group-vertical-nested.tsx
new file mode 100644
index 000000000..bb918bd80
--- /dev/null
+++ b/apps/v4/examples/radix/button-group-vertical-nested.tsx
@@ -0,0 +1,45 @@
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
+import {
+  CopyIcon,
+  FlipHorizontalIcon,
+  FlipVerticalIcon,
+  RotateCwIcon,
+  SearchIcon,
+  ShareIcon,
+  TrashIcon,
+} from "lucide-react"
+
+export function ButtonGroupVerticalNested() {
+  return (
+    <ButtonGroup orientation="vertical" aria-label="Design tools palette">
+      <ButtonGroup orientation="vertical">
+        <Button variant="outline" size="icon">
+          <SearchIcon />
+        </Button>
+        <Button variant="outline" size="icon">
+          <CopyIcon />
+        </Button>
+        <Button variant="outline" size="icon">
+          <ShareIcon />
+        </Button>
+      </ButtonGroup>
+      <ButtonGroup orientation="vertical">
+        <Button variant="outline" size="icon">
+          <FlipHorizontalIcon />
+        </Button>
+        <Button variant="outline" size="icon">
+          <FlipVerticalIcon />
+        </Button>
+        <Button variant="outline" size="icon">
+          <RotateCwIcon />
+        </Button>
+      </ButtonGroup>
+      <ButtonGroup>
+        <Button variant="outline" size="icon">
+          <TrashIcon />
+        </Button>
+      </ButtonGroup>
+    </ButtonGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/button-group-vertical.tsx b/apps/v4/examples/radix/button-group-vertical.tsx
new file mode 100644
index 000000000..de2da4908
--- /dev/null
+++ b/apps/v4/examples/radix/button-group-vertical.tsx
@@ -0,0 +1,22 @@
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
+import { MinusIcon, PlusIcon } from "lucide-react"
+
+export function ButtonGroupVertical() {
+  return (
+    <div className="flex gap-6">
+      <ButtonGroup
+        orientation="vertical"
+        aria-label="Media controls"
+        className="h-fit"
+      >
+        <Button variant="outline" size="icon">
+          <PlusIcon />
+        </Button>
+        <Button variant="outline" size="icon">
+          <MinusIcon />
+        </Button>
+      </ButtonGroup>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/button-group-with-dropdown.tsx b/apps/v4/examples/radix/button-group-with-dropdown.tsx
new file mode 100644
index 000000000..42c55bd49
--- /dev/null
+++ b/apps/v4/examples/radix/button-group-with-dropdown.tsx
@@ -0,0 +1,86 @@
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/examples/radix/ui/dropdown-menu"
+import {
+  AlertTriangleIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  CopyIcon,
+  ShareIcon,
+  TrashIcon,
+  UserRoundXIcon,
+  VolumeOffIcon,
+} from "lucide-react"
+
+export function ButtonGroupWithDropdown() {
+  return (
+    <div className="flex flex-col gap-4">
+      <ButtonGroup>
+        <Button variant="outline">Update</Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="icon">
+              <ChevronDownIcon />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem>Disable</DropdownMenuItem>
+            <DropdownMenuItem variant="destructive">Uninstall</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </ButtonGroup>
+      <ButtonGroup>
+        <Button variant="outline">Follow</Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="icon">
+              <ChevronDownIcon />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-50">
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <VolumeOffIcon />
+                Mute Conversation
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CheckIcon />
+                Mark as Read
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <AlertTriangleIcon />
+                Report Conversation
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <UserRoundXIcon />
+                Block User
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <ShareIcon />
+                Share Conversation
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CopyIcon />
+                Copy Conversation
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem variant="destructive">
+                <TrashIcon />
+                Delete Conversation
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </ButtonGroup>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/button-group-with-fields.tsx b/apps/v4/examples/radix/button-group-with-fields.tsx
new file mode 100644
index 000000000..2e96618b8
--- /dev/null
+++ b/apps/v4/examples/radix/button-group-with-fields.tsx
@@ -0,0 +1,41 @@
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
+import { Field, FieldGroup } from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/radix/ui/input-group"
+import { Label } from "@/examples/radix/ui/label"
+import { MinusIcon, PlusIcon } from "lucide-react"
+
+export function ButtonGroupWithFields() {
+  return (
+    <FieldGroup className="grid grid-cols-3 gap-4">
+      <Field className="col-span-2">
+        <Label htmlFor="width">Width</Label>
+        <ButtonGroup>
+          <InputGroup>
+            <InputGroupInput id="width" />
+            <InputGroupAddon className="text-muted-foreground">
+              W
+            </InputGroupAddon>
+            <InputGroupAddon
+              align="inline-end"
+              className="text-muted-foreground"
+            >
+              px
+            </InputGroupAddon>
+          </InputGroup>
+          <Button variant="outline" size="icon">
+            <MinusIcon />
+          </Button>
+          <Button variant="outline" size="icon">
+            <PlusIcon />
+          </Button>
+        </ButtonGroup>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/button-group-with-icons.tsx b/apps/v4/examples/radix/button-group-with-icons.tsx
new file mode 100644
index 000000000..45a4f0cd1
--- /dev/null
+++ b/apps/v4/examples/radix/button-group-with-icons.tsx
@@ -0,0 +1,25 @@
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
+import {
+  FlipHorizontalIcon,
+  FlipVerticalIcon,
+  RotateCwIcon,
+} from "lucide-react"
+
+export function ButtonGroupWithIcons() {
+  return (
+    <div className="flex flex-col gap-4">
+      <ButtonGroup>
+        <Button variant="outline">
+          <FlipHorizontalIcon />
+        </Button>
+        <Button variant="outline">
+          <FlipVerticalIcon />
+        </Button>
+        <Button variant="outline">
+          <RotateCwIcon />
+        </Button>
+      </ButtonGroup>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/button-group-with-input-group.tsx b/apps/v4/examples/radix/button-group-with-input-group.tsx
new file mode 100644
index 000000000..5f4634e38
--- /dev/null
+++ b/apps/v4/examples/radix/button-group-with-input-group.tsx
@@ -0,0 +1,20 @@
+import { Input } from "@/examples/radix/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/radix/ui/input-group"
+import { SearchIcon } from "lucide-react"
+
+export function ButtonGroupWithInputGroup() {
+  return (
+    <div className="flex flex-col gap-4">
+      <InputGroup>
+        <InputGroupInput placeholder="Type to search..." />
+        <InputGroupAddon align="inline-start" className="text-muted-foreground">
+          <SearchIcon />
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/button-group-with-input.tsx b/apps/v4/examples/radix/button-group-with-input.tsx
new file mode 100644
index 000000000..aeeb30fc1
--- /dev/null
+++ b/apps/v4/examples/radix/button-group-with-input.tsx
@@ -0,0 +1,18 @@
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
+import { Input } from "@/examples/radix/ui/input"
+
+export function ButtonGroupWithInput() {
+  return (
+    <div className="flex flex-col gap-4">
+      <ButtonGroup>
+        <Button variant="outline">Button</Button>
+        <Input placeholder="Type something here..." />
+      </ButtonGroup>
+      <ButtonGroup>
+        <Input placeholder="Type something here..." />
+        <Button variant="outline">Button</Button>
+      </ButtonGroup>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/button-group-with-like.tsx b/apps/v4/examples/radix/button-group-with-like.tsx
new file mode 100644
index 000000000..1513ea8ca
--- /dev/null
+++ b/apps/v4/examples/radix/button-group-with-like.tsx
@@ -0,0 +1,16 @@
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
+import { HeartIcon } from "lucide-react"
+
+export function ButtonGroupWithLike() {
+  return (
+    <ButtonGroup>
+      <Button variant="outline">
+        <HeartIcon /> Like
+      </Button>
+      <Button variant="outline" asChild size="icon" className="w-12">
+        <span>1.2K</span>
+      </Button>
+    </ButtonGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/button-group-with-select-and-input.tsx b/apps/v4/examples/radix/button-group-with-select-and-input.tsx
new file mode 100644
index 000000000..eef70c432
--- /dev/null
+++ b/apps/v4/examples/radix/button-group-with-select-and-input.tsx
@@ -0,0 +1,28 @@
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
+import { Input } from "@/examples/radix/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+
+export function ButtonGroupWithSelectAndInput() {
+  return (
+    <ButtonGroup>
+      <Select defaultValue="hours">
+        <SelectTrigger id="duration">
+          <SelectValue placeholder="Select duration" />
+        </SelectTrigger>
+        <SelectContent align="start">
+          <SelectItem value="hours">Hours</SelectItem>
+          <SelectItem value="days">Days</SelectItem>
+          <SelectItem value="weeks">Weeks</SelectItem>
+        </SelectContent>
+      </Select>
+      <Input />
+    </ButtonGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/button-group-with-select.tsx b/apps/v4/examples/radix/button-group-with-select.tsx
new file mode 100644
index 000000000..9be296056
--- /dev/null
+++ b/apps/v4/examples/radix/button-group-with-select.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import { useState } from "react"
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
+import { Field } from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+import { Label } from "@/examples/radix/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+import { ArrowRightIcon } from "lucide-react"
+
+export function ButtonGroupWithSelect() {
+  const [currency, setCurrency] = useState("$")
+
+  return (
+    <Field>
+      <Label htmlFor="amount">Amount</Label>
+      <ButtonGroup>
+        <Select value={currency} onValueChange={setCurrency}>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent align="start">
+            <SelectItem value="$">$</SelectItem>
+            <SelectItem value="€">€</SelectItem>
+            <SelectItem value="£">£</SelectItem>
+          </SelectContent>
+        </Select>
+        <Input placeholder="Enter amount to send" />
+        <Button variant="outline">
+          <ArrowRightIcon />
+        </Button>
+      </ButtonGroup>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/button-group-with-text.tsx b/apps/v4/examples/radix/button-group-with-text.tsx
new file mode 100644
index 000000000..e5e4a65a8
--- /dev/null
+++ b/apps/v4/examples/radix/button-group-with-text.tsx
@@ -0,0 +1,21 @@
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup, ButtonGroupText } from "@/examples/radix/ui/button-group"
+import { Input } from "@/examples/radix/ui/input"
+import { Label } from "@/examples/radix/ui/label"
+
+export function ButtonGroupWithText() {
+  return (
+    <div className="flex flex-col gap-4">
+      <ButtonGroup>
+        <ButtonGroupText>Text</ButtonGroupText>
+        <Button variant="outline">Another Button</Button>
+      </ButtonGroup>
+      <ButtonGroup>
+        <ButtonGroupText asChild>
+          <Label htmlFor="input-text">GPU Size</Label>
+        </ButtonGroupText>
+        <Input id="input-text" placeholder="Type something here..." />
+      </ButtonGroup>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/button-icon-left.tsx b/apps/v4/examples/radix/button-icon-left.tsx
new file mode 100644
index 000000000..51ac66306
--- /dev/null
+++ b/apps/v4/examples/radix/button-icon-left.tsx
@@ -0,0 +1,89 @@
+import { Button } from "@/examples/radix/ui/button"
+import { ArrowLeftCircleIcon } from "lucide-react"
+
+export function ButtonIconLeft() {
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="xs">
+          <ArrowLeftCircleIcon /> Default
+        </Button>
+        <Button size="xs" variant="secondary">
+          <ArrowLeftCircleIcon /> Secondary
+        </Button>
+        <Button size="xs" variant="outline">
+          <ArrowLeftCircleIcon /> Outline
+        </Button>
+        <Button size="xs" variant="ghost">
+          <ArrowLeftCircleIcon /> Ghost
+        </Button>
+        <Button size="xs" variant="destructive">
+          <ArrowLeftCircleIcon /> Destructive
+        </Button>
+        <Button size="xs" variant="link">
+          <ArrowLeftCircleIcon /> Link
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="sm">
+          <ArrowLeftCircleIcon /> Default
+        </Button>
+        <Button size="sm" variant="secondary">
+          <ArrowLeftCircleIcon /> Secondary
+        </Button>
+        <Button size="sm" variant="outline">
+          <ArrowLeftCircleIcon /> Outline
+        </Button>
+        <Button size="sm" variant="ghost">
+          <ArrowLeftCircleIcon /> Ghost
+        </Button>
+        <Button size="sm" variant="destructive">
+          <ArrowLeftCircleIcon /> Destructive
+        </Button>
+        <Button size="sm" variant="link">
+          <ArrowLeftCircleIcon /> Link
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button>
+          <ArrowLeftCircleIcon /> Default
+        </Button>
+        <Button variant="secondary">
+          <ArrowLeftCircleIcon /> Secondary
+        </Button>
+        <Button variant="outline">
+          <ArrowLeftCircleIcon /> Outline
+        </Button>
+        <Button variant="ghost">
+          <ArrowLeftCircleIcon /> Ghost
+        </Button>
+        <Button variant="destructive">
+          <ArrowLeftCircleIcon /> Destructive
+        </Button>
+        <Button variant="link">
+          <ArrowLeftCircleIcon /> Link
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="lg">
+          <ArrowLeftCircleIcon /> Default
+        </Button>
+        <Button size="lg" variant="secondary">
+          <ArrowLeftCircleIcon /> Secondary
+        </Button>
+        <Button size="lg" variant="outline">
+          <ArrowLeftCircleIcon /> Outline
+        </Button>
+        <Button size="lg" variant="ghost">
+          <ArrowLeftCircleIcon /> Ghost
+        </Button>
+        <Button size="lg" variant="destructive">
+          <ArrowLeftCircleIcon /> Destructive
+        </Button>
+        <Button size="lg" variant="link">
+          <ArrowLeftCircleIcon /> Link
+        </Button>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/button-icon-only.tsx b/apps/v4/examples/radix/button-icon-only.tsx
new file mode 100644
index 000000000..c53e15df9
--- /dev/null
+++ b/apps/v4/examples/radix/button-icon-only.tsx
@@ -0,0 +1,89 @@
+import { Button } from "@/examples/radix/ui/button"
+import { ArrowRightIcon } from "lucide-react"
+
+export function ButtonIconOnly() {
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="icon-xs">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-xs" variant="secondary">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-xs" variant="outline">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-xs" variant="ghost">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-xs" variant="destructive">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-xs" variant="link">
+          <ArrowRightIcon />
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="icon-sm">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-sm" variant="secondary">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-sm" variant="outline">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-sm" variant="ghost">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-sm" variant="destructive">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-sm" variant="link">
+          <ArrowRightIcon />
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="icon">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon" variant="secondary">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon" variant="outline">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon" variant="ghost">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon" variant="destructive">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon" variant="link">
+          <ArrowRightIcon />
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="icon-lg">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-lg" variant="secondary">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-lg" variant="outline">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-lg" variant="ghost">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-lg" variant="destructive">
+          <ArrowRightIcon />
+        </Button>
+        <Button size="icon-lg" variant="link">
+          <ArrowRightIcon />
+        </Button>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/button-icon-right.tsx b/apps/v4/examples/radix/button-icon-right.tsx
new file mode 100644
index 000000000..605d1b997
--- /dev/null
+++ b/apps/v4/examples/radix/button-icon-right.tsx
@@ -0,0 +1,90 @@
+import { Button } from "@/examples/radix/ui/button"
+import { ArrowRightIcon } from "lucide-react"
+
+export function ButtonIconRight() {
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="xs">
+          Default <ArrowRightIcon />
+        </Button>
+        <Button size="xs" variant="secondary">
+          Secondary <ArrowRightIcon />
+        </Button>
+        <Button size="xs" variant="outline">
+          Outline <ArrowRightIcon />
+        </Button>
+        <Button size="xs" variant="ghost">
+          Ghost <ArrowRightIcon />
+        </Button>
+        <Button size="xs" variant="destructive">
+          Destructive <ArrowRightIcon />
+        </Button>
+        <Button size="xs" variant="link">
+          Link <ArrowRightIcon />
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="sm">
+          Default
+          <ArrowRightIcon />
+        </Button>
+        <Button size="sm" variant="secondary">
+          Secondary <ArrowRightIcon />
+        </Button>
+        <Button size="sm" variant="outline">
+          Outline <ArrowRightIcon />
+        </Button>
+        <Button size="sm" variant="ghost">
+          Ghost <ArrowRightIcon />
+        </Button>
+        <Button size="sm" variant="destructive">
+          Destructive <ArrowRightIcon />
+        </Button>
+        <Button size="sm" variant="link">
+          Link <ArrowRightIcon />
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button>
+          Default <ArrowRightIcon />
+        </Button>
+        <Button variant="secondary">
+          Secondary <ArrowRightIcon />
+        </Button>
+        <Button variant="outline">
+          Outline <ArrowRightIcon />
+        </Button>
+        <Button variant="ghost">
+          Ghost <ArrowRightIcon />
+        </Button>
+        <Button variant="destructive">
+          Destructive <ArrowRightIcon />
+        </Button>
+        <Button variant="link">
+          Link <ArrowRightIcon />
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="lg">
+          Default <ArrowRightIcon />
+        </Button>
+        <Button size="lg" variant="secondary">
+          Secondary <ArrowRightIcon />
+        </Button>
+        <Button size="lg" variant="outline">
+          Outline <ArrowRightIcon />
+        </Button>
+        <Button size="lg" variant="ghost">
+          Ghost <ArrowRightIcon />
+        </Button>
+        <Button size="lg" variant="destructive">
+          Destructive <ArrowRightIcon />
+        </Button>
+        <Button size="lg" variant="link">
+          Link <ArrowRightIcon />
+        </Button>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/button-invalid-states.tsx b/apps/v4/examples/radix/button-invalid-states.tsx
new file mode 100644
index 000000000..20cfd29bb
--- /dev/null
+++ b/apps/v4/examples/radix/button-invalid-states.tsx
@@ -0,0 +1,86 @@
+import { Button } from "@/examples/radix/ui/button"
+
+export function ButtonInvalidStates() {
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="xs" aria-invalid="true">
+          Default
+        </Button>
+        <Button size="xs" variant="secondary" aria-invalid="true">
+          Secondary
+        </Button>
+        <Button size="xs" variant="outline" aria-invalid="true">
+          Outline
+        </Button>
+        <Button size="xs" variant="ghost" aria-invalid="true">
+          Ghost
+        </Button>
+        <Button size="xs" variant="destructive" aria-invalid="true">
+          Destructive
+        </Button>
+        <Button size="xs" variant="link" aria-invalid="true">
+          Link
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="sm" aria-invalid="true">
+          Default
+        </Button>
+        <Button size="sm" variant="secondary" aria-invalid="true">
+          Secondary
+        </Button>
+        <Button size="sm" variant="outline" aria-invalid="true">
+          Outline
+        </Button>
+        <Button size="sm" variant="ghost" aria-invalid="true">
+          Ghost
+        </Button>
+        <Button size="sm" variant="destructive" aria-invalid="true">
+          Destructive
+        </Button>
+        <Button size="sm" variant="link" aria-invalid="true">
+          Link
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button aria-invalid="true">Default</Button>
+        <Button variant="secondary" aria-invalid="true">
+          Secondary
+        </Button>
+        <Button variant="outline" aria-invalid="true">
+          Outline
+        </Button>
+        <Button variant="ghost" aria-invalid="true">
+          Ghost
+        </Button>
+        <Button variant="destructive" aria-invalid="true">
+          Destructive
+        </Button>
+        <Button variant="link" aria-invalid="true">
+          Link
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="lg" aria-invalid="true">
+          Default
+        </Button>
+        <Button size="lg" variant="secondary" aria-invalid="true">
+          Secondary
+        </Button>
+        <Button size="lg" variant="outline" aria-invalid="true">
+          Outline
+        </Button>
+        <Button size="lg" variant="ghost" aria-invalid="true">
+          Ghost
+        </Button>
+        <Button size="lg" variant="destructive" aria-invalid="true">
+          Destructive
+        </Button>
+        <Button size="lg" variant="link" aria-invalid="true">
+          Link
+        </Button>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/button-variants-and-sizes.tsx b/apps/v4/examples/radix/button-variants-and-sizes.tsx
new file mode 100644
index 000000000..20d65acd2
--- /dev/null
+++ b/apps/v4/examples/radix/button-variants-and-sizes.tsx
@@ -0,0 +1,70 @@
+import { Button } from "@/examples/radix/ui/button"
+
+export function ButtonVariantsAndSizes() {
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="xs">Default</Button>
+        <Button size="xs" variant="secondary">
+          Secondary
+        </Button>
+        <Button size="xs" variant="outline">
+          Outline
+        </Button>
+        <Button size="xs" variant="ghost">
+          Ghost
+        </Button>
+        <Button size="xs" variant="destructive">
+          Destructive
+        </Button>
+        <Button size="xs" variant="link">
+          Link
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="sm">Default</Button>
+        <Button size="sm" variant="secondary">
+          Secondary
+        </Button>
+        <Button size="sm" variant="outline">
+          Outline
+        </Button>
+        <Button size="sm" variant="ghost">
+          Ghost
+        </Button>
+        <Button size="sm" variant="destructive">
+          Destructive
+        </Button>
+        <Button size="sm" variant="link">
+          Link
+        </Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button>Default</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="destructive">Destructive</Button>
+        <Button variant="link">Link</Button>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button size="lg">Default</Button>
+        <Button size="lg" variant="secondary">
+          Secondary
+        </Button>
+        <Button size="lg" variant="outline">
+          Outline
+        </Button>
+        <Button size="lg" variant="ghost">
+          Ghost
+        </Button>
+        <Button size="lg" variant="destructive">
+          Destructive
+        </Button>
+        <Button size="lg" variant="link">
+          Link
+        </Button>
+      </div>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/calendar-booked-dates.tsx b/apps/v4/examples/radix/calendar-booked-dates.tsx
new file mode 100644
index 000000000..9b2d99640
--- /dev/null
+++ b/apps/v4/examples/radix/calendar-booked-dates.tsx
@@ -0,0 +1,36 @@
+"use client"
+
+import * as React from "react"
+import { Calendar } from "@/examples/radix/ui/calendar"
+import { Card, CardContent } from "@/examples/radix/ui/card"
+import { es } from "react-day-picker/locale"
+
+export function CalendarBookedDates() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(new Date().getFullYear(), 1, 3)
+  )
+  const bookedDates = Array.from(
+    { length: 15 },
+    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)
+  )
+
+  return (
+    <Card className="mx-auto w-fit p-0">
+      <CardContent className="p-0">
+        <Calendar
+          mode="single"
+          defaultMonth={date}
+          selected={date}
+          onSelect={setDate}
+          disabled={bookedDates}
+          modifiers={{
+            booked: bookedDates,
+          }}
+          modifiersClassNames={{
+            booked: "[&>button]:line-through opacity-100",
+          }}
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/calendar-custom-days.tsx b/apps/v4/examples/radix/calendar-custom-days.tsx
new file mode 100644
index 000000000..dc9c4cc8b
--- /dev/null
+++ b/apps/v4/examples/radix/calendar-custom-days.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { Calendar, CalendarDayButton } from "@/examples/radix/ui/calendar"
+import { Card, CardContent } from "@/examples/radix/ui/card"
+import { addDays } from "date-fns"
+import { type DateRange } from "react-day-picker"
+
+export function CalendarCustomDays() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(new Date().getFullYear(), 11, 8),
+    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),
+  })
+
+  return (
+    <Card className="mx-auto w-fit p-0">
+      <CardContent className="p-0">
+        <Calendar
+          mode="range"
+          defaultMonth={range?.from}
+          selected={range}
+          onSelect={setRange}
+          numberOfMonths={1}
+          captionLayout="dropdown"
+          className="[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]"
+          formatters={{
+            formatMonthDropdown: (date) => {
+              return date.toLocaleString("default", { month: "long" })
+            },
+          }}
+          components={{
+            DayButton: ({ children, modifiers, day, ...props }) => {
+              const isWeekend =
+                day.date.getDay() === 0 || day.date.getDay() === 6
+
+              return (
+                <CalendarDayButton day={day} modifiers={modifiers} {...props}>
+                  {children}
+                  {!modifiers.outside && (
+                    <span>{isWeekend ? "$120" : "$100"}</span>
+                  )}
+                </CalendarDayButton>
+              )
+            },
+          }}
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/calendar-multiple.tsx b/apps/v4/examples/radix/calendar-multiple.tsx
new file mode 100644
index 000000000..e2a9773b4
--- /dev/null
+++ b/apps/v4/examples/radix/calendar-multiple.tsx
@@ -0,0 +1,12 @@
+import { Calendar } from "@/examples/radix/ui/calendar"
+import { Card, CardContent } from "@/examples/radix/ui/card"
+
+export function CalendarMultiple() {
+  return (
+    <Card className="mx-auto w-fit p-0">
+      <CardContent className="p-0">
+        <Calendar mode="multiple" />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/calendar-range-multiple-months.tsx b/apps/v4/examples/radix/calendar-range-multiple-months.tsx
new file mode 100644
index 000000000..50f960fca
--- /dev/null
+++ b/apps/v4/examples/radix/calendar-range-multiple-months.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { Calendar } from "@/examples/radix/ui/calendar"
+import { Card, CardContent } from "@/examples/radix/ui/card"
+import { addDays } from "date-fns"
+import { type DateRange } from "react-day-picker"
+import { es } from "react-day-picker/locale"
+
+export function CalendarRangeMultipleMonths() {
+  const [range, setRange] = React.useState<DateRange | undefined>({
+    from: new Date(new Date().getFullYear(), 3, 12),
+    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),
+  })
+
+  return (
+    <Card className="mx-auto w-fit p-0">
+      <CardContent className="p-0">
+        <Calendar
+          mode="range"
+          defaultMonth={range?.from}
+          selected={range}
+          onSelect={setRange}
+          numberOfMonths={3}
+          locale={es}
+          fixedWeeks
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/calendar-range.tsx b/apps/v4/examples/radix/calendar-range.tsx
new file mode 100644
index 000000000..cb697fcb6
--- /dev/null
+++ b/apps/v4/examples/radix/calendar-range.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { Calendar } from "@/examples/radix/ui/calendar"
+import { Card, CardContent } from "@/examples/radix/ui/card"
+import { addDays } from "date-fns"
+import { type DateRange } from "react-day-picker"
+
+export function CalendarRange() {
+  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
+    from: new Date(new Date().getFullYear(), 0, 12),
+    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),
+  })
+
+  return (
+    <Card className="mx-auto w-fit p-0">
+      <CardContent className="p-0">
+        <Calendar
+          mode="range"
+          defaultMonth={dateRange?.from}
+          selected={dateRange}
+          onSelect={setDateRange}
+          numberOfMonths={2}
+          disabled={(date) =>
+            date > new Date() || date < new Date("1900-01-01")
+          }
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/calendar-single.tsx b/apps/v4/examples/radix/calendar-single.tsx
new file mode 100644
index 000000000..4b1139ce8
--- /dev/null
+++ b/apps/v4/examples/radix/calendar-single.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { Calendar } from "@/examples/radix/ui/calendar"
+import { Card, CardContent } from "@/examples/radix/ui/card"
+
+export function CalendarSingle() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(new Date().getFullYear(), new Date().getMonth(), 12)
+  )
+  return (
+    <Card className="mx-auto w-fit p-0">
+      <CardContent className="p-0">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          captionLayout="dropdown"
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/calendar-week-numbers.tsx b/apps/v4/examples/radix/calendar-week-numbers.tsx
new file mode 100644
index 000000000..569cff5dd
--- /dev/null
+++ b/apps/v4/examples/radix/calendar-week-numbers.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+import { Calendar } from "@/examples/radix/ui/calendar"
+import { Card, CardContent } from "@/examples/radix/ui/card"
+
+export function CalendarWeekNumbers() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(new Date().getFullYear(), 1, 3)
+  )
+
+  return (
+    <Card className="mx-auto w-fit p-0">
+      <CardContent className="p-0">
+        <Calendar
+          mode="single"
+          defaultMonth={date}
+          selected={date}
+          onSelect={setDate}
+          showWeekNumber
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/calendar-with-presets.tsx b/apps/v4/examples/radix/calendar-with-presets.tsx
new file mode 100644
index 000000000..30f8ca9ed
--- /dev/null
+++ b/apps/v4/examples/radix/calendar-with-presets.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/radix/ui/button"
+import { Calendar } from "@/examples/radix/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/examples/radix/ui/card"
+import { addDays } from "date-fns"
+
+export function CalendarWithPresets() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(new Date().getFullYear(), 1, 12)
+  )
+  const [currentMonth, setCurrentMonth] = React.useState<Date>(
+    new Date(new Date().getFullYear(), new Date().getMonth(), 1)
+  )
+
+  return (
+    <Card className="mx-auto w-fit max-w-[300px]" size="sm">
+      <CardContent className="px-4">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          month={currentMonth}
+          onMonthChange={setCurrentMonth}
+          fixedWeeks
+          className="p-0 [--cell-size:--spacing(9.5)]"
+        />
+      </CardContent>
+      <CardFooter className="flex flex-wrap gap-2 border-t">
+        {[
+          { label: "Today", value: 0 },
+          { label: "Tomorrow", value: 1 },
+          { label: "In 3 days", value: 3 },
+          { label: "In a week", value: 7 },
+          { label: "In 2 weeks", value: 14 },
+        ].map((preset) => (
+          <Button
+            key={preset.value}
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => {
+              const newDate = addDays(new Date(), preset.value)
+              setDate(newDate)
+              setCurrentMonth(
+                new Date(newDate.getFullYear(), newDate.getMonth(), 1)
+              )
+            }}
+          >
+            {preset.label}
+          </Button>
+        ))}
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/calendar-with-time.tsx b/apps/v4/examples/radix/calendar-with-time.tsx
new file mode 100644
index 000000000..440304808
--- /dev/null
+++ b/apps/v4/examples/radix/calendar-with-time.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import { Calendar } from "@/examples/radix/ui/calendar"
+import { Card, CardContent, CardFooter } from "@/examples/radix/ui/card"
+import { Field, FieldGroup, FieldLabel } from "@/examples/radix/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/radix/ui/input-group"
+import { Clock2Icon } from "lucide-react"
+
+export function CalendarWithTime() {
+  const [date, setDate] = React.useState<Date | undefined>(
+    new Date(new Date().getFullYear(), new Date().getMonth(), 12)
+  )
+
+  return (
+    <Card size="sm" className="mx-auto w-fit">
+      <CardContent>
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          className="p-0"
+        />
+      </CardContent>
+      <CardFooter className="bg-card border-t">
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor="time-from">Start Time</FieldLabel>
+            <InputGroup>
+              <InputGroupInput
+                id="time-from"
+                type="time"
+                step="1"
+                defaultValue="10:30:00"
+                className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+              />
+              <InputGroupAddon>
+                <Clock2Icon className="text-muted-foreground" />
+              </InputGroupAddon>
+            </InputGroup>
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="time-to">End Time</FieldLabel>
+            <InputGroup>
+              <InputGroupInput
+                id="time-to"
+                type="time"
+                step="1"
+                defaultValue="12:30:00"
+                className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+              />
+              <InputGroupAddon>
+                <Clock2Icon className="text-muted-foreground" />
+              </InputGroupAddon>
+            </InputGroup>
+          </Field>
+        </FieldGroup>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/card-default.tsx b/apps/v4/examples/radix/card-default.tsx
new file mode 100644
index 000000000..a345093bc
--- /dev/null
+++ b/apps/v4/examples/radix/card-default.tsx
@@ -0,0 +1,33 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/radix/ui/card"
+
+export function CardDefault() {
+  return (
+    <Card size="default" className="mx-auto w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Default Card</CardTitle>
+        <CardDescription>
+          This card uses the default size variant.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>
+          The card component supports a size prop that defaults to
+          &quot;default&quot; for standard spacing and sizing.
+        </p>
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline" className="w-full">
+          Action
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/card-footer-with-border-small.tsx b/apps/v4/examples/radix/card-footer-with-border-small.tsx
new file mode 100644
index 000000000..ce74fdad4
--- /dev/null
+++ b/apps/v4/examples/radix/card-footer-with-border-small.tsx
@@ -0,0 +1,20 @@
+import { Button } from "@/examples/radix/ui/button"
+import { Card, CardContent, CardFooter } from "@/examples/radix/ui/card"
+
+export function CardFooterWithBorderSmall() {
+  return (
+    <Card size="sm" className="mx-auto w-full max-w-sm">
+      <CardContent>
+        <p>
+          The footer has a border-t class applied, creating a visual separation
+          between the content and footer sections.
+        </p>
+      </CardContent>
+      <CardFooter className="border-t">
+        <Button variant="outline" size="sm" className="w-full">
+          Footer with Border
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/card-footer-with-border.tsx b/apps/v4/examples/radix/card-footer-with-border.tsx
new file mode 100644
index 000000000..837e3aaa1
--- /dev/null
+++ b/apps/v4/examples/radix/card-footer-with-border.tsx
@@ -0,0 +1,20 @@
+import { Button } from "@/examples/radix/ui/button"
+import { Card, CardContent, CardFooter } from "@/examples/radix/ui/card"
+
+export function CardFooterWithBorder() {
+  return (
+    <Card className="mx-auto w-full max-w-sm">
+      <CardContent>
+        <p>
+          The footer has a border-t class applied, creating a visual separation
+          between the content and footer sections.
+        </p>
+      </CardContent>
+      <CardFooter className="border-t">
+        <Button variant="outline" className="w-full">
+          Footer with Border
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/card-header-with-border-small.tsx b/apps/v4/examples/radix/card-header-with-border-small.tsx
new file mode 100644
index 000000000..adb8d520c
--- /dev/null
+++ b/apps/v4/examples/radix/card-header-with-border-small.tsx
@@ -0,0 +1,26 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/examples/radix/ui/card"
+
+export function CardHeaderWithBorderSmall() {
+  return (
+    <Card size="sm" className="mx-auto w-full max-w-sm">
+      <CardHeader className="border-b">
+        <CardTitle>Header with Border</CardTitle>
+        <CardDescription>
+          This is a small card with a header that has a bottom border.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>
+          The header has a border-b class applied, creating a visual separation
+          between the header and content sections.
+        </p>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/card-header-with-border.tsx b/apps/v4/examples/radix/card-header-with-border.tsx
new file mode 100644
index 000000000..3d1157e1e
--- /dev/null
+++ b/apps/v4/examples/radix/card-header-with-border.tsx
@@ -0,0 +1,26 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/examples/radix/ui/card"
+
+export function CardHeaderWithBorder() {
+  return (
+    <Card className="mx-auto w-full max-w-sm">
+      <CardHeader className="border-b">
+        <CardTitle>Header with Border</CardTitle>
+        <CardDescription>
+          This is a card with a header that has a bottom border.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>
+          The header has a border-b class applied, creating a visual separation
+          between the header and content sections.
+        </p>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/card-login.tsx b/apps/v4/examples/radix/card-login.tsx
new file mode 100644
index 000000000..490f93f1f
--- /dev/null
+++ b/apps/v4/examples/radix/card-login.tsx
@@ -0,0 +1,65 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/radix/ui/card"
+import { Field, FieldGroup, FieldLabel } from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+
+export function CardLogin() {
+  return (
+    <Card className="mx-auto w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Login to your account</CardTitle>
+        <CardDescription>
+          Enter your email below to login to your account
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form>
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="email">Email</FieldLabel>
+              <Input
+                id="email"
+                type="email"
+                placeholder="m@example.com"
+                required
+              />
+            </Field>
+            <Field>
+              <div className="flex items-center">
+                <FieldLabel htmlFor="password">Password</FieldLabel>
+                <a
+                  href="#"
+                  className="ml-auto inline-block underline-offset-4 hover:underline"
+                >
+                  Forgot your password?
+                </a>
+              </div>
+              <Input id="password" type="password" required />
+            </Field>
+          </FieldGroup>
+        </form>
+      </CardContent>
+      <CardFooter className="flex-col gap-2">
+        <Button type="submit" className="w-full">
+          Login
+        </Button>
+        <Button variant="outline" className="w-full">
+          Login with Google
+        </Button>
+        <div className="style-nova:mt-2 mt-4 text-center">
+          Don&apos;t have an account?{" "}
+          <a href="#" className="underline underline-offset-4">
+            Sign up
+          </a>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/card-meeting-notes.tsx b/apps/v4/examples/radix/card-meeting-notes.tsx
new file mode 100644
index 000000000..6c7488cb4
--- /dev/null
+++ b/apps/v4/examples/radix/card-meeting-notes.tsx
@@ -0,0 +1,73 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarImage,
+} from "@/examples/radix/ui/avatar"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/radix/ui/card"
+import { CaptionsIcon } from "lucide-react"
+
+export function CardMeetingNotes() {
+  return (
+    <Card className="mx-auto w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Meeting Notes</CardTitle>
+        <CardDescription>
+          Transcript from the meeting with the client.
+        </CardDescription>
+        <CardAction>
+          <Button variant="outline" size="sm">
+            <CaptionsIcon />
+            Transcribe
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <p>
+          Client requested dashboard redesign with focus on mobile
+          responsiveness.
+        </p>
+        <ol className="mt-4 flex list-decimal flex-col gap-2 pl-6">
+          <li>New analytics widgets for daily/weekly metrics</li>
+          <li>Simplified navigation menu</li>
+          <li>Dark mode support</li>
+          <li>Timeline: 6 weeks</li>
+          <li>Follow-up meeting scheduled for next Tuesday</li>
+        </ol>
+      </CardContent>
+      <CardFooter>
+        <AvatarGroup>
+          <Avatar>
+            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+            <AvatarFallback>CN</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarImage
+              src="https://github.com/maxleiter.png"
+              alt="@maxleiter"
+            />
+            <AvatarFallback>LR</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarImage
+              src="https://github.com/evilrabbit.png"
+              alt="@evilrabbit"
+            />
+            <AvatarFallback>ER</AvatarFallback>
+          </Avatar>
+          <AvatarGroupCount>+8</AvatarGroupCount>
+        </AvatarGroup>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/card-small.tsx b/apps/v4/examples/radix/card-small.tsx
new file mode 100644
index 000000000..bb5933569
--- /dev/null
+++ b/apps/v4/examples/radix/card-small.tsx
@@ -0,0 +1,33 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/radix/ui/card"
+
+export function CardSmall() {
+  return (
+    <Card size="sm" className="mx-auto w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Small Card</CardTitle>
+        <CardDescription>
+          This card uses the small size variant.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>
+          The card component supports a size prop that can be set to
+          &quot;sm&quot; for a more compact appearance.
+        </p>
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline" size="sm" className="w-full">
+          Action
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/card-with-image-small.tsx b/apps/v4/examples/radix/card-with-image-small.tsx
new file mode 100644
index 000000000..41886631e
--- /dev/null
+++ b/apps/v4/examples/radix/card-with-image-small.tsx
@@ -0,0 +1,35 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/radix/ui/card"
+import { PlusIcon } from "lucide-react"
+
+export function CardWithImageSmall() {
+  return (
+    <Card size="sm" className="relative mx-auto w-full max-w-sm pt-0">
+      <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
+      <img
+        src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Photo by mymind on Unsplash"
+        title="Photo by mymind on Unsplash"
+        className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale"
+      />
+      <CardHeader>
+        <CardTitle>Beautiful Landscape</CardTitle>
+        <CardDescription>
+          A stunning view that captures the essence of natural beauty.
+        </CardDescription>
+      </CardHeader>
+      <CardFooter>
+        <Button size="sm" className="w-full">
+          <PlusIcon />
+          Button
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/card-with-image.tsx b/apps/v4/examples/radix/card-with-image.tsx
new file mode 100644
index 000000000..9598b8710
--- /dev/null
+++ b/apps/v4/examples/radix/card-with-image.tsx
@@ -0,0 +1,35 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/radix/ui/card"
+import { PlusIcon } from "lucide-react"
+
+export function CardWithImage() {
+  return (
+    <Card size="default" className="relative mx-auto w-full max-w-sm pt-0">
+      <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
+      <img
+        src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Photo by mymind on Unsplash"
+        title="Photo by mymind on Unsplash"
+        className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale"
+      />
+      <CardHeader>
+        <CardTitle>Beautiful Landscape</CardTitle>
+        <CardDescription>
+          A stunning view that captures the essence of natural beauty.
+        </CardDescription>
+      </CardHeader>
+      <CardFooter>
+        <Button className="w-full">
+          <PlusIcon />
+          Button
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/carousel-basic.tsx b/apps/v4/examples/radix/carousel-basic.tsx
new file mode 100644
index 000000000..d42114a86
--- /dev/null
+++ b/apps/v4/examples/radix/carousel-basic.tsx
@@ -0,0 +1,30 @@
+import { Card, CardContent } from "@/examples/radix/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/examples/radix/ui/carousel"
+
+export function CarouselBasic() {
+  return (
+    <Carousel className="mx-auto max-w-xs sm:max-w-sm">
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index}>
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-4xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious className="hidden sm:inline-flex" />
+      <CarouselNext className="hidden sm:inline-flex" />
+    </Carousel>
+  )
+}
diff --git a/apps/v4/examples/radix/carousel-multiple.tsx b/apps/v4/examples/radix/carousel-multiple.tsx
new file mode 100644
index 000000000..931f06b0f
--- /dev/null
+++ b/apps/v4/examples/radix/carousel-multiple.tsx
@@ -0,0 +1,35 @@
+import { Card, CardContent } from "@/examples/radix/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/examples/radix/ui/carousel"
+
+export function CarouselMultiple() {
+  return (
+    <Carousel
+      className="mx-auto max-w-xs sm:max-w-sm"
+      opts={{
+        align: "start",
+      }}
+    >
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index} className="sm:basis-1/2 lg:basis-1/3">
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-3xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious className="hidden sm:inline-flex" />
+      <CarouselNext className="hidden sm:inline-flex" />
+    </Carousel>
+  )
+}
diff --git a/apps/v4/examples/radix/carousel-with-gap.tsx b/apps/v4/examples/radix/carousel-with-gap.tsx
new file mode 100644
index 000000000..bf8e3540b
--- /dev/null
+++ b/apps/v4/examples/radix/carousel-with-gap.tsx
@@ -0,0 +1,30 @@
+import { Card, CardContent } from "@/examples/radix/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/examples/radix/ui/carousel"
+
+export function CarouselWithGap() {
+  return (
+    <Carousel className="mx-auto max-w-xs sm:max-w-sm">
+      <CarouselContent className="-ml-1">
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index} className="pl-1 md:basis-1/2">
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-2xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious className="hidden sm:inline-flex" />
+      <CarouselNext className="hidden sm:inline-flex" />
+    </Carousel>
+  )
+}
diff --git a/apps/v4/examples/radix/chart-area-example.tsx b/apps/v4/examples/radix/chart-area-example.tsx
new file mode 100644
index 000000000..d2aeffc77
--- /dev/null
+++ b/apps/v4/examples/radix/chart-area-example.tsx
@@ -0,0 +1,90 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/radix/ui/card"
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/examples/radix/ui/chart"
+import { TrendingUpIcon } from "lucide-react"
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+const areaChartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const areaChartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartAreaExample() {
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>Area Chart</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={areaChartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={areaChartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 leading-none font-medium">
+              Trending up by 5.2% this month{" "}
+              <TrendingUpIcon className="size-4" />
+            </div>
+            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/chart-bar-example.tsx b/apps/v4/examples/radix/chart-bar-example.tsx
new file mode 100644
index 000000000..6d7d1e5a1
--- /dev/null
+++ b/apps/v4/examples/radix/chart-bar-example.tsx
@@ -0,0 +1,75 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/radix/ui/card"
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/examples/radix/ui/chart"
+import { TrendingUpIcon } from "lucide-react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+const barChartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const barChartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartBarExample() {
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>Bar Chart - Multiple</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={barChartConfig}>
+          <BarChart accessibilityLayer data={barChartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="dashed" />}
+            />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start gap-2">
+        <div className="flex gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/chart-line-example.tsx b/apps/v4/examples/radix/chart-line-example.tsx
new file mode 100644
index 000000000..f9e0e66f8
--- /dev/null
+++ b/apps/v4/examples/radix/chart-line-example.tsx
@@ -0,0 +1,96 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/radix/ui/card"
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/examples/radix/ui/chart"
+import { TrendingUpIcon } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+
+const lineChartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const lineChartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartLineExample() {
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>Line Chart - Multiple</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={lineChartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={lineChartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <Line
+              dataKey="desktop"
+              type="monotone"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={false}
+            />
+            <Line
+              dataKey="mobile"
+              type="monotone"
+              stroke="var(--color-mobile)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="flex w-full items-start gap-2">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2 leading-none font-medium">
+              Trending up by 5.2% this month{" "}
+              <TrendingUpIcon className="size-4" />
+            </div>
+            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+              Showing total visitors for the last 6 months
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/chart-pie-example.tsx b/apps/v4/examples/radix/chart-pie-example.tsx
new file mode 100644
index 000000000..705f08bad
--- /dev/null
+++ b/apps/v4/examples/radix/chart-pie-example.tsx
@@ -0,0 +1,126 @@
+"use client"
+
+import * as React from "react"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/radix/ui/card"
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/examples/radix/ui/chart"
+import { TrendingUpIcon } from "lucide-react"
+import { Label, Pie, PieChart } from "recharts"
+
+const pieChartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 190, fill: "var(--color-other)" },
+]
+
+const pieChartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function ChartPieExample() {
+  const totalVisitors = React.useMemo(() => {
+    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)
+  }, [])
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Pie Chart - Donut with Text</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={pieChartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={pieChartData}
+              dataKey="visitors"
+              nameKey="browser"
+              innerRadius={60}
+              strokeWidth={5}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-3xl font-bold"
+                        >
+                          {totalVisitors.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/chart-radar-example.tsx b/apps/v4/examples/radix/chart-radar-example.tsx
new file mode 100644
index 000000000..7724cddd5
--- /dev/null
+++ b/apps/v4/examples/radix/chart-radar-example.tsx
@@ -0,0 +1,78 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/radix/ui/card"
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/examples/radix/ui/chart"
+import { TrendingUpIcon } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
+
+const radarChartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const radarChartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadarExample() {
+  return (
+    <Card className="w-full">
+      <CardHeader className="items-center pb-4">
+        <CardTitle>Radar Chart - Multiple</CardTitle>
+        <CardDescription>
+          Showing total visitors for the last 6 months
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer
+          config={radarChartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={radarChartData}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <PolarAngleAxis dataKey="month" />
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+            />
+            <Radar dataKey="mobile" fill="var(--color-mobile)" />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
+        </div>
+        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+          January - June 2024
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/chart-radial-example.tsx b/apps/v4/examples/radix/chart-radial-example.tsx
new file mode 100644
index 000000000..edef3934f
--- /dev/null
+++ b/apps/v4/examples/radix/chart-radial-example.tsx
@@ -0,0 +1,103 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/radix/ui/card"
+import { ChartContainer, type ChartConfig } from "@/examples/radix/ui/chart"
+import { TrendingUpIcon } from "lucide-react"
+import {
+  Label,
+  PolarGrid,
+  PolarRadiusAxis,
+  RadialBar,
+  RadialBarChart,
+} from "recharts"
+
+const radialChartData = [
+  { browser: "safari", visitors: 1260, fill: "var(--color-safari)" },
+]
+
+const radialChartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+export function ChartRadialExample() {
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>Radial Chart - Shape</CardTitle>
+        <CardDescription>January - June 2024</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={radialChartConfig}
+          className="mx-auto aspect-square max-h-[210px]"
+        >
+          <RadialBarChart
+            data={radialChartData}
+            endAngle={100}
+            innerRadius={80}
+            outerRadius={140}
+          >
+            <PolarGrid
+              gridType="circle"
+              radialLines={false}
+              stroke="none"
+              className="first:fill-muted last:fill-background"
+              polarRadius={[86, 74]}
+            />
+            <RadialBar dataKey="visitors" background />
+            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-4xl font-bold"
+                        >
+                          {radialChartData[0].visitors.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </PolarRadiusAxis>
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2">
+        <div className="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
+        </div>
+        <div className="text-muted-foreground leading-none">
+          Showing total visitors for the last 6 months
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/checkbox-basic.tsx b/apps/v4/examples/radix/checkbox-basic.tsx
new file mode 100644
index 000000000..0f0289830
--- /dev/null
+++ b/apps/v4/examples/radix/checkbox-basic.tsx
@@ -0,0 +1,11 @@
+import { Checkbox } from "@/examples/radix/ui/checkbox"
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
+
+export function CheckboxBasic() {
+  return (
+    <Field orientation="horizontal">
+      <Checkbox id="terms" />
+      <FieldLabel htmlFor="terms">Accept terms and conditions</FieldLabel>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/checkbox-disabled.tsx b/apps/v4/examples/radix/checkbox-disabled.tsx
index cfb6568bd..7414cc655 100644
--- a/apps/v4/examples/radix/checkbox-disabled.tsx
+++ b/apps/v4/examples/radix/checkbox-disabled.tsx
@@ -1,15 +1,11 @@
 import { Checkbox } from "@/examples/radix/ui/checkbox"
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
 
-export default function CheckboxDisabled() {
+export function CheckboxDisabled() {
   return (
-    <div className="flex items-center space-x-2">
-      <Checkbox id="terms2" disabled />
-      <label
-        htmlFor="terms2"
-        className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-      >
-        Accept terms and conditions
-      </label>
-    </div>
+    <Field orientation="horizontal">
+      <Checkbox id="toggle" disabled />
+      <FieldLabel htmlFor="toggle">Enable notifications</FieldLabel>
+    </Field>
   )
 }
diff --git a/apps/v4/examples/radix/checkbox-fields.tsx b/apps/v4/examples/radix/checkbox-fields.tsx
new file mode 100644
index 000000000..e83c228d8
--- /dev/null
+++ b/apps/v4/examples/radix/checkbox-fields.tsx
@@ -0,0 +1,91 @@
+import { Checkbox } from "@/examples/radix/ui/checkbox"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+  FieldTitle,
+} from "@/examples/radix/ui/field"
+import { Select } from "@/examples/radix/ui/select"
+
+export function CheckboxFields() {
+  return (
+    <FieldGroup>
+      <Field orientation="horizontal">
+        <Checkbox id="checkbox-basic" defaultChecked />
+        <FieldLabel htmlFor="checkbox-basic" className="font-normal">
+          I agree to the terms and conditions
+        </FieldLabel>
+      </Field>
+      <Field orientation="horizontal">
+        <FieldLabel htmlFor="checkbox-right">
+          Accept terms and conditions
+        </FieldLabel>
+        <Checkbox id="checkbox-right" />
+      </Field>
+      <Field orientation="horizontal">
+        <Checkbox id="checkbox-with-desc" />
+        <FieldContent>
+          <FieldLabel htmlFor="checkbox-with-desc">
+            Subscribe to newsletter
+          </FieldLabel>
+          <FieldDescription>
+            Receive weekly updates about new features and promotions.
+          </FieldDescription>
+        </FieldContent>
+      </Field>
+      <FieldLabel htmlFor="checkbox-with-title">
+        <Field orientation="horizontal">
+          <Checkbox id="checkbox-with-title" />
+          <FieldContent>
+            <FieldTitle>Enable Touch ID</FieldTitle>
+            <FieldDescription>
+              Enable Touch ID to quickly unlock your device.
+            </FieldDescription>
+          </FieldContent>
+        </Field>
+      </FieldLabel>
+      <FieldSet>
+        <FieldLegend variant="label">Preferences</FieldLegend>
+        <FieldDescription>
+          Select all that apply to customize your experience.
+        </FieldDescription>
+        <FieldGroup className="gap-3">
+          <Field orientation="horizontal">
+            <Checkbox id="pref-dark" />
+            <FieldLabel htmlFor="pref-dark" className="font-normal">
+              Dark mode
+            </FieldLabel>
+          </Field>
+          <Field orientation="horizontal">
+            <Checkbox id="pref-compact" />
+            <FieldLabel htmlFor="pref-compact" className="font-normal">
+              Compact view
+            </FieldLabel>
+          </Field>
+          <Field orientation="horizontal">
+            <Checkbox id="pref-notifications" />
+            <FieldLabel htmlFor="pref-notifications" className="font-normal">
+              Enable notifications
+            </FieldLabel>
+          </Field>
+        </FieldGroup>
+      </FieldSet>
+      <Field data-invalid orientation="horizontal">
+        <Checkbox id="checkbox-invalid" aria-invalid />
+        <FieldLabel htmlFor="checkbox-invalid" className="font-normal">
+          Invalid checkbox
+        </FieldLabel>
+      </Field>
+      <Field data-disabled orientation="horizontal">
+        <Checkbox id="checkbox-disabled-field" disabled />
+        <FieldLabel htmlFor="checkbox-disabled-field" className="font-normal">
+          Disabled checkbox
+        </FieldLabel>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/checkbox-group.tsx b/apps/v4/examples/radix/checkbox-group.tsx
new file mode 100644
index 000000000..29478b361
--- /dev/null
+++ b/apps/v4/examples/radix/checkbox-group.tsx
@@ -0,0 +1,46 @@
+import { Checkbox } from "@/examples/radix/ui/checkbox"
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
+
+export function CheckboxGroup() {
+  return (
+    <Field>
+      <FieldLabel>Show these items on the desktop:</FieldLabel>
+      <Field orientation="horizontal">
+        <Checkbox id="finder-pref-9k2-hard-disks-ljj" />
+        <FieldLabel
+          htmlFor="finder-pref-9k2-hard-disks-ljj"
+          className="font-normal"
+        >
+          Hard disks
+        </FieldLabel>
+      </Field>
+      <Field orientation="horizontal">
+        <Checkbox id="finder-pref-9k2-external-disks-1yg" />
+        <FieldLabel
+          htmlFor="finder-pref-9k2-external-disks-1yg"
+          className="font-normal"
+        >
+          External disks
+        </FieldLabel>
+      </Field>
+      <Field orientation="horizontal">
+        <Checkbox id="finder-pref-9k2-cds-dvds-fzt" />
+        <FieldLabel
+          htmlFor="finder-pref-9k2-cds-dvds-fzt"
+          className="font-normal"
+        >
+          CDs, DVDs, and iPods
+        </FieldLabel>
+      </Field>
+      <Field orientation="horizontal">
+        <Checkbox id="finder-pref-9k2-connected-servers-6l2" />
+        <FieldLabel
+          htmlFor="finder-pref-9k2-connected-servers-6l2"
+          className="font-normal"
+        >
+          Connected servers
+        </FieldLabel>
+      </Field>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/checkbox-in-table.tsx b/apps/v4/examples/radix/checkbox-in-table.tsx
new file mode 100644
index 000000000..7aa3ee602
--- /dev/null
+++ b/apps/v4/examples/radix/checkbox-in-table.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import * as React from "react"
+import { Checkbox } from "@/examples/radix/ui/checkbox"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/examples/radix/ui/table"
+
+const tableData = [
+  {
+    id: "1",
+    name: "Sarah Chen",
+    email: "sarah.chen@example.com",
+    role: "Admin",
+  },
+  {
+    id: "2",
+    name: "Marcus Rodriguez",
+    email: "marcus.rodriguez@example.com",
+    role: "User",
+  },
+  {
+    id: "3",
+    name: "Priya Patel",
+    email: "priya.patel@example.com",
+    role: "User",
+  },
+  {
+    id: "4",
+    name: "David Kim",
+    email: "david.kim@example.com",
+    role: "Editor",
+  },
+]
+
+export function CheckboxInTable() {
+  const [selectedRows, setSelectedRows] = React.useState<Set<string>>(
+    new Set(["1"])
+  )
+
+  const selectAll = selectedRows.size === tableData.length
+
+  const handleSelectAll = (checked: boolean) => {
+    if (checked) {
+      setSelectedRows(new Set(tableData.map((row) => row.id)))
+    } else {
+      setSelectedRows(new Set())
+    }
+  }
+
+  const handleSelectRow = (id: string, checked: boolean) => {
+    const newSelected = new Set(selectedRows)
+    if (checked) {
+      newSelected.add(id)
+    } else {
+      newSelected.delete(id)
+    }
+    setSelectedRows(newSelected)
+  }
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-8">
+            <Checkbox
+              id="select-all"
+              checked={selectAll}
+              onCheckedChange={handleSelectAll}
+            />
+          </TableHead>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Role</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {tableData.map((row) => (
+          <TableRow
+            key={row.id}
+            data-state={selectedRows.has(row.id) ? "selected" : undefined}
+          >
+            <TableCell>
+              <Checkbox
+                id={`row-${row.id}`}
+                checked={selectedRows.has(row.id)}
+                onCheckedChange={(checked) =>
+                  handleSelectRow(row.id, checked === true)
+                }
+              />
+            </TableCell>
+            <TableCell className="font-medium">{row.name}</TableCell>
+            <TableCell>{row.email}</TableCell>
+            <TableCell>{row.role}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/apps/v4/examples/radix/checkbox-invalid.tsx b/apps/v4/examples/radix/checkbox-invalid.tsx
new file mode 100644
index 000000000..579203c52
--- /dev/null
+++ b/apps/v4/examples/radix/checkbox-invalid.tsx
@@ -0,0 +1,11 @@
+import { Checkbox } from "@/examples/radix/ui/checkbox"
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
+
+export function CheckboxInvalid() {
+  return (
+    <Field orientation="horizontal" data-invalid>
+      <Checkbox id="terms-3" aria-invalid />
+      <FieldLabel htmlFor="terms-3">Accept terms and conditions</FieldLabel>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/checkbox-with-description.tsx b/apps/v4/examples/radix/checkbox-with-description.tsx
new file mode 100644
index 000000000..a08df6299
--- /dev/null
+++ b/apps/v4/examples/radix/checkbox-with-description.tsx
@@ -0,0 +1,21 @@
+import { Checkbox } from "@/examples/radix/ui/checkbox"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldLabel,
+} from "@/examples/radix/ui/field"
+
+export function CheckboxWithDescription() {
+  return (
+    <Field orientation="horizontal">
+      <Checkbox id="terms-2" defaultChecked />
+      <FieldContent>
+        <FieldLabel htmlFor="terms-2">Accept terms and conditions</FieldLabel>
+        <FieldDescription>
+          By clicking this checkbox, you agree to the terms and conditions.
+        </FieldDescription>
+      </FieldContent>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/checkbox-with-title.tsx b/apps/v4/examples/radix/checkbox-with-title.tsx
new file mode 100644
index 000000000..c64cdac0d
--- /dev/null
+++ b/apps/v4/examples/radix/checkbox-with-title.tsx
@@ -0,0 +1,38 @@
+import { Checkbox } from "@/examples/radix/ui/checkbox"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldTitle,
+} from "@/examples/radix/ui/field"
+
+export function CheckboxWithTitle() {
+  return (
+    <FieldGroup>
+      <FieldLabel htmlFor="toggle-2">
+        <Field orientation="horizontal">
+          <Checkbox id="toggle-2" defaultChecked />
+          <FieldContent>
+            <FieldTitle>Enable notifications</FieldTitle>
+            <FieldDescription>
+              You can enable or disable notifications at any time.
+            </FieldDescription>
+          </FieldContent>
+        </Field>
+      </FieldLabel>
+      <FieldLabel htmlFor="toggle-4">
+        <Field orientation="horizontal" data-disabled>
+          <Checkbox id="toggle-4" disabled />
+          <FieldContent>
+            <FieldTitle>Enable notifications</FieldTitle>
+            <FieldDescription>
+              You can enable or disable notifications at any time.
+            </FieldDescription>
+          </FieldContent>
+        </Field>
+      </FieldLabel>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/collapsible-file-tree.tsx b/apps/v4/examples/radix/collapsible-file-tree.tsx
new file mode 100644
index 000000000..6ee6ac6cd
--- /dev/null
+++ b/apps/v4/examples/radix/collapsible-file-tree.tsx
@@ -0,0 +1,119 @@
+import { Button } from "@/examples/radix/ui/button"
+import { Card, CardContent, CardHeader } from "@/examples/radix/ui/card"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/examples/radix/ui/collapsible"
+import { Tabs, TabsList, TabsTrigger } from "@/examples/radix/ui/tabs"
+import { ChevronRightIcon, FileIcon, FolderIcon } from "lucide-react"
+
+type FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }
+
+export function CollapsibleFileTree() {
+  const fileTree: FileTreeItem[] = [
+    {
+      name: "components",
+      items: [
+        {
+          name: "ui",
+          items: [
+            { name: "button.tsx" },
+            { name: "card.tsx" },
+            { name: "dialog.tsx" },
+            { name: "input.tsx" },
+            { name: "select.tsx" },
+            { name: "table.tsx" },
+          ],
+        },
+        { name: "login-form.tsx" },
+        { name: "register-form.tsx" },
+      ],
+    },
+    {
+      name: "lib",
+      items: [{ name: "utils.ts" }, { name: "cn.ts" }, { name: "api.ts" }],
+    },
+    {
+      name: "hooks",
+      items: [
+        { name: "use-media-query.ts" },
+        { name: "use-debounce.ts" },
+        { name: "use-local-storage.ts" },
+      ],
+    },
+    {
+      name: "types",
+      items: [{ name: "index.d.ts" }, { name: "api.d.ts" }],
+    },
+    {
+      name: "public",
+      items: [
+        { name: "favicon.ico" },
+        { name: "logo.svg" },
+        { name: "images" },
+      ],
+    },
+    { name: "app.tsx" },
+    { name: "layout.tsx" },
+    { name: "globals.css" },
+    { name: "package.json" },
+    { name: "tsconfig.json" },
+    { name: "README.md" },
+    { name: ".gitignore" },
+  ]
+
+  const renderItem = (fileItem: FileTreeItem) => {
+    if ("items" in fileItem) {
+      return (
+        <Collapsible key={fileItem.name}>
+          <CollapsibleTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none"
+            >
+              <ChevronRightIcon className="transition-transform group-data-[state=open]:rotate-90" />
+              <FolderIcon />
+              {fileItem.name}
+            </Button>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="style-lyra:ml-4 mt-1 ml-5">
+            <div className="flex flex-col gap-1">
+              {fileItem.items.map((child) => renderItem(child))}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      )
+    }
+    return (
+      <Button
+        key={fileItem.name}
+        variant="link"
+        size="sm"
+        className="text-foreground w-full justify-start gap-2"
+      >
+        <FileIcon />
+        <span>{fileItem.name}</span>
+      </Button>
+    )
+  }
+
+  return (
+    <Card className="mx-auto w-full max-w-[16rem] gap-2" size="sm">
+      <CardHeader>
+        <Tabs defaultValue="explorer">
+          <TabsList className="w-full">
+            <TabsTrigger value="explorer">Explorer</TabsTrigger>
+            <TabsTrigger value="settings">Outline</TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-col gap-1">
+          {fileTree.map((item) => renderItem(item))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/collapsible-settings.tsx b/apps/v4/examples/radix/collapsible-settings.tsx
new file mode 100644
index 000000000..c1db53ffb
--- /dev/null
+++ b/apps/v4/examples/radix/collapsible-settings.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/examples/radix/ui/card"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/examples/radix/ui/collapsible"
+import { Field, FieldGroup, FieldLabel } from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+import { MaximizeIcon, MinimizeIcon } from "lucide-react"
+
+export function CollapsibleSettings() {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <Card className="mx-auto w-full max-w-xs" size="sm">
+      <CardHeader>
+        <CardTitle>Radius</CardTitle>
+        <CardDescription>Set the corner radius of the element.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Collapsible
+          open={isOpen}
+          onOpenChange={setIsOpen}
+          className="flex items-start gap-2"
+        >
+          <FieldGroup className="grid w-full grid-cols-2 gap-2">
+            <Field>
+              <FieldLabel htmlFor="radius-x" className="sr-only">
+                Radius X
+              </FieldLabel>
+              <Input id="radius" placeholder="0" defaultValue={0} />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="radius-y" className="sr-only">
+                Radius Y
+              </FieldLabel>
+              <Input id="radius" placeholder="0" defaultValue={0} />
+            </Field>
+            <CollapsibleContent className="col-span-full grid grid-cols-subgrid gap-2">
+              <Field>
+                <FieldLabel htmlFor="radius-x" className="sr-only">
+                  Radius X
+                </FieldLabel>
+                <Input id="radius" placeholder="0" defaultValue={0} />
+              </Field>
+              <Field>
+                <FieldLabel htmlFor="radius-y" className="sr-only">
+                  Radius Y
+                </FieldLabel>
+                <Input id="radius" placeholder="0" defaultValue={0} />
+              </Field>
+            </CollapsibleContent>
+          </FieldGroup>
+          <CollapsibleTrigger asChild>
+            <Button variant="outline" size="icon">
+              {isOpen ? <MinimizeIcon /> : <MaximizeIcon />}
+            </Button>
+          </CollapsibleTrigger>
+        </Collapsible>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/combobox-auto-highlight.tsx b/apps/v4/examples/radix/combobox-auto-highlight.tsx
new file mode 100644
index 000000000..b87de060e
--- /dev/null
+++ b/apps/v4/examples/radix/combobox-auto-highlight.tsx
@@ -0,0 +1,35 @@
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/examples/radix/ui/combobox"
+import { Select } from "@/examples/radix/ui/select"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+export function ComboboxAutoHighlight() {
+  return (
+    <Combobox items={frameworks} autoHighlight>
+      <ComboboxInput placeholder="Select a framework" />
+      <ComboboxContent>
+        <ComboboxEmpty>No items found.</ComboboxEmpty>
+        <ComboboxList>
+          {(item) => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/radix/combobox-basic.tsx b/apps/v4/examples/radix/combobox-basic.tsx
new file mode 100644
index 000000000..73de495e6
--- /dev/null
+++ b/apps/v4/examples/radix/combobox-basic.tsx
@@ -0,0 +1,35 @@
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/examples/radix/ui/combobox"
+import { Select } from "@/examples/radix/ui/select"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+export function ComboboxBasic() {
+  return (
+    <Combobox items={frameworks}>
+      <ComboboxInput placeholder="Select a framework" />
+      <ComboboxContent>
+        <ComboboxEmpty>No items found.</ComboboxEmpty>
+        <ComboboxList>
+          {(item) => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/radix/combobox-disabled.tsx b/apps/v4/examples/radix/combobox-disabled.tsx
new file mode 100644
index 000000000..5cf6b6bdd
--- /dev/null
+++ b/apps/v4/examples/radix/combobox-disabled.tsx
@@ -0,0 +1,35 @@
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/examples/radix/ui/combobox"
+import { Select } from "@/examples/radix/ui/select"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+export function ComboboxDisabled() {
+  return (
+    <Combobox items={frameworks}>
+      <ComboboxInput placeholder="Select a framework" disabled />
+      <ComboboxContent>
+        <ComboboxEmpty>No items found.</ComboboxEmpty>
+        <ComboboxList>
+          {(item) => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/radix/combobox-in-dialog.tsx b/apps/v4/examples/radix/combobox-in-dialog.tsx
new file mode 100644
index 000000000..0d64e5e70
--- /dev/null
+++ b/apps/v4/examples/radix/combobox-in-dialog.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/examples/radix/ui/combobox"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/radix/ui/dialog"
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
+import { Select } from "@/examples/radix/ui/select"
+import { toast } from "sonner"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+export function ComboboxInDialog() {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen} modal={false}>
+      <DialogTrigger asChild>
+        <Button variant="outline">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Select Framework</DialogTitle>
+          <DialogDescription>
+            Choose your preferred framework from the list below.
+          </DialogDescription>
+        </DialogHeader>
+        <Field>
+          <FieldLabel htmlFor="framework-dialog" className="sr-only">
+            Framework
+          </FieldLabel>
+          <Combobox items={frameworks}>
+            <ComboboxInput
+              id="framework-dialog"
+              placeholder="Select a framework"
+            />
+            <ComboboxContent>
+              <ComboboxEmpty>No items found.</ComboboxEmpty>
+              <ComboboxList>
+                {(item) => (
+                  <ComboboxItem key={item} value={item}>
+                    {item}
+                  </ComboboxItem>
+                )}
+              </ComboboxList>
+            </ComboboxContent>
+          </Combobox>
+        </Field>
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => setOpen(false)}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            onClick={() => {
+              toast("Framework selected.")
+              setOpen(false)
+            }}
+          >
+            Confirm
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/v4/examples/radix/combobox-in-popup.tsx b/apps/v4/examples/radix/combobox-in-popup.tsx
new file mode 100644
index 000000000..c4becdaf2
--- /dev/null
+++ b/apps/v4/examples/radix/combobox-in-popup.tsx
@@ -0,0 +1,453 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger,
+  ComboboxValue,
+} from "@/examples/radix/ui/combobox"
+import { Select } from "@/examples/radix/ui/select"
+
+const countries = [
+  { code: "", value: "", continent: "", label: "Select country" },
+  { code: "af", value: "afghanistan", label: "Afghanistan", continent: "Asia" },
+  { code: "al", value: "albania", label: "Albania", continent: "Europe" },
+  { code: "dz", value: "algeria", label: "Algeria", continent: "Africa" },
+  { code: "ad", value: "andorra", label: "Andorra", continent: "Europe" },
+  { code: "ao", value: "angola", label: "Angola", continent: "Africa" },
+  {
+    code: "ar",
+    value: "argentina",
+    label: "Argentina",
+    continent: "South America",
+  },
+  { code: "am", value: "armenia", label: "Armenia", continent: "Asia" },
+  { code: "au", value: "australia", label: "Australia", continent: "Oceania" },
+  { code: "at", value: "austria", label: "Austria", continent: "Europe" },
+  { code: "az", value: "azerbaijan", label: "Azerbaijan", continent: "Asia" },
+  {
+    code: "bs",
+    value: "bahamas",
+    label: "Bahamas",
+    continent: "North America",
+  },
+  { code: "bh", value: "bahrain", label: "Bahrain", continent: "Asia" },
+  { code: "bd", value: "bangladesh", label: "Bangladesh", continent: "Asia" },
+  {
+    code: "bb",
+    value: "barbados",
+    label: "Barbados",
+    continent: "North America",
+  },
+  { code: "by", value: "belarus", label: "Belarus", continent: "Europe" },
+  { code: "be", value: "belgium", label: "Belgium", continent: "Europe" },
+  { code: "bz", value: "belize", label: "Belize", continent: "North America" },
+  { code: "bj", value: "benin", label: "Benin", continent: "Africa" },
+  { code: "bt", value: "bhutan", label: "Bhutan", continent: "Asia" },
+  {
+    code: "bo",
+    value: "bolivia",
+    label: "Bolivia",
+    continent: "South America",
+  },
+  {
+    code: "ba",
+    value: "bosnia-and-herzegovina",
+    label: "Bosnia and Herzegovina",
+    continent: "Europe",
+  },
+  { code: "bw", value: "botswana", label: "Botswana", continent: "Africa" },
+  { code: "br", value: "brazil", label: "Brazil", continent: "South America" },
+  { code: "bn", value: "brunei", label: "Brunei", continent: "Asia" },
+  { code: "bg", value: "bulgaria", label: "Bulgaria", continent: "Europe" },
+  {
+    code: "bf",
+    value: "burkina-faso",
+    label: "Burkina Faso",
+    continent: "Africa",
+  },
+  { code: "bi", value: "burundi", label: "Burundi", continent: "Africa" },
+  { code: "kh", value: "cambodia", label: "Cambodia", continent: "Asia" },
+  { code: "cm", value: "cameroon", label: "Cameroon", continent: "Africa" },
+  { code: "ca", value: "canada", label: "Canada", continent: "North America" },
+  { code: "cv", value: "cape-verde", label: "Cape Verde", continent: "Africa" },
+  {
+    code: "cf",
+    value: "central-african-republic",
+    label: "Central African Republic",
+    continent: "Africa",
+  },
+  { code: "td", value: "chad", label: "Chad", continent: "Africa" },
+  { code: "cl", value: "chile", label: "Chile", continent: "South America" },
+  { code: "cn", value: "china", label: "China", continent: "Asia" },
+  {
+    code: "co",
+    value: "colombia",
+    label: "Colombia",
+    continent: "South America",
+  },
+  { code: "km", value: "comoros", label: "Comoros", continent: "Africa" },
+  { code: "cg", value: "congo", label: "Congo", continent: "Africa" },
+  {
+    code: "cr",
+    value: "costa-rica",
+    label: "Costa Rica",
+    continent: "North America",
+  },
+  { code: "hr", value: "croatia", label: "Croatia", continent: "Europe" },
+  { code: "cu", value: "cuba", label: "Cuba", continent: "North America" },
+  { code: "cy", value: "cyprus", label: "Cyprus", continent: "Asia" },
+  {
+    code: "cz",
+    value: "czech-republic",
+    label: "Czech Republic",
+    continent: "Europe",
+  },
+  { code: "dk", value: "denmark", label: "Denmark", continent: "Europe" },
+  { code: "dj", value: "djibouti", label: "Djibouti", continent: "Africa" },
+  {
+    code: "dm",
+    value: "dominica",
+    label: "Dominica",
+    continent: "North America",
+  },
+  {
+    code: "do",
+    value: "dominican-republic",
+    label: "Dominican Republic",
+    continent: "North America",
+  },
+  {
+    code: "ec",
+    value: "ecuador",
+    label: "Ecuador",
+    continent: "South America",
+  },
+  { code: "eg", value: "egypt", label: "Egypt", continent: "Africa" },
+  {
+    code: "sv",
+    value: "el-salvador",
+    label: "El Salvador",
+    continent: "North America",
+  },
+  {
+    code: "gq",
+    value: "equatorial-guinea",
+    label: "Equatorial Guinea",
+    continent: "Africa",
+  },
+  { code: "er", value: "eritrea", label: "Eritrea", continent: "Africa" },
+  { code: "ee", value: "estonia", label: "Estonia", continent: "Europe" },
+  { code: "et", value: "ethiopia", label: "Ethiopia", continent: "Africa" },
+  { code: "fj", value: "fiji", label: "Fiji", continent: "Oceania" },
+  { code: "fi", value: "finland", label: "Finland", continent: "Europe" },
+  { code: "fr", value: "france", label: "France", continent: "Europe" },
+  { code: "ga", value: "gabon", label: "Gabon", continent: "Africa" },
+  { code: "gm", value: "gambia", label: "Gambia", continent: "Africa" },
+  { code: "ge", value: "georgia", label: "Georgia", continent: "Asia" },
+  { code: "de", value: "germany", label: "Germany", continent: "Europe" },
+  { code: "gh", value: "ghana", label: "Ghana", continent: "Africa" },
+  { code: "gr", value: "greece", label: "Greece", continent: "Europe" },
+  {
+    code: "gd",
+    value: "grenada",
+    label: "Grenada",
+    continent: "North America",
+  },
+  {
+    code: "gt",
+    value: "guatemala",
+    label: "Guatemala",
+    continent: "North America",
+  },
+  { code: "gn", value: "guinea", label: "Guinea", continent: "Africa" },
+  {
+    code: "gw",
+    value: "guinea-bissau",
+    label: "Guinea-Bissau",
+    continent: "Africa",
+  },
+  { code: "gy", value: "guyana", label: "Guyana", continent: "South America" },
+  { code: "ht", value: "haiti", label: "Haiti", continent: "North America" },
+  {
+    code: "hn",
+    value: "honduras",
+    label: "Honduras",
+    continent: "North America",
+  },
+  { code: "hu", value: "hungary", label: "Hungary", continent: "Europe" },
+  { code: "is", value: "iceland", label: "Iceland", continent: "Europe" },
+  { code: "in", value: "india", label: "India", continent: "Asia" },
+  { code: "id", value: "indonesia", label: "Indonesia", continent: "Asia" },
+  { code: "ir", value: "iran", label: "Iran", continent: "Asia" },
+  { code: "iq", value: "iraq", label: "Iraq", continent: "Asia" },
+  { code: "ie", value: "ireland", label: "Ireland", continent: "Europe" },
+  { code: "il", value: "israel", label: "Israel", continent: "Asia" },
+  { code: "it", value: "italy", label: "Italy", continent: "Europe" },
+  {
+    code: "jm",
+    value: "jamaica",
+    label: "Jamaica",
+    continent: "North America",
+  },
+  { code: "jp", value: "japan", label: "Japan", continent: "Asia" },
+  { code: "jo", value: "jordan", label: "Jordan", continent: "Asia" },
+  { code: "kz", value: "kazakhstan", label: "Kazakhstan", continent: "Asia" },
+  { code: "ke", value: "kenya", label: "Kenya", continent: "Africa" },
+  { code: "kw", value: "kuwait", label: "Kuwait", continent: "Asia" },
+  { code: "kg", value: "kyrgyzstan", label: "Kyrgyzstan", continent: "Asia" },
+  { code: "la", value: "laos", label: "Laos", continent: "Asia" },
+  { code: "lv", value: "latvia", label: "Latvia", continent: "Europe" },
+  { code: "lb", value: "lebanon", label: "Lebanon", continent: "Asia" },
+  { code: "ls", value: "lesotho", label: "Lesotho", continent: "Africa" },
+  { code: "lr", value: "liberia", label: "Liberia", continent: "Africa" },
+  { code: "ly", value: "libya", label: "Libya", continent: "Africa" },
+  {
+    code: "li",
+    value: "liechtenstein",
+    label: "Liechtenstein",
+    continent: "Europe",
+  },
+  { code: "lt", value: "lithuania", label: "Lithuania", continent: "Europe" },
+  { code: "lu", value: "luxembourg", label: "Luxembourg", continent: "Europe" },
+  { code: "mg", value: "madagascar", label: "Madagascar", continent: "Africa" },
+  { code: "mw", value: "malawi", label: "Malawi", continent: "Africa" },
+  { code: "my", value: "malaysia", label: "Malaysia", continent: "Asia" },
+  { code: "mv", value: "maldives", label: "Maldives", continent: "Asia" },
+  { code: "ml", value: "mali", label: "Mali", continent: "Africa" },
+  { code: "mt", value: "malta", label: "Malta", continent: "Europe" },
+  {
+    code: "mh",
+    value: "marshall-islands",
+    label: "Marshall Islands",
+    continent: "Oceania",
+  },
+  { code: "mr", value: "mauritania", label: "Mauritania", continent: "Africa" },
+  { code: "mu", value: "mauritius", label: "Mauritius", continent: "Africa" },
+  { code: "mx", value: "mexico", label: "Mexico", continent: "North America" },
+  {
+    code: "fm",
+    value: "micronesia",
+    label: "Micronesia",
+    continent: "Oceania",
+  },
+  { code: "md", value: "moldova", label: "Moldova", continent: "Europe" },
+  { code: "mc", value: "monaco", label: "Monaco", continent: "Europe" },
+  { code: "mn", value: "mongolia", label: "Mongolia", continent: "Asia" },
+  { code: "me", value: "montenegro", label: "Montenegro", continent: "Europe" },
+  { code: "ma", value: "morocco", label: "Morocco", continent: "Africa" },
+  { code: "mz", value: "mozambique", label: "Mozambique", continent: "Africa" },
+  { code: "mm", value: "myanmar", label: "Myanmar", continent: "Asia" },
+  { code: "na", value: "namibia", label: "Namibia", continent: "Africa" },
+  { code: "nr", value: "nauru", label: "Nauru", continent: "Oceania" },
+  { code: "np", value: "nepal", label: "Nepal", continent: "Asia" },
+  {
+    code: "nl",
+    value: "netherlands",
+    label: "Netherlands",
+    continent: "Europe",
+  },
+  {
+    code: "nz",
+    value: "new-zealand",
+    label: "New Zealand",
+    continent: "Oceania",
+  },
+  {
+    code: "ni",
+    value: "nicaragua",
+    label: "Nicaragua",
+    continent: "North America",
+  },
+  { code: "ne", value: "niger", label: "Niger", continent: "Africa" },
+  { code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" },
+  { code: "kp", value: "north-korea", label: "North Korea", continent: "Asia" },
+  {
+    code: "mk",
+    value: "north-macedonia",
+    label: "North Macedonia",
+    continent: "Europe",
+  },
+  { code: "no", value: "norway", label: "Norway", continent: "Europe" },
+  { code: "om", value: "oman", label: "Oman", continent: "Asia" },
+  { code: "pk", value: "pakistan", label: "Pakistan", continent: "Asia" },
+  { code: "pw", value: "palau", label: "Palau", continent: "Oceania" },
+  { code: "ps", value: "palestine", label: "Palestine", continent: "Asia" },
+  { code: "pa", value: "panama", label: "Panama", continent: "North America" },
+  {
+    code: "pg",
+    value: "papua-new-guinea",
+    label: "Papua New Guinea",
+    continent: "Oceania",
+  },
+  {
+    code: "py",
+    value: "paraguay",
+    label: "Paraguay",
+    continent: "South America",
+  },
+  { code: "pe", value: "peru", label: "Peru", continent: "South America" },
+  { code: "ph", value: "philippines", label: "Philippines", continent: "Asia" },
+  { code: "pl", value: "poland", label: "Poland", continent: "Europe" },
+  { code: "pt", value: "portugal", label: "Portugal", continent: "Europe" },
+  { code: "qa", value: "qatar", label: "Qatar", continent: "Asia" },
+  { code: "ro", value: "romania", label: "Romania", continent: "Europe" },
+  { code: "ru", value: "russia", label: "Russia", continent: "Europe" },
+  { code: "rw", value: "rwanda", label: "Rwanda", continent: "Africa" },
+  { code: "ws", value: "samoa", label: "Samoa", continent: "Oceania" },
+  { code: "sm", value: "san-marino", label: "San Marino", continent: "Europe" },
+  {
+    code: "sa",
+    value: "saudi-arabia",
+    label: "Saudi Arabia",
+    continent: "Asia",
+  },
+  { code: "sn", value: "senegal", label: "Senegal", continent: "Africa" },
+  { code: "rs", value: "serbia", label: "Serbia", continent: "Europe" },
+  { code: "sc", value: "seychelles", label: "Seychelles", continent: "Africa" },
+  {
+    code: "sl",
+    value: "sierra-leone",
+    label: "Sierra Leone",
+    continent: "Africa",
+  },
+  { code: "sg", value: "singapore", label: "Singapore", continent: "Asia" },
+  { code: "sk", value: "slovakia", label: "Slovakia", continent: "Europe" },
+  { code: "si", value: "slovenia", label: "Slovenia", continent: "Europe" },
+  {
+    code: "sb",
+    value: "solomon-islands",
+    label: "Solomon Islands",
+    continent: "Oceania",
+  },
+  { code: "so", value: "somalia", label: "Somalia", continent: "Africa" },
+  {
+    code: "za",
+    value: "south-africa",
+    label: "South Africa",
+    continent: "Africa",
+  },
+  { code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" },
+  {
+    code: "ss",
+    value: "south-sudan",
+    label: "South Sudan",
+    continent: "Africa",
+  },
+  { code: "es", value: "spain", label: "Spain", continent: "Europe" },
+  { code: "lk", value: "sri-lanka", label: "Sri Lanka", continent: "Asia" },
+  { code: "sd", value: "sudan", label: "Sudan", continent: "Africa" },
+  {
+    code: "sr",
+    value: "suriname",
+    label: "Suriname",
+    continent: "South America",
+  },
+  { code: "se", value: "sweden", label: "Sweden", continent: "Europe" },
+  {
+    code: "ch",
+    value: "switzerland",
+    label: "Switzerland",
+    continent: "Europe",
+  },
+  { code: "sy", value: "syria", label: "Syria", continent: "Asia" },
+  { code: "tw", value: "taiwan", label: "Taiwan", continent: "Asia" },
+  { code: "tj", value: "tajikistan", label: "Tajikistan", continent: "Asia" },
+  { code: "tz", value: "tanzania", label: "Tanzania", continent: "Africa" },
+  { code: "th", value: "thailand", label: "Thailand", continent: "Asia" },
+  { code: "tl", value: "timor-leste", label: "Timor-Leste", continent: "Asia" },
+  { code: "tg", value: "togo", label: "Togo", continent: "Africa" },
+  { code: "to", value: "tonga", label: "Tonga", continent: "Oceania" },
+  {
+    code: "tt",
+    value: "trinidad-and-tobago",
+    label: "Trinidad and Tobago",
+    continent: "North America",
+  },
+  { code: "tn", value: "tunisia", label: "Tunisia", continent: "Africa" },
+  { code: "tr", value: "turkey", label: "Turkey", continent: "Asia" },
+  {
+    code: "tm",
+    value: "turkmenistan",
+    label: "Turkmenistan",
+    continent: "Asia",
+  },
+  { code: "tv", value: "tuvalu", label: "Tuvalu", continent: "Oceania" },
+  { code: "ug", value: "uganda", label: "Uganda", continent: "Africa" },
+  { code: "ua", value: "ukraine", label: "Ukraine", continent: "Europe" },
+  {
+    code: "ae",
+    value: "united-arab-emirates",
+    label: "United Arab Emirates",
+    continent: "Asia",
+  },
+  {
+    code: "gb",
+    value: "united-kingdom",
+    label: "United Kingdom",
+    continent: "Europe",
+  },
+  {
+    code: "us",
+    value: "united-states",
+    label: "United States",
+    continent: "North America",
+  },
+  {
+    code: "uy",
+    value: "uruguay",
+    label: "Uruguay",
+    continent: "South America",
+  },
+  { code: "uz", value: "uzbekistan", label: "Uzbekistan", continent: "Asia" },
+  { code: "vu", value: "vanuatu", label: "Vanuatu", continent: "Oceania" },
+  {
+    code: "va",
+    value: "vatican-city",
+    label: "Vatican City",
+    continent: "Europe",
+  },
+  {
+    code: "ve",
+    value: "venezuela",
+    label: "Venezuela",
+    continent: "South America",
+  },
+  { code: "vn", value: "vietnam", label: "Vietnam", continent: "Asia" },
+  { code: "ye", value: "yemen", label: "Yemen", continent: "Asia" },
+  { code: "zm", value: "zambia", label: "Zambia", continent: "Africa" },
+  { code: "zw", value: "zimbabwe", label: "Zimbabwe", continent: "Africa" },
+]
+
+export function ComboboxInPopup() {
+  return (
+    <>
+      <Combobox items={countries} defaultValue={countries[0]}>
+        <ComboboxTrigger
+          render={
+            <Button
+              variant="outline"
+              className="w-64 justify-between font-normal"
+            />
+          }
+        >
+          <ComboboxValue />
+        </ComboboxTrigger>
+        <ComboboxContent>
+          <ComboboxInput showTrigger={false} placeholder="Search" />
+          <ComboboxEmpty>No items found.</ComboboxEmpty>
+          <ComboboxList>
+            {(item) => (
+              <ComboboxItem key={item.code} value={item}>
+                {item.label}
+              </ComboboxItem>
+            )}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/combobox-invalid.tsx b/apps/v4/examples/radix/combobox-invalid.tsx
new file mode 100644
index 000000000..561595688
--- /dev/null
+++ b/apps/v4/examples/radix/combobox-invalid.tsx
@@ -0,0 +1,65 @@
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/examples/radix/ui/combobox"
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from "@/examples/radix/ui/field"
+import { Select } from "@/examples/radix/ui/select"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+export function ComboboxInvalid() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Combobox items={frameworks}>
+        <ComboboxInput placeholder="Select a framework" aria-invalid="true" />
+        <ComboboxContent>
+          <ComboboxEmpty>No items found.</ComboboxEmpty>
+          <ComboboxList>
+            {(item) => (
+              <ComboboxItem key={item} value={item}>
+                {item}
+              </ComboboxItem>
+            )}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+      <Field data-invalid>
+        <FieldLabel htmlFor="combobox-framework-invalid">Framework</FieldLabel>
+        <Combobox items={frameworks}>
+          <ComboboxInput
+            id="combobox-framework-invalid"
+            placeholder="Select a framework"
+            aria-invalid
+          />
+          <ComboboxContent>
+            <ComboboxEmpty>No items found.</ComboboxEmpty>
+            <ComboboxList>
+              {(item) => (
+                <ComboboxItem key={item} value={item}>
+                  {item}
+                </ComboboxItem>
+              )}
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+        <FieldDescription>Please select a valid framework.</FieldDescription>
+        <FieldError errors={[{ message: "This field is required." }]} />
+      </Field>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/combobox-large-list.tsx b/apps/v4/examples/radix/combobox-large-list.tsx
new file mode 100644
index 000000000..1f5b6075e
--- /dev/null
+++ b/apps/v4/examples/radix/combobox-large-list.tsx
@@ -0,0 +1,29 @@
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/examples/radix/ui/combobox"
+import { Item } from "@/examples/radix/ui/item"
+
+const largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)
+
+export function ComboboxLargeList() {
+  return (
+    <Combobox items={largeListItems}>
+      <ComboboxInput placeholder="Search from 100 items" />
+      <ComboboxContent>
+        <ComboboxEmpty>No items found.</ComboboxEmpty>
+        <ComboboxList>
+          {(item) => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/radix/combobox-multiple-disabled.tsx b/apps/v4/examples/radix/combobox-multiple-disabled.tsx
new file mode 100644
index 000000000..9be489358
--- /dev/null
+++ b/apps/v4/examples/radix/combobox-multiple-disabled.tsx
@@ -0,0 +1,58 @@
+import * as React from "react"
+import {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxValue,
+  useComboboxAnchor,
+} from "@/examples/radix/ui/combobox"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+export function ComboboxMultipleDisabled() {
+  const anchor = useComboboxAnchor()
+
+  return (
+    <Combobox
+      multiple
+      autoHighlight
+      items={frameworks}
+      defaultValue={[frameworks[0], frameworks[1]]}
+      disabled
+    >
+      <ComboboxChips ref={anchor}>
+        <ComboboxValue>
+          {(values) => (
+            <React.Fragment>
+              {values.map((value: string) => (
+                <ComboboxChip key={value}>{value}</ComboboxChip>
+              ))}
+              <ComboboxChipsInput disabled />
+            </React.Fragment>
+          )}
+        </ComboboxValue>
+      </ComboboxChips>
+      <ComboboxContent anchor={anchor}>
+        <ComboboxEmpty>No items found.</ComboboxEmpty>
+        <ComboboxList>
+          {(item) => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/radix/combobox-multiple-invalid.tsx b/apps/v4/examples/radix/combobox-multiple-invalid.tsx
new file mode 100644
index 000000000..3b8619bf7
--- /dev/null
+++ b/apps/v4/examples/radix/combobox-multiple-invalid.tsx
@@ -0,0 +1,105 @@
+import * as React from "react"
+import {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxValue,
+  useComboboxAnchor,
+} from "@/examples/radix/ui/combobox"
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from "@/examples/radix/ui/field"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+export function ComboboxMultipleInvalid() {
+  const anchor1 = useComboboxAnchor()
+  const anchor2 = useComboboxAnchor()
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Combobox
+        multiple
+        autoHighlight
+        items={frameworks}
+        defaultValue={[frameworks[0], frameworks[1]]}
+      >
+        <ComboboxChips ref={anchor1}>
+          <ComboboxValue>
+            {(values) => (
+              <React.Fragment>
+                {values.map((value: string) => (
+                  <ComboboxChip key={value}>{value}</ComboboxChip>
+                ))}
+                <ComboboxChipsInput aria-invalid="true" />
+              </React.Fragment>
+            )}
+          </ComboboxValue>
+        </ComboboxChips>
+        <ComboboxContent anchor={anchor1}>
+          <ComboboxEmpty>No items found.</ComboboxEmpty>
+          <ComboboxList>
+            {(item) => (
+              <ComboboxItem key={item} value={item}>
+                {item}
+              </ComboboxItem>
+            )}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+      <Field data-invalid>
+        <FieldLabel htmlFor="combobox-multiple-invalid">Frameworks</FieldLabel>
+        <Combobox
+          multiple
+          autoHighlight
+          items={frameworks}
+          defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}
+        >
+          <ComboboxChips ref={anchor2}>
+            <ComboboxValue>
+              {(values) => (
+                <React.Fragment>
+                  {values.map((value: string) => (
+                    <ComboboxChip key={value}>{value}</ComboboxChip>
+                  ))}
+                  <ComboboxChipsInput
+                    id="combobox-multiple-invalid"
+                    aria-invalid
+                  />
+                </React.Fragment>
+              )}
+            </ComboboxValue>
+          </ComboboxChips>
+          <ComboboxContent anchor={anchor2}>
+            <ComboboxEmpty>No items found.</ComboboxEmpty>
+            <ComboboxList>
+              {(item) => (
+                <ComboboxItem key={item} value={item}>
+                  {item}
+                </ComboboxItem>
+              )}
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+        <FieldDescription>
+          Please select at least one framework.
+        </FieldDescription>
+        <FieldError errors={[{ message: "This field is required." }]} />
+      </Field>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/combobox-multiple-no-remove.tsx b/apps/v4/examples/radix/combobox-multiple-no-remove.tsx
new file mode 100644
index 000000000..94da9cf1d
--- /dev/null
+++ b/apps/v4/examples/radix/combobox-multiple-no-remove.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxValue,
+  useComboboxAnchor,
+} from "@/examples/radix/ui/combobox"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+export function ComboboxMultipleNoRemove() {
+  const anchor = useComboboxAnchor()
+
+  return (
+    <Combobox
+      multiple
+      autoHighlight
+      items={frameworks}
+      defaultValue={[frameworks[0], frameworks[1]]}
+    >
+      <ComboboxChips ref={anchor}>
+        <ComboboxValue>
+          {(values) => (
+            <React.Fragment>
+              {values.map((value: string) => (
+                <ComboboxChip key={value} showRemove={false}>
+                  {value}
+                </ComboboxChip>
+              ))}
+              <ComboboxChipsInput />
+            </React.Fragment>
+          )}
+        </ComboboxValue>
+      </ComboboxChips>
+      <ComboboxContent anchor={anchor}>
+        <ComboboxEmpty>No items found.</ComboboxEmpty>
+        <ComboboxList>
+          {(item) => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/radix/combobox-multiple.tsx b/apps/v4/examples/radix/combobox-multiple.tsx
new file mode 100644
index 000000000..844373dab
--- /dev/null
+++ b/apps/v4/examples/radix/combobox-multiple.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxValue,
+  useComboboxAnchor,
+} from "@/examples/radix/ui/combobox"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+export function ComboboxMultiple() {
+  const anchor = useComboboxAnchor()
+
+  return (
+    <Combobox
+      multiple
+      autoHighlight
+      items={frameworks}
+      defaultValue={[frameworks[0]]}
+    >
+      <ComboboxChips ref={anchor}>
+        <ComboboxValue>
+          {(values) => (
+            <React.Fragment>
+              {values.map((value: string) => (
+                <ComboboxChip key={value}>{value}</ComboboxChip>
+              ))}
+              <ComboboxChipsInput />
+            </React.Fragment>
+          )}
+        </ComboboxValue>
+      </ComboboxChips>
+      <ComboboxContent anchor={anchor}>
+        <ComboboxEmpty>No items found.</ComboboxEmpty>
+        <ComboboxList>
+          {(item) => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/radix/combobox-with-clear.tsx b/apps/v4/examples/radix/combobox-with-clear.tsx
new file mode 100644
index 000000000..81c47bfda
--- /dev/null
+++ b/apps/v4/examples/radix/combobox-with-clear.tsx
@@ -0,0 +1,36 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/examples/radix/ui/combobox"
+import { Select } from "@/examples/radix/ui/select"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+export function ComboboxWithClear() {
+  return (
+    <Combobox items={frameworks} defaultValue={frameworks[0]}>
+      <ComboboxInput placeholder="Select a framework" showClear />
+      <ComboboxContent>
+        <ComboboxEmpty>No items found.</ComboboxEmpty>
+        <ComboboxList>
+          {(item) => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/radix/combobox-with-custom-items.tsx b/apps/v4/examples/radix/combobox-with-custom-items.tsx
new file mode 100644
index 000000000..a87fb9c74
--- /dev/null
+++ b/apps/v4/examples/radix/combobox-with-custom-items.tsx
@@ -0,0 +1,456 @@
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/examples/radix/ui/combobox"
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+import { Select } from "@/examples/radix/ui/select"
+
+const countries = [
+  { code: "", value: "", continent: "", label: "Select country" },
+  { code: "af", value: "afghanistan", label: "Afghanistan", continent: "Asia" },
+  { code: "al", value: "albania", label: "Albania", continent: "Europe" },
+  { code: "dz", value: "algeria", label: "Algeria", continent: "Africa" },
+  { code: "ad", value: "andorra", label: "Andorra", continent: "Europe" },
+  { code: "ao", value: "angola", label: "Angola", continent: "Africa" },
+  {
+    code: "ar",
+    value: "argentina",
+    label: "Argentina",
+    continent: "South America",
+  },
+  { code: "am", value: "armenia", label: "Armenia", continent: "Asia" },
+  { code: "au", value: "australia", label: "Australia", continent: "Oceania" },
+  { code: "at", value: "austria", label: "Austria", continent: "Europe" },
+  { code: "az", value: "azerbaijan", label: "Azerbaijan", continent: "Asia" },
+  {
+    code: "bs",
+    value: "bahamas",
+    label: "Bahamas",
+    continent: "North America",
+  },
+  { code: "bh", value: "bahrain", label: "Bahrain", continent: "Asia" },
+  { code: "bd", value: "bangladesh", label: "Bangladesh", continent: "Asia" },
+  {
+    code: "bb",
+    value: "barbados",
+    label: "Barbados",
+    continent: "North America",
+  },
+  { code: "by", value: "belarus", label: "Belarus", continent: "Europe" },
+  { code: "be", value: "belgium", label: "Belgium", continent: "Europe" },
+  { code: "bz", value: "belize", label: "Belize", continent: "North America" },
+  { code: "bj", value: "benin", label: "Benin", continent: "Africa" },
+  { code: "bt", value: "bhutan", label: "Bhutan", continent: "Asia" },
+  {
+    code: "bo",
+    value: "bolivia",
+    label: "Bolivia",
+    continent: "South America",
+  },
+  {
+    code: "ba",
+    value: "bosnia-and-herzegovina",
+    label: "Bosnia and Herzegovina",
+    continent: "Europe",
+  },
+  { code: "bw", value: "botswana", label: "Botswana", continent: "Africa" },
+  { code: "br", value: "brazil", label: "Brazil", continent: "South America" },
+  { code: "bn", value: "brunei", label: "Brunei", continent: "Asia" },
+  { code: "bg", value: "bulgaria", label: "Bulgaria", continent: "Europe" },
+  {
+    code: "bf",
+    value: "burkina-faso",
+    label: "Burkina Faso",
+    continent: "Africa",
+  },
+  { code: "bi", value: "burundi", label: "Burundi", continent: "Africa" },
+  { code: "kh", value: "cambodia", label: "Cambodia", continent: "Asia" },
+  { code: "cm", value: "cameroon", label: "Cameroon", continent: "Africa" },
+  { code: "ca", value: "canada", label: "Canada", continent: "North America" },
+  { code: "cv", value: "cape-verde", label: "Cape Verde", continent: "Africa" },
+  {
+    code: "cf",
+    value: "central-african-republic",
+    label: "Central African Republic",
+    continent: "Africa",
+  },
+  { code: "td", value: "chad", label: "Chad", continent: "Africa" },
+  { code: "cl", value: "chile", label: "Chile", continent: "South America" },
+  { code: "cn", value: "china", label: "China", continent: "Asia" },
+  {
+    code: "co",
+    value: "colombia",
+    label: "Colombia",
+    continent: "South America",
+  },
+  { code: "km", value: "comoros", label: "Comoros", continent: "Africa" },
+  { code: "cg", value: "congo", label: "Congo", continent: "Africa" },
+  {
+    code: "cr",
+    value: "costa-rica",
+    label: "Costa Rica",
+    continent: "North America",
+  },
+  { code: "hr", value: "croatia", label: "Croatia", continent: "Europe" },
+  { code: "cu", value: "cuba", label: "Cuba", continent: "North America" },
+  { code: "cy", value: "cyprus", label: "Cyprus", continent: "Asia" },
+  {
+    code: "cz",
+    value: "czech-republic",
+    label: "Czech Republic",
+    continent: "Europe",
+  },
+  { code: "dk", value: "denmark", label: "Denmark", continent: "Europe" },
+  { code: "dj", value: "djibouti", label: "Djibouti", continent: "Africa" },
+  {
+    code: "dm",
+    value: "dominica",
+    label: "Dominica",
+    continent: "North America",
+  },
+  {
+    code: "do",
+    value: "dominican-republic",
+    label: "Dominican Republic",
+    continent: "North America",
+  },
+  {
+    code: "ec",
+    value: "ecuador",
+    label: "Ecuador",
+    continent: "South America",
+  },
+  { code: "eg", value: "egypt", label: "Egypt", continent: "Africa" },
+  {
+    code: "sv",
+    value: "el-salvador",
+    label: "El Salvador",
+    continent: "North America",
+  },
+  {
+    code: "gq",
+    value: "equatorial-guinea",
+    label: "Equatorial Guinea",
+    continent: "Africa",
+  },
+  { code: "er", value: "eritrea", label: "Eritrea", continent: "Africa" },
+  { code: "ee", value: "estonia", label: "Estonia", continent: "Europe" },
+  { code: "et", value: "ethiopia", label: "Ethiopia", continent: "Africa" },
+  { code: "fj", value: "fiji", label: "Fiji", continent: "Oceania" },
+  { code: "fi", value: "finland", label: "Finland", continent: "Europe" },
+  { code: "fr", value: "france", label: "France", continent: "Europe" },
+  { code: "ga", value: "gabon", label: "Gabon", continent: "Africa" },
+  { code: "gm", value: "gambia", label: "Gambia", continent: "Africa" },
+  { code: "ge", value: "georgia", label: "Georgia", continent: "Asia" },
+  { code: "de", value: "germany", label: "Germany", continent: "Europe" },
+  { code: "gh", value: "ghana", label: "Ghana", continent: "Africa" },
+  { code: "gr", value: "greece", label: "Greece", continent: "Europe" },
+  {
+    code: "gd",
+    value: "grenada",
+    label: "Grenada",
+    continent: "North America",
+  },
+  {
+    code: "gt",
+    value: "guatemala",
+    label: "Guatemala",
+    continent: "North America",
+  },
+  { code: "gn", value: "guinea", label: "Guinea", continent: "Africa" },
+  {
+    code: "gw",
+    value: "guinea-bissau",
+    label: "Guinea-Bissau",
+    continent: "Africa",
+  },
+  { code: "gy", value: "guyana", label: "Guyana", continent: "South America" },
+  { code: "ht", value: "haiti", label: "Haiti", continent: "North America" },
+  {
+    code: "hn",
+    value: "honduras",
+    label: "Honduras",
+    continent: "North America",
+  },
+  { code: "hu", value: "hungary", label: "Hungary", continent: "Europe" },
+  { code: "is", value: "iceland", label: "Iceland", continent: "Europe" },
+  { code: "in", value: "india", label: "India", continent: "Asia" },
+  { code: "id", value: "indonesia", label: "Indonesia", continent: "Asia" },
+  { code: "ir", value: "iran", label: "Iran", continent: "Asia" },
+  { code: "iq", value: "iraq", label: "Iraq", continent: "Asia" },
+  { code: "ie", value: "ireland", label: "Ireland", continent: "Europe" },
+  { code: "il", value: "israel", label: "Israel", continent: "Asia" },
+  { code: "it", value: "italy", label: "Italy", continent: "Europe" },
+  {
+    code: "jm",
+    value: "jamaica",
+    label: "Jamaica",
+    continent: "North America",
+  },
+  { code: "jp", value: "japan", label: "Japan", continent: "Asia" },
+  { code: "jo", value: "jordan", label: "Jordan", continent: "Asia" },
+  { code: "kz", value: "kazakhstan", label: "Kazakhstan", continent: "Asia" },
+  { code: "ke", value: "kenya", label: "Kenya", continent: "Africa" },
+  { code: "kw", value: "kuwait", label: "Kuwait", continent: "Asia" },
+  { code: "kg", value: "kyrgyzstan", label: "Kyrgyzstan", continent: "Asia" },
+  { code: "la", value: "laos", label: "Laos", continent: "Asia" },
+  { code: "lv", value: "latvia", label: "Latvia", continent: "Europe" },
+  { code: "lb", value: "lebanon", label: "Lebanon", continent: "Asia" },
+  { code: "ls", value: "lesotho", label: "Lesotho", continent: "Africa" },
+  { code: "lr", value: "liberia", label: "Liberia", continent: "Africa" },
+  { code: "ly", value: "libya", label: "Libya", continent: "Africa" },
+  {
+    code: "li",
+    value: "liechtenstein",
+    label: "Liechtenstein",
+    continent: "Europe",
+  },
+  { code: "lt", value: "lithuania", label: "Lithuania", continent: "Europe" },
+  { code: "lu", value: "luxembourg", label: "Luxembourg", continent: "Europe" },
+  { code: "mg", value: "madagascar", label: "Madagascar", continent: "Africa" },
+  { code: "mw", value: "malawi", label: "Malawi", continent: "Africa" },
+  { code: "my", value: "malaysia", label: "Malaysia", continent: "Asia" },
+  { code: "mv", value: "maldives", label: "Maldives", continent: "Asia" },
+  { code: "ml", value: "mali", label: "Mali", continent: "Africa" },
+  { code: "mt", value: "malta", label: "Malta", continent: "Europe" },
+  {
+    code: "mh",
+    value: "marshall-islands",
+    label: "Marshall Islands",
+    continent: "Oceania",
+  },
+  { code: "mr", value: "mauritania", label: "Mauritania", continent: "Africa" },
+  { code: "mu", value: "mauritius", label: "Mauritius", continent: "Africa" },
+  { code: "mx", value: "mexico", label: "Mexico", continent: "North America" },
+  {
+    code: "fm",
+    value: "micronesia",
+    label: "Micronesia",
+    continent: "Oceania",
+  },
+  { code: "md", value: "moldova", label: "Moldova", continent: "Europe" },
+  { code: "mc", value: "monaco", label: "Monaco", continent: "Europe" },
+  { code: "mn", value: "mongolia", label: "Mongolia", continent: "Asia" },
+  { code: "me", value: "montenegro", label: "Montenegro", continent: "Europe" },
+  { code: "ma", value: "morocco", label: "Morocco", continent: "Africa" },
+  { code: "mz", value: "mozambique", label: "Mozambique", continent: "Africa" },
+  { code: "mm", value: "myanmar", label: "Myanmar", continent: "Asia" },
+  { code: "na", value: "namibia", label: "Namibia", continent: "Africa" },
+  { code: "nr", value: "nauru", label: "Nauru", continent: "Oceania" },
+  { code: "np", value: "nepal", label: "Nepal", continent: "Asia" },
+  {
+    code: "nl",
+    value: "netherlands",
+    label: "Netherlands",
+    continent: "Europe",
+  },
+  {
+    code: "nz",
+    value: "new-zealand",
+    label: "New Zealand",
+    continent: "Oceania",
+  },
+  {
+    code: "ni",
+    value: "nicaragua",
+    label: "Nicaragua",
+    continent: "North America",
+  },
+  { code: "ne", value: "niger", label: "Niger", continent: "Africa" },
+  { code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" },
+  { code: "kp", value: "north-korea", label: "North Korea", continent: "Asia" },
+  {
+    code: "mk",
+    value: "north-macedonia",
+    label: "North Macedonia",
+    continent: "Europe",
+  },
+  { code: "no", value: "norway", label: "Norway", continent: "Europe" },
+  { code: "om", value: "oman", label: "Oman", continent: "Asia" },
+  { code: "pk", value: "pakistan", label: "Pakistan", continent: "Asia" },
+  { code: "pw", value: "palau", label: "Palau", continent: "Oceania" },
+  { code: "ps", value: "palestine", label: "Palestine", continent: "Asia" },
+  { code: "pa", value: "panama", label: "Panama", continent: "North America" },
+  {
+    code: "pg",
+    value: "papua-new-guinea",
+    label: "Papua New Guinea",
+    continent: "Oceania",
+  },
+  {
+    code: "py",
+    value: "paraguay",
+    label: "Paraguay",
+    continent: "South America",
+  },
+  { code: "pe", value: "peru", label: "Peru", continent: "South America" },
+  { code: "ph", value: "philippines", label: "Philippines", continent: "Asia" },
+  { code: "pl", value: "poland", label: "Poland", continent: "Europe" },
+  { code: "pt", value: "portugal", label: "Portugal", continent: "Europe" },
+  { code: "qa", value: "qatar", label: "Qatar", continent: "Asia" },
+  { code: "ro", value: "romania", label: "Romania", continent: "Europe" },
+  { code: "ru", value: "russia", label: "Russia", continent: "Europe" },
+  { code: "rw", value: "rwanda", label: "Rwanda", continent: "Africa" },
+  { code: "ws", value: "samoa", label: "Samoa", continent: "Oceania" },
+  { code: "sm", value: "san-marino", label: "San Marino", continent: "Europe" },
+  {
+    code: "sa",
+    value: "saudi-arabia",
+    label: "Saudi Arabia",
+    continent: "Asia",
+  },
+  { code: "sn", value: "senegal", label: "Senegal", continent: "Africa" },
+  { code: "rs", value: "serbia", label: "Serbia", continent: "Europe" },
+  { code: "sc", value: "seychelles", label: "Seychelles", continent: "Africa" },
+  {
+    code: "sl",
+    value: "sierra-leone",
+    label: "Sierra Leone",
+    continent: "Africa",
+  },
+  { code: "sg", value: "singapore", label: "Singapore", continent: "Asia" },
+  { code: "sk", value: "slovakia", label: "Slovakia", continent: "Europe" },
+  { code: "si", value: "slovenia", label: "Slovenia", continent: "Europe" },
+  {
+    code: "sb",
+    value: "solomon-islands",
+    label: "Solomon Islands",
+    continent: "Oceania",
+  },
+  { code: "so", value: "somalia", label: "Somalia", continent: "Africa" },
+  {
+    code: "za",
+    value: "south-africa",
+    label: "South Africa",
+    continent: "Africa",
+  },
+  { code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" },
+  {
+    code: "ss",
+    value: "south-sudan",
+    label: "South Sudan",
+    continent: "Africa",
+  },
+  { code: "es", value: "spain", label: "Spain", continent: "Europe" },
+  { code: "lk", value: "sri-lanka", label: "Sri Lanka", continent: "Asia" },
+  { code: "sd", value: "sudan", label: "Sudan", continent: "Africa" },
+  {
+    code: "sr",
+    value: "suriname",
+    label: "Suriname",
+    continent: "South America",
+  },
+  { code: "se", value: "sweden", label: "Sweden", continent: "Europe" },
+  {
+    code: "ch",
+    value: "switzerland",
+    label: "Switzerland",
+    continent: "Europe",
+  },
+  { code: "sy", value: "syria", label: "Syria", continent: "Asia" },
+  { code: "tw", value: "taiwan", label: "Taiwan", continent: "Asia" },
+  { code: "tj", value: "tajikistan", label: "Tajikistan", continent: "Asia" },
+  { code: "tz", value: "tanzania", label: "Tanzania", continent: "Africa" },
+  { code: "th", value: "thailand", label: "Thailand", continent: "Asia" },
+  { code: "tl", value: "timor-leste", label: "Timor-Leste", continent: "Asia" },
+  { code: "tg", value: "togo", label: "Togo", continent: "Africa" },
+  { code: "to", value: "tonga", label: "Tonga", continent: "Oceania" },
+  {
+    code: "tt",
+    value: "trinidad-and-tobago",
+    label: "Trinidad and Tobago",
+    continent: "North America",
+  },
+  { code: "tn", value: "tunisia", label: "Tunisia", continent: "Africa" },
+  { code: "tr", value: "turkey", label: "Turkey", continent: "Asia" },
+  {
+    code: "tm",
+    value: "turkmenistan",
+    label: "Turkmenistan",
+    continent: "Asia",
+  },
+  { code: "tv", value: "tuvalu", label: "Tuvalu", continent: "Oceania" },
+  { code: "ug", value: "uganda", label: "Uganda", continent: "Africa" },
+  { code: "ua", value: "ukraine", label: "Ukraine", continent: "Europe" },
+  {
+    code: "ae",
+    value: "united-arab-emirates",
+    label: "United Arab Emirates",
+    continent: "Asia",
+  },
+  {
+    code: "gb",
+    value: "united-kingdom",
+    label: "United Kingdom",
+    continent: "Europe",
+  },
+  {
+    code: "us",
+    value: "united-states",
+    label: "United States",
+    continent: "North America",
+  },
+  {
+    code: "uy",
+    value: "uruguay",
+    label: "Uruguay",
+    continent: "South America",
+  },
+  { code: "uz", value: "uzbekistan", label: "Uzbekistan", continent: "Asia" },
+  { code: "vu", value: "vanuatu", label: "Vanuatu", continent: "Oceania" },
+  {
+    code: "va",
+    value: "vatican-city",
+    label: "Vatican City",
+    continent: "Europe",
+  },
+  {
+    code: "ve",
+    value: "venezuela",
+    label: "Venezuela",
+    continent: "South America",
+  },
+  { code: "vn", value: "vietnam", label: "Vietnam", continent: "Asia" },
+  { code: "ye", value: "yemen", label: "Yemen", continent: "Asia" },
+  { code: "zm", value: "zambia", label: "Zambia", continent: "Africa" },
+  { code: "zw", value: "zimbabwe", label: "Zimbabwe", continent: "Africa" },
+]
+
+export function ComboboxWithCustomItems() {
+  return (
+    <Combobox
+      items={countries.filter((country) => country.code !== "")}
+      itemToStringValue={(country: (typeof countries)[number]) => country.label}
+    >
+      <ComboboxInput placeholder="Search countries..." />
+      <ComboboxContent>
+        <ComboboxEmpty>No countries found.</ComboboxEmpty>
+        <ComboboxList>
+          {(country) => (
+            <ComboboxItem key={country.code} value={country}>
+              <Item size="xs" className="p-0">
+                <ItemContent>
+                  <ItemTitle className="whitespace-nowrap">
+                    {country.label}
+                  </ItemTitle>
+                  <ItemDescription>
+                    {country.continent} ({country.code})
+                  </ItemDescription>
+                </ItemContent>
+              </Item>
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/radix/combobox-with-form.tsx b/apps/v4/examples/radix/combobox-with-form.tsx
new file mode 100644
index 000000000..4523c0012
--- /dev/null
+++ b/apps/v4/examples/radix/combobox-with-form.tsx
@@ -0,0 +1,72 @@
+import * as React from "react"
+import { Button } from "@/examples/radix/ui/button"
+import { Card, CardContent, CardFooter } from "@/examples/radix/ui/card"
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/examples/radix/ui/combobox"
+import { Field, FieldGroup, FieldLabel } from "@/examples/radix/ui/field"
+import { Select } from "@/examples/radix/ui/select"
+import { toast } from "sonner"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+export function ComboboxWithForm() {
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    const formData = new FormData(event.target as HTMLFormElement)
+    const framework = formData.get("framework") as string
+    toast(`You selected ${framework} as your framework.`)
+  }
+
+  return (
+    <Card className="w-full max-w-sm" size="sm">
+      <CardContent>
+        <form
+          id="form-with-combobox"
+          className="w-full"
+          onSubmit={handleSubmit}
+        >
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="framework">Framework</FieldLabel>
+              <Combobox items={frameworks}>
+                <ComboboxInput
+                  id="framework"
+                  name="framework"
+                  placeholder="Select a framework"
+                  required
+                />
+                <ComboboxContent>
+                  <ComboboxEmpty>No items found.</ComboboxEmpty>
+                  <ComboboxList>
+                    {(item) => (
+                      <ComboboxItem key={item} value={item}>
+                        {item}
+                      </ComboboxItem>
+                    )}
+                  </ComboboxList>
+                </ComboboxContent>
+              </Combobox>
+            </Field>
+          </FieldGroup>
+        </form>
+      </CardContent>
+      <CardFooter>
+        <Button type="submit" form="form-with-combobox">
+          Submit
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/combobox-with-groups-and-separator.tsx b/apps/v4/examples/radix/combobox-with-groups-and-separator.tsx
new file mode 100644
index 000000000..4ae172174
--- /dev/null
+++ b/apps/v4/examples/radix/combobox-with-groups-and-separator.tsx
@@ -0,0 +1,75 @@
+import {
+  Combobox,
+  ComboboxCollection,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxSeparator,
+} from "@/examples/radix/ui/combobox"
+import { Select } from "@/examples/radix/ui/select"
+
+const timezones = [
+  {
+    value: "Americas",
+    items: [
+      "(GMT-5) New York",
+      "(GMT-8) Los Angeles",
+      "(GMT-6) Chicago",
+      "(GMT-5) Toronto",
+      "(GMT-8) Vancouver",
+      "(GMT-3) São Paulo",
+    ],
+  },
+  {
+    value: "Europe",
+    items: [
+      "(GMT+0) London",
+      "(GMT+1) Paris",
+      "(GMT+1) Berlin",
+      "(GMT+1) Rome",
+      "(GMT+1) Madrid",
+      "(GMT+1) Amsterdam",
+    ],
+  },
+  {
+    value: "Asia/Pacific",
+    items: [
+      "(GMT+9) Tokyo",
+      "(GMT+8) Shanghai",
+      "(GMT+8) Singapore",
+      "(GMT+4) Dubai",
+      "(GMT+11) Sydney",
+      "(GMT+9) Seoul",
+    ],
+  },
+] as const
+
+export function ComboboxWithGroupsAndSeparator() {
+  return (
+    <Combobox items={timezones}>
+      <ComboboxInput placeholder="Select a timezone" />
+      <ComboboxContent>
+        <ComboboxEmpty>No timezones found.</ComboboxEmpty>
+        <ComboboxList>
+          {(group) => (
+            <ComboboxGroup key={group.value} items={group.items}>
+              <ComboboxLabel>{group.value}</ComboboxLabel>
+              <ComboboxCollection>
+                {(item) => (
+                  <ComboboxItem key={item} value={item}>
+                    {item}
+                  </ComboboxItem>
+                )}
+              </ComboboxCollection>
+              <ComboboxSeparator />
+            </ComboboxGroup>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/radix/combobox-with-groups.tsx b/apps/v4/examples/radix/combobox-with-groups.tsx
new file mode 100644
index 000000000..64557b874
--- /dev/null
+++ b/apps/v4/examples/radix/combobox-with-groups.tsx
@@ -0,0 +1,73 @@
+import {
+  Combobox,
+  ComboboxCollection,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+} from "@/examples/radix/ui/combobox"
+import { Select } from "@/examples/radix/ui/select"
+
+const timezones = [
+  {
+    value: "Americas",
+    items: [
+      "(GMT-5) New York",
+      "(GMT-8) Los Angeles",
+      "(GMT-6) Chicago",
+      "(GMT-5) Toronto",
+      "(GMT-8) Vancouver",
+      "(GMT-3) São Paulo",
+    ],
+  },
+  {
+    value: "Europe",
+    items: [
+      "(GMT+0) London",
+      "(GMT+1) Paris",
+      "(GMT+1) Berlin",
+      "(GMT+1) Rome",
+      "(GMT+1) Madrid",
+      "(GMT+1) Amsterdam",
+    ],
+  },
+  {
+    value: "Asia/Pacific",
+    items: [
+      "(GMT+9) Tokyo",
+      "(GMT+8) Shanghai",
+      "(GMT+8) Singapore",
+      "(GMT+4) Dubai",
+      "(GMT+11) Sydney",
+      "(GMT+9) Seoul",
+    ],
+  },
+] as const
+
+export function ComboboxWithGroups() {
+  return (
+    <Combobox items={timezones}>
+      <ComboboxInput placeholder="Select a timezone" />
+      <ComboboxContent>
+        <ComboboxEmpty>No timezones found.</ComboboxEmpty>
+        <ComboboxList>
+          {(group) => (
+            <ComboboxGroup key={group.value} items={group.items}>
+              <ComboboxLabel>{group.value}</ComboboxLabel>
+              <ComboboxCollection>
+                {(item) => (
+                  <ComboboxItem key={item} value={item}>
+                    {item}
+                  </ComboboxItem>
+                )}
+              </ComboboxCollection>
+            </ComboboxGroup>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/radix/combobox-with-other-inputs.tsx b/apps/v4/examples/radix/combobox-with-other-inputs.tsx
new file mode 100644
index 000000000..298140604
--- /dev/null
+++ b/apps/v4/examples/radix/combobox-with-other-inputs.tsx
@@ -0,0 +1,80 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/examples/radix/ui/combobox"
+import { Input } from "@/examples/radix/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/radix/ui/input-group"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+import { ChevronDownIcon } from "lucide-react"
+
+const frameworks = [
+  "Next.js",
+  "SvelteKit",
+  "Nuxt.js",
+  "Remix",
+  "Astro",
+] as const
+
+export function ComboboxWithOtherInputs() {
+  return (
+    <>
+      <Combobox items={frameworks}>
+        <ComboboxInput placeholder="Select a framework" className="w-52" />
+        <ComboboxContent>
+          <ComboboxEmpty>No items found.</ComboboxEmpty>
+          <ComboboxList>
+            {(item) => (
+              <ComboboxItem key={item} value={item}>
+                {item}
+              </ComboboxItem>
+            )}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+      <Select>
+        <SelectTrigger className="w-52">
+          <SelectValue placeholder="Select a framework" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            {frameworks.map((framework) => (
+              <SelectItem key={framework} value={framework}>
+                {framework}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <Button
+        variant="outline"
+        className="text-muted-foreground w-52 justify-between font-normal"
+      >
+        Select a framework
+        <ChevronDownIcon />
+      </Button>
+      <Input placeholder="Select a framework" className="w-52" />
+      <InputGroup className="w-52">
+        <InputGroupInput placeholder="Select a framework" />
+        <InputGroupAddon align="inline-end">
+          <ChevronDownIcon />
+        </InputGroupAddon>
+      </InputGroup>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/comboxbox-input-addon.tsx b/apps/v4/examples/radix/comboxbox-input-addon.tsx
new file mode 100644
index 000000000..e7bd4c45c
--- /dev/null
+++ b/apps/v4/examples/radix/comboxbox-input-addon.tsx
@@ -0,0 +1,80 @@
+import {
+  Combobox,
+  ComboboxCollection,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+} from "@/examples/radix/ui/combobox"
+import { Input } from "@/examples/radix/ui/input"
+import { InputGroup, InputGroupAddon } from "@/examples/radix/ui/input-group"
+import { Select } from "@/examples/radix/ui/select"
+import { GlobeIcon } from "lucide-react"
+
+const timezones = [
+  {
+    value: "Americas",
+    items: [
+      "(GMT-5) New York",
+      "(GMT-8) Los Angeles",
+      "(GMT-6) Chicago",
+      "(GMT-5) Toronto",
+      "(GMT-8) Vancouver",
+      "(GMT-3) São Paulo",
+    ],
+  },
+  {
+    value: "Europe",
+    items: [
+      "(GMT+0) London",
+      "(GMT+1) Paris",
+      "(GMT+1) Berlin",
+      "(GMT+1) Rome",
+      "(GMT+1) Madrid",
+      "(GMT+1) Amsterdam",
+    ],
+  },
+  {
+    value: "Asia/Pacific",
+    items: [
+      "(GMT+9) Tokyo",
+      "(GMT+8) Shanghai",
+      "(GMT+8) Singapore",
+      "(GMT+4) Dubai",
+      "(GMT+11) Sydney",
+      "(GMT+9) Seoul",
+    ],
+  },
+] as const
+
+export function ComboxboxInputAddon() {
+  return (
+    <Combobox items={timezones}>
+      <ComboboxInput placeholder="Select a timezone">
+        <InputGroupAddon>
+          <GlobeIcon />
+        </InputGroupAddon>
+      </ComboboxInput>
+      <ComboboxContent alignOffset={-28} className="w-60">
+        <ComboboxEmpty>No timezones found.</ComboboxEmpty>
+        <ComboboxList>
+          {(group) => (
+            <ComboboxGroup key={group.value} items={group.items}>
+              <ComboboxLabel>{group.value}</ComboboxLabel>
+              <ComboboxCollection>
+                {(item) => (
+                  <ComboboxItem key={item} value={item}>
+                    {item}
+                  </ComboboxItem>
+                )}
+              </ComboboxCollection>
+            </ComboboxGroup>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
diff --git a/apps/v4/examples/radix/command-basic.tsx b/apps/v4/examples/radix/command-basic.tsx
new file mode 100644
index 000000000..fab25d251
--- /dev/null
+++ b/apps/v4/examples/radix/command-basic.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/examples/radix/ui/command"
+
+export function CommandBasic() {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Button onClick={() => setOpen(true)} variant="outline" className="w-fit">
+        Open Menu
+      </Button>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <Command>
+          <CommandInput placeholder="Type a command or search..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Suggestions">
+              <CommandItem>Calendar</CommandItem>
+              <CommandItem>Search Emoji</CommandItem>
+              <CommandItem>Calculator</CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </CommandDialog>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/command-many-items.tsx b/apps/v4/examples/radix/command-many-items.tsx
new file mode 100644
index 000000000..3ad311075
--- /dev/null
+++ b/apps/v4/examples/radix/command-many-items.tsx
@@ -0,0 +1,181 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/examples/radix/ui/command"
+import {
+  BellIcon,
+  CalculatorIcon,
+  CalendarIcon,
+  ClipboardPasteIcon,
+  CodeIcon,
+  CopyIcon,
+  CreditCardIcon,
+  FileTextIcon,
+  FolderIcon,
+  FolderPlusIcon,
+  HelpCircleIcon,
+  HomeIcon,
+  ImageIcon,
+  InboxIcon,
+  LayoutGridIcon,
+  ListIcon,
+  PlusIcon,
+  ScissorsIcon,
+  SettingsIcon,
+  TrashIcon,
+  UserIcon,
+  ZoomInIcon,
+  ZoomOutIcon,
+} from "lucide-react"
+
+export function CommandManyItems() {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Button onClick={() => setOpen(true)} variant="outline" className="w-fit">
+        Open Menu
+      </Button>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <Command>
+          <CommandInput placeholder="Type a command or search..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Navigation">
+              <CommandItem>
+                <HomeIcon />
+                <span>Home</span>
+                <CommandShortcut>⌘H</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <InboxIcon />
+                <span>Inbox</span>
+                <CommandShortcut>⌘I</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <FileTextIcon />
+                <span>Documents</span>
+                <CommandShortcut>⌘D</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <FolderIcon />
+                <span>Folders</span>
+                <CommandShortcut>⌘F</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Actions">
+              <CommandItem>
+                <PlusIcon />
+                <span>New File</span>
+                <CommandShortcut>⌘N</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <FolderPlusIcon />
+                <span>New Folder</span>
+                <CommandShortcut>⇧⌘N</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <CopyIcon />
+                <span>Copy</span>
+                <CommandShortcut>⌘C</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <ScissorsIcon />
+                <span>Cut</span>
+                <CommandShortcut>⌘X</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <ClipboardPasteIcon />
+                <span>Paste</span>
+                <CommandShortcut>⌘V</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <TrashIcon />
+                <span>Delete</span>
+                <CommandShortcut>⌫</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="View">
+              <CommandItem>
+                <LayoutGridIcon />
+                <span>Grid View</span>
+              </CommandItem>
+              <CommandItem>
+                <ListIcon />
+                <span>List View</span>
+              </CommandItem>
+              <CommandItem>
+                <ZoomInIcon />
+                <span>Zoom In</span>
+                <CommandShortcut>⌘+</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <ZoomOutIcon />
+                <span>Zoom Out</span>
+                <CommandShortcut>⌘-</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Account">
+              <CommandItem>
+                <UserIcon />
+                <span>Profile</span>
+                <CommandShortcut>⌘P</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <CreditCardIcon />
+                <span>Billing</span>
+                <CommandShortcut>⌘B</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <SettingsIcon />
+                <span>Settings</span>
+                <CommandShortcut>⌘S</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <BellIcon />
+                <span>Notifications</span>
+              </CommandItem>
+              <CommandItem>
+                <HelpCircleIcon />
+                <span>Help & Support</span>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Tools">
+              <CommandItem>
+                <CalculatorIcon />
+                <span>Calculator</span>
+              </CommandItem>
+              <CommandItem>
+                <CalendarIcon />
+                <span>Calendar</span>
+              </CommandItem>
+              <CommandItem>
+                <ImageIcon />
+                <span>Image Editor</span>
+              </CommandItem>
+              <CommandItem>
+                <CodeIcon />
+                <span>Code Editor</span>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </CommandDialog>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/command-with-groups.tsx b/apps/v4/examples/radix/command-with-groups.tsx
new file mode 100644
index 000000000..640b6ef27
--- /dev/null
+++ b/apps/v4/examples/radix/command-with-groups.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/examples/radix/ui/command"
+import {
+  CalculatorIcon,
+  CalendarIcon,
+  CreditCardIcon,
+  SettingsIcon,
+  SmileIcon,
+  UserIcon,
+} from "lucide-react"
+
+export function CommandWithGroups() {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Button onClick={() => setOpen(true)} variant="outline" className="w-fit">
+        Open Menu
+      </Button>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <Command>
+          <CommandInput placeholder="Type a command or search..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Suggestions">
+              <CommandItem>
+                <CalendarIcon />
+                <span>Calendar</span>
+              </CommandItem>
+              <CommandItem>
+                <SmileIcon />
+                <span>Search Emoji</span>
+              </CommandItem>
+              <CommandItem>
+                <CalculatorIcon />
+                <span>Calculator</span>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Settings">
+              <CommandItem>
+                <UserIcon />
+                <span>Profile</span>
+                <CommandShortcut>⌘P</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <CreditCardIcon />
+                <span>Billing</span>
+                <CommandShortcut>⌘B</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <SettingsIcon />
+                <span>Settings</span>
+                <CommandShortcut>⌘S</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </CommandDialog>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/command-with-shortcuts.tsx b/apps/v4/examples/radix/command-with-shortcuts.tsx
new file mode 100644
index 000000000..0cf1ce2f9
--- /dev/null
+++ b/apps/v4/examples/radix/command-with-shortcuts.tsx
@@ -0,0 +1,52 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from "@/examples/radix/ui/command"
+import { CreditCardIcon, SettingsIcon, UserIcon } from "lucide-react"
+
+export function CommandWithShortcuts() {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Button onClick={() => setOpen(true)} variant="outline" className="w-fit">
+        Open Menu
+      </Button>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <Command>
+          <CommandInput placeholder="Type a command or search..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Settings">
+              <CommandItem>
+                <UserIcon />
+                <span>Profile</span>
+                <CommandShortcut>⌘P</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <CreditCardIcon />
+                <span>Billing</span>
+                <CommandShortcut>⌘B</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <SettingsIcon />
+                <span>Settings</span>
+                <CommandShortcut>⌘S</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </CommandDialog>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/context-menu-basic.tsx b/apps/v4/examples/radix/context-menu-basic.tsx
new file mode 100644
index 000000000..b37b37bd0
--- /dev/null
+++ b/apps/v4/examples/radix/context-menu-basic.tsx
@@ -0,0 +1,24 @@
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/examples/radix/ui/context-menu"
+
+export function ContextMenuBasic() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuGroup>
+          <ContextMenuItem>Back</ContextMenuItem>
+          <ContextMenuItem disabled>Forward</ContextMenuItem>
+          <ContextMenuItem>Reload</ContextMenuItem>
+        </ContextMenuGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/v4/examples/radix/context-menu-in-dialog.tsx b/apps/v4/examples/radix/context-menu-in-dialog.tsx
new file mode 100644
index 000000000..8f99d1e7c
--- /dev/null
+++ b/apps/v4/examples/radix/context-menu-in-dialog.tsx
@@ -0,0 +1,87 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@/examples/radix/ui/context-menu"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/radix/ui/dialog"
+import {
+  ClipboardPasteIcon,
+  CopyIcon,
+  ScissorsIcon,
+  TrashIcon,
+} from "lucide-react"
+
+export function ContextMenuInDialog() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Context Menu Example</DialogTitle>
+          <DialogDescription>
+            Right click on the area below to see the context menu.
+          </DialogDescription>
+        </DialogHeader>
+        <ContextMenu>
+          <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+            Right click here
+          </ContextMenuTrigger>
+          <ContextMenuContent>
+            <ContextMenuGroup>
+              <ContextMenuItem>
+                <CopyIcon />
+                Copy
+              </ContextMenuItem>
+              <ContextMenuItem>
+                <ScissorsIcon />
+                Cut
+              </ContextMenuItem>
+              <ContextMenuItem>
+                <ClipboardPasteIcon />
+                Paste
+              </ContextMenuItem>
+            </ContextMenuGroup>
+            <ContextMenuSeparator />
+            <ContextMenuSub>
+              <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>
+              <ContextMenuSubContent>
+                <ContextMenuGroup>
+                  <ContextMenuItem>Save Page...</ContextMenuItem>
+                  <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+                  <ContextMenuItem>Name Window...</ContextMenuItem>
+                </ContextMenuGroup>
+                <ContextMenuSeparator />
+                <ContextMenuGroup>
+                  <ContextMenuItem>Developer Tools</ContextMenuItem>
+                </ContextMenuGroup>
+              </ContextMenuSubContent>
+            </ContextMenuSub>
+            <ContextMenuSeparator />
+            <ContextMenuGroup>
+              <ContextMenuItem variant="destructive">
+                <TrashIcon />
+                Delete
+              </ContextMenuItem>
+            </ContextMenuGroup>
+          </ContextMenuContent>
+        </ContextMenu>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/v4/examples/radix/context-menu-with-checkboxes.tsx b/apps/v4/examples/radix/context-menu-with-checkboxes.tsx
new file mode 100644
index 000000000..3e740ca2b
--- /dev/null
+++ b/apps/v4/examples/radix/context-menu-with-checkboxes.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuTrigger,
+} from "@/examples/radix/ui/context-menu"
+
+export function ContextMenuWithCheckboxes() {
+  const [showBookmarksBar, setShowBookmarksBar] = React.useState(true)
+  const [showFullUrls, setShowFullUrls] = React.useState(false)
+  const [showDeveloperTools, setShowDeveloperTools] = React.useState(false)
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuGroup>
+          <ContextMenuCheckboxItem
+            checked={showBookmarksBar}
+            onCheckedChange={setShowBookmarksBar}
+          >
+            Show Bookmarks Bar
+          </ContextMenuCheckboxItem>
+          <ContextMenuCheckboxItem
+            checked={showFullUrls}
+            onCheckedChange={setShowFullUrls}
+          >
+            Show Full URLs
+          </ContextMenuCheckboxItem>
+          <ContextMenuCheckboxItem
+            checked={showDeveloperTools}
+            onCheckedChange={setShowDeveloperTools}
+          >
+            Show Developer Tools
+          </ContextMenuCheckboxItem>
+        </ContextMenuGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/v4/examples/radix/context-menu-with-destructive.tsx b/apps/v4/examples/radix/context-menu-with-destructive.tsx
new file mode 100644
index 000000000..5275a4e5a
--- /dev/null
+++ b/apps/v4/examples/radix/context-menu-with-destructive.tsx
@@ -0,0 +1,42 @@
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/examples/radix/ui/context-menu"
+import { ArchiveIcon, PencilIcon, ShareIcon, TrashIcon } from "lucide-react"
+
+export function ContextMenuWithDestructive() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuGroup>
+          <ContextMenuItem>
+            <PencilIcon />
+            Edit
+          </ContextMenuItem>
+          <ContextMenuItem>
+            <ShareIcon />
+            Share
+          </ContextMenuItem>
+        </ContextMenuGroup>
+        <ContextMenuSeparator />
+        <ContextMenuGroup>
+          <ContextMenuItem>
+            <ArchiveIcon />
+            Archive
+          </ContextMenuItem>
+          <ContextMenuItem variant="destructive">
+            <TrashIcon />
+            Delete
+          </ContextMenuItem>
+        </ContextMenuGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/v4/examples/radix/context-menu-with-groups.tsx b/apps/v4/examples/radix/context-menu-with-groups.tsx
new file mode 100644
index 000000000..40c6b0f2c
--- /dev/null
+++ b/apps/v4/examples/radix/context-menu-with-groups.tsx
@@ -0,0 +1,69 @@
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuTrigger,
+} from "@/examples/radix/ui/context-menu"
+
+export function ContextMenuWithGroups() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuGroup>
+          <ContextMenuLabel>File</ContextMenuLabel>
+          <ContextMenuItem>
+            New File
+            <ContextMenuShortcut>⌘N</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem>
+            Open File
+            <ContextMenuShortcut>⌘O</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem>
+            Save
+            <ContextMenuShortcut>⌘S</ContextMenuShortcut>
+          </ContextMenuItem>
+        </ContextMenuGroup>
+        <ContextMenuSeparator />
+        <ContextMenuGroup>
+          <ContextMenuLabel>Edit</ContextMenuLabel>
+          <ContextMenuItem>
+            Undo
+            <ContextMenuShortcut>⌘Z</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem>
+            Redo
+            <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuSeparator />
+          <ContextMenuItem>
+            Cut
+            <ContextMenuShortcut>⌘X</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem>
+            Copy
+            <ContextMenuShortcut>⌘C</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem>
+            Paste
+            <ContextMenuShortcut>⌘V</ContextMenuShortcut>
+          </ContextMenuItem>
+        </ContextMenuGroup>
+        <ContextMenuSeparator />
+        <ContextMenuGroup>
+          <ContextMenuItem variant="destructive">
+            Delete
+            <ContextMenuShortcut>⌫</ContextMenuShortcut>
+          </ContextMenuItem>
+        </ContextMenuGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/v4/examples/radix/context-menu-with-icons.tsx b/apps/v4/examples/radix/context-menu-with-icons.tsx
new file mode 100644
index 000000000..656381a91
--- /dev/null
+++ b/apps/v4/examples/radix/context-menu-with-icons.tsx
@@ -0,0 +1,47 @@
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/examples/radix/ui/context-menu"
+import {
+  ClipboardPasteIcon,
+  CopyIcon,
+  ScissorsIcon,
+  TrashIcon,
+} from "lucide-react"
+
+export function ContextMenuWithIcons() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuGroup>
+          <ContextMenuItem>
+            <CopyIcon />
+            Copy
+          </ContextMenuItem>
+          <ContextMenuItem>
+            <ScissorsIcon />
+            Cut
+          </ContextMenuItem>
+          <ContextMenuItem>
+            <ClipboardPasteIcon />
+            Paste
+          </ContextMenuItem>
+        </ContextMenuGroup>
+        <ContextMenuSeparator />
+        <ContextMenuGroup>
+          <ContextMenuItem variant="destructive">
+            <TrashIcon />
+            Delete
+          </ContextMenuItem>
+        </ContextMenuGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/v4/examples/radix/context-menu-with-radio.tsx b/apps/v4/examples/radix/context-menu-with-radio.tsx
new file mode 100644
index 000000000..8012ecd30
--- /dev/null
+++ b/apps/v4/examples/radix/context-menu-with-radio.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/examples/radix/ui/context-menu"
+
+export function ContextMenuWithRadio() {
+  const [user, setUser] = React.useState("pedro")
+  const [theme, setTheme] = React.useState("light")
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuGroup>
+          <ContextMenuLabel>People</ContextMenuLabel>
+          <ContextMenuRadioGroup value={user} onValueChange={setUser}>
+            <ContextMenuRadioItem value="pedro">
+              Pedro Duarte
+            </ContextMenuRadioItem>
+            <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
+          </ContextMenuRadioGroup>
+        </ContextMenuGroup>
+        <ContextMenuSeparator />
+        <ContextMenuGroup>
+          <ContextMenuLabel>Theme</ContextMenuLabel>
+          <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>
+            <ContextMenuRadioItem value="light">Light</ContextMenuRadioItem>
+            <ContextMenuRadioItem value="dark">Dark</ContextMenuRadioItem>
+            <ContextMenuRadioItem value="system">System</ContextMenuRadioItem>
+          </ContextMenuRadioGroup>
+        </ContextMenuGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/v4/examples/radix/context-menu-with-shortcuts.tsx b/apps/v4/examples/radix/context-menu-with-shortcuts.tsx
new file mode 100644
index 000000000..51988f5f2
--- /dev/null
+++ b/apps/v4/examples/radix/context-menu-with-shortcuts.tsx
@@ -0,0 +1,46 @@
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuTrigger,
+} from "@/examples/radix/ui/context-menu"
+
+export function ContextMenuWithShortcuts() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuGroup>
+          <ContextMenuItem>
+            Back
+            <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem disabled>
+            Forward
+            <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem>
+            Reload
+            <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+          </ContextMenuItem>
+        </ContextMenuGroup>
+        <ContextMenuSeparator />
+        <ContextMenuGroup>
+          <ContextMenuItem>
+            Save
+            <ContextMenuShortcut>⌘S</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem>
+            Save As...
+            <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+          </ContextMenuItem>
+        </ContextMenuGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/v4/examples/radix/context-menu-with-sides.tsx b/apps/v4/examples/radix/context-menu-with-sides.tsx
new file mode 100644
index 000000000..11cfc0316
--- /dev/null
+++ b/apps/v4/examples/radix/context-menu-with-sides.tsx
@@ -0,0 +1,62 @@
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/examples/radix/ui/context-menu"
+
+export function ContextMenuWithSides() {
+  return (
+    <div className="grid grid-cols-2 gap-6">
+      <ContextMenu>
+        <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+          Right click (top)
+        </ContextMenuTrigger>
+        <ContextMenuContent side="top">
+          <ContextMenuGroup>
+            <ContextMenuItem>Back</ContextMenuItem>
+            <ContextMenuItem>Forward</ContextMenuItem>
+            <ContextMenuItem>Reload</ContextMenuItem>
+          </ContextMenuGroup>
+        </ContextMenuContent>
+      </ContextMenu>
+      <ContextMenu>
+        <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+          Right click (right)
+        </ContextMenuTrigger>
+        <ContextMenuContent side="right">
+          <ContextMenuGroup>
+            <ContextMenuItem>Back</ContextMenuItem>
+            <ContextMenuItem>Forward</ContextMenuItem>
+            <ContextMenuItem>Reload</ContextMenuItem>
+          </ContextMenuGroup>
+        </ContextMenuContent>
+      </ContextMenu>
+      <ContextMenu>
+        <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+          Right click (bottom)
+        </ContextMenuTrigger>
+        <ContextMenuContent side="bottom">
+          <ContextMenuGroup>
+            <ContextMenuItem>Back</ContextMenuItem>
+            <ContextMenuItem>Forward</ContextMenuItem>
+            <ContextMenuItem>Reload</ContextMenuItem>
+          </ContextMenuGroup>
+        </ContextMenuContent>
+      </ContextMenu>
+      <ContextMenu>
+        <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+          Right click (left)
+        </ContextMenuTrigger>
+        <ContextMenuContent side="left">
+          <ContextMenuGroup>
+            <ContextMenuItem>Back</ContextMenuItem>
+            <ContextMenuItem>Forward</ContextMenuItem>
+            <ContextMenuItem>Reload</ContextMenuItem>
+          </ContextMenuGroup>
+        </ContextMenuContent>
+      </ContextMenu>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/context-menu-with-submenu.tsx b/apps/v4/examples/radix/context-menu-with-submenu.tsx
new file mode 100644
index 000000000..bed4a5647
--- /dev/null
+++ b/apps/v4/examples/radix/context-menu-with-submenu.tsx
@@ -0,0 +1,52 @@
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@/examples/radix/ui/context-menu"
+
+export function ContextMenuWithSubmenu() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuGroup>
+          <ContextMenuItem>
+            Copy
+            <ContextMenuShortcut>⌘C</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem>
+            Cut
+            <ContextMenuShortcut>⌘X</ContextMenuShortcut>
+          </ContextMenuItem>
+        </ContextMenuGroup>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
+          <ContextMenuSubContent>
+            <ContextMenuGroup>
+              <ContextMenuItem>Save Page...</ContextMenuItem>
+              <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+              <ContextMenuItem>Name Window...</ContextMenuItem>
+            </ContextMenuGroup>
+            <ContextMenuSeparator />
+            <ContextMenuGroup>
+              <ContextMenuItem>Developer Tools</ContextMenuItem>
+            </ContextMenuGroup>
+            <ContextMenuSeparator />
+            <ContextMenuGroup>
+              <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
+            </ContextMenuGroup>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/v4/examples/radix/data-picker-with-dropdowns.tsx b/apps/v4/examples/radix/data-picker-with-dropdowns.tsx
new file mode 100644
index 000000000..6c10ce0a3
--- /dev/null
+++ b/apps/v4/examples/radix/data-picker-with-dropdowns.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/radix/ui/button"
+import { Calendar } from "@/examples/radix/ui/calendar"
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/examples/radix/ui/popover"
+import { format } from "date-fns"
+import { ChevronDownIcon } from "lucide-react"
+
+export function DataPickerWithDropdowns() {
+  const [date, setDate] = React.useState<Date>()
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <Field className="mx-auto w-72">
+      <Popover open={open} onOpenChange={setOpen}>
+        <FieldLabel htmlFor="date-picker-with-dropdowns-desktop">
+          Date
+        </FieldLabel>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="date-picker-with-dropdowns-desktop"
+            className="justify-start px-2.5 font-normal"
+          >
+            {date ? format(date, "PPP") : <span>Pick a date</span>}
+            <ChevronDownIcon className="ml-auto" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={date}
+            onSelect={setDate}
+            captionLayout="dropdown"
+          />
+          <div className="flex gap-2 border-t p-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="w-full"
+              onClick={() => setOpen(false)}
+            >
+              Done
+            </Button>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/date-picker-simple.tsx b/apps/v4/examples/radix/date-picker-simple.tsx
new file mode 100644
index 000000000..68d168742
--- /dev/null
+++ b/apps/v4/examples/radix/date-picker-simple.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/radix/ui/button"
+import { Calendar } from "@/examples/radix/ui/calendar"
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/examples/radix/ui/popover"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+
+export function DatePickerSimple() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Field className="mx-auto w-72">
+      <FieldLabel htmlFor="date-picker-simple">Date</FieldLabel>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="date-picker-simple"
+            className="justify-start px-2.5 font-normal"
+          >
+            <CalendarIcon />
+            {date ? format(date, "PPP") : <span>Pick a date</span>}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar mode="single" selected={date} onSelect={setDate} />
+        </PopoverContent>
+      </Popover>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/date-picker-with-range.tsx b/apps/v4/examples/radix/date-picker-with-range.tsx
index 67948343b..fb717deff 100644
--- a/apps/v4/examples/radix/date-picker-with-range.tsx
+++ b/apps/v4/examples/radix/date-picker-with-range.tsx
@@ -3,6 +3,7 @@
 import * as React from "react"
 import { Button } from "@/examples/radix/ui/button"
 import { Calendar } from "@/examples/radix/ui/calendar"
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
 import {
   Popover,
   PopoverContent,
@@ -12,27 +13,21 @@ import { addDays, format } from "date-fns"
 import { CalendarIcon } from "lucide-react"
 import { type DateRange } from "react-day-picker"
 
-import { cn } from "@/lib/utils"
-
-export function DatePickerWithRange({
-  className,
-}: React.HTMLAttributes<HTMLDivElement>) {
+export function DatePickerWithRange() {
   const [date, setDate] = React.useState<DateRange | undefined>({
-    from: new Date(2022, 0, 20),
-    to: addDays(new Date(2022, 0, 20), 20),
+    from: new Date(new Date().getFullYear(), 0, 20),
+    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),
   })
 
   return (
-    <div className={cn("grid gap-2", className)}>
+    <Field className="mx-auto w-72">
+      <FieldLabel htmlFor="date-picker-range">Date Picker Range</FieldLabel>
       <Popover>
         <PopoverTrigger asChild>
           <Button
-            id="date"
-            variant={"outline"}
-            className={cn(
-              "w-[300px] justify-start text-left font-normal",
-              !date && "text-muted-foreground"
-            )}
+            id="date-picker-range"
+            variant="outline"
+            className="justify-start px-2.5 font-normal"
           >
             <CalendarIcon />
             {date?.from ? (
@@ -51,7 +46,6 @@ export function DatePickerWithRange({
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align="start">
           <Calendar
-            initialFocus
             mode="range"
             defaultMonth={date?.from}
             selected={date}
@@ -60,6 +54,6 @@ export function DatePickerWithRange({
           />
         </PopoverContent>
       </Popover>
-    </div>
+    </Field>
   )
 }
diff --git a/apps/v4/examples/radix/default-item-group.tsx b/apps/v4/examples/radix/default-item-group.tsx
new file mode 100644
index 000000000..f8e00aaab
--- /dev/null
+++ b/apps/v4/examples/radix/default-item-group.tsx
@@ -0,0 +1,32 @@
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+
+export function DefaultItemGroup() {
+  return (
+    <ItemGroup>
+      <Item>
+        <ItemContent>
+          <ItemTitle>Item 1</ItemTitle>
+          <ItemDescription>First item in the group.</ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item>
+        <ItemContent>
+          <ItemTitle>Item 2</ItemTitle>
+          <ItemDescription>Second item in the group.</ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item>
+        <ItemContent>
+          <ItemTitle>Item 3</ItemTitle>
+          <ItemDescription>Third item in the group.</ItemDescription>
+        </ItemContent>
+      </Item>
+    </ItemGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/dialog-chat-settings.tsx b/apps/v4/examples/radix/dialog-chat-settings.tsx
new file mode 100644
index 000000000..a55e461ee
--- /dev/null
+++ b/apps/v4/examples/radix/dialog-chat-settings.tsx
@@ -0,0 +1,396 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/radix/ui/button"
+import { Checkbox } from "@/examples/radix/ui/checkbox"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/radix/ui/dialog"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+} from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/examples/radix/ui/input-group"
+import { Kbd } from "@/examples/radix/ui/kbd"
+import {
+  NativeSelect,
+  NativeSelectOption,
+} from "@/examples/radix/ui/native-select"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+import { Switch } from "@/examples/radix/ui/switch"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/examples/radix/ui/tabs"
+import { Textarea } from "@/examples/radix/ui/textarea"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/radix/ui/tooltip"
+import { InfoIcon } from "lucide-react"
+
+const spokenLanguages = [
+  { label: "English", value: "en" },
+  { label: "Spanish", value: "es" },
+  { label: "French", value: "fr" },
+  { label: "German", value: "de" },
+  { label: "Italian", value: "it" },
+  { label: "Portuguese", value: "pt" },
+  { label: "Russian", value: "ru" },
+  { label: "Chinese", value: "zh" },
+  { label: "Japanese", value: "ja" },
+  { label: "Korean", value: "ko" },
+  { label: "Arabic", value: "ar" },
+  { label: "Hindi", value: "hi" },
+  { label: "Bengali", value: "bn" },
+  { label: "Telugu", value: "te" },
+  { label: "Marathi", value: "mr" },
+  { label: "Kannada", value: "kn" },
+  { label: "Malayalam", value: "ml" },
+]
+
+const voices = [
+  { label: "Samantha", value: "samantha" },
+  { label: "Alex", value: "alex" },
+  { label: "Fred", value: "fred" },
+  { label: "Victoria", value: "victoria" },
+  { label: "Tom", value: "tom" },
+  { label: "Karen", value: "karen" },
+  { label: "Sam", value: "sam" },
+  { label: "Daniel", value: "daniel" },
+]
+
+export function DialogChatSettings() {
+  const [tab, setTab] = React.useState("general")
+  const [theme, setTheme] = React.useState("system")
+  const [accentColor, setAccentColor] = React.useState("default")
+  const [spokenLanguage, setSpokenLanguage] = React.useState("en")
+  const [voice, setVoice] = React.useState("samantha")
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Chat Settings</Button>
+      </DialogTrigger>
+      <DialogContent className="min-w-md">
+        <DialogHeader>
+          <DialogTitle>Chat Settings</DialogTitle>
+          <DialogDescription>
+            Customize your chat settings: theme, accent color, spoken language,
+            voice, personality, and custom instructions.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col gap-4">
+          <NativeSelect
+            value={tab}
+            onChange={(e) => setTab(e.target.value)}
+            className="w-full md:hidden"
+          >
+            <NativeSelectOption value="general">General</NativeSelectOption>
+            <NativeSelectOption value="notifications">
+              Notifications
+            </NativeSelectOption>
+            <NativeSelectOption value="personalization">
+              Personalization
+            </NativeSelectOption>
+            <NativeSelectOption value="security">Security</NativeSelectOption>
+          </NativeSelect>
+          <Tabs value={tab} onValueChange={setTab}>
+            <TabsList className="hidden w-full md:flex">
+              <TabsTrigger value="general">General</TabsTrigger>
+              <TabsTrigger value="notifications">Notifications</TabsTrigger>
+              <TabsTrigger value="personalization">Personalization</TabsTrigger>
+              <TabsTrigger value="security">Security</TabsTrigger>
+            </TabsList>
+            <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]">
+              <TabsContent value="general">
+                <FieldSet>
+                  <FieldGroup>
+                    <Field orientation="horizontal">
+                      <FieldLabel htmlFor="theme">Theme</FieldLabel>
+                      <Select value={theme} onValueChange={setTheme}>
+                        <SelectTrigger id="theme">
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent align="end">
+                          <SelectItem value="light">Light</SelectItem>
+                          <SelectItem value="dark">Dark</SelectItem>
+                          <SelectItem value="system">System</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </Field>
+                    <FieldSeparator />
+                    <Field orientation="horizontal">
+                      <FieldLabel htmlFor="accent-color">
+                        Accent Color
+                      </FieldLabel>
+                      <Select
+                        value={accentColor}
+                        onValueChange={setAccentColor}
+                      >
+                        <SelectTrigger id="accent-color">
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent align="end">
+                          <SelectItem value="default">
+                            <div className="size-3 rounded-full bg-neutral-500 dark:bg-neutral-400" />
+                            Default
+                          </SelectItem>
+                          <SelectItem value="red">
+                            <div className="size-3 rounded-full bg-red-500 dark:bg-red-400" />
+                            Red
+                          </SelectItem>
+                          <SelectItem value="blue">
+                            <div className="size-3 rounded-full bg-blue-500 dark:bg-blue-400" />
+                            Blue
+                          </SelectItem>
+                          <SelectItem value="green">
+                            <div className="size-3 rounded-full bg-green-500 dark:bg-green-400" />
+                            Green
+                          </SelectItem>
+                          <SelectItem value="purple">
+                            <div className="size-3 rounded-full bg-purple-500 dark:bg-purple-400" />
+                            Purple
+                          </SelectItem>
+                          <SelectItem value="pink">
+                            <div className="size-3 rounded-full bg-pink-500 dark:bg-pink-400" />
+                            Pink
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </Field>
+                    <FieldSeparator />
+                    <Field orientation="responsive">
+                      <FieldContent>
+                        <FieldLabel htmlFor="spoken-language">
+                          Spoken Language
+                        </FieldLabel>
+                        <FieldDescription>
+                          For best results, select the language you mainly
+                          speak. If it&apos;s not listed, it may still be
+                          supported via auto-detection.
+                        </FieldDescription>
+                      </FieldContent>
+                      <Select
+                        value={spokenLanguage}
+                        onValueChange={setSpokenLanguage}
+                      >
+                        <SelectTrigger id="spoken-language">
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent align="end" position="item-aligned">
+                          <SelectItem value="auto">Auto</SelectItem>
+                          <SelectSeparator />
+                          {spokenLanguages.map((language) => (
+                            <SelectItem
+                              key={language.value}
+                              value={language.value}
+                            >
+                              {language.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </Field>
+                    <FieldSeparator />
+                    <Field orientation="horizontal">
+                      <FieldLabel htmlFor="voice">Voice</FieldLabel>
+                      <Select value={voice} onValueChange={setVoice}>
+                        <SelectTrigger id="voice">
+                          <SelectValue placeholder="Select" />
+                        </SelectTrigger>
+                        <SelectContent align="end" position="item-aligned">
+                          {voices.map((voice) => (
+                            <SelectItem key={voice.value} value={voice.value}>
+                              {voice.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </Field>
+                  </FieldGroup>
+                </FieldSet>
+              </TabsContent>
+              <TabsContent value="notifications">
+                <FieldGroup>
+                  <FieldSet>
+                    <FieldLabel>Responses</FieldLabel>
+                    <FieldDescription>
+                      Get notified when ChatGPT responds to requests that take
+                      time, like research or image generation.
+                    </FieldDescription>
+                    <FieldGroup data-slot="checkbox-group">
+                      <Field orientation="horizontal">
+                        <Checkbox id="push" defaultChecked disabled />
+                        <FieldLabel htmlFor="push" className="font-normal">
+                          Push notifications
+                        </FieldLabel>
+                      </Field>
+                    </FieldGroup>
+                  </FieldSet>
+                  <FieldSeparator />
+                  <FieldSet>
+                    <FieldLabel>Tasks</FieldLabel>
+                    <FieldDescription>
+                      Get notified when tasks you&apos;ve created have updates.{" "}
+                      <a href="#">Manage tasks</a>
+                    </FieldDescription>
+                    <FieldGroup data-slot="checkbox-group">
+                      <Field orientation="horizontal">
+                        <Checkbox id="push-tasks" />
+                        <FieldLabel
+                          htmlFor="push-tasks"
+                          className="font-normal"
+                        >
+                          Push notifications
+                        </FieldLabel>
+                      </Field>
+                      <Field orientation="horizontal">
+                        <Checkbox id="email-tasks" />
+                        <FieldLabel
+                          htmlFor="email-tasks"
+                          className="font-normal"
+                        >
+                          Email notifications
+                        </FieldLabel>
+                      </Field>
+                    </FieldGroup>
+                  </FieldSet>
+                </FieldGroup>
+              </TabsContent>
+              <TabsContent value="personalization">
+                <FieldGroup>
+                  <Field orientation="responsive">
+                    <FieldLabel htmlFor="nickname">Nickname</FieldLabel>
+                    <InputGroup>
+                      <InputGroupInput
+                        id="nickname"
+                        placeholder="Broski"
+                        className="@md/field-group:max-w-[200px]"
+                      />
+                      <InputGroupAddon align="inline-end">
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <InputGroupButton size="icon-xs">
+                              <InfoIcon />
+                            </InputGroupButton>
+                          </TooltipTrigger>
+                          <TooltipContent className="flex items-center gap-2">
+                            Used to identify you in the chat. <Kbd>N</Kbd>
+                          </TooltipContent>
+                        </Tooltip>
+                      </InputGroupAddon>
+                    </InputGroup>
+                  </Field>
+                  <FieldSeparator />
+                  <Field
+                    orientation="responsive"
+                    className="@md/field-group:flex-col @2xl/field-group:flex-row"
+                  >
+                    <FieldContent>
+                      <FieldLabel htmlFor="about">More about you</FieldLabel>
+                      <FieldDescription>
+                        Tell us more about yourself. This will be used to help
+                        us personalize your experience.
+                      </FieldDescription>
+                    </FieldContent>
+                    <Textarea
+                      id="about"
+                      placeholder="I'm a software engineer..."
+                      className="min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]"
+                    />
+                  </Field>
+                  <FieldSeparator />
+                  <FieldLabel>
+                    <Field orientation="horizontal">
+                      <FieldContent>
+                        <FieldLabel htmlFor="customization">
+                          Enable customizations
+                        </FieldLabel>
+                        <FieldDescription>
+                          Enable customizations to make ChatGPT more
+                          personalized.
+                        </FieldDescription>
+                      </FieldContent>
+                      <Switch id="customization" defaultChecked />
+                    </Field>
+                  </FieldLabel>
+                </FieldGroup>
+              </TabsContent>
+              <TabsContent value="security">
+                <FieldGroup>
+                  <Field orientation="horizontal">
+                    <FieldContent>
+                      <FieldLabel htmlFor="2fa">
+                        Multi-factor authentication
+                      </FieldLabel>
+                      <FieldDescription>
+                        Enable multi-factor authentication to secure your
+                        account. If you do not have a two-factor authentication
+                        device, you can use a one-time code sent to your email.
+                      </FieldDescription>
+                    </FieldContent>
+                    <Switch id="2fa" />
+                  </Field>
+                  <FieldSeparator />
+                  <Field orientation="horizontal">
+                    <FieldContent>
+                      <FieldTitle>Log out</FieldTitle>
+                      <FieldDescription>
+                        Log out of your account on this device.
+                      </FieldDescription>
+                    </FieldContent>
+                    <Button variant="outline" size="sm">
+                      Log Out
+                    </Button>
+                  </Field>
+                  <FieldSeparator />
+                  <Field orientation="horizontal">
+                    <FieldContent>
+                      <FieldTitle>Log out of all devices</FieldTitle>
+                      <FieldDescription>
+                        This will log you out of all devices, including the
+                        current session. It may take up to 30 minutes for the
+                        changes to take effect.
+                      </FieldDescription>
+                    </FieldContent>
+                    <Button variant="outline" size="sm">
+                      Log Out All
+                    </Button>
+                  </Field>
+                </FieldGroup>
+              </TabsContent>
+            </div>
+          </Tabs>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/v4/examples/radix/dialog-no-close-button.tsx b/apps/v4/examples/radix/dialog-no-close-button.tsx
new file mode 100644
index 000000000..0440fa4be
--- /dev/null
+++ b/apps/v4/examples/radix/dialog-no-close-button.tsx
@@ -0,0 +1,35 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/radix/ui/dialog"
+
+export function DialogNoCloseButton() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">No Close Button</Button>
+      </DialogTrigger>
+      <DialogContent showCloseButton={false}>
+        <DialogHeader>
+          <DialogTitle>No Close Button</DialogTitle>
+          <DialogDescription>
+            This dialog doesn&apos;t have a close button in the top-right
+            corner.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Close</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/v4/examples/radix/dialog-scrollable-content.tsx b/apps/v4/examples/radix/dialog-scrollable-content.tsx
new file mode 100644
index 000000000..02253197d
--- /dev/null
+++ b/apps/v4/examples/radix/dialog-scrollable-content.tsx
@@ -0,0 +1,43 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/radix/ui/dialog"
+
+export function DialogScrollableContent() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Scrollable Content</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Scrollable Content</DialogTitle>
+          <DialogDescription>
+            This is a dialog with scrollable content.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
+          {Array.from({ length: 10 }).map((_, index) => (
+            <p
+              key={index}
+              className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/v4/examples/radix/dialog-with-form.tsx b/apps/v4/examples/radix/dialog-with-form.tsx
new file mode 100644
index 000000000..b9f8231f9
--- /dev/null
+++ b/apps/v4/examples/radix/dialog-with-form.tsx
@@ -0,0 +1,50 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/radix/ui/dialog"
+import { Field, FieldGroup, FieldLabel } from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+
+export function DialogWithForm() {
+  return (
+    <Dialog>
+      <form>
+        <DialogTrigger asChild>
+          <Button variant="outline">Edit Profile</Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit profile</DialogTitle>
+            <DialogDescription>
+              Make changes to your profile here. Click save when you&apos;re
+              done. Your profile will be updated immediately.
+            </DialogDescription>
+          </DialogHeader>
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="name-1">Name</FieldLabel>
+              <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="username-1">Username</FieldLabel>
+              <Input id="username-1" name="username" defaultValue="@peduarte" />
+            </Field>
+          </FieldGroup>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button type="submit">Save changes</Button>
+          </DialogFooter>
+        </DialogContent>
+      </form>
+    </Dialog>
+  )
+}
diff --git a/apps/v4/examples/radix/dialog-with-sticky-footer.tsx b/apps/v4/examples/radix/dialog-with-sticky-footer.tsx
new file mode 100644
index 000000000..5d6e88e7f
--- /dev/null
+++ b/apps/v4/examples/radix/dialog-with-sticky-footer.tsx
@@ -0,0 +1,50 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/radix/ui/dialog"
+
+export function DialogWithStickyFooter() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Sticky Footer</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Scrollable Content</DialogTitle>
+          <DialogDescription>
+            This is a dialog with scrollable content.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
+          {Array.from({ length: 10 }).map((_, index) => (
+            <p
+              key={index}
+              className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          ))}
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Close</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/v4/examples/radix/drawer-scrollable-content.tsx b/apps/v4/examples/radix/drawer-scrollable-content.tsx
new file mode 100644
index 000000000..c220f94a9
--- /dev/null
+++ b/apps/v4/examples/radix/drawer-scrollable-content.tsx
@@ -0,0 +1,49 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/examples/radix/ui/drawer"
+
+export function DrawerScrollableContent() {
+  return (
+    <Drawer direction="right">
+      <DrawerTrigger asChild>
+        <Button variant="outline">Scrollable Content</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Move Goal</DrawerTitle>
+          <DrawerDescription>Set your daily activity goal.</DrawerDescription>
+        </DrawerHeader>
+        <div className="no-scrollbar overflow-y-auto px-4">
+          {Array.from({ length: 10 }).map((_, index) => (
+            <p
+              key={index}
+              className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          ))}
+        </div>
+        <DrawerFooter>
+          <Button>Submit</Button>
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/apps/v4/examples/radix/drawer-with-sides.tsx b/apps/v4/examples/radix/drawer-with-sides.tsx
new file mode 100644
index 000000000..77575c666
--- /dev/null
+++ b/apps/v4/examples/radix/drawer-with-sides.tsx
@@ -0,0 +1,65 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/examples/radix/ui/drawer"
+
+const DRAWER_SIDES = ["top", "right", "bottom", "left"] as const
+
+export function DrawerWithSides() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {DRAWER_SIDES.map((side) => (
+        <Drawer
+          key={side}
+          direction={
+            side === "bottom" ? undefined : (side as "top" | "right" | "left")
+          }
+        >
+          <DrawerTrigger asChild>
+            <Button variant="outline" className="capitalize">
+              {side}
+            </Button>
+          </DrawerTrigger>
+          <DrawerContent className="data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]">
+            <DrawerHeader>
+              <DrawerTitle>Move Goal</DrawerTitle>
+              <DrawerDescription>
+                Set your daily activity goal.
+              </DrawerDescription>
+            </DrawerHeader>
+            <div className="no-scrollbar overflow-y-auto px-4">
+              {Array.from({ length: 10 }).map((_, index) => (
+                <p
+                  key={index}
+                  className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+                >
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+                  irure dolor in reprehenderit in voluptate velit esse cillum
+                  dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                  cupidatat non proident, sunt in culpa qui officia deserunt
+                  mollit anim id est laborum.
+                </p>
+              ))}
+            </div>
+            <DrawerFooter>
+              <Button>Submit</Button>
+              <DrawerClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/dropdown-menu-basic.tsx b/apps/v4/examples/radix/dropdown-menu-basic.tsx
new file mode 100644
index 000000000..f32a94344
--- /dev/null
+++ b/apps/v4/examples/radix/dropdown-menu-basic.tsx
@@ -0,0 +1,36 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/examples/radix/ui/dropdown-menu"
+
+export function DropdownMenuBasic() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="w-fit">
+          Open
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuItem>Profile</DropdownMenuItem>
+          <DropdownMenuItem>Billing</DropdownMenuItem>
+          <DropdownMenuItem>Settings</DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>GitHub</DropdownMenuItem>
+          <DropdownMenuItem>Support</DropdownMenuItem>
+          <DropdownMenuItem disabled>API</DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/v4/examples/radix/dropdown-menu-complex.tsx b/apps/v4/examples/radix/dropdown-menu-complex.tsx
new file mode 100644
index 000000000..53e6730d2
--- /dev/null
+++ b/apps/v4/examples/radix/dropdown-menu-complex.tsx
@@ -0,0 +1,290 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/examples/radix/ui/dropdown-menu"
+import {
+  BellIcon,
+  CreditCardIcon,
+  DownloadIcon,
+  EyeIcon,
+  FileCodeIcon,
+  FileIcon,
+  FileTextIcon,
+  FolderIcon,
+  FolderOpenIcon,
+  FolderSearchIcon,
+  HelpCircleIcon,
+  KeyboardIcon,
+  LanguagesIcon,
+  LayoutIcon,
+  LogOutIcon,
+  MailIcon,
+  MonitorIcon,
+  MoonIcon,
+  MoreHorizontalIcon,
+  PaletteIcon,
+  SaveIcon,
+  SettingsIcon,
+  ShieldIcon,
+  SunIcon,
+  UserIcon,
+} from "lucide-react"
+
+export function DropdownMenuComplex() {
+  const [notifications, setNotifications] = React.useState({
+    email: true,
+    sms: false,
+    push: true,
+  })
+  const [theme, setTheme] = React.useState("light")
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="w-fit">
+          Complex Menu
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>File</DropdownMenuLabel>
+          <DropdownMenuItem>
+            <FileIcon />
+            New File
+            <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <FolderIcon />
+            New Folder
+            <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              <FolderOpenIcon />
+              Open Recent
+            </DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuGroup>
+                  <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>
+                  <DropdownMenuItem>
+                    <FileCodeIcon />
+                    Project Alpha
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <FileCodeIcon />
+                    Project Beta
+                  </DropdownMenuItem>
+                  <DropdownMenuSub>
+                    <DropdownMenuSubTrigger>
+                      <MoreHorizontalIcon />
+                      More Projects
+                    </DropdownMenuSubTrigger>
+                    <DropdownMenuPortal>
+                      <DropdownMenuSubContent>
+                        <DropdownMenuItem>
+                          <FileCodeIcon />
+                          Project Gamma
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <FileCodeIcon />
+                          Project Delta
+                        </DropdownMenuItem>
+                      </DropdownMenuSubContent>
+                    </DropdownMenuPortal>
+                  </DropdownMenuSub>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  <DropdownMenuItem>
+                    <FolderSearchIcon />
+                    Browse...
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <SaveIcon />
+            Save
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <DownloadIcon />
+            Export
+            <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>View</DropdownMenuLabel>
+          <DropdownMenuCheckboxItem
+            checked={notifications.email}
+            onCheckedChange={(checked) =>
+              setNotifications({ ...notifications, email: checked === true })
+            }
+          >
+            <EyeIcon />
+            Show Sidebar
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={notifications.sms}
+            onCheckedChange={(checked) =>
+              setNotifications({ ...notifications, sms: checked === true })
+            }
+          >
+            <LayoutIcon />
+            Show Status Bar
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              <PaletteIcon />
+              Theme
+            </DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuGroup>
+                  <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+                  <DropdownMenuRadioGroup
+                    value={theme}
+                    onValueChange={setTheme}
+                  >
+                    <DropdownMenuRadioItem value="light">
+                      <SunIcon />
+                      Light
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="dark">
+                      <MoonIcon />
+                      Dark
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="system">
+                      <MonitorIcon />
+                      System
+                    </DropdownMenuRadioItem>
+                  </DropdownMenuRadioGroup>
+                </DropdownMenuGroup>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Account</DropdownMenuLabel>
+          <DropdownMenuItem>
+            <UserIcon />
+            Profile
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <CreditCardIcon />
+            Billing
+          </DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              <SettingsIcon />
+              Settings
+            </DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuGroup>
+                  <DropdownMenuLabel>Preferences</DropdownMenuLabel>
+                  <DropdownMenuItem>
+                    <KeyboardIcon />
+                    Keyboard Shortcuts
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <LanguagesIcon />
+                    Language
+                  </DropdownMenuItem>
+                  <DropdownMenuSub>
+                    <DropdownMenuSubTrigger>
+                      <BellIcon />
+                      Notifications
+                    </DropdownMenuSubTrigger>
+                    <DropdownMenuPortal>
+                      <DropdownMenuSubContent>
+                        <DropdownMenuGroup>
+                          <DropdownMenuLabel>
+                            Notification Types
+                          </DropdownMenuLabel>
+                          <DropdownMenuCheckboxItem
+                            checked={notifications.push}
+                            onCheckedChange={(checked) =>
+                              setNotifications({
+                                ...notifications,
+                                push: checked === true,
+                              })
+                            }
+                          >
+                            <BellIcon />
+                            Push Notifications
+                          </DropdownMenuCheckboxItem>
+                          <DropdownMenuCheckboxItem
+                            checked={notifications.email}
+                            onCheckedChange={(checked) =>
+                              setNotifications({
+                                ...notifications,
+                                email: checked === true,
+                              })
+                            }
+                          >
+                            <MailIcon />
+                            Email Notifications
+                          </DropdownMenuCheckboxItem>
+                        </DropdownMenuGroup>
+                      </DropdownMenuSubContent>
+                    </DropdownMenuPortal>
+                  </DropdownMenuSub>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  <DropdownMenuItem>
+                    <ShieldIcon />
+                    Privacy & Security
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <HelpCircleIcon />
+            Help & Support
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <FileTextIcon />
+            Documentation
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem variant="destructive">
+            <LogOutIcon />
+            Sign Out
+            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/v4/examples/radix/dropdown-menu-in-dialog.tsx b/apps/v4/examples/radix/dropdown-menu-in-dialog.tsx
new file mode 100644
index 000000000..1874e4291
--- /dev/null
+++ b/apps/v4/examples/radix/dropdown-menu-in-dialog.tsx
@@ -0,0 +1,92 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/radix/ui/dialog"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/examples/radix/ui/dropdown-menu"
+import {
+  ClipboardPasteIcon,
+  CopyIcon,
+  ScissorsIcon,
+  TrashIcon,
+} from "lucide-react"
+
+export function DropdownMenuInDialog() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Dropdown Menu Example</DialogTitle>
+          <DialogDescription>
+            Click the button below to see the dropdown menu.
+          </DialogDescription>
+        </DialogHeader>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="w-fit">
+              Open Menu
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <CopyIcon />
+                Copy
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <ScissorsIcon />
+                Cut
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <ClipboardPasteIcon />
+                Paste
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>
+              <DropdownMenuPortal>
+                <DropdownMenuSubContent>
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem>Save Page...</DropdownMenuItem>
+                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>
+                    <DropdownMenuItem>Name Window...</DropdownMenuItem>
+                  </DropdownMenuGroup>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>
+                  </DropdownMenuGroup>
+                </DropdownMenuSubContent>
+              </DropdownMenuPortal>
+            </DropdownMenuSub>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem variant="destructive">
+                <TrashIcon />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/v4/examples/radix/dropdown-menu-with-avatar.tsx b/apps/v4/examples/radix/dropdown-menu-with-avatar.tsx
new file mode 100644
index 000000000..1624ab40d
--- /dev/null
+++ b/apps/v4/examples/radix/dropdown-menu-with-avatar.tsx
@@ -0,0 +1,86 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/examples/radix/ui/avatar"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/examples/radix/ui/dropdown-menu"
+import {
+  BadgeCheckIcon,
+  BellIcon,
+  ChevronsUpDownIcon,
+  CreditCardIcon,
+  LogOutIcon,
+} from "lucide-react"
+
+export function DropdownMenuWithAvatar() {
+  const menuContent = (
+    <>
+      <DropdownMenuGroup>
+        <DropdownMenuItem>
+          <BadgeCheckIcon />
+          Account
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <CreditCardIcon />
+          Billing
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <BellIcon />
+          Notifications
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator />
+      <DropdownMenuGroup>
+        <DropdownMenuItem>
+          <LogOutIcon />
+          Sign Out
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+    </>
+  )
+
+  return (
+    <div className="flex items-center justify-between gap-4">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="outline"
+            className="h-12 justify-start px-2 md:max-w-[200px]"
+          >
+            <Avatar>
+              <AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
+              <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+            </Avatar>
+            <div className="grid flex-1 text-left text-sm leading-tight">
+              <span className="truncate font-semibold">shadcn</span>
+              <span className="text-muted-foreground truncate text-xs">
+                shadcn@example.com
+              </span>
+            </div>
+            <ChevronsUpDownIcon className="text-muted-foreground ml-auto" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-(--radix-dropdown-menu-trigger-width) min-w-56">
+          {menuContent}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon" className="rounded-full">
+            <Avatar>
+              <AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
+              <AvatarFallback>LR</AvatarFallback>
+            </Avatar>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" side="top">
+          {menuContent}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/dropdown-menu-with-checkboxes-icons.tsx b/apps/v4/examples/radix/dropdown-menu-with-checkboxes-icons.tsx
new file mode 100644
index 000000000..8599c47fd
--- /dev/null
+++ b/apps/v4/examples/radix/dropdown-menu-with-checkboxes-icons.tsx
@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/examples/radix/ui/dropdown-menu"
+import { BellIcon, MailIcon, MessageSquareIcon } from "lucide-react"
+
+export function DropdownMenuWithCheckboxesIcons() {
+  const [notifications, setNotifications] = React.useState({
+    email: true,
+    sms: false,
+    push: true,
+  })
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="w-fit">
+          Notifications
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="min-w-56">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>
+          <DropdownMenuCheckboxItem
+            checked={notifications.email}
+            onCheckedChange={(checked) =>
+              setNotifications({ ...notifications, email: checked === true })
+            }
+          >
+            <MailIcon />
+            Email notifications
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={notifications.sms}
+            onCheckedChange={(checked) =>
+              setNotifications({ ...notifications, sms: checked === true })
+            }
+          >
+            <MessageSquareIcon />
+            SMS notifications
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={notifications.push}
+            onCheckedChange={(checked) =>
+              setNotifications({ ...notifications, push: checked === true })
+            }
+          >
+            <BellIcon />
+            Push notifications
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/v4/examples/radix/dropdown-menu-with-checkboxes.tsx b/apps/v4/examples/radix/dropdown-menu-with-checkboxes.tsx
new file mode 100644
index 000000000..cb6fe393d
--- /dev/null
+++ b/apps/v4/examples/radix/dropdown-menu-with-checkboxes.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/examples/radix/ui/dropdown-menu"
+import { ActivityIcon, LayoutIcon, PanelLeftIcon } from "lucide-react"
+
+export function DropdownMenuWithCheckboxes() {
+  const [showStatusBar, setShowStatusBar] = React.useState(true)
+  const [showActivityBar, setShowActivityBar] = React.useState(false)
+  const [showPanel, setShowPanel] = React.useState(false)
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="w-fit">
+          Checkboxes
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="min-w-40">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+          <DropdownMenuCheckboxItem
+            checked={showStatusBar}
+            onCheckedChange={setShowStatusBar}
+          >
+            <LayoutIcon />
+            Status Bar
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={showActivityBar}
+            onCheckedChange={setShowActivityBar}
+            disabled
+          >
+            <ActivityIcon />
+            Activity Bar
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={showPanel}
+            onCheckedChange={setShowPanel}
+          >
+            <PanelLeftIcon />
+            Panel
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/v4/examples/radix/dropdown-menu-with-destructive.tsx b/apps/v4/examples/radix/dropdown-menu-with-destructive.tsx
new file mode 100644
index 000000000..ee44d8c89
--- /dev/null
+++ b/apps/v4/examples/radix/dropdown-menu-with-destructive.tsx
@@ -0,0 +1,45 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/examples/radix/ui/dropdown-menu"
+import { ArchiveIcon, PencilIcon, ShareIcon, TrashIcon } from "lucide-react"
+
+export function DropdownMenuWithDestructive() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="w-fit">
+          Actions
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <PencilIcon />
+            Edit
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <ShareIcon />
+            Share
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <ArchiveIcon />
+            Archive
+          </DropdownMenuItem>
+          <DropdownMenuItem variant="destructive">
+            <TrashIcon />
+            Delete
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/v4/examples/radix/dropdown-menu-with-icons.tsx b/apps/v4/examples/radix/dropdown-menu-with-icons.tsx
new file mode 100644
index 000000000..c132a36e7
--- /dev/null
+++ b/apps/v4/examples/radix/dropdown-menu-with-icons.tsx
@@ -0,0 +1,50 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/examples/radix/ui/dropdown-menu"
+import {
+  CreditCardIcon,
+  LogOutIcon,
+  SettingsIcon,
+  UserIcon,
+} from "lucide-react"
+
+export function DropdownMenuWithIcons() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="w-fit">
+          Open
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <UserIcon />
+            Profile
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <CreditCardIcon />
+            Billing
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <SettingsIcon />
+            Settings
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem variant="destructive">
+            <LogOutIcon />
+            Log out
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/v4/examples/radix/dropdown-menu-with-radio-icons.tsx b/apps/v4/examples/radix/dropdown-menu-with-radio-icons.tsx
new file mode 100644
index 000000000..bb52a95e3
--- /dev/null
+++ b/apps/v4/examples/radix/dropdown-menu-with-radio-icons.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/examples/radix/ui/dropdown-menu"
+import { Building2Icon, CreditCardIcon, WalletIcon } from "lucide-react"
+
+export function DropdownMenuWithRadioIcons() {
+  const [paymentMethod, setPaymentMethod] = React.useState("card")
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Payment Method</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="min-w-56">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>
+          <DropdownMenuRadioGroup
+            value={paymentMethod}
+            onValueChange={setPaymentMethod}
+          >
+            <DropdownMenuRadioItem value="card">
+              <CreditCardIcon />
+              Credit Card
+            </DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="paypal">
+              <WalletIcon />
+              PayPal
+            </DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="bank">
+              <Building2Icon />
+              Bank Transfer
+            </DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/v4/examples/radix/dropdown-menu-with-radio.tsx b/apps/v4/examples/radix/dropdown-menu-with-radio.tsx
new file mode 100644
index 000000000..42f7a0257
--- /dev/null
+++ b/apps/v4/examples/radix/dropdown-menu-with-radio.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/examples/radix/ui/dropdown-menu"
+import { ArrowDownIcon, ArrowRightIcon, ArrowUpIcon } from "lucide-react"
+
+export function DropdownMenuWithRadio() {
+  const [position, setPosition] = React.useState("bottom")
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="w-fit">
+          Radio Group
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+          <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
+            <DropdownMenuRadioItem value="top">
+              <ArrowUpIcon />
+              Top
+            </DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="bottom">
+              <ArrowDownIcon />
+              Bottom
+            </DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="right" disabled>
+              <ArrowRightIcon />
+              Right
+            </DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/v4/examples/radix/dropdown-menu-with-shortcuts.tsx b/apps/v4/examples/radix/dropdown-menu-with-shortcuts.tsx
new file mode 100644
index 000000000..86f0cbca7
--- /dev/null
+++ b/apps/v4/examples/radix/dropdown-menu-with-shortcuts.tsx
@@ -0,0 +1,51 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/examples/radix/ui/dropdown-menu"
+
+export function DropdownMenuWithShortcuts() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="w-fit">
+          Open
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuItem>
+            Profile
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Billing
+            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Settings
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Keyboard shortcuts
+            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            Log out
+            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/v4/examples/radix/dropdown-menu-with-submenu.tsx b/apps/v4/examples/radix/dropdown-menu-with-submenu.tsx
new file mode 100644
index 000000000..c4ea7c293
--- /dev/null
+++ b/apps/v4/examples/radix/dropdown-menu-with-submenu.tsx
@@ -0,0 +1,50 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/examples/radix/ui/dropdown-menu"
+
+export function DropdownMenuWithSubmenu() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="w-fit">
+          Open
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuGroup>
+          <DropdownMenuItem>Team</DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuGroup>
+                  <DropdownMenuItem>Email</DropdownMenuItem>
+                  <DropdownMenuItem>Message</DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  <DropdownMenuItem>More...</DropdownMenuItem>
+                </DropdownMenuGroup>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+          <DropdownMenuItem>
+            New Team
+            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/v4/examples/radix/empty-basic.tsx b/apps/v4/examples/radix/empty-basic.tsx
new file mode 100644
index 000000000..5de4870d7
--- /dev/null
+++ b/apps/v4/examples/radix/empty-basic.tsx
@@ -0,0 +1,36 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/examples/radix/ui/empty"
+import { ArrowUpRightIcon } from "lucide-react"
+
+export function EmptyBasic() {
+  return (
+    <Empty>
+      <EmptyHeader>
+        <EmptyTitle>No projects yet</EmptyTitle>
+        <EmptyDescription>
+          You haven&apos;t created any projects yet. Get started by creating
+          your first project.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <div className="flex gap-2">
+          <Button asChild>
+            <a href="#">Create project</a>
+          </Button>
+          <Button variant="outline">Import project</Button>
+        </div>
+        <Button variant="link" asChild className="text-muted-foreground">
+          <a href="#">
+            Learn more <ArrowUpRightIcon />
+          </a>
+        </Button>
+      </EmptyContent>
+    </Empty>
+  )
+}
diff --git a/apps/v4/examples/radix/empty-in-card.tsx b/apps/v4/examples/radix/empty-in-card.tsx
new file mode 100644
index 000000000..7919da3e6
--- /dev/null
+++ b/apps/v4/examples/radix/empty-in-card.tsx
@@ -0,0 +1,40 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/examples/radix/ui/empty"
+import { ArrowUpRightIcon, FolderIcon } from "lucide-react"
+
+export function EmptyInCard() {
+  return (
+    <Empty>
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <FolderIcon />
+        </EmptyMedia>
+        <EmptyTitle>No projects yet</EmptyTitle>
+        <EmptyDescription>
+          You haven&apos;t created any projects yet. Get started by creating
+          your first project.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <div className="flex gap-2">
+          <Button asChild>
+            <a href="#">Create project</a>
+          </Button>
+          <Button variant="outline">Import project</Button>
+        </div>
+        <Button variant="link" asChild className="text-muted-foreground">
+          <a href="#">
+            Learn more <ArrowUpRightIcon />
+          </a>
+        </Button>
+      </EmptyContent>
+    </Empty>
+  )
+}
diff --git a/apps/v4/examples/radix/empty-with-border.tsx b/apps/v4/examples/radix/empty-with-border.tsx
new file mode 100644
index 000000000..32dac3227
--- /dev/null
+++ b/apps/v4/examples/radix/empty-with-border.tsx
@@ -0,0 +1,42 @@
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/examples/radix/ui/empty"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/radix/ui/input-group"
+import { Kbd } from "@/examples/radix/ui/kbd"
+import { CircleDashedIcon } from "lucide-react"
+
+export function EmptyWithBorder() {
+  return (
+    <Empty className="border">
+      <EmptyHeader>
+        <EmptyTitle>404 - Not Found</EmptyTitle>
+        <EmptyDescription>
+          The page you&apos;re looking for doesn&apos;t exist. Try searching for
+          what you need below.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <InputGroup className="w-3/4">
+          <InputGroupInput placeholder="Try searching for pages..." />
+          <InputGroupAddon>
+            <CircleDashedIcon />
+          </InputGroupAddon>
+          <InputGroupAddon align="inline-end">
+            <Kbd>/</Kbd>
+          </InputGroupAddon>
+        </InputGroup>
+        <EmptyDescription>
+          Need help? <a href="#">Contact support</a>
+        </EmptyDescription>
+      </EmptyContent>
+    </Empty>
+  )
+}
diff --git a/apps/v4/examples/radix/empty-with-icon.tsx b/apps/v4/examples/radix/empty-with-icon.tsx
new file mode 100644
index 000000000..77bb91050
--- /dev/null
+++ b/apps/v4/examples/radix/empty-with-icon.tsx
@@ -0,0 +1,33 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/examples/radix/ui/empty"
+import { FolderIcon, PlusIcon } from "lucide-react"
+
+export function EmptyWithIcon() {
+  return (
+    <Empty className="border">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <FolderIcon />
+        </EmptyMedia>
+        <EmptyTitle>Nothing to see here</EmptyTitle>
+        <EmptyDescription>
+          No posts have been created yet. Get started by{" "}
+          <a href="#">creating your first post</a>.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button variant="outline">
+          <PlusIcon />
+          New Post
+        </Button>
+      </EmptyContent>
+    </Empty>
+  )
+}
diff --git a/apps/v4/examples/radix/empty-with-muted-background-alt.tsx b/apps/v4/examples/radix/empty-with-muted-background-alt.tsx
new file mode 100644
index 000000000..80e2142e6
--- /dev/null
+++ b/apps/v4/examples/radix/empty-with-muted-background-alt.tsx
@@ -0,0 +1,42 @@
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/examples/radix/ui/empty"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/radix/ui/input-group"
+import { Kbd } from "@/examples/radix/ui/kbd"
+import { CircleDashedIcon } from "lucide-react"
+
+export function EmptyWithMutedBackgroundAlt() {
+  return (
+    <Empty className="bg-muted/50">
+      <EmptyHeader>
+        <EmptyTitle>404 - Not Found</EmptyTitle>
+        <EmptyDescription>
+          The page you&apos;re looking for doesn&apos;t exist. Try searching for
+          what you need below.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <InputGroup className="w-3/4">
+          <InputGroupInput placeholder="Try searching for pages..." />
+          <InputGroupAddon>
+            <CircleDashedIcon />
+          </InputGroupAddon>
+          <InputGroupAddon align="inline-end">
+            <Kbd>/</Kbd>
+          </InputGroupAddon>
+        </InputGroup>
+        <EmptyDescription>
+          Need help? <a href="#">Contact support</a>
+        </EmptyDescription>
+      </EmptyContent>
+    </Empty>
+  )
+}
diff --git a/apps/v4/examples/radix/empty-with-muted-background.tsx b/apps/v4/examples/radix/empty-with-muted-background.tsx
new file mode 100644
index 000000000..631d738d7
--- /dev/null
+++ b/apps/v4/examples/radix/empty-with-muted-background.tsx
@@ -0,0 +1,30 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/examples/radix/ui/empty"
+import { ArrowUpRightIcon } from "lucide-react"
+
+export function EmptyWithMutedBackground() {
+  return (
+    <Empty className="bg-muted">
+      <EmptyHeader>
+        <EmptyTitle>No results found</EmptyTitle>
+        <EmptyDescription>
+          No results found for your search. Try adjusting your search terms.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button>Try again</Button>
+        <Button variant="link" asChild className="text-muted-foreground">
+          <a href="#">
+            Learn more <ArrowUpRightIcon />
+          </a>
+        </Button>
+      </EmptyContent>
+    </Empty>
+  )
+}
diff --git a/apps/v4/examples/radix/file-upload-list.tsx b/apps/v4/examples/radix/file-upload-list.tsx
new file mode 100644
index 000000000..aaae3af21
--- /dev/null
+++ b/apps/v4/examples/radix/file-upload-list.tsx
@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from "react"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+import { Progress } from "@/examples/radix/ui/progress"
+import { FileIcon } from "lucide-react"
+
+export function FileUploadList() {
+  const files = React.useMemo(
+    () => [
+      {
+        id: "1",
+        name: "document.pdf",
+        progress: 45,
+        timeRemaining: "2m 30s",
+      },
+      {
+        id: "2",
+        name: "presentation.pptx",
+        progress: 78,
+        timeRemaining: "45s",
+      },
+      {
+        id: "3",
+        name: "spreadsheet.xlsx",
+        progress: 12,
+        timeRemaining: "5m 12s",
+      },
+      {
+        id: "4",
+        name: "image.jpg",
+        progress: 100,
+        timeRemaining: "Complete",
+      },
+    ],
+    []
+  )
+
+  return (
+    <ItemGroup>
+      {files.map((file) => (
+        <Item key={file.id} size="xs" className="px-0">
+          <ItemMedia variant="icon">
+            <FileIcon className="size-5" />
+          </ItemMedia>
+          <ItemContent className="inline-block truncate">
+            <ItemTitle className="inline">{file.name}</ItemTitle>
+          </ItemContent>
+          <ItemContent>
+            <Progress value={file.progress} className="w-32" />
+          </ItemContent>
+          <ItemActions className="w-16 justify-end">
+            <span className="text-muted-foreground text-sm">
+              {file.timeRemaining}
+            </span>
+          </ItemActions>
+        </Item>
+      ))}
+    </ItemGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/hover-card-in-dialog.tsx b/apps/v4/examples/radix/hover-card-in-dialog.tsx
new file mode 100644
index 000000000..1399e3ffe
--- /dev/null
+++ b/apps/v4/examples/radix/hover-card-in-dialog.tsx
@@ -0,0 +1,48 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/radix/ui/dialog"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/examples/radix/ui/hover-card"
+
+export function HoverCardInDialog() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Hover Card Example</DialogTitle>
+          <DialogDescription>
+            Hover over the button below to see the hover card.
+          </DialogDescription>
+        </DialogHeader>
+        <HoverCard openDelay={100} closeDelay={100}>
+          <HoverCardTrigger asChild>
+            <Button variant="outline" className="w-fit">
+              Hover me
+            </Button>
+          </HoverCardTrigger>
+          <HoverCardContent className="w-64">
+            <div className="style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col">
+              <h4 className="font-medium">Hover Card</h4>
+              <p>
+                This hover card appears inside a dialog. Hover over the button
+                to see it.
+              </p>
+            </div>
+          </HoverCardContent>
+        </HoverCard>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/v4/examples/radix/hover-card-sides.tsx b/apps/v4/examples/radix/hover-card-sides.tsx
new file mode 100644
index 000000000..283fed02a
--- /dev/null
+++ b/apps/v4/examples/radix/hover-card-sides.tsx
@@ -0,0 +1,30 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/examples/radix/ui/hover-card"
+
+const HOVER_CARD_SIDES = ["top", "right", "bottom", "left"] as const
+
+export function HoverCardSides() {
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-4">
+      {HOVER_CARD_SIDES.map((side) => (
+        <HoverCard key={side} openDelay={100} closeDelay={100}>
+          <HoverCardTrigger asChild>
+            <Button variant="outline" className="capitalize">
+              {side}
+            </Button>
+          </HoverCardTrigger>
+          <HoverCardContent side={side} className="w-64">
+            <div className="style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col">
+              <h4 className="font-medium">Hover Card</h4>
+              <p>This hover card appears on the {side} side of the trigger.</p>
+            </div>
+          </HoverCardContent>
+        </HoverCard>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/input-basic.tsx b/apps/v4/examples/radix/input-basic.tsx
new file mode 100644
index 000000000..cd97fc12f
--- /dev/null
+++ b/apps/v4/examples/radix/input-basic.tsx
@@ -0,0 +1,5 @@
+import { Input } from "@/examples/radix/ui/input"
+
+export function InputBasic() {
+  return <Input type="email" placeholder="Email" />
+}
diff --git a/apps/v4/examples/radix/input-disabled.tsx b/apps/v4/examples/radix/input-disabled.tsx
index 01e8f7db0..70a3ba264 100644
--- a/apps/v4/examples/radix/input-disabled.tsx
+++ b/apps/v4/examples/radix/input-disabled.tsx
@@ -1,5 +1,16 @@
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
 import { Input } from "@/examples/radix/ui/input"
 
-export default function InputDisabled() {
-  return <Input disabled type="email" placeholder="Email" />
+export function InputDisabled() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="input-demo-disabled">Email</FieldLabel>
+      <Input
+        id="input-demo-disabled"
+        type="email"
+        placeholder="Email"
+        disabled
+      />
+    </Field>
+  )
 }
diff --git a/apps/v4/examples/radix/input-fields.tsx b/apps/v4/examples/radix/input-fields.tsx
new file mode 100644
index 000000000..95a9d1410
--- /dev/null
+++ b/apps/v4/examples/radix/input-fields.tsx
@@ -0,0 +1,80 @@
+import { Badge } from "@/examples/radix/ui/badge"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+
+export function InputFields() {
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="input-basic">Basic Input</FieldLabel>
+        <Input id="input-basic" placeholder="Enter text" />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-with-desc">
+          Input with Description
+        </FieldLabel>
+        <Input id="input-with-desc" placeholder="Enter your username" />
+        <FieldDescription>
+          Choose a unique username for your account.
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-desc-first">Email Address</FieldLabel>
+        <FieldDescription>
+          We&apos;ll never share your email with anyone.
+        </FieldDescription>
+        <Input
+          id="input-desc-first"
+          type="email"
+          placeholder="email@example.com"
+        />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-required">
+          Required Field <span className="text-destructive">*</span>
+        </FieldLabel>
+        <Input
+          id="input-required"
+          placeholder="This field is required"
+          required
+        />
+        <FieldDescription>This field must be filled out.</FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-disabled">Disabled Input</FieldLabel>
+        <Input id="input-disabled" placeholder="Cannot edit" disabled />
+        <FieldDescription>This field is currently disabled.</FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-badge">
+          Input with Badge{" "}
+          <Badge variant="secondary" className="ml-auto">
+            Recommended
+          </Badge>
+        </FieldLabel>
+        <Input id="input-badge" placeholder="Enter value" />
+      </Field>
+      <Field data-invalid>
+        <FieldLabel htmlFor="input-invalid">Invalid Input</FieldLabel>
+        <Input
+          id="input-invalid"
+          placeholder="This field has an error"
+          aria-invalid
+        />
+        <FieldDescription>
+          This field contains validation errors.
+        </FieldDescription>
+      </Field>
+      <Field data-disabled>
+        <FieldLabel htmlFor="input-disabled-field">Disabled Field</FieldLabel>
+        <Input id="input-disabled-field" placeholder="Cannot edit" disabled />
+        <FieldDescription>This field is currently disabled.</FieldDescription>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/input-form.tsx b/apps/v4/examples/radix/input-form.tsx
new file mode 100644
index 000000000..b23937eb4
--- /dev/null
+++ b/apps/v4/examples/radix/input-form.tsx
@@ -0,0 +1,64 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+
+export function InputForm() {
+  return (
+    <form className="w-full">
+      <FieldGroup>
+        <Field>
+          <FieldLabel htmlFor="form-name">Name</FieldLabel>
+          <Input id="form-name" type="text" placeholder="John Doe" />
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="form-email">Email</FieldLabel>
+          <Input id="form-email" type="email" placeholder="john@example.com" />
+          <FieldDescription>
+            We&apos;ll never share your email with anyone.
+          </FieldDescription>
+        </Field>
+        <div className="grid grid-cols-2 gap-4">
+          <Field>
+            <FieldLabel htmlFor="form-phone">Phone</FieldLabel>
+            <Input id="form-phone" type="tel" placeholder="+1 (555) 123-4567" />
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="form-country">Country</FieldLabel>
+            <Select defaultValue="us">
+              <SelectTrigger id="form-country">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="us">United States</SelectItem>
+                <SelectItem value="uk">United Kingdom</SelectItem>
+                <SelectItem value="ca">Canada</SelectItem>
+              </SelectContent>
+            </Select>
+          </Field>
+        </div>
+        <Field>
+          <FieldLabel htmlFor="form-address">Address</FieldLabel>
+          <Input id="form-address" type="text" placeholder="123 Main St" />
+        </Field>
+        <Field orientation="horizontal">
+          <Button type="button" variant="outline">
+            Cancel
+          </Button>
+          <Button type="submit">Submit</Button>
+        </Field>
+      </FieldGroup>
+    </form>
+  )
+}
diff --git a/apps/v4/examples/radix/input-group-basic.tsx b/apps/v4/examples/radix/input-group-basic.tsx
new file mode 100644
index 000000000..326d07e56
--- /dev/null
+++ b/apps/v4/examples/radix/input-group-basic.tsx
@@ -0,0 +1,42 @@
+import { Field, FieldGroup, FieldLabel } from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+import { InputGroup, InputGroupInput } from "@/examples/radix/ui/input-group"
+
+export function InputGroupBasic() {
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="input-default-01">
+          Default (No Input Group)
+        </FieldLabel>
+        <Input placeholder="Placeholder" id="input-default-01" />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-group-02">Input Group</FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-group-02" placeholder="Placeholder" />
+        </InputGroup>
+      </Field>
+      <Field data-disabled="true">
+        <FieldLabel htmlFor="input-disabled-03">Disabled</FieldLabel>
+        <InputGroup>
+          <InputGroupInput
+            id="input-disabled-03"
+            placeholder="This field is disabled"
+            disabled
+          />
+        </InputGroup>
+      </Field>
+      <Field data-invalid="true">
+        <FieldLabel htmlFor="input-invalid-04">Invalid</FieldLabel>
+        <InputGroup>
+          <InputGroupInput
+            id="input-invalid-04"
+            placeholder="This field is invalid"
+            aria-invalid="true"
+          />
+        </InputGroup>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/input-group-in-card.tsx b/apps/v4/examples/radix/input-group-in-card.tsx
new file mode 100644
index 000000000..dbbdb5f26
--- /dev/null
+++ b/apps/v4/examples/radix/input-group-in-card.tsx
@@ -0,0 +1,78 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/radix/ui/card"
+import { Field, FieldGroup, FieldLabel } from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@/examples/radix/ui/input-group"
+import { ExternalLinkIcon, MailIcon } from "lucide-react"
+
+export function InputGroupInCard() {
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>Card with Input Group</CardTitle>
+        <CardDescription>This is a card with an input group.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor="email-input">Email Address</FieldLabel>
+            <InputGroup>
+              <InputGroupInput
+                id="email-input"
+                type="email"
+                placeholder="you@example.com"
+              />
+              <InputGroupAddon align="inline-end">
+                <MailIcon />
+              </InputGroupAddon>
+            </InputGroup>
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="website-input">Website URL</FieldLabel>
+            <InputGroup>
+              <InputGroupAddon>
+                <InputGroupText>https://</InputGroupText>
+              </InputGroupAddon>
+              <InputGroupInput id="website-input" placeholder="example.com" />
+              <InputGroupAddon align="inline-end">
+                <ExternalLinkIcon />
+              </InputGroupAddon>
+            </InputGroup>
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="feedback-textarea">
+              Feedback & Comments
+            </FieldLabel>
+            <InputGroup>
+              <InputGroupTextarea
+                id="feedback-textarea"
+                placeholder="Share your thoughts..."
+                className="min-h-[100px]"
+              />
+              <InputGroupAddon align="block-end">
+                <InputGroupText>0/500 characters</InputGroupText>
+              </InputGroupAddon>
+            </InputGroup>
+          </Field>
+        </FieldGroup>
+      </CardContent>
+      <CardFooter className="justify-end gap-2">
+        <Button variant="outline">Cancel</Button>
+        <Button>Submit</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/input-group-textarea-examples.tsx b/apps/v4/examples/radix/input-group-textarea-examples.tsx
new file mode 100644
index 000000000..6c06cea28
--- /dev/null
+++ b/apps/v4/examples/radix/input-group-textarea-examples.tsx
@@ -0,0 +1,155 @@
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@/examples/radix/ui/input-group"
+import { Textarea } from "@/examples/radix/ui/textarea"
+import {
+  ArrowUpIcon,
+  CodeIcon,
+  CopyIcon,
+  InfoIcon,
+  RefreshCwIcon,
+} from "lucide-react"
+
+export function InputGroupTextareaExamples() {
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="textarea-header-footer-12">
+          Default Textarea (No Input Group)
+        </FieldLabel>
+        <Textarea
+          id="textarea-header-footer-12"
+          placeholder="Enter your text here..."
+        />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="textarea-header-footer-13">Input Group</FieldLabel>
+        <InputGroup>
+          <InputGroupTextarea
+            id="textarea-header-footer-13"
+            placeholder="Enter your text here..."
+          />
+        </InputGroup>
+        <FieldDescription>
+          This is a description of the input group.
+        </FieldDescription>
+      </Field>
+      <Field data-invalid="true">
+        <FieldLabel htmlFor="textarea-header-footer-14">Invalid</FieldLabel>
+        <InputGroup>
+          <InputGroupTextarea
+            id="textarea-header-footer-14"
+            placeholder="Enter your text here..."
+            aria-invalid="true"
+          />
+        </InputGroup>
+        <FieldDescription>
+          This is a description of the input group.
+        </FieldDescription>
+      </Field>
+      <Field data-disabled="true">
+        <FieldLabel htmlFor="textarea-header-footer-15">Disabled</FieldLabel>
+        <InputGroup>
+          <InputGroupTextarea
+            id="textarea-header-footer-15"
+            placeholder="Enter your text here..."
+            disabled
+          />
+        </InputGroup>
+        <FieldDescription>
+          This is a description of the input group.
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="prompt-31">Addon (block-start)</FieldLabel>
+        <InputGroup>
+          <InputGroupTextarea id="prompt-31" />
+          <InputGroupAddon align="block-start">
+            <InputGroupText>Ask, Search or Chat...</InputGroupText>
+            <InfoIcon className="text-muted-foreground ml-auto" />
+          </InputGroupAddon>
+        </InputGroup>
+        <FieldDescription>
+          This is a description of the input group.
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="textarea-header-footer-30">
+          Addon (block-end)
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupTextarea
+            id="textarea-header-footer-30"
+            placeholder="Enter your text here..."
+          />
+          <InputGroupAddon align="block-end">
+            <InputGroupText>0/280 characters</InputGroupText>
+            <InputGroupButton
+              variant="default"
+              size="icon-xs"
+              className="ml-auto rounded-full"
+            >
+              <ArrowUpIcon />
+              <span className="sr-only">Send</span>
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="textarea-comment-31">Addon (Buttons)</FieldLabel>
+        <InputGroup>
+          <InputGroupTextarea
+            id="textarea-comment-31"
+            placeholder="Share your thoughts..."
+            className="min-h-[120px]"
+          />
+          <InputGroupAddon align="block-end">
+            <InputGroupButton variant="ghost" className="ml-auto" size="sm">
+              Cancel
+            </InputGroupButton>
+            <InputGroupButton variant="default" size="sm">
+              Post Comment
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="textarea-code-32">Code Editor</FieldLabel>
+        <InputGroup>
+          <InputGroupTextarea
+            id="textarea-code-32"
+            placeholder="console.log('Hello, world!');"
+            className="min-h-[300px] py-3"
+          />
+          <InputGroupAddon align="block-start" className="border-b">
+            <InputGroupText className="font-mono font-medium">
+              <CodeIcon />
+              script.js
+            </InputGroupText>
+            <InputGroupButton size="icon-xs" className="ml-auto">
+              <RefreshCwIcon />
+            </InputGroupButton>
+            <InputGroupButton size="icon-xs" variant="ghost">
+              <CopyIcon />
+            </InputGroupButton>
+          </InputGroupAddon>
+          <InputGroupAddon align="block-end" className="border-t">
+            <InputGroupText>Line 1, Column 1</InputGroupText>
+            <InputGroupText className="ml-auto">JavaScript</InputGroupText>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/input-group-with-addons.tsx b/apps/v4/examples/radix/input-group-with-addons.tsx
new file mode 100644
index 000000000..8a7667bb7
--- /dev/null
+++ b/apps/v4/examples/radix/input-group-with-addons.tsx
@@ -0,0 +1,132 @@
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+} from "@/examples/radix/ui/input-group"
+import {
+  CopyIcon,
+  EyeOffIcon,
+  InfoIcon,
+  MicIcon,
+  RadioIcon,
+  SearchIcon,
+  StarIcon,
+} from "lucide-react"
+import { toast } from "sonner"
+
+export function InputGroupWithAddons() {
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="input-icon-left-05">
+          Addon (inline-start)
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-icon-left-05" />
+          <InputGroupAddon>
+            <SearchIcon className="text-muted-foreground" />
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-icon-right-07">
+          Addon (inline-end)
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-icon-right-07" />
+          <InputGroupAddon align="inline-end">
+            <EyeOffIcon />
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-icon-both-09">
+          Addon (inline-start and inline-end)
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-icon-both-09" />
+          <InputGroupAddon>
+            <MicIcon className="text-muted-foreground" />
+          </InputGroupAddon>
+          <InputGroupAddon align="inline-end">
+            <RadioIcon className="animate-pulse text-red-500" />
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-addon-20">Addon (block-start)</FieldLabel>
+        <InputGroup className="h-auto">
+          <InputGroupInput id="input-addon-20" />
+          <InputGroupAddon align="block-start">
+            <InputGroupText>First Name</InputGroupText>
+            <InfoIcon className="text-muted-foreground ml-auto" />
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-addon-21">Addon (block-end)</FieldLabel>
+        <InputGroup className="h-auto">
+          <InputGroupInput id="input-addon-21" />
+          <InputGroupAddon align="block-end">
+            <InputGroupText>20/240 characters</InputGroupText>
+            <InfoIcon className="text-muted-foreground ml-auto" />
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-icon-both-10">Multiple Icons</FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-icon-both-10" />
+          <InputGroupAddon align="inline-end">
+            <StarIcon />
+            <InputGroupButton
+              size="icon-xs"
+              onClick={() => toast("Copied to clipboard")}
+            >
+              <CopyIcon />
+            </InputGroupButton>
+          </InputGroupAddon>
+          <InputGroupAddon>
+            <RadioIcon className="animate-pulse text-red-500" />
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-description-10">Description</FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-description-10" />
+          <InputGroupAddon align="inline-end">
+            <InfoIcon />
+          </InputGroupAddon>
+        </InputGroup>
+        <FieldDescription>
+          This is a description of the input group.
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-label-10">Label</FieldLabel>
+        <InputGroup>
+          <InputGroupAddon>
+            <FieldLabel htmlFor="input-label-10">Label</FieldLabel>
+          </InputGroupAddon>
+          <InputGroupInput id="input-label-10" />
+        </InputGroup>
+        <InputGroup>
+          <InputGroupInput id="input-optional-12" aria-label="Optional" />
+          <InputGroupAddon align="inline-end">
+            <InputGroupText>(optional)</InputGroupText>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/input-group-with-buttons.tsx b/apps/v4/examples/radix/input-group-with-buttons.tsx
new file mode 100644
index 000000000..7915c2a19
--- /dev/null
+++ b/apps/v4/examples/radix/input-group-with-buttons.tsx
@@ -0,0 +1,60 @@
+import { Button } from "@/examples/radix/ui/button"
+import { Field, FieldGroup, FieldLabel } from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/examples/radix/ui/input-group"
+import { CopyIcon, TrashIcon } from "lucide-react"
+
+export function InputGroupWithButtons() {
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="input-button-13">Button</FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-button-13" />
+          <InputGroupAddon>
+            <InputGroupButton>Default</InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+        <InputGroup>
+          <InputGroupInput id="input-button-14" />
+          <InputGroupAddon>
+            <InputGroupButton variant="outline">Outline</InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+        <InputGroup>
+          <InputGroupInput id="input-button-15" />
+          <InputGroupAddon>
+            <InputGroupButton variant="secondary">Secondary</InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+        <InputGroup>
+          <InputGroupInput id="input-button-16" />
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton variant="secondary">Button</InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+        <InputGroup>
+          <InputGroupInput id="input-button-17" />
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton size="icon-xs">
+              <CopyIcon />
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+        <InputGroup>
+          <InputGroupInput id="input-button-18" />
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton variant="secondary" size="icon-xs">
+              <TrashIcon />
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/input-group-with-kbd.tsx b/apps/v4/examples/radix/input-group-with-kbd.tsx
new file mode 100644
index 000000000..ee0c67358
--- /dev/null
+++ b/apps/v4/examples/radix/input-group-with-kbd.tsx
@@ -0,0 +1,131 @@
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/radix/ui/input-group"
+import { Kbd, KbdGroup } from "@/examples/radix/ui/kbd"
+import { Spinner } from "@/examples/radix/ui/spinner"
+import { CheckIcon, InfoIcon, SearchIcon, SparklesIcon } from "lucide-react"
+
+export function InputGroupWithKbd() {
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="input-kbd-22">Input Group with Kbd</FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-kbd-22" />
+          <InputGroupAddon>
+            <Kbd>⌘K</Kbd>
+          </InputGroupAddon>
+        </InputGroup>
+        <InputGroup>
+          <InputGroupInput id="input-kbd-23" />
+          <InputGroupAddon align="inline-end">
+            <Kbd>⌘K</Kbd>
+          </InputGroupAddon>
+        </InputGroup>
+        <InputGroup>
+          <InputGroupInput
+            id="input-search-apps-24"
+            placeholder="Search for Apps..."
+          />
+          <InputGroupAddon align="inline-end">Ask AI</InputGroupAddon>
+          <InputGroupAddon align="inline-end">
+            <Kbd>Tab</Kbd>
+          </InputGroupAddon>
+        </InputGroup>
+        <InputGroup>
+          <InputGroupInput
+            id="input-search-type-25"
+            placeholder="Type to search..."
+          />
+          <InputGroupAddon align="inline-start">
+            <SparklesIcon />
+          </InputGroupAddon>
+          <InputGroupAddon align="inline-end">
+            <KbdGroup>
+              <Kbd>Ctrl</Kbd>
+              <Kbd>C</Kbd>
+            </KbdGroup>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-username-26">Username</FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-username-26" defaultValue="shadcn" />
+          <InputGroupAddon align="inline-end">
+            <div className="flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800">
+              <CheckIcon className="size-3 text-white" />
+            </div>
+          </InputGroupAddon>
+        </InputGroup>
+        <FieldDescription className="text-green-700">
+          This username is available.
+        </FieldDescription>
+      </Field>
+      <InputGroup>
+        <InputGroupInput
+          id="input-search-docs-27"
+          placeholder="Search documentation..."
+        />
+        <InputGroupAddon>
+          <SearchIcon />
+        </InputGroupAddon>
+        <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
+      </InputGroup>
+      <InputGroup data-disabled="true">
+        <InputGroupInput
+          id="input-search-disabled-28"
+          placeholder="Search documentation..."
+          disabled
+        />
+        <InputGroupAddon>
+          <SearchIcon />
+        </InputGroupAddon>
+        <InputGroupAddon align="inline-end">Disabled</InputGroupAddon>
+      </InputGroup>
+      <FieldGroup className="grid grid-cols-2 gap-4">
+        <Field>
+          <FieldLabel htmlFor="input-group-11">First Name</FieldLabel>
+          <InputGroup>
+            <InputGroupInput id="input-group-11" placeholder="First Name" />
+            <InputGroupAddon align="inline-end">
+              <InfoIcon />
+            </InputGroupAddon>
+          </InputGroup>
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="input-group-12">Last Name</FieldLabel>
+          <InputGroup>
+            <InputGroupInput id="input-group-12" placeholder="Last Name" />
+            <InputGroupAddon align="inline-end">
+              <InfoIcon />
+            </InputGroupAddon>
+          </InputGroup>
+        </Field>
+      </FieldGroup>
+      <Field data-disabled="true">
+        <FieldLabel htmlFor="input-group-29">
+          Loading (&quot;data-disabled=&quot;true&quot;)
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-group-29" disabled defaultValue="shadcn" />
+          <InputGroupAddon align="inline-end">
+            <Spinner />
+          </InputGroupAddon>
+        </InputGroup>
+        <FieldDescription>
+          This is a description of the input group.
+        </FieldDescription>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/input-group-with-tooltip.tsx b/apps/v4/examples/radix/input-group-with-tooltip.tsx
new file mode 100644
index 000000000..89c9821bc
--- /dev/null
+++ b/apps/v4/examples/radix/input-group-with-tooltip.tsx
@@ -0,0 +1,155 @@
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup, ButtonGroupText } from "@/examples/radix/ui/button-group"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/examples/radix/ui/dropdown-menu"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/examples/radix/ui/input-group"
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@/examples/radix/ui/popover"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/radix/ui/tooltip"
+import { ChevronDownIcon, InfoIcon, StarIcon } from "lucide-react"
+import { toast } from "sonner"
+
+export function InputGroupWithTooltip({
+  country,
+  setCountry,
+}: {
+  country: string
+  setCountry: (value: string) => void
+}) {
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="input-tooltip-20">Tooltip</FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-tooltip-20" />
+          <InputGroupAddon align="inline-end">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <InputGroupButton className="rounded-full" size="icon-xs">
+                  <InfoIcon />
+                </InputGroupButton>
+              </TooltipTrigger>
+              <TooltipContent>This is content in a tooltip.</TooltipContent>
+            </Tooltip>
+          </InputGroupAddon>
+        </InputGroup>
+        <FieldDescription>
+          This is a description of the input group.
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-dropdown-21">Dropdown</FieldLabel>
+        <InputGroup>
+          <InputGroupInput id="input-dropdown-21" />
+          <InputGroupAddon>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <InputGroupButton className="text-muted-foreground tabular-nums">
+                  {country} <ChevronDownIcon />
+                </InputGroupButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="start"
+                className="min-w-16"
+                sideOffset={10}
+                alignOffset={-8}
+              >
+                <DropdownMenuItem onClick={() => setCountry("+1")}>
+                  +1
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setCountry("+44")}>
+                  +44
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setCountry("+46")}>
+                  +46
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </InputGroupAddon>
+        </InputGroup>
+        <FieldDescription>
+          This is a description of the input group.
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-secure-19">Popover</FieldLabel>
+        <InputGroup>
+          <Popover>
+            <PopoverTrigger asChild>
+              <InputGroupAddon>
+                <InputGroupButton variant="secondary" size="icon-xs">
+                  <InfoIcon />
+                </InputGroupButton>
+              </InputGroupAddon>
+            </PopoverTrigger>
+            <PopoverContent align="start">
+              <PopoverHeader>
+                <PopoverTitle>Your connection is not secure.</PopoverTitle>
+                <PopoverDescription>
+                  You should not enter any sensitive information on this site.
+                </PopoverDescription>
+              </PopoverHeader>
+            </PopoverContent>
+          </Popover>
+          <InputGroupAddon className="text-muted-foreground pl-1">
+            https://
+          </InputGroupAddon>
+          <InputGroupInput id="input-secure-19" />
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton
+              size="icon-xs"
+              onClick={() => toast("Added to favorites")}
+            >
+              <StarIcon />
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+        <FieldDescription>
+          This is a description of the input group.
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="url">Button Group</FieldLabel>
+        <ButtonGroup>
+          <ButtonGroupText>https://</ButtonGroupText>
+          <InputGroup>
+            <InputGroupInput id="url" />
+            <InputGroupAddon align="inline-end">
+              <InfoIcon />
+            </InputGroupAddon>
+          </InputGroup>
+          <ButtonGroupText>.com</ButtonGroupText>
+        </ButtonGroup>
+        <FieldDescription>
+          This is a description of the input group.
+        </FieldDescription>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/input-invalid.tsx b/apps/v4/examples/radix/input-invalid.tsx
new file mode 100644
index 000000000..ada150fb4
--- /dev/null
+++ b/apps/v4/examples/radix/input-invalid.tsx
@@ -0,0 +1,5 @@
+import { Input } from "@/examples/radix/ui/input"
+
+export function InputInvalid() {
+  return <Input type="text" placeholder="Error" aria-invalid="true" />
+}
diff --git a/apps/v4/examples/radix/input-otp-alphanumeric.tsx b/apps/v4/examples/radix/input-otp-alphanumeric.tsx
new file mode 100644
index 000000000..277a597fb
--- /dev/null
+++ b/apps/v4/examples/radix/input-otp-alphanumeric.tsx
@@ -0,0 +1,34 @@
+import { Field, FieldDescription, FieldLabel } from "@/examples/radix/ui/field"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/examples/radix/ui/input-otp"
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
+
+export function InputOTPAlphanumeric() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="alphanumeric">Alphanumeric</FieldLabel>
+      <FieldDescription>Accepts both letters and numbers.</FieldDescription>
+      <InputOTP
+        id="alphanumeric"
+        maxLength={6}
+        pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
+      >
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/input-otp-disabled.tsx b/apps/v4/examples/radix/input-otp-disabled.tsx
new file mode 100644
index 000000000..89fb08190
--- /dev/null
+++ b/apps/v4/examples/radix/input-otp-disabled.tsx
@@ -0,0 +1,28 @@
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/examples/radix/ui/input-otp"
+
+export function InputOTPDisabled() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="disabled">Disabled</FieldLabel>
+      <InputOTP id="disabled" maxLength={6} disabled value="123456">
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/input-otp-fields.tsx b/apps/v4/examples/radix/input-otp-fields.tsx
new file mode 100644
index 000000000..c16bb51b9
--- /dev/null
+++ b/apps/v4/examples/radix/input-otp-fields.tsx
@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import { useState } from "react"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/examples/radix/ui/input-otp"
+import { REGEXP_ONLY_DIGITS } from "input-otp"
+
+export function InputOTPFields() {
+  const [value, setValue] = useState("")
+  const [pinValue, setPinValue] = useState("")
+
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="otp-basic">Verification Code</FieldLabel>
+        <InputOTP id="otp-basic" maxLength={6}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+          </InputOTPGroup>
+        </InputOTP>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="otp-with-desc">Enter OTP</FieldLabel>
+        <InputOTP
+          id="otp-with-desc"
+          maxLength={6}
+          value={value}
+          onChange={setValue}
+        >
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+          </InputOTPGroup>
+        </InputOTP>
+        <FieldDescription>
+          Enter the 6-digit code sent to your email.
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="otp-separator">
+          Two-Factor Authentication
+        </FieldLabel>
+        <InputOTP id="otp-separator" maxLength={6}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+          </InputOTPGroup>
+          <InputOTPSeparator />
+          <InputOTPGroup>
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+          </InputOTPGroup>
+        </InputOTP>
+        <FieldDescription>
+          Enter the code from your authenticator app.
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="otp-pin">PIN Code</FieldLabel>
+        <InputOTP
+          id="otp-pin"
+          maxLength={4}
+          pattern={REGEXP_ONLY_DIGITS}
+          value={pinValue}
+          onChange={setPinValue}
+        >
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+            <InputOTPSlot index={3} />
+          </InputOTPGroup>
+        </InputOTP>
+        <FieldDescription>
+          Enter your 4-digit PIN (numbers only).
+        </FieldDescription>
+      </Field>
+      <Field data-invalid>
+        <FieldLabel htmlFor="otp-invalid">Invalid OTP</FieldLabel>
+        <InputOTP id="otp-invalid" maxLength={6}>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} aria-invalid />
+            <InputOTPSlot index={1} aria-invalid />
+            <InputOTPSlot index={2} aria-invalid />
+            <InputOTPSlot index={3} aria-invalid />
+            <InputOTPSlot index={4} aria-invalid />
+            <InputOTPSlot index={5} aria-invalid />
+          </InputOTPGroup>
+        </InputOTP>
+        <FieldDescription>
+          This OTP field contains validation errors.
+        </FieldDescription>
+      </Field>
+      <Field data-disabled>
+        <FieldLabel htmlFor="otp-disabled-field">Disabled OTP</FieldLabel>
+        <InputOTP id="otp-disabled-field" maxLength={6} disabled>
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+          </InputOTPGroup>
+        </InputOTP>
+        <FieldDescription>
+          This OTP field is currently disabled.
+        </FieldDescription>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/input-otp-form.tsx b/apps/v4/examples/radix/input-otp-form.tsx
new file mode 100644
index 000000000..117f9c92f
--- /dev/null
+++ b/apps/v4/examples/radix/input-otp-form.tsx
@@ -0,0 +1,76 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/examples/radix/ui/card"
+import { Field, FieldDescription, FieldLabel } from "@/examples/radix/ui/field"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/examples/radix/ui/input-otp"
+import { RefreshCwIcon } from "lucide-react"
+
+export function InputOTPForm() {
+  return (
+    <Card className="mx-auto max-w-md">
+      <CardHeader>
+        <CardTitle>Verify your login</CardTitle>
+        <CardDescription>
+          Enter the verification code we sent to your email address:{" "}
+          <span className="font-medium">m@example.com</span>.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form>
+          <Field>
+            <div className="flex items-center justify-between">
+              <FieldLabel htmlFor="otp-verification">
+                Verification code
+              </FieldLabel>
+              <Button variant="outline" size="xs">
+                <RefreshCwIcon />
+                Resend Code
+              </Button>
+            </div>
+            <InputOTP maxLength={6} id="otp-verification" required>
+              <InputOTPGroup className="style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
+                <InputOTPSlot index={0} />
+                <InputOTPSlot index={1} />
+                <InputOTPSlot index={2} />
+              </InputOTPGroup>
+              <InputOTPSeparator />
+              <InputOTPGroup className="style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
+                <InputOTPSlot index={3} />
+                <InputOTPSlot index={4} />
+                <InputOTPSlot index={5} />
+              </InputOTPGroup>
+            </InputOTP>
+            <FieldDescription>
+              <a href="#">I no longer have access to this email address.</a>
+            </FieldDescription>
+          </Field>
+        </form>
+      </CardContent>
+      <CardFooter className="flex-col gap-2">
+        <Button type="submit" className="w-full">
+          Verify
+        </Button>
+        <div className="text-muted-foreground text-sm">
+          Having trouble signing in?{" "}
+          <a
+            href="#"
+            className="hover:text-primary underline underline-offset-4 transition-colors"
+          >
+            Contact support
+          </a>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/input-otp-four-digits.tsx b/apps/v4/examples/radix/input-otp-four-digits.tsx
new file mode 100644
index 000000000..584104198
--- /dev/null
+++ b/apps/v4/examples/radix/input-otp-four-digits.tsx
@@ -0,0 +1,24 @@
+import { Field, FieldDescription, FieldLabel } from "@/examples/radix/ui/field"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from "@/examples/radix/ui/input-otp"
+import { REGEXP_ONLY_DIGITS } from "input-otp"
+
+export function InputOTPFourDigits() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="four-digits">4 Digits</FieldLabel>
+      <FieldDescription>Common pattern for PIN codes.</FieldDescription>
+      <InputOTP id="four-digits" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+        </InputOTPGroup>
+      </InputOTP>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/input-otp-invalid.tsx b/apps/v4/examples/radix/input-otp-invalid.tsx
new file mode 100644
index 000000000..63d3c6950
--- /dev/null
+++ b/apps/v4/examples/radix/input-otp-invalid.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from "@/examples/radix/ui/field"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/examples/radix/ui/input-otp"
+
+export function InputOTPInvalid() {
+  const [value, setValue] = React.useState("000000")
+
+  return (
+    <Field>
+      <FieldLabel htmlFor="invalid">Invalid State</FieldLabel>
+      <FieldDescription>
+        Example showing the invalid error state.
+      </FieldDescription>
+      <InputOTP id="invalid" maxLength={6} value={value} onChange={setValue}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} aria-invalid />
+          <InputOTPSlot index={1} aria-invalid />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={2} aria-invalid />
+          <InputOTPSlot index={3} aria-invalid />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={4} aria-invalid />
+          <InputOTPSlot index={5} aria-invalid />
+        </InputOTPGroup>
+      </InputOTP>
+      <FieldError errors={[{ message: "Invalid code. Please try again." }]} />
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/input-otp-pattern.tsx b/apps/v4/examples/radix/input-otp-pattern.tsx
index a8af0b192..da6536ef6 100644
--- a/apps/v4/examples/radix/input-otp-pattern.tsx
+++ b/apps/v4/examples/radix/input-otp-pattern.tsx
@@ -1,23 +1,25 @@
-"use client"
-
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
 import {
   InputOTP,
   InputOTPGroup,
   InputOTPSlot,
 } from "@/examples/radix/ui/input-otp"
-import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
+import { REGEXP_ONLY_DIGITS } from "input-otp"
 
-export default function InputOTPPattern() {
+export function InputOTPPattern() {
   return (
-    <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
-      <InputOTPGroup>
-        <InputOTPSlot index={0} />
-        <InputOTPSlot index={1} />
-        <InputOTPSlot index={2} />
-        <InputOTPSlot index={3} />
-        <InputOTPSlot index={4} />
-        <InputOTPSlot index={5} />
-      </InputOTPGroup>
-    </InputOTP>
+    <Field>
+      <FieldLabel htmlFor="digits-only">Digits Only</FieldLabel>
+      <InputOTP id="digits-only" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    </Field>
   )
 }
diff --git a/apps/v4/examples/radix/input-otp-simple.tsx b/apps/v4/examples/radix/input-otp-simple.tsx
new file mode 100644
index 000000000..c06550495
--- /dev/null
+++ b/apps/v4/examples/radix/input-otp-simple.tsx
@@ -0,0 +1,28 @@
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/examples/radix/ui/input-otp"
+
+export function InputOTPSimple() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="simple">Simple</FieldLabel>
+      <InputOTP id="simple" maxLength={6}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/input-otp-with-separator.tsx b/apps/v4/examples/radix/input-otp-with-separator.tsx
new file mode 100644
index 000000000..96785b5c0
--- /dev/null
+++ b/apps/v4/examples/radix/input-otp-with-separator.tsx
@@ -0,0 +1,41 @@
+"use client"
+
+import * as React from "react"
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/examples/radix/ui/input-otp"
+
+export function InputOTPWithSeparator() {
+  const [value, setValue] = React.useState("123456")
+
+  return (
+    <Field>
+      <FieldLabel htmlFor="with-separator">With Separator</FieldLabel>
+      <InputOTP
+        id="with-separator"
+        maxLength={6}
+        value={value}
+        onChange={setValue}
+      >
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/input-types.tsx b/apps/v4/examples/radix/input-types.tsx
new file mode 100644
index 000000000..9de1ee1a3
--- /dev/null
+++ b/apps/v4/examples/radix/input-types.tsx
@@ -0,0 +1,49 @@
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+
+export function InputTypes() {
+  return (
+    <div className="flex w-full flex-col gap-6">
+      <Field>
+        <FieldLabel htmlFor="input-demo-password">Password</FieldLabel>
+        <Input
+          id="input-demo-password"
+          type="password"
+          placeholder="Password"
+        />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-demo-tel">Phone</FieldLabel>
+        <Input id="input-demo-tel" type="tel" placeholder="+1 (555) 123-4567" />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-demo-url">URL</FieldLabel>
+        <Input
+          id="input-demo-url"
+          type="url"
+          placeholder="https://example.com"
+        />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-demo-search">Search</FieldLabel>
+        <Input id="input-demo-search" type="search" placeholder="Search" />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-demo-number">Number</FieldLabel>
+        <Input id="input-demo-number" type="number" placeholder="123" />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-demo-date">Date</FieldLabel>
+        <Input id="input-demo-date" type="date" />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-demo-time">Time</FieldLabel>
+        <Input id="input-demo-time" type="time" />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="input-demo-file">File</FieldLabel>
+        <Input id="input-demo-file" type="file" />
+      </Field>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/input-with-button.tsx b/apps/v4/examples/radix/input-with-button.tsx
index 808a0abed..6491d8c2f 100644
--- a/apps/v4/examples/radix/input-with-button.tsx
+++ b/apps/v4/examples/radix/input-with-button.tsx
@@ -1,13 +1,11 @@
 import { Button } from "@/examples/radix/ui/button"
 import { Input } from "@/examples/radix/ui/input"
 
-export default function InputWithButton() {
+export function InputWithButton() {
   return (
-    <div className="flex w-full max-w-sm items-center gap-2">
-      <Input type="email" placeholder="Email" />
-      <Button type="submit" variant="outline">
-        Subscribe
-      </Button>
+    <div className="flex w-full gap-2">
+      <Input type="search" placeholder="Search..." className="flex-1" />
+      <Button>Search</Button>
     </div>
   )
 }
diff --git a/apps/v4/examples/radix/input-with-description.tsx b/apps/v4/examples/radix/input-with-description.tsx
new file mode 100644
index 000000000..97c9a50c4
--- /dev/null
+++ b/apps/v4/examples/radix/input-with-description.tsx
@@ -0,0 +1,18 @@
+import { Field, FieldDescription, FieldLabel } from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+
+export function InputWithDescription() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="input-demo-username">Username</FieldLabel>
+      <Input
+        id="input-demo-username"
+        type="text"
+        placeholder="Enter your username"
+      />
+      <FieldDescription>
+        Choose a unique username for your account.
+      </FieldDescription>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/input-with-label.tsx b/apps/v4/examples/radix/input-with-label.tsx
index cfb07acf0..5c9594701 100644
--- a/apps/v4/examples/radix/input-with-label.tsx
+++ b/apps/v4/examples/radix/input-with-label.tsx
@@ -1,11 +1,15 @@
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
 import { Input } from "@/examples/radix/ui/input"
-import { Label } from "@/examples/radix/ui/label"
 
-export default function InputWithLabel() {
+export function InputWithLabel() {
   return (
-    <div className="grid w-full max-w-sm items-center gap-3">
-      <Label htmlFor="email">Email</Label>
-      <Input type="email" id="email" placeholder="Email" />
-    </div>
+    <Field>
+      <FieldLabel htmlFor="input-demo-email">Email</FieldLabel>
+      <Input
+        id="input-demo-email"
+        type="email"
+        placeholder="name@example.com"
+      />
+    </Field>
   )
 }
diff --git a/apps/v4/examples/radix/input-with-native-select.tsx b/apps/v4/examples/radix/input-with-native-select.tsx
new file mode 100644
index 000000000..cce6e8700
--- /dev/null
+++ b/apps/v4/examples/radix/input-with-native-select.tsx
@@ -0,0 +1,19 @@
+import { Input } from "@/examples/radix/ui/input"
+import {
+  NativeSelect,
+  NativeSelectOption,
+} from "@/examples/radix/ui/native-select"
+import { Select } from "@/examples/radix/ui/select"
+
+export function InputWithNativeSelect() {
+  return (
+    <div className="flex w-full gap-2">
+      <Input type="tel" placeholder="(555) 123-4567" className="flex-1" />
+      <NativeSelect defaultValue="+1">
+        <NativeSelectOption value="+1">+1</NativeSelectOption>
+        <NativeSelectOption value="+44">+44</NativeSelectOption>
+        <NativeSelectOption value="+46">+46</NativeSelectOption>
+      </NativeSelect>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/input-with-select.tsx b/apps/v4/examples/radix/input-with-select.tsx
new file mode 100644
index 000000000..b339e4c1b
--- /dev/null
+++ b/apps/v4/examples/radix/input-with-select.tsx
@@ -0,0 +1,26 @@
+import { Input } from "@/examples/radix/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+
+export function InputWithSelect() {
+  return (
+    <div className="flex w-full gap-2">
+      <Input type="text" placeholder="Enter amount" className="flex-1" />
+      <Select defaultValue="usd">
+        <SelectTrigger className="w-32">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="usd">USD</SelectItem>
+          <SelectItem value="eur">EUR</SelectItem>
+          <SelectItem value="gbp">GBP</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/item-default-extra-small.tsx b/apps/v4/examples/radix/item-default-extra-small.tsx
new file mode 100644
index 000000000..cfdfba446
--- /dev/null
+++ b/apps/v4/examples/radix/item-default-extra-small.tsx
@@ -0,0 +1,95 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemDefaultExtraSmall() {
+  return (
+    <>
+      <Item size="xs">
+        <ItemContent>
+          <ItemTitle>Title Only</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item size="xs">
+        <ItemContent>
+          <ItemTitle>Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item size="xs">
+        <ItemContent>
+          <ItemTitle>Title + Description</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item size="xs">
+        <ItemContent>
+          <ItemTitle>Title + Description + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item size="xs">
+        <ItemContent>
+          <ItemTitle>Multiple Actions</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Cancel
+          </Button>
+          <Button size="sm">Confirm</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/item-default-small.tsx b/apps/v4/examples/radix/item-default-small.tsx
new file mode 100644
index 000000000..5807822b4
--- /dev/null
+++ b/apps/v4/examples/radix/item-default-small.tsx
@@ -0,0 +1,112 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemDefaultSmall() {
+  return (
+    <>
+      <Item size="sm">
+        <ItemContent>
+          <ItemTitle>Title Only</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item size="sm">
+        <ItemContent>
+          <ItemTitle>Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item size="sm">
+        <ItemContent>
+          <ItemTitle>Title + Description</ItemTitle>
+          <ItemDescription>
+            This is a description that provides additional context.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item size="sm">
+        <ItemContent>
+          <ItemTitle>Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            This item includes a title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description</ItemTitle>
+          <ItemDescription>
+            This item includes media, title, and description.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            Complete item with all components: media, title, description, and
+            button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item size="sm">
+        <ItemContent>
+          <ItemTitle>Multiple Actions</ItemTitle>
+          <ItemDescription>
+            Item with multiple action buttons in the actions area.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Cancel
+          </Button>
+          <Button size="sm">Confirm</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/item-default-with-image.tsx b/apps/v4/examples/radix/item-default-with-image.tsx
new file mode 100644
index 000000000..ca960d98d
--- /dev/null
+++ b/apps/v4/examples/radix/item-default-with-image.tsx
@@ -0,0 +1,74 @@
+import Image from "next/image"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+
+export function ItemDefaultWithImage() {
+  return (
+    <>
+      <Item>
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/Project"
+            alt="Project"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Project Dashboard</ItemTitle>
+          <ItemDescription>
+            Overview of project settings and configuration.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item>
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/Document"
+            alt="Document"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Document</ItemTitle>
+          <ItemDescription>A document with metadata displayed.</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            View
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item>
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/File"
+            alt="File"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>File Attachment</ItemTitle>
+          <ItemDescription>
+            Complete file with image, title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Download</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/item-default.tsx b/apps/v4/examples/radix/item-default.tsx
new file mode 100644
index 000000000..4647f9222
--- /dev/null
+++ b/apps/v4/examples/radix/item-default.tsx
@@ -0,0 +1,108 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemDefault() {
+  return (
+    <>
+      <Item>
+        <ItemContent>
+          <ItemTitle>Title Only</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item>
+        <ItemContent>
+          <ItemTitle>Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item>
+        <ItemContent>
+          <ItemTitle>Title + Description</ItemTitle>
+          <ItemDescription>
+            This is a description that provides additional context.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item>
+        <ItemContent>
+          <ItemTitle>Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            This item includes a title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item>
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item>
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item>
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description</ItemTitle>
+          <ItemDescription>
+            This item includes media, title, and description.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item>
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            Complete item with all components: media, title, description, and
+            button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item>
+        <ItemContent>
+          <ItemTitle>Multiple Actions</ItemTitle>
+          <ItemDescription>
+            Item with multiple action buttons in the actions area.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Cancel
+          </Button>
+          <Button size="sm">Confirm</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/item-footer-examples.tsx b/apps/v4/examples/radix/item-footer-examples.tsx
new file mode 100644
index 000000000..9725a7376
--- /dev/null
+++ b/apps/v4/examples/radix/item-footer-examples.tsx
@@ -0,0 +1,54 @@
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+
+export function ItemFooterExamples() {
+  return (
+    <>
+      <Item>
+        <ItemContent>
+          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>
+          <ItemDescription>
+            Financial overview including revenue, expenses, and growth metrics
+            for the fourth quarter.
+          </ItemDescription>
+        </ItemContent>
+        <ItemFooter>
+          <span className="text-muted-foreground text-sm">
+            Last updated 2 hours ago
+          </span>
+        </ItemFooter>
+      </Item>
+      <Item variant="outline">
+        <ItemContent>
+          <ItemTitle>User Research Findings</ItemTitle>
+          <ItemDescription>
+            Insights from interviews and surveys conducted with 50+ users across
+            different demographics.
+          </ItemDescription>
+        </ItemContent>
+        <ItemFooter>
+          <span className="text-muted-foreground text-sm">
+            Created by Sarah Chen
+          </span>
+        </ItemFooter>
+      </Item>
+      <Item variant="muted">
+        <ItemContent>
+          <ItemTitle>Product Roadmap</ItemTitle>
+          <ItemDescription>
+            Planned features and improvements scheduled for the next three
+            months.
+          </ItemDescription>
+        </ItemContent>
+        <ItemFooter>
+          <span className="text-muted-foreground text-sm">12 comments</span>
+        </ItemFooter>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/item-header-and-footer-examples.tsx b/apps/v4/examples/radix/item-header-and-footer-examples.tsx
new file mode 100644
index 000000000..62e7ae475
--- /dev/null
+++ b/apps/v4/examples/radix/item-header-and-footer-examples.tsx
@@ -0,0 +1,66 @@
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemHeader,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+
+export function ItemHeaderAndFooterExamples() {
+  return (
+    <>
+      <Item>
+        <ItemHeader>
+          <span className="text-sm font-medium">Team Project</span>
+        </ItemHeader>
+        <ItemContent>
+          <ItemTitle>Website Redesign</ItemTitle>
+          <ItemDescription>
+            Complete overhaul of the company website with modern design
+            principles and improved user experience.
+          </ItemDescription>
+        </ItemContent>
+        <ItemFooter>
+          <span className="text-muted-foreground text-sm">
+            Updated 5 minutes ago
+          </span>
+        </ItemFooter>
+      </Item>
+      <Item variant="outline">
+        <ItemHeader>
+          <span className="text-sm font-medium">Client Work</span>
+        </ItemHeader>
+        <ItemContent>
+          <ItemTitle>Mobile App Development</ItemTitle>
+          <ItemDescription>
+            Building a cross-platform mobile application for iOS and Android
+            with React Native.
+          </ItemDescription>
+        </ItemContent>
+        <ItemFooter>
+          <span className="text-muted-foreground text-sm">
+            Status: In Progress
+          </span>
+        </ItemFooter>
+      </Item>
+      <Item variant="muted">
+        <ItemHeader>
+          <span className="text-sm font-medium">Documentation</span>
+        </ItemHeader>
+        <ItemContent>
+          <ItemTitle>API Integration Guide</ItemTitle>
+          <ItemDescription>
+            Step-by-step instructions for integrating third-party APIs with
+            authentication and error handling.
+          </ItemDescription>
+        </ItemContent>
+        <ItemFooter>
+          <span className="text-muted-foreground text-sm">
+            Category: Technical • 3 attachments
+          </span>
+        </ItemFooter>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/item-header-examples.tsx b/apps/v4/examples/radix/item-header-examples.tsx
new file mode 100644
index 000000000..3c159e323
--- /dev/null
+++ b/apps/v4/examples/radix/item-header-examples.tsx
@@ -0,0 +1,50 @@
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemHeader,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+
+export function ItemHeaderExamples() {
+  return (
+    <>
+      <Item>
+        <ItemHeader>
+          <span className="text-sm font-medium">Design System</span>
+        </ItemHeader>
+        <ItemContent>
+          <ItemTitle>Component Library</ItemTitle>
+          <ItemDescription>
+            A comprehensive collection of reusable UI components for building
+            consistent interfaces.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline">
+        <ItemHeader>
+          <span className="text-sm font-medium">Marketing</span>
+        </ItemHeader>
+        <ItemContent>
+          <ItemTitle>Campaign Analytics</ItemTitle>
+          <ItemDescription>
+            Track performance metrics and engagement rates across all marketing
+            channels.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="muted">
+        <ItemHeader>
+          <span className="text-sm font-medium">Engineering</span>
+        </ItemHeader>
+        <ItemContent>
+          <ItemTitle>API Documentation</ItemTitle>
+          <ItemDescription>
+            Complete reference guide for all available endpoints and
+            authentication methods.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/item-link-default.tsx b/apps/v4/examples/radix/item-link-default.tsx
new file mode 100644
index 000000000..55d8216bb
--- /dev/null
+++ b/apps/v4/examples/radix/item-link-default.tsx
@@ -0,0 +1,73 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemLinkDefault() {
+  return (
+    <ItemGroup>
+      <Item asChild>
+        <a href="#">
+          <ItemContent>
+            <ItemTitle>Title Only (Link)</ItemTitle>
+          </ItemContent>
+        </a>
+      </Item>
+      <Item asChild>
+        <a href="#">
+          <ItemContent>
+            <ItemTitle>Title + Description (Link)</ItemTitle>
+            <ItemDescription>
+              Clickable item with title and description.
+            </ItemDescription>
+          </ItemContent>
+        </a>
+      </Item>
+      <Item asChild>
+        <a href="#">
+          <ItemMedia variant="icon">
+            <InboxIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Media + Title (Link)</ItemTitle>
+          </ItemContent>
+        </a>
+      </Item>
+      <Item asChild>
+        <a href="#">
+          <ItemMedia variant="icon">
+            <InboxIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Media + Title + Description (Link)</ItemTitle>
+            <ItemDescription>
+              Complete link item with media, title, and description.
+            </ItemDescription>
+          </ItemContent>
+        </a>
+      </Item>
+      <Item asChild>
+        <a href="#">
+          <ItemContent>
+            <ItemTitle>With Actions (Link)</ItemTitle>
+            <ItemDescription>
+              Link item that also has action buttons.
+            </ItemDescription>
+          </ItemContent>
+          <ItemActions>
+            <Button variant="outline" size="sm">
+              Share
+            </Button>
+          </ItemActions>
+        </a>
+      </Item>
+    </ItemGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/item-link-muted.tsx b/apps/v4/examples/radix/item-link-muted.tsx
new file mode 100644
index 000000000..e7472c2f3
--- /dev/null
+++ b/apps/v4/examples/radix/item-link-muted.tsx
@@ -0,0 +1,73 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemLinkMuted() {
+  return (
+    <ItemGroup>
+      <Item variant="muted" asChild>
+        <a href="#">
+          <ItemContent>
+            <ItemTitle>Title Only (Link)</ItemTitle>
+          </ItemContent>
+        </a>
+      </Item>
+      <Item variant="muted" asChild>
+        <a href="#">
+          <ItemContent>
+            <ItemTitle>Title + Description (Link)</ItemTitle>
+            <ItemDescription>
+              Clickable item with title and description.
+            </ItemDescription>
+          </ItemContent>
+        </a>
+      </Item>
+      <Item variant="muted" asChild>
+        <a href="#">
+          <ItemMedia variant="icon">
+            <InboxIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Media + Title (Link)</ItemTitle>
+          </ItemContent>
+        </a>
+      </Item>
+      <Item variant="muted" asChild>
+        <a href="#">
+          <ItemMedia variant="icon">
+            <InboxIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Media + Title + Description (Link)</ItemTitle>
+            <ItemDescription>
+              Complete link item with media, title, and description.
+            </ItemDescription>
+          </ItemContent>
+        </a>
+      </Item>
+      <Item variant="muted" asChild>
+        <a href="#">
+          <ItemContent>
+            <ItemTitle>With Actions (Link)</ItemTitle>
+            <ItemDescription>
+              Link item that also has action buttons.
+            </ItemDescription>
+          </ItemContent>
+          <ItemActions>
+            <Button variant="outline" size="sm">
+              Share
+            </Button>
+          </ItemActions>
+        </a>
+      </Item>
+    </ItemGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/item-link-outline.tsx b/apps/v4/examples/radix/item-link-outline.tsx
new file mode 100644
index 000000000..c67504084
--- /dev/null
+++ b/apps/v4/examples/radix/item-link-outline.tsx
@@ -0,0 +1,73 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemLinkOutline() {
+  return (
+    <ItemGroup>
+      <Item variant="outline" asChild>
+        <a href="#">
+          <ItemContent>
+            <ItemTitle>Title Only (Link)</ItemTitle>
+          </ItemContent>
+        </a>
+      </Item>
+      <Item variant="outline" asChild>
+        <a href="#">
+          <ItemContent>
+            <ItemTitle>Title + Description (Link)</ItemTitle>
+            <ItemDescription>
+              Clickable item with title and description.
+            </ItemDescription>
+          </ItemContent>
+        </a>
+      </Item>
+      <Item variant="outline" asChild>
+        <a href="#">
+          <ItemMedia variant="icon">
+            <InboxIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Media + Title (Link)</ItemTitle>
+          </ItemContent>
+        </a>
+      </Item>
+      <Item variant="outline" asChild>
+        <a href="#">
+          <ItemMedia variant="icon">
+            <InboxIcon />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Media + Title + Description (Link)</ItemTitle>
+            <ItemDescription>
+              Complete link item with media, title, and description.
+            </ItemDescription>
+          </ItemContent>
+        </a>
+      </Item>
+      <Item variant="outline" asChild>
+        <a href="#">
+          <ItemContent>
+            <ItemTitle>With Actions (Link)</ItemTitle>
+            <ItemDescription>
+              Link item that also has action buttons.
+            </ItemDescription>
+          </ItemContent>
+          <ItemActions>
+            <Button variant="outline" size="sm">
+              Share
+            </Button>
+          </ItemActions>
+        </a>
+      </Item>
+    </ItemGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/item-muted-extra-small.tsx b/apps/v4/examples/radix/item-muted-extra-small.tsx
new file mode 100644
index 000000000..d29e1d3dc
--- /dev/null
+++ b/apps/v4/examples/radix/item-muted-extra-small.tsx
@@ -0,0 +1,95 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemMutedExtraSmall() {
+  return (
+    <>
+      <Item variant="muted" size="xs">
+        <ItemContent>
+          <ItemTitle>Title Only</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="muted" size="xs">
+        <ItemContent>
+          <ItemTitle>Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted" size="xs">
+        <ItemContent>
+          <ItemTitle>Title + Description</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="muted" size="xs">
+        <ItemContent>
+          <ItemTitle>Title + Description + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted" size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="muted" size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted" size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="muted" size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted" size="xs">
+        <ItemContent>
+          <ItemTitle>Multiple Actions</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Cancel
+          </Button>
+          <Button size="sm">Confirm</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/item-muted-small.tsx b/apps/v4/examples/radix/item-muted-small.tsx
new file mode 100644
index 000000000..43fcd0d5f
--- /dev/null
+++ b/apps/v4/examples/radix/item-muted-small.tsx
@@ -0,0 +1,112 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemMutedSmall() {
+  return (
+    <>
+      <Item variant="muted" size="sm">
+        <ItemContent>
+          <ItemTitle>Title Only</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="muted" size="sm">
+        <ItemContent>
+          <ItemTitle>Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted" size="sm">
+        <ItemContent>
+          <ItemTitle>Title + Description</ItemTitle>
+          <ItemDescription>
+            This is a description that provides additional context.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="muted" size="sm">
+        <ItemContent>
+          <ItemTitle>Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            This item includes a title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted" size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="muted" size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted" size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description</ItemTitle>
+          <ItemDescription>
+            This item includes media, title, and description.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="muted" size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            Complete item with all components: media, title, description, and
+            button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted" size="sm">
+        <ItemContent>
+          <ItemTitle>Multiple Actions</ItemTitle>
+          <ItemDescription>
+            Item with multiple action buttons in the actions area.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Cancel
+          </Button>
+          <Button size="sm">Confirm</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/item-muted-with-image.tsx b/apps/v4/examples/radix/item-muted-with-image.tsx
new file mode 100644
index 000000000..ac6a7c7f4
--- /dev/null
+++ b/apps/v4/examples/radix/item-muted-with-image.tsx
@@ -0,0 +1,74 @@
+import Image from "next/image"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+
+export function ItemMutedWithImage() {
+  return (
+    <>
+      <Item variant="muted">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/Project"
+            alt="Project"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Project Dashboard</ItemTitle>
+          <ItemDescription>
+            Overview of project settings and configuration.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="muted">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/Document"
+            alt="Document"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Document</ItemTitle>
+          <ItemDescription>A document with metadata displayed.</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            View
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/File"
+            alt="File"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>File Attachment</ItemTitle>
+          <ItemDescription>
+            Complete file with image, title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Download</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/item-muted.tsx b/apps/v4/examples/radix/item-muted.tsx
new file mode 100644
index 000000000..f32e1466d
--- /dev/null
+++ b/apps/v4/examples/radix/item-muted.tsx
@@ -0,0 +1,108 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function MutedVariantItems() {
+  return (
+    <>
+      <Item variant="muted">
+        <ItemContent>
+          <ItemTitle>Title Only</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="muted">
+        <ItemContent>
+          <ItemTitle>Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted">
+        <ItemContent>
+          <ItemTitle>Title + Description</ItemTitle>
+          <ItemDescription>
+            This is a description that provides additional context.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="muted">
+        <ItemContent>
+          <ItemTitle>Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            This item includes a title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="muted">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description</ItemTitle>
+          <ItemDescription>
+            This item includes media, title, and description.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="muted">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            Complete item with all components: media, title, description, and
+            button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted">
+        <ItemContent>
+          <ItemTitle>Multiple Actions</ItemTitle>
+          <ItemDescription>
+            Item with multiple action buttons in the actions area.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Cancel
+          </Button>
+          <Button size="sm">Confirm</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/item-outline-extra-small.tsx b/apps/v4/examples/radix/item-outline-extra-small.tsx
new file mode 100644
index 000000000..dff3636f8
--- /dev/null
+++ b/apps/v4/examples/radix/item-outline-extra-small.tsx
@@ -0,0 +1,95 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemOutlineExtraSmall() {
+  return (
+    <>
+      <Item variant="outline" size="xs">
+        <ItemContent>
+          <ItemTitle>Title Only</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" size="xs">
+        <ItemContent>
+          <ItemTitle>Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="xs">
+        <ItemContent>
+          <ItemTitle>Title + Description</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" size="xs">
+        <ItemContent>
+          <ItemTitle>Title + Description + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" size="xs">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="xs">
+        <ItemContent>
+          <ItemTitle>Multiple Actions</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Cancel
+          </Button>
+          <Button size="sm">Confirm</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/item-outline-small.tsx b/apps/v4/examples/radix/item-outline-small.tsx
new file mode 100644
index 000000000..f9443228b
--- /dev/null
+++ b/apps/v4/examples/radix/item-outline-small.tsx
@@ -0,0 +1,112 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemOutlineSmall() {
+  return (
+    <>
+      <Item variant="outline" size="sm">
+        <ItemContent>
+          <ItemTitle>Title Only</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" size="sm">
+        <ItemContent>
+          <ItemTitle>Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="sm">
+        <ItemContent>
+          <ItemTitle>Title + Description</ItemTitle>
+          <ItemDescription>
+            This is a description that provides additional context.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" size="sm">
+        <ItemContent>
+          <ItemTitle>Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            This item includes a title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description</ItemTitle>
+          <ItemDescription>
+            This item includes media, title, and description.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" size="sm">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            Complete item with all components: media, title, description, and
+            button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="sm">
+        <ItemContent>
+          <ItemTitle>Multiple Actions</ItemTitle>
+          <ItemDescription>
+            Item with multiple action buttons in the actions area.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Cancel
+          </Button>
+          <Button size="sm">Confirm</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/item-outline-with-image-extra-small.tsx b/apps/v4/examples/radix/item-outline-with-image-extra-small.tsx
new file mode 100644
index 000000000..af8e13b90
--- /dev/null
+++ b/apps/v4/examples/radix/item-outline-with-image-extra-small.tsx
@@ -0,0 +1,66 @@
+import Image from "next/image"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+
+export function ItemOutlineWithImageExtraSmall() {
+  return (
+    <>
+      <Item variant="outline" size="xs">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/Project"
+            alt="Project"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Project Dashboard</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" size="xs">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/Document"
+            alt="Document"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Document</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            View
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="xs">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/File"
+            alt="File"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>File Attachment</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Download</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/item-outline-with-image-small.tsx b/apps/v4/examples/radix/item-outline-with-image-small.tsx
new file mode 100644
index 000000000..82a479096
--- /dev/null
+++ b/apps/v4/examples/radix/item-outline-with-image-small.tsx
@@ -0,0 +1,74 @@
+import Image from "next/image"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+
+export function ItemOutlineWithImageSmall() {
+  return (
+    <>
+      <Item variant="outline" size="sm">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/Project"
+            alt="Project"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Project Dashboard</ItemTitle>
+          <ItemDescription>
+            Overview of project settings and configuration.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline" size="sm">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/Document"
+            alt="Document"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Document</ItemTitle>
+          <ItemDescription>A document with metadata displayed.</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            View
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="sm">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/File"
+            alt="File"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>File Attachment</ItemTitle>
+          <ItemDescription>
+            Complete file with image, title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Download</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/item-outline-with-image.tsx b/apps/v4/examples/radix/item-outline-with-image.tsx
new file mode 100644
index 000000000..513ee7c7a
--- /dev/null
+++ b/apps/v4/examples/radix/item-outline-with-image.tsx
@@ -0,0 +1,74 @@
+import Image from "next/image"
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+
+export function OutlineVariantItemsWithImage() {
+  return (
+    <>
+      <Item variant="outline">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/Project"
+            alt="Project"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Project Dashboard</ItemTitle>
+          <ItemDescription>
+            Overview of project settings and configuration.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/Document"
+            alt="Document"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Document</ItemTitle>
+          <ItemDescription>A document with metadata displayed.</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            View
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline">
+        <ItemMedia variant="image">
+          <Image
+            src="https://avatar.vercel.sh/File"
+            alt="File"
+            width={40}
+            height={40}
+            className="object-cover grayscale"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>File Attachment</ItemTitle>
+          <ItemDescription>
+            Complete file with image, title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Download</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/item-outline.tsx b/apps/v4/examples/radix/item-outline.tsx
new file mode 100644
index 000000000..6b5e03e48
--- /dev/null
+++ b/apps/v4/examples/radix/item-outline.tsx
@@ -0,0 +1,108 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function OutlineVariantItems() {
+  return (
+    <>
+      <Item variant="outline">
+        <ItemContent>
+          <ItemTitle>Title Only</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="outline">
+        <ItemContent>
+          <ItemTitle>Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline">
+        <ItemContent>
+          <ItemTitle>Title + Description</ItemTitle>
+          <ItemDescription>
+            This is a description that provides additional context.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline">
+        <ItemContent>
+          <ItemTitle>Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            This item includes a title, description, and action button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title</ItemTitle>
+        </ItemContent>
+      </Item>
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Button</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description</ItemTitle>
+          <ItemDescription>
+            This item includes media, title, and description.
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Media + Title + Description + Button</ItemTitle>
+          <ItemDescription>
+            Complete item with all components: media, title, description, and
+            button.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Action</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline">
+        <ItemContent>
+          <ItemTitle>Multiple Actions</ItemTitle>
+          <ItemDescription>
+            Item with multiple action buttons in the actions area.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Cancel
+          </Button>
+          <Button size="sm">Confirm</Button>
+        </ItemActions>
+      </Item>
+    </>
+  )
+}
diff --git a/apps/v4/examples/radix/item-separator-example.tsx b/apps/v4/examples/radix/item-separator-example.tsx
new file mode 100644
index 000000000..fbf048b7b
--- /dev/null
+++ b/apps/v4/examples/radix/item-separator-example.tsx
@@ -0,0 +1,56 @@
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function ItemSeparatorExample() {
+  return (
+    <ItemGroup>
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Inbox</ItemTitle>
+          <ItemDescription>View all incoming messages.</ItemDescription>
+        </ItemContent>
+      </Item>
+      <ItemSeparator />
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Sent</ItemTitle>
+          <ItemDescription>View all sent messages.</ItemDescription>
+        </ItemContent>
+      </Item>
+      <ItemSeparator />
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Drafts</ItemTitle>
+          <ItemDescription>View all draft messages.</ItemDescription>
+        </ItemContent>
+      </Item>
+      <ItemSeparator />
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Archive</ItemTitle>
+          <ItemDescription>View archived messages.</ItemDescription>
+        </ItemContent>
+      </Item>
+    </ItemGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/kbd-arrow-keys.tsx b/apps/v4/examples/radix/kbd-arrow-keys.tsx
new file mode 100644
index 000000000..6d0f8a323
--- /dev/null
+++ b/apps/v4/examples/radix/kbd-arrow-keys.tsx
@@ -0,0 +1,12 @@
+import { Kbd } from "@/examples/radix/ui/kbd"
+
+export function KbdArrowKeys() {
+  return (
+    <div className="flex items-center gap-2">
+      <Kbd>↑</Kbd>
+      <Kbd>↓</Kbd>
+      <Kbd>←</Kbd>
+      <Kbd>→</Kbd>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/kbd-basic.tsx b/apps/v4/examples/radix/kbd-basic.tsx
new file mode 100644
index 000000000..fa833c865
--- /dev/null
+++ b/apps/v4/examples/radix/kbd-basic.tsx
@@ -0,0 +1,11 @@
+import { Kbd } from "@/examples/radix/ui/kbd"
+
+export function KbdBasic() {
+  return (
+    <div className="flex items-center gap-2">
+      <Kbd>Ctrl</Kbd>
+      <Kbd>⌘K</Kbd>
+      <Kbd>Ctrl + B</Kbd>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/kbd-group-example.tsx b/apps/v4/examples/radix/kbd-group-example.tsx
new file mode 100644
index 000000000..f4ecab2e7
--- /dev/null
+++ b/apps/v4/examples/radix/kbd-group-example.tsx
@@ -0,0 +1,11 @@
+import { Kbd, KbdGroup } from "@/examples/radix/ui/kbd"
+
+export function KbdGroupExample() {
+  return (
+    <KbdGroup>
+      <Kbd>Ctrl</Kbd>
+      <Kbd>Shift</Kbd>
+      <Kbd>P</Kbd>
+    </KbdGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/kbd-in-input-group.tsx b/apps/v4/examples/radix/kbd-in-input-group.tsx
new file mode 100644
index 000000000..3bf517350
--- /dev/null
+++ b/apps/v4/examples/radix/kbd-in-input-group.tsx
@@ -0,0 +1,17 @@
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/radix/ui/input-group"
+import { Kbd } from "@/examples/radix/ui/kbd"
+
+export function KbdInInputGroup() {
+  return (
+    <InputGroup>
+      <InputGroupInput />
+      <InputGroupAddon>
+        <Kbd>Space</Kbd>
+      </InputGroupAddon>
+    </InputGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/kbd-in-tooltip.tsx b/apps/v4/examples/radix/kbd-in-tooltip.tsx
new file mode 100644
index 000000000..b49edc312
--- /dev/null
+++ b/apps/v4/examples/radix/kbd-in-tooltip.tsx
@@ -0,0 +1,25 @@
+import { Button } from "@/examples/radix/ui/button"
+import { Kbd } from "@/examples/radix/ui/kbd"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/radix/ui/tooltip"
+import { SaveIcon } from "lucide-react"
+
+export function KbdInTooltip() {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button size="icon-sm" variant="outline">
+          <SaveIcon />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent className="pr-1.5">
+        <div className="flex items-center gap-2">
+          Save Changes <Kbd>S</Kbd>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
diff --git a/apps/v4/examples/radix/kbd-modifier-keys.tsx b/apps/v4/examples/radix/kbd-modifier-keys.tsx
new file mode 100644
index 000000000..47a0d9b11
--- /dev/null
+++ b/apps/v4/examples/radix/kbd-modifier-keys.tsx
@@ -0,0 +1,10 @@
+import { Kbd } from "@/examples/radix/ui/kbd"
+
+export function KbdModifierKeys() {
+  return (
+    <div className="flex items-center gap-2">
+      <Kbd>⌘</Kbd>
+      <Kbd>C</Kbd>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/kbd-with-icons-and-text.tsx b/apps/v4/examples/radix/kbd-with-icons-and-text.tsx
new file mode 100644
index 000000000..7a73f2498
--- /dev/null
+++ b/apps/v4/examples/radix/kbd-with-icons-and-text.tsx
@@ -0,0 +1,17 @@
+import { Kbd, KbdGroup } from "@/examples/radix/ui/kbd"
+import { ArrowLeftIcon, CircleDashedIcon } from "lucide-react"
+
+export function KbdWithIconsAndText() {
+  return (
+    <KbdGroup>
+      <Kbd>
+        <ArrowLeftIcon />
+        Left
+      </Kbd>
+      <Kbd>
+        <CircleDashedIcon />
+        Voice Enabled
+      </Kbd>
+    </KbdGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/kbd-with-icons.tsx b/apps/v4/examples/radix/kbd-with-icons.tsx
new file mode 100644
index 000000000..c362190c1
--- /dev/null
+++ b/apps/v4/examples/radix/kbd-with-icons.tsx
@@ -0,0 +1,18 @@
+import { Kbd, KbdGroup } from "@/examples/radix/ui/kbd"
+import { ArrowLeftIcon, ArrowRightIcon, CircleDashedIcon } from "lucide-react"
+
+export function KbdWithIcons() {
+  return (
+    <KbdGroup>
+      <Kbd>
+        <CircleDashedIcon />
+      </Kbd>
+      <Kbd>
+        <ArrowLeftIcon />
+      </Kbd>
+      <Kbd>
+        <ArrowRightIcon />
+      </Kbd>
+    </KbdGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/kbd-with-samp.tsx b/apps/v4/examples/radix/kbd-with-samp.tsx
new file mode 100644
index 000000000..810832bb3
--- /dev/null
+++ b/apps/v4/examples/radix/kbd-with-samp.tsx
@@ -0,0 +1,9 @@
+import { Kbd } from "@/examples/radix/ui/kbd"
+
+export function KbdWithSamp() {
+  return (
+    <Kbd>
+      <samp>File</samp>
+    </Kbd>
+  )
+}
diff --git a/apps/v4/examples/radix/label-disabled.tsx b/apps/v4/examples/radix/label-disabled.tsx
new file mode 100644
index 000000000..438846fe8
--- /dev/null
+++ b/apps/v4/examples/radix/label-disabled.tsx
@@ -0,0 +1,12 @@
+import { Field } from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+import { Label } from "@/examples/radix/ui/label"
+
+export function LabelDisabled() {
+  return (
+    <Field data-disabled={true}>
+      <Label htmlFor="label-demo-disabled">Disabled</Label>
+      <Input id="label-demo-disabled" placeholder="Disabled" disabled />
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/label-with-checkbox.tsx b/apps/v4/examples/radix/label-with-checkbox.tsx
new file mode 100644
index 000000000..d0c74cdaa
--- /dev/null
+++ b/apps/v4/examples/radix/label-with-checkbox.tsx
@@ -0,0 +1,12 @@
+import { Checkbox } from "@/examples/radix/ui/checkbox"
+import { Field } from "@/examples/radix/ui/field"
+import { Label } from "@/examples/radix/ui/label"
+
+export function LabelWithCheckbox() {
+  return (
+    <Field orientation="horizontal">
+      <Checkbox id="label-demo-terms" />
+      <Label htmlFor="label-demo-terms">Accept terms and conditions</Label>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/label-with-input.tsx b/apps/v4/examples/radix/label-with-input.tsx
new file mode 100644
index 000000000..d29b6e349
--- /dev/null
+++ b/apps/v4/examples/radix/label-with-input.tsx
@@ -0,0 +1,12 @@
+import { Field } from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+import { Label } from "@/examples/radix/ui/label"
+
+export function LabelWithInput() {
+  return (
+    <Field>
+      <Label htmlFor="label-demo-username">Username</Label>
+      <Input id="label-demo-username" placeholder="Username" />
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/label-with-textarea.tsx b/apps/v4/examples/radix/label-with-textarea.tsx
new file mode 100644
index 000000000..af2a7381a
--- /dev/null
+++ b/apps/v4/examples/radix/label-with-textarea.tsx
@@ -0,0 +1,12 @@
+import { Field } from "@/examples/radix/ui/field"
+import { Label } from "@/examples/radix/ui/label"
+import { Textarea } from "@/examples/radix/ui/textarea"
+
+export function LabelWithTextarea() {
+  return (
+    <Field>
+      <Label htmlFor="label-demo-message">Message</Label>
+      <Textarea id="label-demo-message" placeholder="Message" />
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/menubar-basic.tsx b/apps/v4/examples/radix/menubar-basic.tsx
new file mode 100644
index 000000000..9d776c3f9
--- /dev/null
+++ b/apps/v4/examples/radix/menubar-basic.tsx
@@ -0,0 +1,56 @@
+import {
+  Menubar,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from "@/examples/radix/ui/menubar"
+
+export function MenubarBasic() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarGroup>
+            <MenubarItem>
+              New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              New Window <MenubarShortcut>⌘N</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled>New Incognito Window</MenubarItem>
+          </MenubarGroup>
+          <MenubarSeparator />
+          <MenubarGroup>
+            <MenubarItem>
+              Print... <MenubarShortcut>⌘P</MenubarShortcut>
+            </MenubarItem>
+          </MenubarGroup>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarGroup>
+            <MenubarItem>
+              Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+            </MenubarItem>
+          </MenubarGroup>
+          <MenubarSeparator />
+          <MenubarGroup>
+            <MenubarItem>Cut</MenubarItem>
+            <MenubarItem>Copy</MenubarItem>
+            <MenubarItem>Paste</MenubarItem>
+          </MenubarGroup>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/v4/examples/radix/menubar-destructive.tsx b/apps/v4/examples/radix/menubar-destructive.tsx
new file mode 100644
index 000000000..ab1977715
--- /dev/null
+++ b/apps/v4/examples/radix/menubar-destructive.tsx
@@ -0,0 +1,76 @@
+import {
+  Menubar,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from "@/examples/radix/ui/menubar"
+import {
+  FileIcon,
+  FolderIcon,
+  LogOutIcon,
+  SettingsIcon,
+  TrashIcon,
+  UserIcon,
+} from "lucide-react"
+
+export function MenubarDestructive() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent className="w-40">
+          <MenubarGroup>
+            <MenubarItem>
+              <FileIcon />
+              New File <MenubarShortcut>⌘N</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              <FolderIcon />
+              Open Folder
+            </MenubarItem>
+          </MenubarGroup>
+          <MenubarSeparator />
+          <MenubarGroup>
+            <MenubarItem variant="destructive">
+              <TrashIcon />
+              Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>
+            </MenubarItem>
+          </MenubarGroup>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Account</MenubarTrigger>
+        <MenubarContent>
+          <MenubarGroup>
+            <MenubarItem>
+              <UserIcon />
+              Profile
+            </MenubarItem>
+            <MenubarItem>
+              <SettingsIcon />
+              Settings
+            </MenubarItem>
+          </MenubarGroup>
+          <MenubarSeparator />
+          <MenubarGroup>
+            <MenubarItem variant="destructive">
+              <LogOutIcon />
+              Sign out
+            </MenubarItem>
+          </MenubarGroup>
+          <MenubarSeparator />
+          <MenubarGroup>
+            <MenubarItem variant="destructive">
+              <TrashIcon />
+              Delete
+            </MenubarItem>
+          </MenubarGroup>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/v4/examples/radix/menubar-format.tsx b/apps/v4/examples/radix/menubar-format.tsx
new file mode 100644
index 000000000..3e8d062c1
--- /dev/null
+++ b/apps/v4/examples/radix/menubar-format.tsx
@@ -0,0 +1,55 @@
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from "@/examples/radix/ui/menubar"
+import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
+
+export function MenubarFormat() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>Format</MenubarTrigger>
+        <MenubarContent>
+          <MenubarGroup>
+            <MenubarItem>
+              <BoldIcon />
+              Bold <MenubarShortcut>⌘B</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              <ItalicIcon />
+              Italic <MenubarShortcut>⌘I</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              <UnderlineIcon />
+              Underline <MenubarShortcut>⌘U</MenubarShortcut>
+            </MenubarItem>
+          </MenubarGroup>
+          <MenubarSeparator />
+          <MenubarGroup>
+            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>
+            <MenubarCheckboxItem>Code</MenubarCheckboxItem>
+          </MenubarGroup>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>
+          <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarGroup>
+            <MenubarItem inset>Zoom In</MenubarItem>
+            <MenubarItem inset>Zoom Out</MenubarItem>
+          </MenubarGroup>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/v4/examples/radix/menubar-in-dialog.tsx b/apps/v4/examples/radix/menubar-in-dialog.tsx
new file mode 100644
index 000000000..766ce87a7
--- /dev/null
+++ b/apps/v4/examples/radix/menubar-in-dialog.tsx
@@ -0,0 +1,102 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/radix/ui/dialog"
+import {
+  Menubar,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@/examples/radix/ui/menubar"
+import {
+  ClipboardPasteIcon,
+  CopyIcon,
+  ScissorsIcon,
+  TrashIcon,
+} from "lucide-react"
+
+export function MenubarInDialog() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Menubar Example</DialogTitle>
+          <DialogDescription>
+            Use the menubar below to see the menu options.
+          </DialogDescription>
+        </DialogHeader>
+        <Menubar>
+          <MenubarMenu>
+            <MenubarTrigger>File</MenubarTrigger>
+            <MenubarContent>
+              <MenubarGroup>
+                <MenubarItem>
+                  <CopyIcon />
+                  Copy
+                </MenubarItem>
+                <MenubarItem>
+                  <ScissorsIcon />
+                  Cut
+                </MenubarItem>
+                <MenubarItem>
+                  <ClipboardPasteIcon />
+                  Paste
+                </MenubarItem>
+              </MenubarGroup>
+              <MenubarSeparator />
+              <MenubarSub>
+                <MenubarSubTrigger>More Options</MenubarSubTrigger>
+                <MenubarSubContent>
+                  <MenubarGroup>
+                    <MenubarItem>Save Page...</MenubarItem>
+                    <MenubarItem>Create Shortcut...</MenubarItem>
+                    <MenubarItem>Name Window...</MenubarItem>
+                  </MenubarGroup>
+                  <MenubarSeparator />
+                  <MenubarGroup>
+                    <MenubarItem>Developer Tools</MenubarItem>
+                  </MenubarGroup>
+                </MenubarSubContent>
+              </MenubarSub>
+              <MenubarSeparator />
+              <MenubarGroup>
+                <MenubarItem variant="destructive">
+                  <TrashIcon />
+                  Delete
+                </MenubarItem>
+              </MenubarGroup>
+            </MenubarContent>
+          </MenubarMenu>
+          <MenubarMenu>
+            <MenubarTrigger>Edit</MenubarTrigger>
+            <MenubarContent>
+              <MenubarGroup>
+                <MenubarItem>
+                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+                </MenubarItem>
+                <MenubarItem>
+                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+                </MenubarItem>
+              </MenubarGroup>
+            </MenubarContent>
+          </MenubarMenu>
+        </Menubar>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/v4/examples/radix/menubar-insert.tsx b/apps/v4/examples/radix/menubar-insert.tsx
new file mode 100644
index 000000000..729cae346
--- /dev/null
+++ b/apps/v4/examples/radix/menubar-insert.tsx
@@ -0,0 +1,71 @@
+import {
+  Menubar,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@/examples/radix/ui/menubar"
+import {
+  CheckIcon,
+  ImageIcon,
+  LinkIcon,
+  SearchIcon,
+  TableIcon,
+} from "lucide-react"
+
+export function MenubarInsert() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>Insert</MenubarTrigger>
+        <MenubarContent>
+          <MenubarSub>
+            <MenubarSubTrigger>
+              <ImageIcon />
+              Media
+            </MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarGroup>
+                <MenubarItem>Image</MenubarItem>
+                <MenubarItem>Video</MenubarItem>
+                <MenubarItem>Audio</MenubarItem>
+              </MenubarGroup>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarGroup>
+            <MenubarItem>
+              <LinkIcon />
+              Link <MenubarShortcut>⌘K</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              <TableIcon />
+              Table
+            </MenubarItem>
+          </MenubarGroup>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Tools</MenubarTrigger>
+        <MenubarContent className="w-44">
+          <MenubarGroup>
+            <MenubarItem>
+              <SearchIcon />
+              Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              <CheckIcon />
+              Spell Check
+            </MenubarItem>
+          </MenubarGroup>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/v4/examples/radix/menubar-with-checkboxes.tsx b/apps/v4/examples/radix/menubar-with-checkboxes.tsx
new file mode 100644
index 000000000..272d1d828
--- /dev/null
+++ b/apps/v4/examples/radix/menubar-with-checkboxes.tsx
@@ -0,0 +1,46 @@
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from "@/examples/radix/ui/menubar"
+
+export function MenubarWithCheckboxes() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent className="w-64">
+          <MenubarGroup>
+            <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+            <MenubarCheckboxItem checked>
+              Always Show Full URLs
+            </MenubarCheckboxItem>
+          </MenubarGroup>
+          <MenubarSeparator />
+          <MenubarGroup>
+            <MenubarItem inset>
+              Reload <MenubarShortcut>⌘R</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled inset>
+              Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+            </MenubarItem>
+          </MenubarGroup>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Format</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>
+          <MenubarCheckboxItem>Code</MenubarCheckboxItem>
+          <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/v4/examples/radix/menubar-with-icons.tsx b/apps/v4/examples/radix/menubar-with-icons.tsx
new file mode 100644
index 000000000..69e76d364
--- /dev/null
+++ b/apps/v4/examples/radix/menubar-with-icons.tsx
@@ -0,0 +1,60 @@
+import {
+  Menubar,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from "@/examples/radix/ui/menubar"
+import { CircleDashedIcon, FileIcon, FolderIcon, SaveIcon } from "lucide-react"
+
+export function MenubarWithIcons() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarGroup>
+            <MenubarItem>
+              <FileIcon />
+              New File <MenubarShortcut>⌘N</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              <FolderIcon />
+              Open Folder
+            </MenubarItem>
+          </MenubarGroup>
+          <MenubarSeparator />
+          <MenubarGroup>
+            <MenubarItem>
+              <SaveIcon />
+              Save <MenubarShortcut>⌘S</MenubarShortcut>
+            </MenubarItem>
+          </MenubarGroup>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>More</MenubarTrigger>
+        <MenubarContent>
+          <MenubarGroup>
+            <MenubarItem>
+              <CircleDashedIcon />
+              Settings
+            </MenubarItem>
+            <MenubarItem>
+              <CircleDashedIcon />
+              Help
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem variant="destructive">
+              <CircleDashedIcon />
+              Delete
+            </MenubarItem>
+          </MenubarGroup>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/v4/examples/radix/menubar-with-radio.tsx b/apps/v4/examples/radix/menubar-with-radio.tsx
new file mode 100644
index 000000000..f7e900215
--- /dev/null
+++ b/apps/v4/examples/radix/menubar-with-radio.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from "react"
+import {
+  Menubar,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarTrigger,
+} from "@/examples/radix/ui/menubar"
+
+export function MenubarWithRadio() {
+  const [user, setUser] = React.useState("benoit")
+  const [theme, setTheme] = React.useState("system")
+
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>Profiles</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value={user} onValueChange={setUser}>
+            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+            <MenubarRadioItem value="luis">Luis</MenubarRadioItem>
+          </MenubarRadioGroup>
+          <MenubarSeparator />
+          <MenubarGroup>
+            <MenubarItem inset>Edit...</MenubarItem>
+            <MenubarItem inset>Add Profile...</MenubarItem>
+          </MenubarGroup>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Theme</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value={theme} onValueChange={setTheme}>
+            <MenubarRadioItem value="light">Light</MenubarRadioItem>
+            <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
+            <MenubarRadioItem value="system">System</MenubarRadioItem>
+          </MenubarRadioGroup>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/v4/examples/radix/menubar-with-shortcuts.tsx b/apps/v4/examples/radix/menubar-with-shortcuts.tsx
new file mode 100644
index 000000000..e4026e4af
--- /dev/null
+++ b/apps/v4/examples/radix/menubar-with-shortcuts.tsx
@@ -0,0 +1,58 @@
+import {
+  Menubar,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from "@/examples/radix/ui/menubar"
+
+export function MenubarWithShortcuts() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarGroup>
+            <MenubarItem>
+              New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              New Window <MenubarShortcut>⌘N</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              Print... <MenubarShortcut>⌘P</MenubarShortcut>
+            </MenubarItem>
+          </MenubarGroup>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarGroup>
+            <MenubarItem>
+              Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+            </MenubarItem>
+          </MenubarGroup>
+          <MenubarSeparator />
+          <MenubarGroup>
+            <MenubarItem>
+              Cut <MenubarShortcut>⌘X</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              Copy <MenubarShortcut>⌘C</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              Paste <MenubarShortcut>⌘V</MenubarShortcut>
+            </MenubarItem>
+          </MenubarGroup>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/v4/examples/radix/menubar-with-submenu.tsx b/apps/v4/examples/radix/menubar-with-submenu.tsx
new file mode 100644
index 000000000..00d526754
--- /dev/null
+++ b/apps/v4/examples/radix/menubar-with-submenu.tsx
@@ -0,0 +1,71 @@
+import {
+  Menubar,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@/examples/radix/ui/menubar"
+
+export function MenubarWithSubmenu() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarSub>
+            <MenubarSubTrigger>Share</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarGroup>
+                <MenubarItem>Email link</MenubarItem>
+                <MenubarItem>Messages</MenubarItem>
+                <MenubarItem>Notes</MenubarItem>
+              </MenubarGroup>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarGroup>
+            <MenubarItem>
+              Print... <MenubarShortcut>⌘P</MenubarShortcut>
+            </MenubarItem>
+          </MenubarGroup>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarGroup>
+            <MenubarItem>
+              Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+            </MenubarItem>
+          </MenubarGroup>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Find</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarGroup>
+                <MenubarItem>Find...</MenubarItem>
+                <MenubarItem>Find Next</MenubarItem>
+                <MenubarItem>Find Previous</MenubarItem>
+              </MenubarGroup>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarGroup>
+            <MenubarItem>Cut</MenubarItem>
+            <MenubarItem>Copy</MenubarItem>
+            <MenubarItem>Paste</MenubarItem>
+          </MenubarGroup>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/v4/examples/radix/muted-item-group.tsx b/apps/v4/examples/radix/muted-item-group.tsx
new file mode 100644
index 000000000..3504fef5d
--- /dev/null
+++ b/apps/v4/examples/radix/muted-item-group.tsx
@@ -0,0 +1,49 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+
+export function MutedItemGroup() {
+  return (
+    <ItemGroup>
+      <Item variant="muted">
+        <ItemContent>
+          <ItemTitle>Item 1</ItemTitle>
+          <ItemDescription>First item in muted group.</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted">
+        <ItemContent>
+          <ItemTitle>Item 2</ItemTitle>
+          <ItemDescription>Second item in muted group.</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="muted">
+        <ItemContent>
+          <ItemTitle>Item 3</ItemTitle>
+          <ItemDescription>Third item in muted group.</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="outline" size="sm">
+            Action
+          </Button>
+        </ItemActions>
+      </Item>
+    </ItemGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/native-select-basic.tsx b/apps/v4/examples/radix/native-select-basic.tsx
new file mode 100644
index 000000000..62e9482e8
--- /dev/null
+++ b/apps/v4/examples/radix/native-select-basic.tsx
@@ -0,0 +1,19 @@
+import {
+  NativeSelect,
+  NativeSelectOption,
+} from "@/examples/radix/ui/native-select"
+
+export function NativeSelectBasic() {
+  return (
+    <NativeSelect>
+      <NativeSelectOption value="">Select a fruit</NativeSelectOption>
+      <NativeSelectOption value="apple">Apple</NativeSelectOption>
+      <NativeSelectOption value="banana">Banana</NativeSelectOption>
+      <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
+      <NativeSelectOption value="grapes" disabled>
+        Grapes
+      </NativeSelectOption>
+      <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
+    </NativeSelect>
+  )
+}
diff --git a/apps/v4/examples/radix/native-select-disabled.tsx b/apps/v4/examples/radix/native-select-disabled.tsx
index 8f92d938f..6df0e4ea5 100644
--- a/apps/v4/examples/radix/native-select-disabled.tsx
+++ b/apps/v4/examples/radix/native-select-disabled.tsx
@@ -3,14 +3,13 @@ import {
   NativeSelectOption,
 } from "@/examples/radix/ui/native-select"
 
-export default function NativeSelectDisabled() {
+export function NativeSelectDisabled() {
   return (
     <NativeSelect disabled>
-      <NativeSelectOption value="">Select priority</NativeSelectOption>
-      <NativeSelectOption value="low">Low</NativeSelectOption>
-      <NativeSelectOption value="medium">Medium</NativeSelectOption>
-      <NativeSelectOption value="high">High</NativeSelectOption>
-      <NativeSelectOption value="critical">Critical</NativeSelectOption>
+      <NativeSelectOption value="">Disabled</NativeSelectOption>
+      <NativeSelectOption value="apple">Apple</NativeSelectOption>
+      <NativeSelectOption value="banana">Banana</NativeSelectOption>
+      <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
     </NativeSelect>
   )
 }
diff --git a/apps/v4/examples/radix/native-select-fields.tsx b/apps/v4/examples/radix/native-select-fields.tsx
new file mode 100644
index 000000000..d35c33beb
--- /dev/null
+++ b/apps/v4/examples/radix/native-select-fields.tsx
@@ -0,0 +1,101 @@
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/radix/ui/field"
+import {
+  NativeSelect,
+  NativeSelectOptGroup,
+  NativeSelectOption,
+} from "@/examples/radix/ui/native-select"
+import { Select } from "@/examples/radix/ui/select"
+
+export function NativeSelectFields() {
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="native-select-basic">
+          Basic Native Select
+        </FieldLabel>
+        <NativeSelect id="native-select-basic">
+          <NativeSelectOption value="">Choose an option</NativeSelectOption>
+          <NativeSelectOption value="option1">Option 1</NativeSelectOption>
+          <NativeSelectOption value="option2">Option 2</NativeSelectOption>
+          <NativeSelectOption value="option3">Option 3</NativeSelectOption>
+        </NativeSelect>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="native-select-country">Country</FieldLabel>
+        <NativeSelect id="native-select-country">
+          <NativeSelectOption value="">Select your country</NativeSelectOption>
+          <NativeSelectOption value="us">United States</NativeSelectOption>
+          <NativeSelectOption value="uk">United Kingdom</NativeSelectOption>
+          <NativeSelectOption value="ca">Canada</NativeSelectOption>
+        </NativeSelect>
+        <FieldDescription>
+          Select the country where you currently reside.
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="native-select-timezone">Timezone</FieldLabel>
+        <FieldDescription>
+          Choose your local timezone for accurate scheduling.
+        </FieldDescription>
+        <NativeSelect id="native-select-timezone">
+          <NativeSelectOption value="">Select timezone</NativeSelectOption>
+          <NativeSelectOption value="utc">UTC</NativeSelectOption>
+          <NativeSelectOption value="est">Eastern Time</NativeSelectOption>
+          <NativeSelectOption value="pst">Pacific Time</NativeSelectOption>
+        </NativeSelect>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="native-select-grouped">Grouped Options</FieldLabel>
+        <NativeSelect id="native-select-grouped">
+          <NativeSelectOption value="">Select a region</NativeSelectOption>
+          <NativeSelectOptGroup label="North America">
+            <NativeSelectOption value="us">United States</NativeSelectOption>
+            <NativeSelectOption value="ca">Canada</NativeSelectOption>
+            <NativeSelectOption value="mx">Mexico</NativeSelectOption>
+          </NativeSelectOptGroup>
+          <NativeSelectOptGroup label="Europe">
+            <NativeSelectOption value="uk">United Kingdom</NativeSelectOption>
+            <NativeSelectOption value="fr">France</NativeSelectOption>
+            <NativeSelectOption value="de">Germany</NativeSelectOption>
+          </NativeSelectOptGroup>
+        </NativeSelect>
+        <FieldDescription>
+          Native select with grouped options using optgroup.
+        </FieldDescription>
+      </Field>
+      <Field data-invalid>
+        <FieldLabel htmlFor="native-select-invalid">
+          Invalid Native Select
+        </FieldLabel>
+        <NativeSelect id="native-select-invalid" aria-invalid>
+          <NativeSelectOption value="">
+            This field has an error
+          </NativeSelectOption>
+          <NativeSelectOption value="option1">Option 1</NativeSelectOption>
+          <NativeSelectOption value="option2">Option 2</NativeSelectOption>
+          <NativeSelectOption value="option3">Option 3</NativeSelectOption>
+        </NativeSelect>
+        <FieldDescription>
+          This field contains validation errors.
+        </FieldDescription>
+      </Field>
+      <Field data-disabled>
+        <FieldLabel htmlFor="native-select-disabled-field">
+          Disabled Field
+        </FieldLabel>
+        <NativeSelect id="native-select-disabled-field" disabled>
+          <NativeSelectOption value="">Cannot select</NativeSelectOption>
+          <NativeSelectOption value="option1">Option 1</NativeSelectOption>
+          <NativeSelectOption value="option2">Option 2</NativeSelectOption>
+          <NativeSelectOption value="option3">Option 3</NativeSelectOption>
+        </NativeSelect>
+        <FieldDescription>This field is currently disabled.</FieldDescription>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/native-select-invalid.tsx b/apps/v4/examples/radix/native-select-invalid.tsx
index ac0c52c21..caad6eab6 100644
--- a/apps/v4/examples/radix/native-select-invalid.tsx
+++ b/apps/v4/examples/radix/native-select-invalid.tsx
@@ -3,14 +3,13 @@ import {
   NativeSelectOption,
 } from "@/examples/radix/ui/native-select"
 
-export default function NativeSelectInvalid() {
+export function NativeSelectInvalid() {
   return (
     <NativeSelect aria-invalid="true">
-      <NativeSelectOption value="">Select role</NativeSelectOption>
-      <NativeSelectOption value="admin">Admin</NativeSelectOption>
-      <NativeSelectOption value="editor">Editor</NativeSelectOption>
-      <NativeSelectOption value="viewer">Viewer</NativeSelectOption>
-      <NativeSelectOption value="guest">Guest</NativeSelectOption>
+      <NativeSelectOption value="">Error state</NativeSelectOption>
+      <NativeSelectOption value="apple">Apple</NativeSelectOption>
+      <NativeSelectOption value="banana">Banana</NativeSelectOption>
+      <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
     </NativeSelect>
   )
 }
diff --git a/apps/v4/examples/radix/native-select-sizes.tsx b/apps/v4/examples/radix/native-select-sizes.tsx
new file mode 100644
index 000000000..6efcf6df6
--- /dev/null
+++ b/apps/v4/examples/radix/native-select-sizes.tsx
@@ -0,0 +1,23 @@
+import {
+  NativeSelect,
+  NativeSelectOption,
+} from "@/examples/radix/ui/native-select"
+
+export function NativeSelectSizes() {
+  return (
+    <div className="flex flex-col gap-4">
+      <NativeSelect size="sm">
+        <NativeSelectOption value="">Select a fruit</NativeSelectOption>
+        <NativeSelectOption value="apple">Apple</NativeSelectOption>
+        <NativeSelectOption value="banana">Banana</NativeSelectOption>
+        <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
+      </NativeSelect>
+      <NativeSelect size="default">
+        <NativeSelectOption value="">Select a fruit</NativeSelectOption>
+        <NativeSelectOption value="apple">Apple</NativeSelectOption>
+        <NativeSelectOption value="banana">Banana</NativeSelectOption>
+        <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
+      </NativeSelect>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/native-select-with-field.tsx b/apps/v4/examples/radix/native-select-with-field.tsx
new file mode 100644
index 000000000..a84bde873
--- /dev/null
+++ b/apps/v4/examples/radix/native-select-with-field.tsx
@@ -0,0 +1,21 @@
+import { Field, FieldDescription, FieldLabel } from "@/examples/radix/ui/field"
+import {
+  NativeSelect,
+  NativeSelectOption,
+} from "@/examples/radix/ui/native-select"
+
+export function NativeSelectWithField() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="native-select-country">Country</FieldLabel>
+      <NativeSelect id="native-select-country">
+        <NativeSelectOption value="">Select a country</NativeSelectOption>
+        <NativeSelectOption value="us">United States</NativeSelectOption>
+        <NativeSelectOption value="uk">United Kingdom</NativeSelectOption>
+        <NativeSelectOption value="ca">Canada</NativeSelectOption>
+        <NativeSelectOption value="au">Australia</NativeSelectOption>
+      </NativeSelect>
+      <FieldDescription>Select your country of residence.</FieldDescription>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/native-select-with-groups.tsx b/apps/v4/examples/radix/native-select-with-groups.tsx
new file mode 100644
index 000000000..ce74228ce
--- /dev/null
+++ b/apps/v4/examples/radix/native-select-with-groups.tsx
@@ -0,0 +1,23 @@
+import {
+  NativeSelect,
+  NativeSelectOptGroup,
+  NativeSelectOption,
+} from "@/examples/radix/ui/native-select"
+
+export function NativeSelectWithGroups() {
+  return (
+    <NativeSelect>
+      <NativeSelectOption value="">Select a food</NativeSelectOption>
+      <NativeSelectOptGroup label="Fruits">
+        <NativeSelectOption value="apple">Apple</NativeSelectOption>
+        <NativeSelectOption value="banana">Banana</NativeSelectOption>
+        <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
+      </NativeSelectOptGroup>
+      <NativeSelectOptGroup label="Vegetables">
+        <NativeSelectOption value="carrot">Carrot</NativeSelectOption>
+        <NativeSelectOption value="broccoli">Broccoli</NativeSelectOption>
+        <NativeSelectOption value="spinach">Spinach</NativeSelectOption>
+      </NativeSelectOptGroup>
+    </NativeSelect>
+  )
+}
diff --git a/apps/v4/examples/radix/navigation-menu-with-viewport.tsx b/apps/v4/examples/radix/navigation-menu-with-viewport.tsx
new file mode 100644
index 000000000..fc2751b0a
--- /dev/null
+++ b/apps/v4/examples/radix/navigation-menu-with-viewport.tsx
@@ -0,0 +1,115 @@
+import * as React from "react"
+import Link from "next/link"
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/examples/radix/ui/navigation-menu"
+
+const components: { title: string; href: string; description: string }[] = [
+  {
+    title: "Alert Dialog",
+    href: "/docs/primitives/alert-dialog",
+    description:
+      "A modal dialog that interrupts the user with important content and expects a response.",
+  },
+  {
+    title: "Hover Card",
+    href: "/docs/primitives/hover-card",
+    description:
+      "For sighted users to preview content available behind a link.",
+  },
+  {
+    title: "Progress",
+    href: "/docs/primitives/progress",
+    description:
+      "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+  },
+  {
+    title: "Scroll-area",
+    href: "/docs/primitives/scroll-area",
+    description: "Visually or semantically separates content.",
+  },
+  {
+    title: "Tabs",
+    href: "/docs/primitives/tabs",
+    description:
+      "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+  },
+  {
+    title: "Tooltip",
+    href: "/docs/primitives/tooltip",
+    description:
+      "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+  },
+]
+
+function ListItem({
+  title,
+  children,
+  href,
+  ...props
+}: React.ComponentPropsWithoutRef<"li"> & { href: string }) {
+  return (
+    <li {...props}>
+      <NavigationMenuLink asChild>
+        <Link href={href}>
+          <div className="style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1">
+            <div className="leading-none font-medium">{title}</div>
+            <div className="text-muted-foreground line-clamp-2">{children}</div>
+          </div>
+        </Link>
+      </NavigationMenuLink>
+    </li>
+  )
+}
+
+export function NavigationMenuWithViewport() {
+  return (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="w-96">
+              <ListItem href="/docs" title="Introduction">
+                Re-usable components built with Tailwind CSS.
+              </ListItem>
+              <ListItem href="/docs/installation" title="Installation">
+                How to install dependencies and structure your app.
+              </ListItem>
+              <ListItem href="/docs/primitives/typography" title="Typography">
+                Styles for headings, paragraphs, lists...etc
+              </ListItem>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+              {components.map((component) => (
+                <ListItem
+                  key={component.title}
+                  title={component.title}
+                  href={component.href}
+                >
+                  {component.description}
+                </ListItem>
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+            <Link href="/docs">Documentation</Link>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  )
+}
diff --git a/apps/v4/examples/radix/navigation-menu-without-viewport.tsx b/apps/v4/examples/radix/navigation-menu-without-viewport.tsx
new file mode 100644
index 000000000..5250d5619
--- /dev/null
+++ b/apps/v4/examples/radix/navigation-menu-without-viewport.tsx
@@ -0,0 +1,147 @@
+import Link from "next/link"
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/examples/radix/ui/navigation-menu"
+import { CircleAlertIcon } from "lucide-react"
+
+const components: { title: string; href: string; description: string }[] = [
+  {
+    title: "Alert Dialog",
+    href: "/docs/primitives/alert-dialog",
+    description:
+      "A modal dialog that interrupts the user with important content and expects a response.",
+  },
+  {
+    title: "Hover Card",
+    href: "/docs/primitives/hover-card",
+    description:
+      "For sighted users to preview content available behind a link.",
+  },
+  {
+    title: "Progress",
+    href: "/docs/primitives/progress",
+    description:
+      "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+  },
+  {
+    title: "Scroll-area",
+    href: "/docs/primitives/scroll-area",
+    description: "Visually or semantically separates content.",
+  },
+  {
+    title: "Tabs",
+    href: "/docs/primitives/tabs",
+    description:
+      "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+  },
+  {
+    title: "Tooltip",
+    href: "/docs/primitives/tooltip",
+    description:
+      "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+  },
+]
+
+export function NavigationMenuWithoutViewport() {
+  return (
+    <NavigationMenu viewport={false}>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+            <Link href="/docs">Documentation</Link>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>List</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="w-72">
+              <li>
+                <NavigationMenuLink asChild>
+                  <Link href="#">
+                    <div className="flex flex-col">
+                      <div className="font-medium">Components</div>
+                      <div className="text-muted-foreground">
+                        Browse all components in the library.
+                      </div>
+                    </div>
+                  </Link>
+                </NavigationMenuLink>
+                <NavigationMenuLink asChild>
+                  <Link href="#">
+                    <div className="flex flex-col">
+                      <div className="font-medium">Documentation</div>
+                      <div className="text-muted-foreground">
+                        Learn how to use the library.
+                      </div>
+                    </div>
+                  </Link>
+                </NavigationMenuLink>
+                <NavigationMenuLink asChild>
+                  <Link href="#">
+                    <div className="flex flex-col">
+                      <div className="font-medium">Blog</div>
+                      <div className="text-muted-foreground">
+                        Read our latest blog posts.
+                      </div>
+                    </div>
+                  </Link>
+                </NavigationMenuLink>
+              </li>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul>
+              <li>
+                <NavigationMenuLink asChild>
+                  <Link href="#">Components</Link>
+                </NavigationMenuLink>
+                <NavigationMenuLink asChild>
+                  <Link href="#">Documentation</Link>
+                </NavigationMenuLink>
+                <NavigationMenuLink asChild>
+                  <Link href="#">Blocks</Link>
+                </NavigationMenuLink>
+              </li>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-[200px]">
+              <li>
+                <NavigationMenuLink asChild>
+                  <Link href="#" className="flex-row items-center gap-2">
+                    <CircleAlertIcon />
+                    Backlog
+                  </Link>
+                </NavigationMenuLink>
+                <NavigationMenuLink asChild>
+                  <Link href="#" className="flex-row items-center gap-2">
+                    <CircleAlertIcon />
+                    To Do
+                  </Link>
+                </NavigationMenuLink>
+                <NavigationMenuLink asChild>
+                  <Link href="#">
+                    <CircleAlertIcon />
+                    Done
+                  </Link>
+                </NavigationMenuLink>
+              </li>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  )
+}
diff --git a/apps/v4/examples/radix/outline-item-group.tsx b/apps/v4/examples/radix/outline-item-group.tsx
new file mode 100644
index 000000000..9c799110a
--- /dev/null
+++ b/apps/v4/examples/radix/outline-item-group.tsx
@@ -0,0 +1,43 @@
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+import { InboxIcon } from "lucide-react"
+
+export function OutlineItemGroup() {
+  return (
+    <ItemGroup>
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Item 1</ItemTitle>
+          <ItemDescription>First item with icon.</ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Item 2</ItemTitle>
+          <ItemDescription>Second item with icon.</ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <InboxIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Item 3</ItemTitle>
+          <ItemDescription>Third item with icon.</ItemDescription>
+        </ItemContent>
+      </Item>
+    </ItemGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/pagination-basic.tsx b/apps/v4/examples/radix/pagination-basic.tsx
new file mode 100644
index 000000000..7d0c72ba4
--- /dev/null
+++ b/apps/v4/examples/radix/pagination-basic.tsx
@@ -0,0 +1,38 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/examples/radix/ui/pagination"
+
+export function PaginationBasic() {
+  return (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#" isActive>
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">3</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
diff --git a/apps/v4/examples/radix/pagination-icons-only.tsx b/apps/v4/examples/radix/pagination-icons-only.tsx
new file mode 100644
index 000000000..a4ec30857
--- /dev/null
+++ b/apps/v4/examples/radix/pagination-icons-only.tsx
@@ -0,0 +1,49 @@
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/examples/radix/ui/pagination"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+
+export function PaginationIconsOnly() {
+  return (
+    <div className="flex items-center justify-between gap-4">
+      <Field orientation="horizontal" className="w-fit">
+        <FieldLabel htmlFor="select-rows-per-page">Rows per page</FieldLabel>
+        <Select defaultValue="25">
+          <SelectTrigger className="w-20" id="select-rows-per-page">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent align="start">
+            <SelectGroup>
+              <SelectItem value="10">10</SelectItem>
+              <SelectItem value="25">25</SelectItem>
+              <SelectItem value="50">50</SelectItem>
+              <SelectItem value="100">100</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </Field>
+      <Pagination className="mx-0 w-auto">
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious href="#" />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext href="#" />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/pagination-simple.tsx b/apps/v4/examples/radix/pagination-simple.tsx
new file mode 100644
index 000000000..a4335efc9
--- /dev/null
+++ b/apps/v4/examples/radix/pagination-simple.tsx
@@ -0,0 +1,32 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+} from "@/examples/radix/ui/pagination"
+
+export function PaginationSimple() {
+  return (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationLink href="#">1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#" isActive>
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">3</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">4</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">5</PaginationLink>
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
diff --git a/apps/v4/examples/radix/popover-alignments.tsx b/apps/v4/examples/radix/popover-alignments.tsx
new file mode 100644
index 000000000..b1bccfc35
--- /dev/null
+++ b/apps/v4/examples/radix/popover-alignments.tsx
@@ -0,0 +1,43 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/examples/radix/ui/popover"
+
+export function PopoverAlignments() {
+  return (
+    <div className="flex gap-6">
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="outline" size="sm">
+            Start
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent align="start" className="w-40">
+          Aligned to start
+        </PopoverContent>
+      </Popover>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="outline" size="sm">
+            Center
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent align="center" className="w-40">
+          Aligned to center
+        </PopoverContent>
+      </Popover>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="outline" size="sm">
+            End
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent align="end" className="w-40">
+          Aligned to end
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/popover-basic.tsx b/apps/v4/examples/radix/popover-basic.tsx
new file mode 100644
index 000000000..1bf3f5c08
--- /dev/null
+++ b/apps/v4/examples/radix/popover-basic.tsx
@@ -0,0 +1,27 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@/examples/radix/ui/popover"
+
+export function PopoverBasic() {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent align="start">
+        <PopoverHeader>
+          <PopoverTitle>Dimensions</PopoverTitle>
+          <PopoverDescription>
+            Set the dimensions for the layer.
+          </PopoverDescription>
+        </PopoverHeader>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/v4/examples/radix/popover-in-dialog.tsx b/apps/v4/examples/radix/popover-in-dialog.tsx
new file mode 100644
index 000000000..541b96fdd
--- /dev/null
+++ b/apps/v4/examples/radix/popover-in-dialog.tsx
@@ -0,0 +1,51 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/radix/ui/dialog"
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@/examples/radix/ui/popover"
+
+export function PopoverInDialog() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Popover Example</DialogTitle>
+          <DialogDescription>
+            Click the button below to see the popover.
+          </DialogDescription>
+        </DialogHeader>
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="outline" className="w-fit">
+              Open Popover
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent align="start">
+            <PopoverHeader>
+              <PopoverTitle>Popover in Dialog</PopoverTitle>
+              <PopoverDescription>
+                This popover appears inside a dialog. Click the button to open
+                it.
+              </PopoverDescription>
+            </PopoverHeader>
+          </PopoverContent>
+        </Popover>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/v4/examples/radix/popover-with-form.tsx b/apps/v4/examples/radix/popover-with-form.tsx
new file mode 100644
index 000000000..db18cebf4
--- /dev/null
+++ b/apps/v4/examples/radix/popover-with-form.tsx
@@ -0,0 +1,43 @@
+import { Button } from "@/examples/radix/ui/button"
+import { Field, FieldGroup, FieldLabel } from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@/examples/radix/ui/popover"
+
+export function PopoverWithForm() {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-64" align="start">
+        <PopoverHeader>
+          <PopoverTitle>Dimensions</PopoverTitle>
+          <PopoverDescription>
+            Set the dimensions for the layer.
+          </PopoverDescription>
+        </PopoverHeader>
+        <FieldGroup className="gap-4">
+          <Field orientation="horizontal">
+            <FieldLabel htmlFor="width" className="w-1/2">
+              Width
+            </FieldLabel>
+            <Input id="width" defaultValue="100%" />
+          </Field>
+          <Field orientation="horizontal">
+            <FieldLabel htmlFor="height" className="w-1/2">
+              Height
+            </FieldLabel>
+            <Input id="height" defaultValue="25px" />
+          </Field>
+        </FieldGroup>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/v4/examples/radix/progress-controlled.tsx b/apps/v4/examples/radix/progress-controlled.tsx
new file mode 100644
index 000000000..28e5f3859
--- /dev/null
+++ b/apps/v4/examples/radix/progress-controlled.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+import { Progress } from "@/examples/radix/ui/progress"
+import { Slider } from "@/examples/radix/ui/slider"
+
+export function ProgressControlled() {
+  const [value, setValue] = React.useState([50])
+
+  return (
+    <div className="flex w-full flex-col gap-4">
+      <Progress value={value[0]} className="w-full" />
+      <Slider
+        value={value}
+        onValueChange={setValue}
+        min={0}
+        max={100}
+        step={1}
+      />
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/progress-values.tsx b/apps/v4/examples/radix/progress-values.tsx
new file mode 100644
index 000000000..10b16846d
--- /dev/null
+++ b/apps/v4/examples/radix/progress-values.tsx
@@ -0,0 +1,13 @@
+import { Progress } from "@/examples/radix/ui/progress"
+
+export function ProgressValues() {
+  return (
+    <div className="flex w-full flex-col gap-4">
+      <Progress value={0} />
+      <Progress value={25} className="w-full" />
+      <Progress value={50} />
+      <Progress value={75} />
+      <Progress value={100} />
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/progress-with-label.tsx b/apps/v4/examples/radix/progress-with-label.tsx
new file mode 100644
index 000000000..4141410cb
--- /dev/null
+++ b/apps/v4/examples/radix/progress-with-label.tsx
@@ -0,0 +1,14 @@
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
+import { Progress } from "@/examples/radix/ui/progress"
+
+export function ProgressWithLabel() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="progress-upload">
+        <span>Upload progress</span>
+        <span className="ml-auto">66%</span>
+      </FieldLabel>
+      <Progress value={66} className="w-full" id="progress-upload" />
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/radio-fields.tsx b/apps/v4/examples/radix/radio-fields.tsx
new file mode 100644
index 000000000..6cacb8130
--- /dev/null
+++ b/apps/v4/examples/radix/radio-fields.tsx
@@ -0,0 +1,149 @@
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+  FieldTitle,
+} from "@/examples/radix/ui/field"
+import { RadioGroup, RadioGroupItem } from "@/examples/radix/ui/radio-group"
+
+export function RadioFields() {
+  return (
+    <FieldGroup>
+      <FieldSet>
+        <FieldLegend variant="label">Subscription Plan</FieldLegend>
+        <RadioGroup defaultValue="free">
+          <Field orientation="horizontal">
+            <RadioGroupItem value="free" id="radio-free" />
+            <FieldLabel htmlFor="radio-free" className="font-normal">
+              Free Plan
+            </FieldLabel>
+          </Field>
+          <Field orientation="horizontal">
+            <RadioGroupItem value="pro" id="radio-pro" />
+            <FieldLabel htmlFor="radio-pro" className="font-normal">
+              Pro Plan
+            </FieldLabel>
+          </Field>
+          <Field orientation="horizontal">
+            <RadioGroupItem value="enterprise" id="radio-enterprise" />
+            <FieldLabel htmlFor="radio-enterprise" className="font-normal">
+              Enterprise
+            </FieldLabel>
+          </Field>
+        </RadioGroup>
+      </FieldSet>
+      <FieldSet>
+        <FieldLegend variant="label">Battery Level</FieldLegend>
+        <FieldDescription>
+          Choose your preferred battery level.
+        </FieldDescription>
+        <RadioGroup>
+          <Field orientation="horizontal">
+            <RadioGroupItem value="high" id="battery-high" />
+            <FieldLabel htmlFor="battery-high">High</FieldLabel>
+          </Field>
+          <Field orientation="horizontal">
+            <RadioGroupItem value="medium" id="battery-medium" />
+            <FieldLabel htmlFor="battery-medium">Medium</FieldLabel>
+          </Field>
+          <Field orientation="horizontal">
+            <RadioGroupItem value="low" id="battery-low" />
+            <FieldLabel htmlFor="battery-low">Low</FieldLabel>
+          </Field>
+        </RadioGroup>
+      </FieldSet>
+      <RadioGroup className="gap-6">
+        <Field orientation="horizontal">
+          <RadioGroupItem value="option1" id="radio-content-1" />
+          <FieldContent>
+            <FieldLabel htmlFor="radio-content-1">Enable Touch ID</FieldLabel>
+            <FieldDescription>
+              Enable Touch ID to quickly unlock your device.
+            </FieldDescription>
+          </FieldContent>
+        </Field>
+        <Field orientation="horizontal">
+          <RadioGroupItem value="option2" id="radio-content-2" />
+          <FieldContent>
+            <FieldLabel htmlFor="radio-content-2">
+              Enable Touch ID and Face ID to make it even faster to unlock your
+              device. This is a long label to test the layout.
+            </FieldLabel>
+            <FieldDescription>
+              Enable Touch ID to quickly unlock your device.
+            </FieldDescription>
+          </FieldContent>
+        </Field>
+      </RadioGroup>
+      <RadioGroup className="gap-3">
+        <FieldLabel htmlFor="radio-title-1">
+          <Field orientation="horizontal">
+            <RadioGroupItem value="title1" id="radio-title-1" />
+            <FieldContent>
+              <FieldTitle>Enable Touch ID</FieldTitle>
+              <FieldDescription>
+                Enable Touch ID to quickly unlock your device.
+              </FieldDescription>
+            </FieldContent>
+          </Field>
+        </FieldLabel>
+        <FieldLabel htmlFor="radio-title-2">
+          <Field orientation="horizontal">
+            <RadioGroupItem value="title2" id="radio-title-2" />
+            <FieldContent>
+              <FieldTitle>
+                Enable Touch ID and Face ID to make it even faster to unlock
+                your device. This is a long label to test the layout.
+              </FieldTitle>
+              <FieldDescription>
+                Enable Touch ID to quickly unlock your device.
+              </FieldDescription>
+            </FieldContent>
+          </Field>
+        </FieldLabel>
+      </RadioGroup>
+      <FieldSet>
+        <FieldLegend variant="label">Invalid Radio Group</FieldLegend>
+        <RadioGroup>
+          <Field data-invalid orientation="horizontal">
+            <RadioGroupItem
+              value="invalid1"
+              id="radio-invalid-1"
+              aria-invalid
+            />
+            <FieldLabel htmlFor="radio-invalid-1">Invalid Option 1</FieldLabel>
+          </Field>
+          <Field data-invalid orientation="horizontal">
+            <RadioGroupItem
+              value="invalid2"
+              id="radio-invalid-2"
+              aria-invalid
+            />
+            <FieldLabel htmlFor="radio-invalid-2">Invalid Option 2</FieldLabel>
+          </Field>
+        </RadioGroup>
+      </FieldSet>
+      <FieldSet>
+        <FieldLegend variant="label">Disabled Radio Group</FieldLegend>
+        <RadioGroup disabled>
+          <Field data-disabled orientation="horizontal">
+            <RadioGroupItem value="disabled1" id="radio-disabled-1" disabled />
+            <FieldLabel htmlFor="radio-disabled-1">
+              Disabled Option 1
+            </FieldLabel>
+          </Field>
+          <Field data-disabled orientation="horizontal">
+            <RadioGroupItem value="disabled2" id="radio-disabled-2" disabled />
+            <FieldLabel htmlFor="radio-disabled-2">
+              Disabled Option 2
+            </FieldLabel>
+          </Field>
+        </RadioGroup>
+      </FieldSet>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/radio-group-basic.tsx b/apps/v4/examples/radix/radio-group-basic.tsx
new file mode 100644
index 000000000..1aef379a7
--- /dev/null
+++ b/apps/v4/examples/radix/radio-group-basic.tsx
@@ -0,0 +1,27 @@
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
+import { RadioGroup, RadioGroupItem } from "@/examples/radix/ui/radio-group"
+
+export function RadioGroupBasic() {
+  return (
+    <RadioGroup defaultValue="comfortable">
+      <Field orientation="horizontal">
+        <RadioGroupItem value="default" id="r1" />
+        <FieldLabel htmlFor="r1" className="font-normal">
+          Default
+        </FieldLabel>
+      </Field>
+      <Field orientation="horizontal">
+        <RadioGroupItem value="comfortable" id="r2" />
+        <FieldLabel htmlFor="r2" className="font-normal">
+          Comfortable
+        </FieldLabel>
+      </Field>
+      <Field orientation="horizontal">
+        <RadioGroupItem value="compact" id="r3" />
+        <FieldLabel htmlFor="r3" className="font-normal">
+          Compact
+        </FieldLabel>
+      </Field>
+    </RadioGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/radio-group-disabled.tsx b/apps/v4/examples/radix/radio-group-disabled.tsx
new file mode 100644
index 000000000..b37889567
--- /dev/null
+++ b/apps/v4/examples/radix/radio-group-disabled.tsx
@@ -0,0 +1,27 @@
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
+import { RadioGroup, RadioGroupItem } from "@/examples/radix/ui/radio-group"
+
+export function RadioGroupDisabled() {
+  return (
+    <RadioGroup defaultValue="option2" disabled>
+      <Field orientation="horizontal">
+        <RadioGroupItem value="option1" id="disabled-1" />
+        <FieldLabel htmlFor="disabled-1" className="font-normal">
+          Option 1
+        </FieldLabel>
+      </Field>
+      <Field orientation="horizontal">
+        <RadioGroupItem value="option2" id="disabled-2" />
+        <FieldLabel htmlFor="disabled-2" className="font-normal">
+          Option 2
+        </FieldLabel>
+      </Field>
+      <Field orientation="horizontal">
+        <RadioGroupItem value="option3" id="disabled-3" />
+        <FieldLabel htmlFor="disabled-3" className="font-normal">
+          Option 3
+        </FieldLabel>
+      </Field>
+    </RadioGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/radio-group-grid.tsx b/apps/v4/examples/radix/radio-group-grid.tsx
new file mode 100644
index 000000000..c776c0b31
--- /dev/null
+++ b/apps/v4/examples/radix/radio-group-grid.tsx
@@ -0,0 +1,33 @@
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
+import { RadioGroup, RadioGroupItem } from "@/examples/radix/ui/radio-group"
+
+export function RadioGroupGrid() {
+  return (
+    <RadioGroup defaultValue="medium" className="grid grid-cols-2 gap-2">
+      <FieldLabel htmlFor="size-small">
+        <Field orientation="horizontal">
+          <RadioGroupItem value="small" id="size-small" />
+          <div className="font-medium">Small</div>
+        </Field>
+      </FieldLabel>
+      <FieldLabel htmlFor="size-medium">
+        <Field orientation="horizontal">
+          <RadioGroupItem value="medium" id="size-medium" />
+          <div className="font-medium">Medium</div>
+        </Field>
+      </FieldLabel>
+      <FieldLabel htmlFor="size-large">
+        <Field orientation="horizontal">
+          <RadioGroupItem value="large" id="size-large" />
+          <div className="font-medium">Large</div>
+        </Field>
+      </FieldLabel>
+      <FieldLabel htmlFor="size-xlarge">
+        <Field orientation="horizontal">
+          <RadioGroupItem value="xlarge" id="size-xlarge" />
+          <div className="font-medium">X-Large</div>
+        </Field>
+      </FieldLabel>
+    </RadioGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/radio-group-invalid.tsx b/apps/v4/examples/radix/radio-group-invalid.tsx
new file mode 100644
index 000000000..7941a321d
--- /dev/null
+++ b/apps/v4/examples/radix/radio-group-invalid.tsx
@@ -0,0 +1,39 @@
+import {
+  Field,
+  FieldDescription,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@/examples/radix/ui/field"
+import { RadioGroup, RadioGroupItem } from "@/examples/radix/ui/radio-group"
+
+export function RadioGroupInvalid() {
+  return (
+    <FieldSet>
+      <FieldLegend>Notification Preferences</FieldLegend>
+      <FieldDescription>
+        Choose how you want to receive notifications.
+      </FieldDescription>
+      <RadioGroup defaultValue="email">
+        <Field orientation="horizontal" data-invalid>
+          <RadioGroupItem value="email" id="invalid-email" aria-invalid />
+          <FieldLabel htmlFor="invalid-email" className="font-normal">
+            Email only
+          </FieldLabel>
+        </Field>
+        <Field orientation="horizontal" data-invalid>
+          <RadioGroupItem value="sms" id="invalid-sms" aria-invalid />
+          <FieldLabel htmlFor="invalid-sms" className="font-normal">
+            SMS only
+          </FieldLabel>
+        </Field>
+        <Field orientation="horizontal" data-invalid>
+          <RadioGroupItem value="both" id="invalid-both" aria-invalid />
+          <FieldLabel htmlFor="invalid-both" className="font-normal">
+            Both Email & SMS
+          </FieldLabel>
+        </Field>
+      </RadioGroup>
+    </FieldSet>
+  )
+}
diff --git a/apps/v4/examples/radix/radio-group-with-descriptions.tsx b/apps/v4/examples/radix/radio-group-with-descriptions.tsx
new file mode 100644
index 000000000..f3577e69c
--- /dev/null
+++ b/apps/v4/examples/radix/radio-group-with-descriptions.tsx
@@ -0,0 +1,41 @@
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldLabel,
+} from "@/examples/radix/ui/field"
+import { RadioGroup, RadioGroupItem } from "@/examples/radix/ui/radio-group"
+
+export function RadioGroupWithDescriptions() {
+  return (
+    <RadioGroup defaultValue="plus">
+      <FieldLabel htmlFor="plus-plan">
+        <Field orientation="horizontal">
+          <FieldContent>
+            <div className="font-medium">Plus</div>
+            <FieldDescription>For individuals and small teams</FieldDescription>
+          </FieldContent>
+          <RadioGroupItem value="plus" id="plus-plan" />
+        </Field>
+      </FieldLabel>
+      <FieldLabel htmlFor="pro-plan">
+        <Field orientation="horizontal">
+          <FieldContent>
+            <div className="font-medium">Pro</div>
+            <FieldDescription>For growing businesses</FieldDescription>
+          </FieldContent>
+          <RadioGroupItem value="pro" id="pro-plan" />
+        </Field>
+      </FieldLabel>
+      <FieldLabel htmlFor="enterprise-plan">
+        <Field orientation="horizontal">
+          <FieldContent>
+            <div className="font-medium">Enterprise</div>
+            <FieldDescription>For large teams and enterprises</FieldDescription>
+          </FieldContent>
+          <RadioGroupItem value="enterprise" id="enterprise-plan" />
+        </Field>
+      </FieldLabel>
+    </RadioGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/radio-group-with-field-set.tsx b/apps/v4/examples/radix/radio-group-with-field-set.tsx
new file mode 100644
index 000000000..be8cd4ffb
--- /dev/null
+++ b/apps/v4/examples/radix/radio-group-with-field-set.tsx
@@ -0,0 +1,37 @@
+import {
+  Field,
+  FieldDescription,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@/examples/radix/ui/field"
+import { RadioGroup, RadioGroupItem } from "@/examples/radix/ui/radio-group"
+
+export function RadioGroupWithFieldSet() {
+  return (
+    <FieldSet>
+      <FieldLegend>Battery Level</FieldLegend>
+      <FieldDescription>Choose your preferred battery level.</FieldDescription>
+      <RadioGroup defaultValue="medium">
+        <Field orientation="horizontal">
+          <RadioGroupItem value="high" id="battery-high" />
+          <FieldLabel htmlFor="battery-high" className="font-normal">
+            High
+          </FieldLabel>
+        </Field>
+        <Field orientation="horizontal">
+          <RadioGroupItem value="medium" id="battery-medium" />
+          <FieldLabel htmlFor="battery-medium" className="font-normal">
+            Medium
+          </FieldLabel>
+        </Field>
+        <Field orientation="horizontal">
+          <RadioGroupItem value="low" id="battery-low" />
+          <FieldLabel htmlFor="battery-low" className="font-normal">
+            Low
+          </FieldLabel>
+        </Field>
+      </RadioGroup>
+    </FieldSet>
+  )
+}
diff --git a/apps/v4/examples/radix/resizable-controlled.tsx b/apps/v4/examples/radix/resizable-controlled.tsx
new file mode 100644
index 000000000..cc59d93c0
--- /dev/null
+++ b/apps/v4/examples/radix/resizable-controlled.tsx
@@ -0,0 +1,34 @@
+"use client"
+
+import * as React from "react"
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/examples/radix/ui/resizable"
+
+export function ResizableControlled() {
+  const [sizes, setSizes] = React.useState([30, 70])
+
+  return (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="min-h-[200px] rounded-lg border"
+      onLayout={(newSizes) => {
+        setSizes(newSizes)
+      }}
+    >
+      <ResizablePanel defaultSize={30} minSize={20}>
+        <div className="flex h-full flex-col items-center justify-center gap-2 p-6">
+          <span className="font-semibold">{Math.round(sizes[0] ?? 30)}%</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={70} minSize={30}>
+        <div className="flex h-full flex-col items-center justify-center gap-2 p-6">
+          <span className="font-semibold">{Math.round(sizes[1] ?? 70)}%</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/resizable-horizontal.tsx b/apps/v4/examples/radix/resizable-horizontal.tsx
new file mode 100644
index 000000000..3a7e68733
--- /dev/null
+++ b/apps/v4/examples/radix/resizable-horizontal.tsx
@@ -0,0 +1,26 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/examples/radix/ui/resizable"
+
+export function ResizableHorizontal() {
+  return (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="min-h-[200px] rounded-lg border"
+    >
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Sidebar</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Content</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/resizable-nested.tsx b/apps/v4/examples/radix/resizable-nested.tsx
new file mode 100644
index 000000000..aeb895d82
--- /dev/null
+++ b/apps/v4/examples/radix/resizable-nested.tsx
@@ -0,0 +1,33 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/examples/radix/ui/resizable"
+
+export function ResizableNested() {
+  return (
+    <ResizablePanelGroup direction="horizontal" className="rounded-lg border">
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-[200px] items-center justify-center p-6">
+          <span className="font-semibold">One</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={50}>
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel defaultSize={25}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Two</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel defaultSize={75}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Three</span>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/resizable-vertical.tsx b/apps/v4/examples/radix/resizable-vertical.tsx
index 29b522fdb..eaf7d4c2b 100644
--- a/apps/v4/examples/radix/resizable-vertical.tsx
+++ b/apps/v4/examples/radix/resizable-vertical.tsx
@@ -4,11 +4,11 @@ import {
   ResizablePanelGroup,
 } from "@/examples/radix/ui/resizable"
 
-export default function ResizableDemo() {
+export function ResizableVertical() {
   return (
     <ResizablePanelGroup
       direction="vertical"
-      className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
+      className="min-h-[200px] rounded-lg border"
     >
       <ResizablePanel defaultSize={25}>
         <div className="flex h-full items-center justify-center p-6">
diff --git a/apps/v4/examples/radix/resizable-with-handle.tsx b/apps/v4/examples/radix/resizable-with-handle.tsx
new file mode 100644
index 000000000..6fd9d1373
--- /dev/null
+++ b/apps/v4/examples/radix/resizable-with-handle.tsx
@@ -0,0 +1,26 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/examples/radix/ui/resizable"
+
+export function ResizableWithHandle() {
+  return (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="min-h-[200px] rounded-lg border"
+    >
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Sidebar</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Content</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/scroll-area-horizontal.tsx b/apps/v4/examples/radix/scroll-area-horizontal.tsx
new file mode 100644
index 000000000..acabd2f20
--- /dev/null
+++ b/apps/v4/examples/radix/scroll-area-horizontal.tsx
@@ -0,0 +1,46 @@
+import Image from "next/image"
+import { ScrollArea, ScrollBar } from "@/examples/radix/ui/scroll-area"
+
+const works = [
+  {
+    artist: "Ornella Binni",
+    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Tom Byrom",
+    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Vladimir Malyav",
+    art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
+  },
+] as const
+
+export function ScrollAreaHorizontal() {
+  return (
+    <ScrollArea className="mx-auto w-full max-w-96 rounded-md border p-4">
+      <div className="flex gap-4">
+        {works.map((artwork) => (
+          <figure key={artwork.artist} className="shrink-0">
+            <div className="overflow-hidden rounded-md">
+              <Image
+                src={artwork.art}
+                alt={`Photo by ${artwork.artist}`}
+                className="aspect-[3/4] h-fit w-fit object-cover"
+                width={300}
+                height={400}
+              />
+            </div>
+            <figcaption className="text-muted-foreground pt-2 text-xs">
+              Photo by{" "}
+              <span className="text-foreground font-semibold">
+                {artwork.artist}
+              </span>
+            </figcaption>
+          </figure>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  )
+}
diff --git a/apps/v4/examples/radix/scroll-area-vertical.tsx b/apps/v4/examples/radix/scroll-area-vertical.tsx
new file mode 100644
index 000000000..12af4f790
--- /dev/null
+++ b/apps/v4/examples/radix/scroll-area-vertical.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import { ScrollArea } from "@/examples/radix/ui/scroll-area"
+import { Separator } from "@/examples/radix/ui/separator"
+
+const tags = Array.from({ length: 50 }).map(
+  (_, i, a) => `v1.2.0-beta.${a.length - i}`
+)
+
+export function ScrollAreaVertical() {
+  return (
+    <ScrollArea className="mx-auto h-72 w-48 rounded-md border">
+      <div className="p-4">
+        <h4 className="mb-4 text-sm leading-none font-medium">Tags</h4>
+        {tags.map((tag) => (
+          <React.Fragment key={tag}>
+            <div className="text-sm">{tag}</div>
+            <Separator className="my-2" />
+          </React.Fragment>
+        ))}
+      </div>
+    </ScrollArea>
+  )
+}
diff --git a/apps/v4/examples/radix/select-basic.tsx b/apps/v4/examples/radix/select-basic.tsx
new file mode 100644
index 000000000..b8efdb66a
--- /dev/null
+++ b/apps/v4/examples/radix/select-basic.tsx
@@ -0,0 +1,29 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+
+export function SelectBasic() {
+  return (
+    <Select>
+      <SelectTrigger>
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="blueberry">Blueberry</SelectItem>
+          <SelectItem value="grapes" disabled>
+            Grapes
+          </SelectItem>
+          <SelectItem value="pineapple">Pineapple</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/apps/v4/examples/radix/select-disabled.tsx b/apps/v4/examples/radix/select-disabled.tsx
new file mode 100644
index 000000000..570004f6e
--- /dev/null
+++ b/apps/v4/examples/radix/select-disabled.tsx
@@ -0,0 +1,29 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+
+export function SelectDisabled() {
+  return (
+    <Select disabled>
+      <SelectTrigger>
+        <SelectValue placeholder="Disabled" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="blueberry">Blueberry</SelectItem>
+          <SelectItem value="grapes" disabled>
+            Grapes
+          </SelectItem>
+          <SelectItem value="pineapple">Pineapple</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/apps/v4/examples/radix/select-fields.tsx b/apps/v4/examples/radix/select-fields.tsx
new file mode 100644
index 000000000..3b400e1cb
--- /dev/null
+++ b/apps/v4/examples/radix/select-fields.tsx
@@ -0,0 +1,95 @@
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/radix/ui/field"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+
+export function SelectFields() {
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="select-basic">Basic Select</FieldLabel>
+        <Select>
+          <SelectTrigger id="select-basic">
+            <SelectValue placeholder="Choose an option" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="option1">Option 1</SelectItem>
+            <SelectItem value="option2">Option 2</SelectItem>
+            <SelectItem value="option3">Option 3</SelectItem>
+          </SelectContent>
+        </Select>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="select-country">Country</FieldLabel>
+        <Select>
+          <SelectTrigger id="select-country">
+            <SelectValue placeholder="Select your country" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="us">United States</SelectItem>
+            <SelectItem value="uk">United Kingdom</SelectItem>
+            <SelectItem value="ca">Canada</SelectItem>
+          </SelectContent>
+        </Select>
+        <FieldDescription>
+          Select the country where you currently reside.
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="select-timezone">Timezone</FieldLabel>
+        <FieldDescription>
+          Choose your local timezone for accurate scheduling.
+        </FieldDescription>
+        <Select>
+          <SelectTrigger id="select-timezone">
+            <SelectValue placeholder="Select timezone" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="utc">UTC</SelectItem>
+            <SelectItem value="est">Eastern Time</SelectItem>
+            <SelectItem value="pst">Pacific Time</SelectItem>
+          </SelectContent>
+        </Select>
+      </Field>
+      <Field data-invalid>
+        <FieldLabel htmlFor="select-invalid">Invalid Select</FieldLabel>
+        <Select>
+          <SelectTrigger id="select-invalid" aria-invalid>
+            <SelectValue placeholder="This field has an error" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="option1">Option 1</SelectItem>
+            <SelectItem value="option2">Option 2</SelectItem>
+            <SelectItem value="option3">Option 3</SelectItem>
+          </SelectContent>
+        </Select>
+        <FieldDescription>
+          This field contains validation errors.
+        </FieldDescription>
+      </Field>
+      <Field data-disabled>
+        <FieldLabel htmlFor="select-disabled-field">Disabled Field</FieldLabel>
+        <Select disabled>
+          <SelectTrigger id="select-disabled-field">
+            <SelectValue placeholder="Cannot select" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="option1">Option 1</SelectItem>
+            <SelectItem value="option2">Option 2</SelectItem>
+            <SelectItem value="option3">Option 3</SelectItem>
+          </SelectContent>
+        </Select>
+        <FieldDescription>This field is currently disabled.</FieldDescription>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/select-in-dialog.tsx b/apps/v4/examples/radix/select-in-dialog.tsx
new file mode 100644
index 000000000..3335ca320
--- /dev/null
+++ b/apps/v4/examples/radix/select-in-dialog.tsx
@@ -0,0 +1,49 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/radix/ui/dialog"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+
+export function SelectInDialog() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Select Example</DialogTitle>
+          <DialogDescription>
+            Use the select below to choose a fruit.
+          </DialogDescription>
+        </DialogHeader>
+        <Select>
+          <SelectTrigger>
+            <SelectValue placeholder="Select a fruit" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="apple">Apple</SelectItem>
+              <SelectItem value="banana">Banana</SelectItem>
+              <SelectItem value="blueberry">Blueberry</SelectItem>
+              <SelectItem value="grapes">Grapes</SelectItem>
+              <SelectItem value="pineapple">Pineapple</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/v4/examples/radix/select-inline.tsx b/apps/v4/examples/radix/select-inline.tsx
new file mode 100644
index 000000000..6c73065e0
--- /dev/null
+++ b/apps/v4/examples/radix/select-inline.tsx
@@ -0,0 +1,39 @@
+import { Input } from "@/examples/radix/ui/input"
+import {
+  NativeSelect,
+  NativeSelectOption,
+} from "@/examples/radix/ui/native-select"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+
+export function SelectInline() {
+  return (
+    <div className="flex items-center gap-2">
+      <Input placeholder="Search..." className="flex-1" />
+      <Select>
+        <SelectTrigger className="w-[140px]">
+          <SelectValue placeholder="Filter" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem value="all">All</SelectItem>
+            <SelectItem value="active">Active</SelectItem>
+            <SelectItem value="inactive">Inactive</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <NativeSelect className="w-[140px]">
+        <NativeSelectOption value="">Sort by</NativeSelectOption>
+        <NativeSelectOption value="name">Name</NativeSelectOption>
+        <NativeSelectOption value="date">Date</NativeSelectOption>
+        <NativeSelectOption value="status">Status</NativeSelectOption>
+      </NativeSelect>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/select-invalid.tsx b/apps/v4/examples/radix/select-invalid.tsx
new file mode 100644
index 000000000..ee636624b
--- /dev/null
+++ b/apps/v4/examples/radix/select-invalid.tsx
@@ -0,0 +1,48 @@
+import { Field, FieldError, FieldLabel } from "@/examples/radix/ui/field"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+
+export function SelectInvalid() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Select>
+        <SelectTrigger aria-invalid="true">
+          <SelectValue placeholder="Select a fruit" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+            <SelectItem value="blueberry">Blueberry</SelectItem>
+            <SelectItem value="grapes">Grapes</SelectItem>
+            <SelectItem value="pineapple">Pineapple</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <Field data-invalid>
+        <FieldLabel htmlFor="select-fruit-invalid">Favorite Fruit</FieldLabel>
+        <Select>
+          <SelectTrigger id="select-fruit-invalid" aria-invalid>
+            <SelectValue placeholder="Select a fruit" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="apple">Apple</SelectItem>
+              <SelectItem value="banana">Banana</SelectItem>
+              <SelectItem value="blueberry">Blueberry</SelectItem>
+              <SelectItem value="grapes">Grapes</SelectItem>
+              <SelectItem value="pineapple">Pineapple</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <FieldError errors={[{ message: "Please select a valid fruit." }]} />
+      </Field>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/select-item-aligned.tsx b/apps/v4/examples/radix/select-item-aligned.tsx
new file mode 100644
index 000000000..c718cb6bc
--- /dev/null
+++ b/apps/v4/examples/radix/select-item-aligned.tsx
@@ -0,0 +1,29 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+
+export function SelectItemAligned() {
+  return (
+    <Select>
+      <SelectTrigger>
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent position="popper">
+        <SelectGroup>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="blueberry">Blueberry</SelectItem>
+          <SelectItem value="grapes" disabled>
+            Grapes
+          </SelectItem>
+          <SelectItem value="pineapple">Pineapple</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/apps/v4/examples/radix/select-large-list.tsx b/apps/v4/examples/radix/select-large-list.tsx
new file mode 100644
index 000000000..90570d70a
--- /dev/null
+++ b/apps/v4/examples/radix/select-large-list.tsx
@@ -0,0 +1,28 @@
+import { Item } from "@/examples/radix/ui/item"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+
+export function SelectLargeList() {
+  return (
+    <Select>
+      <SelectTrigger>
+        <SelectValue placeholder="Select an item" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          {Array.from({ length: 100 }).map((_, i) => (
+            <SelectItem key={i} value={`item-${i}`}>
+              Item {i}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/apps/v4/examples/radix/select-plan.tsx b/apps/v4/examples/radix/select-plan.tsx
new file mode 100644
index 000000000..ef048e689
--- /dev/null
+++ b/apps/v4/examples/radix/select-plan.tsx
@@ -0,0 +1,70 @@
+"use client"
+
+import * as React from "react"
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from "@/examples/radix/ui/item"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+
+const plans = [
+  {
+    name: "Starter",
+    description: "Perfect for individuals getting started.",
+  },
+  {
+    name: "Professional",
+    description: "Ideal for growing teams and businesses.",
+  },
+  {
+    name: "Enterprise",
+    description: "Advanced features for large organizations.",
+  },
+]
+
+function SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {
+  return (
+    <Item size="xs" className="w-full p-0">
+      <ItemContent className="gap-0">
+        <ItemTitle>{plan.name}</ItemTitle>
+        <ItemDescription className="text-xs">
+          {plan.description}
+        </ItemDescription>
+      </ItemContent>
+    </Item>
+  )
+}
+
+export function SelectPlan() {
+  const [plan, setPlan] = React.useState<string>(plans[0].name)
+
+  const selectedPlan = plans.find((p) => p.name === plan)
+
+  return (
+    <Select value={plan} onValueChange={setPlan}>
+      <SelectTrigger className="h-auto! w-72">
+        <SelectValue>
+          {selectedPlan && <SelectPlanItem plan={selectedPlan} />}
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          {plans.map((plan) => (
+            <SelectItem key={plan.name} value={plan.name}>
+              <SelectPlanItem plan={plan} />
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/apps/v4/examples/radix/select-sizes.tsx b/apps/v4/examples/radix/select-sizes.tsx
new file mode 100644
index 000000000..e4f8c0bc9
--- /dev/null
+++ b/apps/v4/examples/radix/select-sizes.tsx
@@ -0,0 +1,39 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+
+export function SelectSizes() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Select>
+        <SelectTrigger size="sm">
+          <SelectValue placeholder="Small size" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+            <SelectItem value="blueberry">Blueberry</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <Select>
+        <SelectTrigger size="default">
+          <SelectValue placeholder="Default size" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+            <SelectItem value="blueberry">Blueberry</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/select-with-button.tsx b/apps/v4/examples/radix/select-with-button.tsx
new file mode 100644
index 000000000..3a2251edb
--- /dev/null
+++ b/apps/v4/examples/radix/select-with-button.tsx
@@ -0,0 +1,48 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+
+export function SelectWithButton() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-2">
+        <Select>
+          <SelectTrigger size="sm">
+            <SelectValue placeholder="Small" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="apple">Apple</SelectItem>
+              <SelectItem value="banana">Banana</SelectItem>
+              <SelectItem value="blueberry">Blueberry</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <Button variant="outline" size="sm">
+          Submit
+        </Button>
+      </div>
+      <div className="flex items-center gap-2">
+        <Select>
+          <SelectTrigger>
+            <SelectValue placeholder="Default" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="apple">Apple</SelectItem>
+              <SelectItem value="banana">Banana</SelectItem>
+              <SelectItem value="blueberry">Blueberry</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <Button variant="outline">Submit</Button>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/select-with-field.tsx b/apps/v4/examples/radix/select-with-field.tsx
new file mode 100644
index 000000000..23d135e4b
--- /dev/null
+++ b/apps/v4/examples/radix/select-with-field.tsx
@@ -0,0 +1,34 @@
+import { Field, FieldDescription, FieldLabel } from "@/examples/radix/ui/field"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+
+export function SelectWithField() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="select-fruit">Favorite Fruit</FieldLabel>
+      <Select>
+        <SelectTrigger id="select-fruit">
+          <SelectValue placeholder="Select a fruit" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+            <SelectItem value="blueberry">Blueberry</SelectItem>
+            <SelectItem value="grapes">Grapes</SelectItem>
+            <SelectItem value="pineapple">Pineapple</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <FieldDescription>
+        Choose your favorite fruit from the list.
+      </FieldDescription>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/select-with-groups.tsx b/apps/v4/examples/radix/select-with-groups.tsx
new file mode 100644
index 000000000..42ac8f47c
--- /dev/null
+++ b/apps/v4/examples/radix/select-with-groups.tsx
@@ -0,0 +1,35 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+
+export function SelectWithGroups() {
+  return (
+    <Select>
+      <SelectTrigger>
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Fruits</SelectLabel>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="blueberry">Blueberry</SelectItem>
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectLabel>Vegetables</SelectLabel>
+          <SelectItem value="carrot">Carrot</SelectItem>
+          <SelectItem value="broccoli">Broccoli</SelectItem>
+          <SelectItem value="spinach">Spinach</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/apps/v4/examples/radix/select-with-icons.tsx b/apps/v4/examples/radix/select-with-icons.tsx
new file mode 100644
index 000000000..7dd92b511
--- /dev/null
+++ b/apps/v4/examples/radix/select-with-icons.tsx
@@ -0,0 +1,72 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+import { ChartBarIcon, ChartLineIcon, ChartPieIcon } from "lucide-react"
+
+export function SelectWithIcons() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Select>
+        <SelectTrigger size="sm">
+          <SelectValue
+            placeholder={
+              <>
+                <ChartLineIcon />
+                Chart Type
+              </>
+            }
+          />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem value="line">
+              <ChartLineIcon />
+              Line
+            </SelectItem>
+            <SelectItem value="bar">
+              <ChartBarIcon />
+              Bar
+            </SelectItem>
+            <SelectItem value="pie">
+              <ChartPieIcon />
+              Pie
+            </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <Select>
+        <SelectTrigger size="default">
+          <SelectValue
+            placeholder={
+              <>
+                <ChartLineIcon />
+                Chart Type
+              </>
+            }
+          />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem value="line">
+              <ChartLineIcon />
+              Line
+            </SelectItem>
+            <SelectItem value="bar">
+              <ChartBarIcon />
+              Bar
+            </SelectItem>
+            <SelectItem value="pie">
+              <ChartPieIcon />
+              Pie
+            </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/separator-horizontal.tsx b/apps/v4/examples/radix/separator-horizontal.tsx
new file mode 100644
index 000000000..26dc9b7b3
--- /dev/null
+++ b/apps/v4/examples/radix/separator-horizontal.tsx
@@ -0,0 +1,19 @@
+import { Separator } from "@/examples/radix/ui/separator"
+
+export function SeparatorHorizontal() {
+  return (
+    <div className="style-lyra:text-xs/relaxed flex flex-col gap-4 text-sm">
+      <div className="flex flex-col gap-1">
+        <div className="leading-none font-medium">shadcn/ui</div>
+        <div className="text-muted-foreground">
+          The Foundation for your Design System
+        </div>
+      </div>
+      <Separator />
+      <div>
+        A set of beautifully designed components that you can customize, extend,
+        and build on.
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/separator-in-list.tsx b/apps/v4/examples/radix/separator-in-list.tsx
new file mode 100644
index 000000000..6ad6e8fd4
--- /dev/null
+++ b/apps/v4/examples/radix/separator-in-list.tsx
@@ -0,0 +1,22 @@
+import { Separator } from "@/examples/radix/ui/separator"
+
+export function SeparatorInList() {
+  return (
+    <div className="style-lyra:text-xs/relaxed flex flex-col gap-2 text-sm">
+      <dl className="flex items-center justify-between">
+        <dt>Item 1</dt>
+        <dd className="text-muted-foreground">Value 1</dd>
+      </dl>
+      <Separator />
+      <dl className="flex items-center justify-between">
+        <dt>Item 2</dt>
+        <dd className="text-muted-foreground">Value 2</dd>
+      </dl>
+      <Separator />
+      <dl className="flex items-center justify-between">
+        <dt>Item 3</dt>
+        <dd className="text-muted-foreground">Value 3</dd>
+      </dl>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/separator-vertical-menu.tsx b/apps/v4/examples/radix/separator-vertical-menu.tsx
new file mode 100644
index 000000000..525a0f4bd
--- /dev/null
+++ b/apps/v4/examples/radix/separator-vertical-menu.tsx
@@ -0,0 +1,26 @@
+import { Separator } from "@/examples/radix/ui/separator"
+
+export function SeparatorVerticalMenu() {
+  return (
+    <div className="style-lyra:text-xs/relaxed flex items-center gap-2 text-sm md:gap-4">
+      <div className="flex flex-col gap-1">
+        <span className="font-medium">Settings</span>
+        <span className="text-muted-foreground text-xs">
+          Manage preferences
+        </span>
+      </div>
+      <Separator orientation="vertical" />
+      <div className="flex flex-col gap-1">
+        <span className="font-medium">Account</span>
+        <span className="text-muted-foreground text-xs">
+          Profile & security
+        </span>
+      </div>
+      <Separator orientation="vertical" />
+      <div className="flex flex-col gap-1">
+        <span className="font-medium">Help</span>
+        <span className="text-muted-foreground text-xs">Support & docs</span>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/separator-vertical.tsx b/apps/v4/examples/radix/separator-vertical.tsx
new file mode 100644
index 000000000..ea894f518
--- /dev/null
+++ b/apps/v4/examples/radix/separator-vertical.tsx
@@ -0,0 +1,13 @@
+import { Separator } from "@/examples/radix/ui/separator"
+
+export function SeparatorVertical() {
+  return (
+    <div className="style-lyra:text-xs/relaxed flex h-5 items-center gap-4 text-sm">
+      <div>Blog</div>
+      <Separator orientation="vertical" />
+      <div>Docs</div>
+      <Separator orientation="vertical" />
+      <div>Source</div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/sheet-no-close-button.tsx b/apps/v4/examples/radix/sheet-no-close-button.tsx
new file mode 100644
index 000000000..48a9d1471
--- /dev/null
+++ b/apps/v4/examples/radix/sheet-no-close-button.tsx
@@ -0,0 +1,28 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/examples/radix/ui/sheet"
+
+export function SheetNoCloseButton() {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">No Close Button</Button>
+      </SheetTrigger>
+      <SheetContent showCloseButton={false}>
+        <SheetHeader>
+          <SheetTitle>No Close Button</SheetTitle>
+          <SheetDescription>
+            This sheet doesn&apos;t have a close button in the top-right corner.
+            You can only close it using the button below.
+          </SheetDescription>
+        </SheetHeader>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/apps/v4/examples/radix/sheet-with-form.tsx b/apps/v4/examples/radix/sheet-with-form.tsx
new file mode 100644
index 000000000..b81f227c4
--- /dev/null
+++ b/apps/v4/examples/radix/sheet-with-form.tsx
@@ -0,0 +1,49 @@
+import { Button } from "@/examples/radix/ui/button"
+import { Field, FieldGroup, FieldLabel } from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/examples/radix/ui/sheet"
+
+export function SheetWithForm() {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Edit profile</SheetTitle>
+          <SheetDescription>
+            Make changes to your profile here. Click save when you&apos;re done.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4">
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="sheet-demo-name">Name</FieldLabel>
+              <Input id="sheet-demo-name" defaultValue="Pedro Duarte" />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="sheet-demo-username">Username</FieldLabel>
+              <Input id="sheet-demo-username" defaultValue="@peduarte" />
+            </Field>
+          </FieldGroup>
+        </div>
+        <SheetFooter>
+          <Button type="submit">Save changes</Button>
+          <SheetClose asChild>
+            <Button variant="outline">Close</Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/apps/v4/examples/radix/sheet-with-sides.tsx b/apps/v4/examples/radix/sheet-with-sides.tsx
new file mode 100644
index 000000000..816fc9323
--- /dev/null
+++ b/apps/v4/examples/radix/sheet-with-sides.tsx
@@ -0,0 +1,64 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/examples/radix/ui/sheet"
+
+const SHEET_SIDES = ["top", "right", "bottom", "left"] as const
+
+export function SheetWithSides() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {SHEET_SIDES.map((side) => (
+        <Sheet key={side}>
+          <SheetTrigger asChild>
+            <Button variant="outline" className="capitalize">
+              {side}
+            </Button>
+          </SheetTrigger>
+          <SheetContent
+            side={side}
+            className="data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]"
+          >
+            <SheetHeader>
+              <SheetTitle>Edit profile</SheetTitle>
+              <SheetDescription>
+                Make changes to your profile here. Click save when you&apos;re
+                done.
+              </SheetDescription>
+            </SheetHeader>
+            <div className="no-scrollbar style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4 overflow-y-auto">
+              {Array.from({ length: 10 }).map((_, index) => (
+                <p
+                  key={index}
+                  className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+                >
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+                  irure dolor in reprehenderit in voluptate velit esse cillum
+                  dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                  cupidatat non proident, sunt in culpa qui officia deserunt
+                  mollit anim id est laborum.
+                </p>
+              ))}
+            </div>
+            <SheetFooter>
+              <Button type="submit">Save changes</Button>
+              <SheetClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </SheetClose>
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/skeleton-avatar.tsx b/apps/v4/examples/radix/skeleton-avatar.tsx
new file mode 100644
index 000000000..f5458699c
--- /dev/null
+++ b/apps/v4/examples/radix/skeleton-avatar.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from "@/examples/radix/ui/skeleton"
+
+export function SkeletonAvatar() {
+  return (
+    <div className="flex w-full items-center gap-4">
+      <Skeleton className="size-10 shrink-0 rounded-full" />
+      <div className="grid gap-2">
+        <Skeleton className="h-4 w-[150px]" />
+        <Skeleton className="h-4 w-[100px]" />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/skeleton-card.tsx b/apps/v4/examples/radix/skeleton-card.tsx
index 473f0e8a4..a7d9b8e0d 100644
--- a/apps/v4/examples/radix/skeleton-card.tsx
+++ b/apps/v4/examples/radix/skeleton-card.tsx
@@ -1,13 +1,16 @@
+import { Card, CardContent, CardHeader } from "@/examples/radix/ui/card"
 import { Skeleton } from "@/examples/radix/ui/skeleton"
 
 export function SkeletonCard() {
   return (
-    <div className="flex flex-col space-y-3">
-      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
-      </div>
-    </div>
+    <Card className="w-full">
+      <CardHeader>
+        <Skeleton className="h-4 w-2/3" />
+        <Skeleton className="h-4 w-1/2" />
+      </CardHeader>
+      <CardContent>
+        <Skeleton className="aspect-square w-full" />
+      </CardContent>
+    </Card>
   )
 }
diff --git a/apps/v4/examples/radix/skeleton-form.tsx b/apps/v4/examples/radix/skeleton-form.tsx
new file mode 100644
index 000000000..9d7e9b3fd
--- /dev/null
+++ b/apps/v4/examples/radix/skeleton-form.tsx
@@ -0,0 +1,17 @@
+import { Skeleton } from "@/examples/radix/ui/skeleton"
+
+export function SkeletonForm() {
+  return (
+    <div className="flex w-full flex-col gap-7">
+      <div className="flex flex-col gap-3">
+        <Skeleton className="h-4 w-20" />
+        <Skeleton className="h-10 w-full" />
+      </div>
+      <div className="flex flex-col gap-3">
+        <Skeleton className="h-4 w-24" />
+        <Skeleton className="h-10 w-full" />
+      </div>
+      <Skeleton className="h-9 w-24" />
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/skeleton-table.tsx b/apps/v4/examples/radix/skeleton-table.tsx
new file mode 100644
index 000000000..9706ac732
--- /dev/null
+++ b/apps/v4/examples/radix/skeleton-table.tsx
@@ -0,0 +1,23 @@
+import { Skeleton } from "@/examples/radix/ui/skeleton"
+
+export function SkeletonTable() {
+  return (
+    <div className="flex w-full flex-col gap-2">
+      <div className="flex gap-4">
+        <Skeleton className="h-4 flex-1" />
+        <Skeleton className="h-4 w-24" />
+        <Skeleton className="h-4 w-20" />
+      </div>
+      <div className="flex gap-4">
+        <Skeleton className="h-4 flex-1" />
+        <Skeleton className="h-4 w-24" />
+        <Skeleton className="h-4 w-20" />
+      </div>
+      <div className="flex gap-4">
+        <Skeleton className="h-4 flex-1" />
+        <Skeleton className="h-4 w-24" />
+        <Skeleton className="h-4 w-20" />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/skeleton-text.tsx b/apps/v4/examples/radix/skeleton-text.tsx
new file mode 100644
index 000000000..5d33903d6
--- /dev/null
+++ b/apps/v4/examples/radix/skeleton-text.tsx
@@ -0,0 +1,11 @@
+import { Skeleton } from "@/examples/radix/ui/skeleton"
+
+export function SkeletonText() {
+  return (
+    <div className="flex w-full flex-col gap-2">
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-3/4" />
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/slider-basic.tsx b/apps/v4/examples/radix/slider-basic.tsx
new file mode 100644
index 000000000..50f731f78
--- /dev/null
+++ b/apps/v4/examples/radix/slider-basic.tsx
@@ -0,0 +1,5 @@
+import { Slider } from "@/examples/radix/ui/slider"
+
+export function SliderBasic() {
+  return <Slider defaultValue={[50]} max={100} step={1} />
+}
diff --git a/apps/v4/examples/radix/slider-controlled.tsx b/apps/v4/examples/radix/slider-controlled.tsx
new file mode 100644
index 000000000..93627c1b3
--- /dev/null
+++ b/apps/v4/examples/radix/slider-controlled.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { Label } from "@/examples/radix/ui/label"
+import { Slider } from "@/examples/radix/ui/slider"
+
+export function SliderControlled() {
+  const [value, setValue] = React.useState([0.3, 0.7])
+
+  return (
+    <div className="grid w-full gap-3">
+      <div className="flex items-center justify-between gap-2">
+        <Label htmlFor="slider-demo-temperature">Temperature</Label>
+        <span className="text-muted-foreground text-sm">
+          {value.join(", ")}
+        </span>
+      </div>
+      <Slider
+        id="slider-demo-temperature"
+        value={value}
+        onValueChange={setValue}
+        min={0}
+        max={1}
+        step={0.1}
+      />
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/slider-disabled.tsx b/apps/v4/examples/radix/slider-disabled.tsx
new file mode 100644
index 000000000..905419135
--- /dev/null
+++ b/apps/v4/examples/radix/slider-disabled.tsx
@@ -0,0 +1,5 @@
+import { Slider } from "@/examples/radix/ui/slider"
+
+export function SliderDisabled() {
+  return <Slider defaultValue={[50]} max={100} step={1} disabled />
+}
diff --git a/apps/v4/examples/radix/slider-fields.tsx b/apps/v4/examples/radix/slider-fields.tsx
new file mode 100644
index 000000000..9fe3a4a46
--- /dev/null
+++ b/apps/v4/examples/radix/slider-fields.tsx
@@ -0,0 +1,119 @@
+"use client"
+
+import * as React from "react"
+import { useState } from "react"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/radix/ui/field"
+import { Slider } from "@/examples/radix/ui/slider"
+
+export function SliderFields() {
+  const [volume, setVolume] = useState([50])
+  const [brightness, setBrightness] = useState([75])
+  const [temperature, setTemperature] = useState([0.3, 0.7])
+  const [priceRange, setPriceRange] = useState([25, 75])
+  const [colorBalance, setColorBalance] = useState([10, 20, 70])
+
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="slider-volume">Volume</FieldLabel>
+        <Slider
+          id="slider-volume"
+          value={volume}
+          onValueChange={setVolume}
+          max={100}
+          step={1}
+        />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="slider-brightness">Screen Brightness</FieldLabel>
+        <Slider
+          id="slider-brightness"
+          value={brightness}
+          onValueChange={setBrightness}
+          max={100}
+          step={5}
+        />
+        <FieldDescription>
+          Current brightness: {brightness[0]}%
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="slider-quality">Video Quality</FieldLabel>
+        <FieldDescription>Higher quality uses more bandwidth.</FieldDescription>
+        <Slider
+          id="slider-quality"
+          defaultValue={[720]}
+          max={1080}
+          min={360}
+          step={360}
+        />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="slider-temperature">Temperature Range</FieldLabel>
+        <Slider
+          id="slider-temperature"
+          value={temperature}
+          onValueChange={setTemperature}
+          min={0}
+          max={1}
+          step={0.1}
+        />
+        <FieldDescription>
+          Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="slider-price-range">Price Range</FieldLabel>
+        <Slider
+          id="slider-price-range"
+          value={priceRange}
+          onValueChange={setPriceRange}
+          max={100}
+          step={5}
+        />
+        <FieldDescription>
+          ${priceRange[0]} - ${priceRange[1]}
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="slider-color-balance">Color Balance</FieldLabel>
+        <Slider
+          id="slider-color-balance"
+          value={colorBalance}
+          onValueChange={setColorBalance}
+          max={100}
+          step={10}
+        />
+        <FieldDescription>
+          Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{" "}
+          {colorBalance[2]}%
+        </FieldDescription>
+      </Field>
+      <Field data-invalid>
+        <FieldLabel htmlFor="slider-invalid">Invalid Slider</FieldLabel>
+        <Slider
+          id="slider-invalid"
+          defaultValue={[30]}
+          max={100}
+          aria-invalid
+        />
+        <FieldDescription>This slider has validation errors.</FieldDescription>
+      </Field>
+      <Field data-disabled>
+        <FieldLabel htmlFor="slider-disabled-field">Disabled Slider</FieldLabel>
+        <Slider
+          id="slider-disabled-field"
+          defaultValue={[50]}
+          max={100}
+          disabled
+        />
+        <FieldDescription>This slider is currently disabled.</FieldDescription>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/slider-multiple.tsx b/apps/v4/examples/radix/slider-multiple.tsx
new file mode 100644
index 000000000..b0e2f9296
--- /dev/null
+++ b/apps/v4/examples/radix/slider-multiple.tsx
@@ -0,0 +1,5 @@
+import { Slider } from "@/examples/radix/ui/slider"
+
+export function SliderMultiple() {
+  return <Slider defaultValue={[10, 20, 70]} max={100} step={10} />
+}
diff --git a/apps/v4/examples/radix/slider-range.tsx b/apps/v4/examples/radix/slider-range.tsx
new file mode 100644
index 000000000..d280cad67
--- /dev/null
+++ b/apps/v4/examples/radix/slider-range.tsx
@@ -0,0 +1,5 @@
+import { Slider } from "@/examples/radix/ui/slider"
+
+export function SliderRange() {
+  return <Slider defaultValue={[25, 50]} max={100} step={5} />
+}
diff --git a/apps/v4/examples/radix/slider-vertical.tsx b/apps/v4/examples/radix/slider-vertical.tsx
new file mode 100644
index 000000000..914926069
--- /dev/null
+++ b/apps/v4/examples/radix/slider-vertical.tsx
@@ -0,0 +1,22 @@
+import { Slider } from "@/examples/radix/ui/slider"
+
+export function SliderVertical() {
+  return (
+    <div className="flex items-center gap-6">
+      <Slider
+        defaultValue={[50]}
+        max={100}
+        step={1}
+        orientation="vertical"
+        className="h-40"
+      />
+      <Slider
+        defaultValue={[25]}
+        max={100}
+        step={1}
+        orientation="vertical"
+        className="h-40"
+      />
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/sonner-basic.tsx b/apps/v4/examples/radix/sonner-basic.tsx
new file mode 100644
index 000000000..db14eefb7
--- /dev/null
+++ b/apps/v4/examples/radix/sonner-basic.tsx
@@ -0,0 +1,14 @@
+import { Button } from "@/examples/radix/ui/button"
+import { toast } from "sonner"
+
+export function SonnerBasic() {
+  return (
+    <Button
+      onClick={() => toast("Event has been created")}
+      variant="outline"
+      className="w-fit"
+    >
+      Show Toast
+    </Button>
+  )
+}
diff --git a/apps/v4/examples/radix/sonner-with-description.tsx b/apps/v4/examples/radix/sonner-with-description.tsx
new file mode 100644
index 000000000..ced6067a3
--- /dev/null
+++ b/apps/v4/examples/radix/sonner-with-description.tsx
@@ -0,0 +1,18 @@
+import { Button } from "@/examples/radix/ui/button"
+import { toast } from "sonner"
+
+export function SonnerWithDescription() {
+  return (
+    <Button
+      onClick={() =>
+        toast("Event has been created", {
+          description: "Monday, January 3rd at 6:00pm",
+        })
+      }
+      variant="outline"
+      className="w-fit"
+    >
+      Show Toast
+    </Button>
+  )
+}
diff --git a/apps/v4/examples/radix/spinner-basic.tsx b/apps/v4/examples/radix/spinner-basic.tsx
index bf00cc7bf..7b8f7d5bd 100644
--- a/apps/v4/examples/radix/spinner-basic.tsx
+++ b/apps/v4/examples/radix/spinner-basic.tsx
@@ -2,8 +2,9 @@ import { Spinner } from "@/examples/radix/ui/spinner"
 
 export function SpinnerBasic() {
   return (
-    <div className="flex flex-col items-center justify-center gap-8">
+    <div className="flex items-center gap-6">
       <Spinner />
+      <Spinner className="size-6" />
     </div>
   )
 }
diff --git a/apps/v4/examples/radix/spinner-in-badges.tsx b/apps/v4/examples/radix/spinner-in-badges.tsx
new file mode 100644
index 000000000..927fa06b9
--- /dev/null
+++ b/apps/v4/examples/radix/spinner-in-badges.tsx
@@ -0,0 +1,25 @@
+import { Badge } from "@/examples/radix/ui/badge"
+import { Spinner } from "@/examples/radix/ui/spinner"
+
+export function SpinnerInBadges() {
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-4">
+      <Badge>
+        <Spinner data-icon="inline-start" />
+        Badge
+      </Badge>
+      <Badge variant="secondary">
+        <Spinner data-icon="inline-start" />
+        Badge
+      </Badge>
+      <Badge variant="destructive">
+        <Spinner data-icon="inline-start" />
+        Badge
+      </Badge>
+      <Badge variant="outline">
+        <Spinner data-icon="inline-start" />
+        Badge
+      </Badge>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/spinner-in-buttons.tsx b/apps/v4/examples/radix/spinner-in-buttons.tsx
new file mode 100644
index 000000000..249668fbb
--- /dev/null
+++ b/apps/v4/examples/radix/spinner-in-buttons.tsx
@@ -0,0 +1,22 @@
+import { Button } from "@/examples/radix/ui/button"
+import { Spinner } from "@/examples/radix/ui/spinner"
+
+export function SpinnerInButtons() {
+  return (
+    <div className="flex flex-wrap items-center gap-4">
+      <Button>
+        <Spinner data-icon="inline-start" /> Submit
+      </Button>
+      <Button disabled>
+        <Spinner data-icon="inline-start" /> Disabled
+      </Button>
+      <Button variant="outline" disabled>
+        <Spinner data-icon="inline-start" /> Outline
+      </Button>
+      <Button variant="outline" size="icon" disabled>
+        <Spinner data-icon="inline-start" />
+        <span className="sr-only">Loading...</span>
+      </Button>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/spinner-in-empty.tsx b/apps/v4/examples/radix/spinner-in-empty.tsx
new file mode 100644
index 000000000..897a07094
--- /dev/null
+++ b/apps/v4/examples/radix/spinner-in-empty.tsx
@@ -0,0 +1,41 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/examples/radix/ui/empty"
+import { Spinner } from "@/examples/radix/ui/spinner"
+import { ArrowRightIcon } from "lucide-react"
+
+export function SpinnerInEmpty() {
+  return (
+    <Empty className="min-h-[300px]">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <Spinner />
+        </EmptyMedia>
+        <EmptyTitle>No projects yet</EmptyTitle>
+        <EmptyDescription>
+          You haven&apos;t created any projects yet. Get started by creating
+          your first project.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <div className="flex gap-2">
+          <Button asChild>
+            <a href="#">Create project</a>
+          </Button>
+          <Button variant="outline">Import project</Button>
+        </div>
+        <Button variant="link" asChild className="text-muted-foreground">
+          <a href="#">
+            Learn more <ArrowRightIcon />
+          </a>
+        </Button>
+      </EmptyContent>
+    </Empty>
+  )
+}
diff --git a/apps/v4/examples/radix/spinner-in-input-group.tsx b/apps/v4/examples/radix/spinner-in-input-group.tsx
new file mode 100644
index 000000000..65aca533a
--- /dev/null
+++ b/apps/v4/examples/radix/spinner-in-input-group.tsx
@@ -0,0 +1,21 @@
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/radix/ui/input-group"
+import { Spinner } from "@/examples/radix/ui/spinner"
+
+export function SpinnerInInputGroup() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="input-group-spinner">Input Group</FieldLabel>
+      <InputGroup>
+        <InputGroupInput id="input-group-spinner" />
+        <InputGroupAddon>
+          <Spinner />
+        </InputGroupAddon>
+      </InputGroup>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/switch-basic.tsx b/apps/v4/examples/radix/switch-basic.tsx
new file mode 100644
index 000000000..ab57d4ad7
--- /dev/null
+++ b/apps/v4/examples/radix/switch-basic.tsx
@@ -0,0 +1,11 @@
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
+import { Switch } from "@/examples/radix/ui/switch"
+
+export function SwitchBasic() {
+  return (
+    <Field orientation="horizontal">
+      <Switch id="switch-basic" />
+      <FieldLabel htmlFor="switch-basic">Airplane Mode</FieldLabel>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/switch-disabled.tsx b/apps/v4/examples/radix/switch-disabled.tsx
new file mode 100644
index 000000000..a5625bb6a
--- /dev/null
+++ b/apps/v4/examples/radix/switch-disabled.tsx
@@ -0,0 +1,17 @@
+import { Label } from "@/examples/radix/ui/label"
+import { Switch } from "@/examples/radix/ui/switch"
+
+export function SwitchDisabled() {
+  return (
+    <div className="flex flex-col gap-12">
+      <div className="flex items-center gap-2">
+        <Switch id="switch-disabled-unchecked" disabled />
+        <Label htmlFor="switch-disabled-unchecked">Disabled (Unchecked)</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <Switch id="switch-disabled-checked" defaultChecked disabled />
+        <Label htmlFor="switch-disabled-checked">Disabled (Checked)</Label>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/switch-fields.tsx b/apps/v4/examples/radix/switch-fields.tsx
new file mode 100644
index 000000000..49994d00a
--- /dev/null
+++ b/apps/v4/examples/radix/switch-fields.tsx
@@ -0,0 +1,77 @@
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/radix/ui/field"
+import { Switch } from "@/examples/radix/ui/switch"
+
+export function SwitchFields() {
+  return (
+    <FieldGroup>
+      <Field orientation="horizontal">
+        <FieldContent>
+          <FieldLabel htmlFor="switch-airplane">Airplane Mode</FieldLabel>
+          <FieldDescription>
+            Turn on airplane mode to disable all connections.
+          </FieldDescription>
+        </FieldContent>
+        <Switch id="switch-airplane" />
+      </Field>
+      <Field orientation="horizontal">
+        <FieldLabel htmlFor="switch-dark">Dark Mode</FieldLabel>
+        <Switch id="switch-dark" />
+      </Field>
+      <Field orientation="horizontal">
+        <Switch id="switch-marketing" />
+        <FieldContent>
+          <FieldLabel htmlFor="switch-marketing">Marketing Emails</FieldLabel>
+          <FieldDescription>
+            Receive emails about new products, features, and more.
+          </FieldDescription>
+        </FieldContent>
+      </Field>
+      <Field>
+        <FieldLabel>Privacy Settings</FieldLabel>
+        <FieldDescription>Manage your privacy preferences.</FieldDescription>
+        <Field orientation="horizontal">
+          <Switch id="switch-profile" defaultChecked />
+          <FieldContent>
+            <FieldLabel htmlFor="switch-profile" className="font-normal">
+              Make profile visible to others
+            </FieldLabel>
+          </FieldContent>
+        </Field>
+        <Field orientation="horizontal">
+          <Switch id="switch-email" />
+          <FieldContent>
+            <FieldLabel htmlFor="switch-email" className="font-normal">
+              Show email on profile
+            </FieldLabel>
+          </FieldContent>
+        </Field>
+      </Field>
+      <Field data-invalid orientation="horizontal">
+        <FieldContent>
+          <FieldLabel htmlFor="switch-invalid">Invalid Switch</FieldLabel>
+          <FieldDescription>
+            This switch has validation errors.
+          </FieldDescription>
+        </FieldContent>
+        <Switch id="switch-invalid" aria-invalid />
+      </Field>
+      <Field data-disabled orientation="horizontal">
+        <FieldContent>
+          <FieldLabel htmlFor="switch-disabled-field">
+            Disabled Switch
+          </FieldLabel>
+          <FieldDescription>
+            This switch is currently disabled.
+          </FieldDescription>
+        </FieldContent>
+        <Switch id="switch-disabled-field" disabled />
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/switch-sizes.tsx b/apps/v4/examples/radix/switch-sizes.tsx
new file mode 100644
index 000000000..05ad92745
--- /dev/null
+++ b/apps/v4/examples/radix/switch-sizes.tsx
@@ -0,0 +1,17 @@
+import { Label } from "@/examples/radix/ui/label"
+import { Switch } from "@/examples/radix/ui/switch"
+
+export function SwitchSizes() {
+  return (
+    <div className="flex flex-col gap-12">
+      <div className="flex items-center gap-2">
+        <Switch id="switch-size-sm" size="sm" />
+        <Label htmlFor="switch-size-sm">Small</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <Switch id="switch-size-default" size="default" />
+        <Label htmlFor="switch-size-default">Default</Label>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/switch-with-description.tsx b/apps/v4/examples/radix/switch-with-description.tsx
new file mode 100644
index 000000000..6582ae2b3
--- /dev/null
+++ b/apps/v4/examples/radix/switch-with-description.tsx
@@ -0,0 +1,25 @@
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldLabel,
+  FieldTitle,
+} from "@/examples/radix/ui/field"
+import { Switch } from "@/examples/radix/ui/switch"
+
+export function SwitchWithDescription() {
+  return (
+    <FieldLabel htmlFor="switch-focus-mode">
+      <Field orientation="horizontal">
+        <FieldContent>
+          <FieldTitle>Share across devices</FieldTitle>
+          <FieldDescription>
+            Focus is shared across devices, and turns off when you leave the
+            app.
+          </FieldDescription>
+        </FieldContent>
+        <Switch id="switch-focus-mode" />
+      </Field>
+    </FieldLabel>
+  )
+}
diff --git a/apps/v4/examples/radix/switch-with-label.tsx b/apps/v4/examples/radix/switch-with-label.tsx
new file mode 100644
index 000000000..2f6966a1b
--- /dev/null
+++ b/apps/v4/examples/radix/switch-with-label.tsx
@@ -0,0 +1,11 @@
+import { Label } from "@/examples/radix/ui/label"
+import { Switch } from "@/examples/radix/ui/switch"
+
+export function SwitchWithLabel() {
+  return (
+    <div className="flex items-center gap-2">
+      <Switch id="switch-bluetooth" defaultChecked />
+      <Label htmlFor="switch-bluetooth">Bluetooth</Label>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/table-basic.tsx b/apps/v4/examples/radix/table-basic.tsx
new file mode 100644
index 000000000..adabe5685
--- /dev/null
+++ b/apps/v4/examples/radix/table-basic.tsx
@@ -0,0 +1,80 @@
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/examples/radix/ui/table"
+
+const invoices = [
+  {
+    invoice: "INV001",
+    paymentStatus: "Paid",
+    totalAmount: "$250.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV002",
+    paymentStatus: "Pending",
+    totalAmount: "$150.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV003",
+    paymentStatus: "Unpaid",
+    totalAmount: "$350.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV004",
+    paymentStatus: "Paid",
+    totalAmount: "$450.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV005",
+    paymentStatus: "Paid",
+    totalAmount: "$550.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV006",
+    paymentStatus: "Pending",
+    totalAmount: "$200.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV007",
+    paymentStatus: "Unpaid",
+    totalAmount: "$300.00",
+    paymentMethod: "Credit Card",
+  },
+]
+
+export function TableBasic() {
+  return (
+    <Table>
+      <TableCaption>A list of your recent invoices.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[100px]">Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.slice(0, 3).map((invoice) => (
+          <TableRow key={invoice.invoice}>
+            <TableCell className="font-medium">{invoice.invoice}</TableCell>
+            <TableCell>{invoice.paymentStatus}</TableCell>
+            <TableCell>{invoice.paymentMethod}</TableCell>
+            <TableCell className="text-right">{invoice.totalAmount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/apps/v4/examples/radix/table-simple.tsx b/apps/v4/examples/radix/table-simple.tsx
new file mode 100644
index 000000000..c5758e06a
--- /dev/null
+++ b/apps/v4/examples/radix/table-simple.tsx
@@ -0,0 +1,39 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/examples/radix/ui/table"
+
+export function TableSimple() {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead className="text-right">Role</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell className="font-medium">Sarah Chen</TableCell>
+          <TableCell>sarah.chen@acme.com</TableCell>
+          <TableCell className="text-right">Admin</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">Marc Rodriguez</TableCell>
+          <TableCell>marcus.rodriguez@acme.com</TableCell>
+          <TableCell className="text-right">User</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">Emily Watson</TableCell>
+          <TableCell>emily.watson@acme.com</TableCell>
+          <TableCell className="text-right">User</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/apps/v4/examples/radix/table-with-actions.tsx b/apps/v4/examples/radix/table-with-actions.tsx
new file mode 100644
index 000000000..b4e30ac96
--- /dev/null
+++ b/apps/v4/examples/radix/table-with-actions.tsx
@@ -0,0 +1,99 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/examples/radix/ui/dropdown-menu"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/examples/radix/ui/table"
+import { MoreHorizontalIcon } from "lucide-react"
+
+export function TableWithActions() {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Product</TableHead>
+          <TableHead>Price</TableHead>
+          <TableHead className="text-right">Actions</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell className="font-medium">Wireless Mouse</TableCell>
+          <TableCell>$29.99</TableCell>
+          <TableCell className="text-right">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" className="size-8">
+                  <MoreHorizontalIcon />
+                  <span className="sr-only">Open menu</span>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem>Edit</DropdownMenuItem>
+                <DropdownMenuItem>Duplicate</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem variant="destructive">
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">Mechanical Keyboard</TableCell>
+          <TableCell>$129.99</TableCell>
+          <TableCell className="text-right">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" className="size-8">
+                  <MoreHorizontalIcon />
+                  <span className="sr-only">Open menu</span>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem>Edit</DropdownMenuItem>
+                <DropdownMenuItem>Duplicate</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem variant="destructive">
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">USB-C Hub</TableCell>
+          <TableCell>$49.99</TableCell>
+          <TableCell className="text-right">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" className="size-8">
+                  <MoreHorizontalIcon />
+                  <span className="sr-only">Open menu</span>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem>Edit</DropdownMenuItem>
+                <DropdownMenuItem>Duplicate</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem variant="destructive">
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/apps/v4/examples/radix/table-with-badges.tsx b/apps/v4/examples/radix/table-with-badges.tsx
new file mode 100644
index 000000000..eeeb1902e
--- /dev/null
+++ b/apps/v4/examples/radix/table-with-badges.tsx
@@ -0,0 +1,63 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/examples/radix/ui/table"
+
+export function TableWithBadges() {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Task</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead className="text-right">Priority</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell className="font-medium">Design homepage</TableCell>
+          <TableCell>
+            <span className="inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400">
+              Completed
+            </span>
+          </TableCell>
+          <TableCell className="text-right">
+            <span className="inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400">
+              High
+            </span>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">Implement API</TableCell>
+          <TableCell>
+            <span className="inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400">
+              In Progress
+            </span>
+          </TableCell>
+          <TableCell className="text-right">
+            <span className="inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400">
+              Medium
+            </span>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">Write tests</TableCell>
+          <TableCell>
+            <span className="inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400">
+              Pending
+            </span>
+          </TableCell>
+          <TableCell className="text-right">
+            <span className="inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400">
+              Low
+            </span>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/apps/v4/examples/radix/table-with-footer.tsx b/apps/v4/examples/radix/table-with-footer.tsx
new file mode 100644
index 000000000..996a9e33b
--- /dev/null
+++ b/apps/v4/examples/radix/table-with-footer.tsx
@@ -0,0 +1,87 @@
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/examples/radix/ui/table"
+
+const invoices = [
+  {
+    invoice: "INV001",
+    paymentStatus: "Paid",
+    totalAmount: "$250.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV002",
+    paymentStatus: "Pending",
+    totalAmount: "$150.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV003",
+    paymentStatus: "Unpaid",
+    totalAmount: "$350.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV004",
+    paymentStatus: "Paid",
+    totalAmount: "$450.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV005",
+    paymentStatus: "Paid",
+    totalAmount: "$550.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV006",
+    paymentStatus: "Pending",
+    totalAmount: "$200.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV007",
+    paymentStatus: "Unpaid",
+    totalAmount: "$300.00",
+    paymentMethod: "Credit Card",
+  },
+]
+
+export function TableWithFooter() {
+  return (
+    <Table>
+      <TableCaption>A list of your recent invoices.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[100px]">Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.slice(0, 3).map((invoice) => (
+          <TableRow key={invoice.invoice}>
+            <TableCell className="font-medium">{invoice.invoice}</TableCell>
+            <TableCell>{invoice.paymentStatus}</TableCell>
+            <TableCell>{invoice.paymentMethod}</TableCell>
+            <TableCell className="text-right">{invoice.totalAmount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className="text-right">$2,500.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  )
+}
diff --git a/apps/v4/examples/radix/table-with-input.tsx b/apps/v4/examples/radix/table-with-input.tsx
new file mode 100644
index 000000000..72712fdf1
--- /dev/null
+++ b/apps/v4/examples/radix/table-with-input.tsx
@@ -0,0 +1,61 @@
+import { Input } from "@/examples/radix/ui/input"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/examples/radix/ui/table"
+
+export function TableWithInput() {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Product</TableHead>
+          <TableHead>Quantity</TableHead>
+          <TableHead>Price</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell className="font-medium">Wireless Mouse</TableCell>
+          <TableCell>
+            <Input
+              type="number"
+              defaultValue="1"
+              className="h-8 w-20"
+              min="0"
+            />
+          </TableCell>
+          <TableCell>$29.99</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">Mechanical Keyboard</TableCell>
+          <TableCell>
+            <Input
+              type="number"
+              defaultValue="2"
+              className="h-8 w-20"
+              min="0"
+            />
+          </TableCell>
+          <TableCell>$129.99</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">USB-C Hub</TableCell>
+          <TableCell>
+            <Input
+              type="number"
+              defaultValue="1"
+              className="h-8 w-20"
+              min="0"
+            />
+          </TableCell>
+          <TableCell>$49.99</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/apps/v4/examples/radix/table-with-select.tsx b/apps/v4/examples/radix/table-with-select.tsx
new file mode 100644
index 000000000..915a45b30
--- /dev/null
+++ b/apps/v4/examples/radix/table-with-select.tsx
@@ -0,0 +1,89 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/examples/radix/ui/table"
+
+export function TableWithSelect() {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Task</TableHead>
+          <TableHead>Assignee</TableHead>
+          <TableHead>Status</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell className="font-medium">Design homepage</TableCell>
+          <TableCell>
+            <Select defaultValue="sarah">
+              <SelectTrigger className="w-40" size="sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem value="sarah">Sarah Chen</SelectItem>
+                  <SelectItem value="marcus">Marc Rodriguez</SelectItem>
+                  <SelectItem value="emily">Emily Watson</SelectItem>
+                  <SelectItem value="david">David Kim</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </TableCell>
+          <TableCell>In Progress</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">Implement API</TableCell>
+          <TableCell>
+            <Select defaultValue="marcus">
+              <SelectTrigger className="w-40" size="sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem value="sarah">Sarah Chen</SelectItem>
+                  <SelectItem value="marcus">Marc Rodriguez</SelectItem>
+                  <SelectItem value="emily">Emily Watson</SelectItem>
+                  <SelectItem value="david">David Kim</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </TableCell>
+          <TableCell>Pending</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">Write tests</TableCell>
+          <TableCell>
+            <Select defaultValue="emily">
+              <SelectTrigger className="w-40" size="sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem value="sarah">Sarah Chen</SelectItem>
+                  <SelectItem value="marcus">Marc Rodriguez</SelectItem>
+                  <SelectItem value="emily">Emily Watson</SelectItem>
+                  <SelectItem value="david">David Kim</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </TableCell>
+          <TableCell>Not Started</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/apps/v4/examples/radix/tabs-basic.tsx b/apps/v4/examples/radix/tabs-basic.tsx
new file mode 100644
index 000000000..07b1a31d5
--- /dev/null
+++ b/apps/v4/examples/radix/tabs-basic.tsx
@@ -0,0 +1,12 @@
+import { Tabs, TabsList, TabsTrigger } from "@/examples/radix/ui/tabs"
+
+export function TabsBasic() {
+  return (
+    <Tabs defaultValue="home">
+      <TabsList>
+        <TabsTrigger value="home">Home</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+      </TabsList>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/radix/tabs-disabled.tsx b/apps/v4/examples/radix/tabs-disabled.tsx
new file mode 100644
index 000000000..40373a303
--- /dev/null
+++ b/apps/v4/examples/radix/tabs-disabled.tsx
@@ -0,0 +1,14 @@
+import { Tabs, TabsList, TabsTrigger } from "@/examples/radix/ui/tabs"
+
+export function TabsDisabled() {
+  return (
+    <Tabs defaultValue="home">
+      <TabsList>
+        <TabsTrigger value="home">Home</TabsTrigger>
+        <TabsTrigger value="settings" disabled>
+          Disabled
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/radix/tabs-icon-only.tsx b/apps/v4/examples/radix/tabs-icon-only.tsx
new file mode 100644
index 000000000..21b325112
--- /dev/null
+++ b/apps/v4/examples/radix/tabs-icon-only.tsx
@@ -0,0 +1,20 @@
+import { Tabs, TabsList, TabsTrigger } from "@/examples/radix/ui/tabs"
+import { HomeIcon, SearchIcon, SettingsIcon } from "lucide-react"
+
+export function TabsIconOnly() {
+  return (
+    <Tabs defaultValue="home">
+      <TabsList>
+        <TabsTrigger value="home">
+          <HomeIcon />
+        </TabsTrigger>
+        <TabsTrigger value="search">
+          <SearchIcon />
+        </TabsTrigger>
+        <TabsTrigger value="settings">
+          <SettingsIcon />
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/radix/tabs-line-disabled.tsx b/apps/v4/examples/radix/tabs-line-disabled.tsx
new file mode 100644
index 000000000..35cf93695
--- /dev/null
+++ b/apps/v4/examples/radix/tabs-line-disabled.tsx
@@ -0,0 +1,15 @@
+import { Tabs, TabsList, TabsTrigger } from "@/examples/radix/ui/tabs"
+
+export function TabsLineDisabled() {
+  return (
+    <Tabs defaultValue="overview">
+      <TabsList variant="line">
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="analytics">Analytics</TabsTrigger>
+        <TabsTrigger value="reports" disabled>
+          Reports
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/radix/tabs-line-with-content.tsx b/apps/v4/examples/radix/tabs-line-with-content.tsx
new file mode 100644
index 000000000..bcb8f24f2
--- /dev/null
+++ b/apps/v4/examples/radix/tabs-line-with-content.tsx
@@ -0,0 +1,29 @@
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/examples/radix/ui/tabs"
+
+export function TabsLineWithContent() {
+  return (
+    <Tabs defaultValue="account">
+      <TabsList variant="line">
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+        <TabsTrigger value="notifications">Notifications</TabsTrigger>
+      </TabsList>
+      <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <TabsContent value="account">
+          Manage your account preferences and profile information.
+        </TabsContent>
+        <TabsContent value="password">
+          Update your password to keep your account secure.
+        </TabsContent>
+        <TabsContent value="notifications">
+          Configure how you receive notifications and alerts.
+        </TabsContent>
+      </div>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/radix/tabs-line.tsx b/apps/v4/examples/radix/tabs-line.tsx
new file mode 100644
index 000000000..0521fb8a3
--- /dev/null
+++ b/apps/v4/examples/radix/tabs-line.tsx
@@ -0,0 +1,13 @@
+import { Tabs, TabsList, TabsTrigger } from "@/examples/radix/ui/tabs"
+
+export function TabsLine() {
+  return (
+    <Tabs defaultValue="overview">
+      <TabsList variant="line">
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="analytics">Analytics</TabsTrigger>
+        <TabsTrigger value="reports">Reports</TabsTrigger>
+      </TabsList>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/radix/tabs-multiple.tsx b/apps/v4/examples/radix/tabs-multiple.tsx
new file mode 100644
index 000000000..c54fecfcf
--- /dev/null
+++ b/apps/v4/examples/radix/tabs-multiple.tsx
@@ -0,0 +1,14 @@
+import { Tabs, TabsList, TabsTrigger } from "@/examples/radix/ui/tabs"
+
+export function TabsMultiple() {
+  return (
+    <Tabs defaultValue="overview">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="analytics">Analytics</TabsTrigger>
+        <TabsTrigger value="reports">Reports</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+      </TabsList>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/radix/tabs-variants-comparison.tsx b/apps/v4/examples/radix/tabs-variants-comparison.tsx
new file mode 100644
index 000000000..37695578a
--- /dev/null
+++ b/apps/v4/examples/radix/tabs-variants-comparison.tsx
@@ -0,0 +1,20 @@
+import { Tabs, TabsList, TabsTrigger } from "@/examples/radix/ui/tabs"
+
+export function TabsVariantsComparison() {
+  return (
+    <div className="flex gap-4">
+      <Tabs defaultValue="overview">
+        <TabsList>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="analytics">Analytics</TabsTrigger>
+        </TabsList>
+      </Tabs>
+      <Tabs defaultValue="overview">
+        <TabsList variant="line">
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="analytics">Analytics</TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/tabs-vertical.tsx b/apps/v4/examples/radix/tabs-vertical.tsx
new file mode 100644
index 000000000..6cc876d06
--- /dev/null
+++ b/apps/v4/examples/radix/tabs-vertical.tsx
@@ -0,0 +1,31 @@
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/examples/radix/ui/tabs"
+
+export function TabsVertical() {
+  return (
+    <Tabs defaultValue="account" orientation="vertical">
+      <TabsList>
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+        <TabsTrigger value="notifications">Notifications</TabsTrigger>
+      </TabsList>
+      <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <TabsContent value="account">
+          Manage your account preferences and profile information.
+        </TabsContent>
+        <TabsContent value="password">
+          Update your password to keep your account secure. Use a strong
+          password with a mix of letters, numbers, and symbols.
+        </TabsContent>
+        <TabsContent value="notifications">
+          Configure how you receive notifications and alerts. Choose which types
+          of notifications you want to receive and how you want to receive them.
+        </TabsContent>
+      </div>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/radix/tabs-with-content.tsx b/apps/v4/examples/radix/tabs-with-content.tsx
new file mode 100644
index 000000000..8e79cf357
--- /dev/null
+++ b/apps/v4/examples/radix/tabs-with-content.tsx
@@ -0,0 +1,29 @@
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/examples/radix/ui/tabs"
+
+export function TabsWithContent() {
+  return (
+    <Tabs defaultValue="account">
+      <TabsList>
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+        <TabsTrigger value="notifications">Notifications</TabsTrigger>
+      </TabsList>
+      <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <TabsContent value="account">
+          Manage your account preferences and profile information.
+        </TabsContent>
+        <TabsContent value="password">
+          Update your password to keep your account secure.
+        </TabsContent>
+        <TabsContent value="notifications">
+          Configure how you receive notifications and alerts.
+        </TabsContent>
+      </div>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/radix/tabs-with-dropdown.tsx b/apps/v4/examples/radix/tabs-with-dropdown.tsx
new file mode 100644
index 000000000..61d5de850
--- /dev/null
+++ b/apps/v4/examples/radix/tabs-with-dropdown.tsx
@@ -0,0 +1,55 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/examples/radix/ui/dropdown-menu"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/examples/radix/ui/tabs"
+import { MoreHorizontalIcon } from "lucide-react"
+
+export function TabsWithDropdown() {
+  return (
+    <Tabs defaultValue="overview">
+      <div className="flex items-center justify-between">
+        <TabsList>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="analytics">Analytics</TabsTrigger>
+          <TabsTrigger value="reports">Reports</TabsTrigger>
+        </TabsList>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="size-8">
+              <MoreHorizontalIcon />
+              <span className="sr-only">More options</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem>Settings</DropdownMenuItem>
+            <DropdownMenuItem>Export</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>Archive</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <TabsContent value="overview">
+          View your dashboard metrics and key performance indicators.
+        </TabsContent>
+        <TabsContent value="analytics">
+          Detailed analytics and insights about your data.
+        </TabsContent>
+        <TabsContent value="reports">
+          Generate and view custom reports.
+        </TabsContent>
+      </div>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/radix/tabs-with-icons.tsx b/apps/v4/examples/radix/tabs-with-icons.tsx
new file mode 100644
index 000000000..1d4ff4f6b
--- /dev/null
+++ b/apps/v4/examples/radix/tabs-with-icons.tsx
@@ -0,0 +1,19 @@
+import { Tabs, TabsList, TabsTrigger } from "@/examples/radix/ui/tabs"
+import { AppWindowIcon, CodeIcon } from "lucide-react"
+
+export function TabsWithIcons() {
+  return (
+    <Tabs defaultValue="preview">
+      <TabsList>
+        <TabsTrigger value="preview">
+          <AppWindowIcon />
+          Preview
+        </TabsTrigger>
+        <TabsTrigger value="code">
+          <CodeIcon />
+          Code
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/radix/tabs-with-input-and-button.tsx b/apps/v4/examples/radix/tabs-with-input-and-button.tsx
new file mode 100644
index 000000000..049a29341
--- /dev/null
+++ b/apps/v4/examples/radix/tabs-with-input-and-button.tsx
@@ -0,0 +1,36 @@
+import { Button } from "@/examples/radix/ui/button"
+import { Input } from "@/examples/radix/ui/input"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/examples/radix/ui/tabs"
+
+export function TabsWithInputAndButton() {
+  return (
+    <Tabs defaultValue="overview" className="mx-auto w-full max-w-lg">
+      <div className="flex items-center gap-4">
+        <TabsList>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="analytics">Analytics</TabsTrigger>
+        </TabsList>
+        <div className="ml-auto flex items-center gap-2">
+          <Input placeholder="Search..." className="w-44" />
+          <Button>Action</Button>
+        </div>
+      </div>
+      <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <TabsContent value="overview">
+          View your dashboard metrics and key performance indicators.
+        </TabsContent>
+        <TabsContent value="analytics">
+          Detailed analytics and insights about your data.
+        </TabsContent>
+        <TabsContent value="reports">
+          Generate and view custom reports.
+        </TabsContent>
+      </div>
+    </Tabs>
+  )
+}
diff --git a/apps/v4/examples/radix/textarea-basic.tsx b/apps/v4/examples/radix/textarea-basic.tsx
new file mode 100644
index 000000000..50c2b85f3
--- /dev/null
+++ b/apps/v4/examples/radix/textarea-basic.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from "@/examples/radix/ui/textarea"
+
+export function TextareaBasic() {
+  return <Textarea placeholder="Type your message here." />
+}
diff --git a/apps/v4/examples/radix/textarea-disabled.tsx b/apps/v4/examples/radix/textarea-disabled.tsx
index 672477be1..bf5b6e625 100644
--- a/apps/v4/examples/radix/textarea-disabled.tsx
+++ b/apps/v4/examples/radix/textarea-disabled.tsx
@@ -1,5 +1,15 @@
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
 import { Textarea } from "@/examples/radix/ui/textarea"
 
-export default function TextareaDisabled() {
-  return <Textarea placeholder="Type your message here." disabled />
+export function TextareaDisabled() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="textarea-demo-disabled">Message</FieldLabel>
+      <Textarea
+        id="textarea-demo-disabled"
+        placeholder="Type your message here."
+        disabled
+      />
+    </Field>
+  )
 }
diff --git a/apps/v4/examples/radix/textarea-fields.tsx b/apps/v4/examples/radix/textarea-fields.tsx
new file mode 100644
index 000000000..482d1a695
--- /dev/null
+++ b/apps/v4/examples/radix/textarea-fields.tsx
@@ -0,0 +1,67 @@
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/radix/ui/field"
+import { Textarea } from "@/examples/radix/ui/textarea"
+
+export function TextareaFields() {
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="textarea-basic">Basic Textarea</FieldLabel>
+        <Textarea id="textarea-basic" placeholder="Enter your message" />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="textarea-comments">Comments</FieldLabel>
+        <Textarea
+          id="textarea-comments"
+          placeholder="Share your thoughts..."
+          className="min-h-[100px]"
+        />
+        <FieldDescription>Maximum 500 characters allowed.</FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="textarea-bio">Bio</FieldLabel>
+        <FieldDescription>
+          Tell us about yourself in a few sentences.
+        </FieldDescription>
+        <Textarea
+          id="textarea-bio"
+          placeholder="I am a..."
+          className="min-h-[120px]"
+        />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="textarea-desc-after">Message</FieldLabel>
+        <Textarea id="textarea-desc-after" placeholder="Enter your message" />
+        <FieldDescription>
+          Enter your message so it is long enough to test the layout.
+        </FieldDescription>
+      </Field>
+      <Field data-invalid>
+        <FieldLabel htmlFor="textarea-invalid">Invalid Textarea</FieldLabel>
+        <Textarea
+          id="textarea-invalid"
+          placeholder="This field has an error"
+          aria-invalid
+        />
+        <FieldDescription>
+          This field contains validation errors.
+        </FieldDescription>
+      </Field>
+      <Field data-disabled>
+        <FieldLabel htmlFor="textarea-disabled-field">
+          Disabled Field
+        </FieldLabel>
+        <Textarea
+          id="textarea-disabled-field"
+          placeholder="Cannot edit"
+          disabled
+        />
+        <FieldDescription>This field is currently disabled.</FieldDescription>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/textarea-invalid.tsx b/apps/v4/examples/radix/textarea-invalid.tsx
new file mode 100644
index 000000000..e7a5ca6a9
--- /dev/null
+++ b/apps/v4/examples/radix/textarea-invalid.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from "@/examples/radix/ui/textarea"
+
+export function TextareaInvalid() {
+  return <Textarea placeholder="Type your message here." aria-invalid="true" />
+}
diff --git a/apps/v4/examples/radix/textarea-with-description.tsx b/apps/v4/examples/radix/textarea-with-description.tsx
new file mode 100644
index 000000000..cd4f88b72
--- /dev/null
+++ b/apps/v4/examples/radix/textarea-with-description.tsx
@@ -0,0 +1,18 @@
+import { Field, FieldDescription, FieldLabel } from "@/examples/radix/ui/field"
+import { Textarea } from "@/examples/radix/ui/textarea"
+
+export function TextareaWithDescription() {
+  return (
+    <Field>
+      <FieldLabel htmlFor="textarea-demo-message-2">Message</FieldLabel>
+      <Textarea
+        id="textarea-demo-message-2"
+        placeholder="Type your message here."
+        rows={6}
+      />
+      <FieldDescription>
+        Type your message and press enter to send.
+      </FieldDescription>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/textarea-with-label.tsx b/apps/v4/examples/radix/textarea-with-label.tsx
index 7317f91ba..e15791be1 100644
--- a/apps/v4/examples/radix/textarea-with-label.tsx
+++ b/apps/v4/examples/radix/textarea-with-label.tsx
@@ -1,11 +1,15 @@
-import { Label } from "@/examples/radix/ui/label"
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
 import { Textarea } from "@/examples/radix/ui/textarea"
 
-export default function TextareaWithLabel() {
+export function TextareaWithLabel() {
   return (
-    <div className="grid w-full gap-3">
-      <Label htmlFor="message">Your message</Label>
-      <Textarea placeholder="Type your message here." id="message" />
-    </div>
+    <Field>
+      <FieldLabel htmlFor="textarea-demo-message">Message</FieldLabel>
+      <Textarea
+        id="textarea-demo-message"
+        placeholder="Type your message here."
+        rows={6}
+      />
+    </Field>
   )
 }
diff --git a/apps/v4/examples/radix/toggle-basic.tsx b/apps/v4/examples/radix/toggle-basic.tsx
new file mode 100644
index 000000000..9f8a9a7dc
--- /dev/null
+++ b/apps/v4/examples/radix/toggle-basic.tsx
@@ -0,0 +1,18 @@
+import { Toggle } from "@/examples/radix/ui/toggle"
+import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
+
+export function ToggleBasic() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Toggle aria-label="Toggle bold" defaultPressed>
+        <BoldIcon />
+      </Toggle>
+      <Toggle aria-label="Toggle italic">
+        <ItalicIcon />
+      </Toggle>
+      <Toggle aria-label="Toggle underline">
+        <UnderlineIcon />
+      </Toggle>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/toggle-disabled.tsx b/apps/v4/examples/radix/toggle-disabled.tsx
index eb8a120ab..a2edb0986 100644
--- a/apps/v4/examples/radix/toggle-disabled.tsx
+++ b/apps/v4/examples/radix/toggle-disabled.tsx
@@ -1,10 +1,14 @@
 import { Toggle } from "@/examples/radix/ui/toggle"
-import { Underline } from "lucide-react"
 
 export function ToggleDisabled() {
   return (
-    <Toggle aria-label="Toggle italic" disabled>
-      <Underline className="h-4 w-4" />
-    </Toggle>
+    <div className="flex flex-wrap items-center gap-2">
+      <Toggle aria-label="Toggle disabled" disabled>
+        Disabled
+      </Toggle>
+      <Toggle variant="outline" aria-label="Toggle disabled outline" disabled>
+        Disabled
+      </Toggle>
+    </div>
   )
 }
diff --git a/apps/v4/examples/radix/toggle-group-basic.tsx b/apps/v4/examples/radix/toggle-group-basic.tsx
new file mode 100644
index 000000000..c647839c7
--- /dev/null
+++ b/apps/v4/examples/radix/toggle-group-basic.tsx
@@ -0,0 +1,18 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/radix/ui/toggle-group"
+import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
+
+export function ToggleGroupBasic() {
+  return (
+    <ToggleGroup type="multiple" spacing={1}>
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <BoldIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <ItalicIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <UnderlineIcon />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/toggle-group-date-range.tsx b/apps/v4/examples/radix/toggle-group-date-range.tsx
new file mode 100644
index 000000000..5b3e9ea20
--- /dev/null
+++ b/apps/v4/examples/radix/toggle-group-date-range.tsx
@@ -0,0 +1,26 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/radix/ui/toggle-group"
+
+export function ToggleGroupDateRange() {
+  return (
+    <ToggleGroup
+      type="single"
+      defaultValue="today"
+      variant="outline"
+      size="sm"
+      spacing={2}
+    >
+      <ToggleGroupItem value="today" aria-label="Today">
+        Today
+      </ToggleGroupItem>
+      <ToggleGroupItem value="week" aria-label="This Week">
+        This Week
+      </ToggleGroupItem>
+      <ToggleGroupItem value="month" aria-label="This Month">
+        This Month
+      </ToggleGroupItem>
+      <ToggleGroupItem value="year" aria-label="This Year">
+        This Year
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/toggle-group-filter.tsx b/apps/v4/examples/radix/toggle-group-filter.tsx
new file mode 100644
index 000000000..0767b2043
--- /dev/null
+++ b/apps/v4/examples/radix/toggle-group-filter.tsx
@@ -0,0 +1,20 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/radix/ui/toggle-group"
+
+export function ToggleGroupFilter() {
+  return (
+    <ToggleGroup type="single" defaultValue="all" variant="outline" size="sm">
+      <ToggleGroupItem value="all" aria-label="All">
+        All
+      </ToggleGroupItem>
+      <ToggleGroupItem value="active" aria-label="Active">
+        Active
+      </ToggleGroupItem>
+      <ToggleGroupItem value="completed" aria-label="Completed">
+        Completed
+      </ToggleGroupItem>
+      <ToggleGroupItem value="archived" aria-label="Archived">
+        Archived
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/toggle-group-outline-with-icons.tsx b/apps/v4/examples/radix/toggle-group-outline-with-icons.tsx
new file mode 100644
index 000000000..8223187dc
--- /dev/null
+++ b/apps/v4/examples/radix/toggle-group-outline-with-icons.tsx
@@ -0,0 +1,18 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/radix/ui/toggle-group"
+import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
+
+export function ToggleGroupOutlineWithIcons() {
+  return (
+    <ToggleGroup variant="outline" type="multiple" size="sm">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <BoldIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <ItalicIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <UnderlineIcon />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/toggle-group-outline.tsx b/apps/v4/examples/radix/toggle-group-outline.tsx
index 4ab31d0cf..b75e6e848 100644
--- a/apps/v4/examples/radix/toggle-group-outline.tsx
+++ b/apps/v4/examples/radix/toggle-group-outline.tsx
@@ -1,17 +1,13 @@
 import { ToggleGroup, ToggleGroupItem } from "@/examples/radix/ui/toggle-group"
-import { Bold, Italic, Underline } from "lucide-react"
 
 export function ToggleGroupOutline() {
   return (
-    <ToggleGroup type="multiple" variant="outline">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <Bold className="h-4 w-4" />
+    <ToggleGroup variant="outline" type="single" defaultValue="all">
+      <ToggleGroupItem value="all" aria-label="Toggle all">
+        All
       </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <Italic className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
-        <Underline className="h-4 w-4" />
+      <ToggleGroupItem value="missed" aria-label="Toggle missed">
+        Missed
       </ToggleGroupItem>
     </ToggleGroup>
   )
diff --git a/apps/v4/examples/radix/toggle-group-sizes.tsx b/apps/v4/examples/radix/toggle-group-sizes.tsx
new file mode 100644
index 000000000..eb579f421
--- /dev/null
+++ b/apps/v4/examples/radix/toggle-group-sizes.tsx
@@ -0,0 +1,36 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/radix/ui/toggle-group"
+
+export function ToggleGroupSizes() {
+  return (
+    <div className="flex flex-col gap-4">
+      <ToggleGroup type="single" size="sm" defaultValue="top" variant="outline">
+        <ToggleGroupItem value="top" aria-label="Toggle top">
+          Top
+        </ToggleGroupItem>
+        <ToggleGroupItem value="bottom" aria-label="Toggle bottom">
+          Bottom
+        </ToggleGroupItem>
+        <ToggleGroupItem value="left" aria-label="Toggle left">
+          Left
+        </ToggleGroupItem>
+        <ToggleGroupItem value="right" aria-label="Toggle right">
+          Right
+        </ToggleGroupItem>
+      </ToggleGroup>
+      <ToggleGroup type="single" defaultValue="top" variant="outline">
+        <ToggleGroupItem value="top" aria-label="Toggle top">
+          Top
+        </ToggleGroupItem>
+        <ToggleGroupItem value="bottom" aria-label="Toggle bottom">
+          Bottom
+        </ToggleGroupItem>
+        <ToggleGroupItem value="left" aria-label="Toggle left">
+          Left
+        </ToggleGroupItem>
+        <ToggleGroupItem value="right" aria-label="Toggle right">
+          Right
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/toggle-group-sort.tsx b/apps/v4/examples/radix/toggle-group-sort.tsx
new file mode 100644
index 000000000..2a7a71131
--- /dev/null
+++ b/apps/v4/examples/radix/toggle-group-sort.tsx
@@ -0,0 +1,26 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/radix/ui/toggle-group"
+import { ArrowDownIcon, ArrowUpIcon, TrendingUpIcon } from "lucide-react"
+
+export function ToggleGroupSort() {
+  return (
+    <ToggleGroup
+      type="single"
+      defaultValue="newest"
+      variant="outline"
+      size="sm"
+    >
+      <ToggleGroupItem value="newest" aria-label="Newest">
+        <ArrowDownIcon />
+        Newest
+      </ToggleGroupItem>
+      <ToggleGroupItem value="oldest" aria-label="Oldest">
+        <ArrowUpIcon />
+        Oldest
+      </ToggleGroupItem>
+      <ToggleGroupItem value="popular" aria-label="Popular">
+        <TrendingUpIcon />
+        Popular
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/toggle-group-spacing.tsx b/apps/v4/examples/radix/toggle-group-spacing.tsx
index 254acfbb3..e7aa2f55d 100644
--- a/apps/v4/examples/radix/toggle-group-spacing.tsx
+++ b/apps/v4/examples/radix/toggle-group-spacing.tsx
@@ -1,32 +1,25 @@
 import { ToggleGroup, ToggleGroupItem } from "@/examples/radix/ui/toggle-group"
-import { BookmarkIcon, HeartIcon, StarIcon } from "lucide-react"
 
 export function ToggleGroupSpacing() {
   return (
-    <ToggleGroup type="multiple" variant="outline" spacing={2} size="sm">
-      <ToggleGroupItem
-        value="star"
-        aria-label="Toggle star"
-        className="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-yellow-500 data-[state=on]:*:[svg]:stroke-yellow-500"
-      >
-        <StarIcon />
-        Star
+    <ToggleGroup
+      type="single"
+      size="sm"
+      defaultValue="top"
+      variant="outline"
+      spacing={2}
+    >
+      <ToggleGroupItem value="top" aria-label="Toggle top">
+        Top
       </ToggleGroupItem>
-      <ToggleGroupItem
-        value="heart"
-        aria-label="Toggle heart"
-        className="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-red-500 data-[state=on]:*:[svg]:stroke-red-500"
-      >
-        <HeartIcon />
-        Heart
+      <ToggleGroupItem value="bottom" aria-label="Toggle bottom">
+        Bottom
       </ToggleGroupItem>
-      <ToggleGroupItem
-        value="bookmark"
-        aria-label="Toggle bookmark"
-        className="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500"
-      >
-        <BookmarkIcon />
-        Bookmark
+      <ToggleGroupItem value="left" aria-label="Toggle left">
+        Left
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right" aria-label="Toggle right">
+        Right
       </ToggleGroupItem>
     </ToggleGroup>
   )
diff --git a/apps/v4/examples/radix/toggle-group-vertical-outline-with-icons.tsx b/apps/v4/examples/radix/toggle-group-vertical-outline-with-icons.tsx
new file mode 100644
index 000000000..4dd4e2ccb
--- /dev/null
+++ b/apps/v4/examples/radix/toggle-group-vertical-outline-with-icons.tsx
@@ -0,0 +1,23 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/radix/ui/toggle-group"
+import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
+
+export function ToggleGroupVerticalOutlineWithIcons() {
+  return (
+    <ToggleGroup
+      variant="outline"
+      type="multiple"
+      orientation="vertical"
+      size="sm"
+    >
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <BoldIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <ItalicIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <UnderlineIcon />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/toggle-group-vertical-outline.tsx b/apps/v4/examples/radix/toggle-group-vertical-outline.tsx
new file mode 100644
index 000000000..e648e933e
--- /dev/null
+++ b/apps/v4/examples/radix/toggle-group-vertical-outline.tsx
@@ -0,0 +1,26 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/radix/ui/toggle-group"
+
+export function ToggleGroupVerticalOutline() {
+  return (
+    <ToggleGroup
+      variant="outline"
+      type="single"
+      defaultValue="all"
+      orientation="vertical"
+      size="sm"
+    >
+      <ToggleGroupItem value="all" aria-label="Toggle all">
+        All
+      </ToggleGroupItem>
+      <ToggleGroupItem value="active" aria-label="Toggle active">
+        Active
+      </ToggleGroupItem>
+      <ToggleGroupItem value="completed" aria-label="Toggle completed">
+        Completed
+      </ToggleGroupItem>
+      <ToggleGroupItem value="archived" aria-label="Toggle archived">
+        Archived
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/toggle-group-vertical-with-spacing.tsx b/apps/v4/examples/radix/toggle-group-vertical-with-spacing.tsx
new file mode 100644
index 000000000..112d47fb1
--- /dev/null
+++ b/apps/v4/examples/radix/toggle-group-vertical-with-spacing.tsx
@@ -0,0 +1,27 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/radix/ui/toggle-group"
+
+export function ToggleGroupVerticalWithSpacing() {
+  return (
+    <ToggleGroup
+      type="single"
+      size="sm"
+      defaultValue="top"
+      variant="outline"
+      orientation="vertical"
+      spacing={2}
+    >
+      <ToggleGroupItem value="top" aria-label="Toggle top">
+        Top
+      </ToggleGroupItem>
+      <ToggleGroupItem value="bottom" aria-label="Toggle bottom">
+        Bottom
+      </ToggleGroupItem>
+      <ToggleGroupItem value="left" aria-label="Toggle left">
+        Left
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right" aria-label="Toggle right">
+        Right
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/toggle-group-vertical.tsx b/apps/v4/examples/radix/toggle-group-vertical.tsx
new file mode 100644
index 000000000..dfee1c746
--- /dev/null
+++ b/apps/v4/examples/radix/toggle-group-vertical.tsx
@@ -0,0 +1,18 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/radix/ui/toggle-group"
+import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
+
+export function ToggleGroupVertical() {
+  return (
+    <ToggleGroup type="multiple" orientation="vertical" spacing={2}>
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <BoldIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <ItalicIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <UnderlineIcon />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/toggle-group-with-icons.tsx b/apps/v4/examples/radix/toggle-group-with-icons.tsx
new file mode 100644
index 000000000..8f8210b07
--- /dev/null
+++ b/apps/v4/examples/radix/toggle-group-with-icons.tsx
@@ -0,0 +1,33 @@
+import { ToggleGroup, ToggleGroupItem } from "@/examples/radix/ui/toggle-group"
+import { BookmarkIcon, HeartIcon, StarIcon } from "lucide-react"
+
+export function ToggleGroupWithIcons() {
+  return (
+    <ToggleGroup type="multiple" variant="outline" spacing={1} size="sm">
+      <ToggleGroupItem
+        value="star"
+        aria-label="Toggle star"
+        className="aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foregfill-foreground aria-pressed:bg-transparent"
+      >
+        <StarIcon />
+        Star
+      </ToggleGroupItem>
+      <ToggleGroupItem
+        value="heart"
+        aria-label="Toggle heart"
+        className="aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent"
+      >
+        <HeartIcon />
+        Heart
+      </ToggleGroupItem>
+      <ToggleGroupItem
+        value="bookmark"
+        aria-label="Toggle bookmark"
+        className="aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent"
+      >
+        <BookmarkIcon />
+        Bookmark
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/toggle-group-with-input-and-select.tsx b/apps/v4/examples/radix/toggle-group-with-input-and-select.tsx
new file mode 100644
index 000000000..6a133388b
--- /dev/null
+++ b/apps/v4/examples/radix/toggle-group-with-input-and-select.tsx
@@ -0,0 +1,38 @@
+import { Input } from "@/examples/radix/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/examples/radix/ui/select"
+import { ToggleGroup, ToggleGroupItem } from "@/examples/radix/ui/toggle-group"
+
+export function ToggleGroupWithInputAndSelect() {
+  return (
+    <div className="flex items-center gap-2">
+      <Input type="search" placeholder="Search..." className="flex-1" />
+      <Select defaultValue="all">
+        <SelectTrigger className="w-32">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem value="all">All</SelectItem>
+            <SelectItem value="active">Active</SelectItem>
+            <SelectItem value="archived">Archived</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <ToggleGroup type="single" defaultValue="grid" variant="outline">
+        <ToggleGroupItem value="grid" aria-label="Grid view">
+          Grid
+        </ToggleGroupItem>
+        <ToggleGroupItem value="list" aria-label="List view">
+          List
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/toggle-outline.tsx b/apps/v4/examples/radix/toggle-outline.tsx
index 2dd5438df..ab4731f6f 100644
--- a/apps/v4/examples/radix/toggle-outline.tsx
+++ b/apps/v4/examples/radix/toggle-outline.tsx
@@ -1,10 +1,17 @@
 import { Toggle } from "@/examples/radix/ui/toggle"
-import { Italic } from "lucide-react"
+import { BoldIcon, ItalicIcon } from "lucide-react"
 
 export function ToggleOutline() {
   return (
-    <Toggle variant="outline" aria-label="Toggle italic">
-      <Italic />
-    </Toggle>
+    <div className="flex flex-wrap items-center gap-2">
+      <Toggle variant="outline" aria-label="Toggle italic">
+        <ItalicIcon />
+        Italic
+      </Toggle>
+      <Toggle variant="outline" aria-label="Toggle bold">
+        <BoldIcon />
+        Bold
+      </Toggle>
+    </div>
   )
 }
diff --git a/apps/v4/examples/radix/toggle-sizes.tsx b/apps/v4/examples/radix/toggle-sizes.tsx
new file mode 100644
index 000000000..c1be1b66f
--- /dev/null
+++ b/apps/v4/examples/radix/toggle-sizes.tsx
@@ -0,0 +1,17 @@
+import { Toggle } from "@/examples/radix/ui/toggle"
+
+export function ToggleSizes() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Toggle variant="outline" aria-label="Toggle small" size="sm">
+        Small
+      </Toggle>
+      <Toggle variant="outline" aria-label="Toggle default" size="default">
+        Default
+      </Toggle>
+      <Toggle variant="outline" aria-label="Toggle large" size="lg">
+        Large
+      </Toggle>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/toggle-with-button-icon-text.tsx b/apps/v4/examples/radix/toggle-with-button-icon-text.tsx
new file mode 100644
index 000000000..58062f60b
--- /dev/null
+++ b/apps/v4/examples/radix/toggle-with-button-icon-text.tsx
@@ -0,0 +1,44 @@
+import { Button } from "@/examples/radix/ui/button"
+import { Toggle } from "@/examples/radix/ui/toggle"
+import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
+
+export function ToggleWithButtonIconText() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-2">
+        <Button size="sm" variant="outline">
+          <BoldIcon />
+          Button
+        </Button>
+        <Toggle variant="outline" aria-label="Toggle sm icon text" size="sm">
+          <BoldIcon />
+          Toggle
+        </Toggle>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button size="default" variant="outline">
+          <ItalicIcon />
+          Button
+        </Button>
+        <Toggle
+          variant="outline"
+          aria-label="Toggle default icon text"
+          size="default"
+        >
+          <ItalicIcon />
+          Toggle
+        </Toggle>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button size="lg" variant="outline">
+          <UnderlineIcon />
+          Button
+        </Button>
+        <Toggle variant="outline" aria-label="Toggle lg icon text" size="lg">
+          <UnderlineIcon />
+          Toggle
+        </Toggle>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/toggle-with-button-icon.tsx b/apps/v4/examples/radix/toggle-with-button-icon.tsx
new file mode 100644
index 000000000..ce02a00de
--- /dev/null
+++ b/apps/v4/examples/radix/toggle-with-button-icon.tsx
@@ -0,0 +1,38 @@
+import { Button } from "@/examples/radix/ui/button"
+import { Toggle } from "@/examples/radix/ui/toggle"
+import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
+
+export function ToggleWithButtonIcon() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-2">
+        <Button variant="outline" size="icon-sm">
+          <BoldIcon />
+        </Button>
+        <Toggle variant="outline" aria-label="Toggle sm icon" size="sm">
+          <BoldIcon />
+        </Toggle>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button variant="outline" size="icon">
+          <ItalicIcon />
+        </Button>
+        <Toggle
+          variant="outline"
+          aria-label="Toggle default icon"
+          size="default"
+        >
+          <ItalicIcon />
+        </Toggle>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button variant="outline" size="icon-lg">
+          <UnderlineIcon />
+        </Button>
+        <Toggle variant="outline" aria-label="Toggle lg icon" size="lg">
+          <UnderlineIcon />
+        </Toggle>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/toggle-with-button-text.tsx b/apps/v4/examples/radix/toggle-with-button-text.tsx
new file mode 100644
index 000000000..60f1db3c9
--- /dev/null
+++ b/apps/v4/examples/radix/toggle-with-button-text.tsx
@@ -0,0 +1,33 @@
+import { Button } from "@/examples/radix/ui/button"
+import { Toggle } from "@/examples/radix/ui/toggle"
+
+export function ToggleWithButtonText() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-2">
+        <Button size="sm" variant="outline">
+          Button
+        </Button>
+        <Toggle variant="outline" aria-label="Toggle sm" size="sm">
+          Toggle
+        </Toggle>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button size="default" variant="outline">
+          Button
+        </Button>
+        <Toggle variant="outline" aria-label="Toggle default" size="default">
+          Toggle
+        </Toggle>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button size="lg" variant="outline">
+          Button
+        </Button>
+        <Toggle variant="outline" aria-label="Toggle lg" size="lg">
+          Toggle
+        </Toggle>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/toggle-with-icon.tsx b/apps/v4/examples/radix/toggle-with-icon.tsx
new file mode 100644
index 000000000..314081242
--- /dev/null
+++ b/apps/v4/examples/radix/toggle-with-icon.tsx
@@ -0,0 +1,16 @@
+import { Toggle } from "@/examples/radix/ui/toggle"
+import { BookmarkIcon } from "lucide-react"
+
+export function ToggleWithIcon() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Toggle aria-label="Toggle bookmark" defaultPressed>
+        <BookmarkIcon className="group-data-[state=on]/toggle:fill-accent-foreground" />
+      </Toggle>
+      <Toggle variant="outline" aria-label="Toggle bookmark outline">
+        <BookmarkIcon className="group-data-[state=on]/toggle:fill-accent-foreground" />
+        Bookmark
+      </Toggle>
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/tooltip-basic.tsx b/apps/v4/examples/radix/tooltip-basic.tsx
new file mode 100644
index 000000000..97b174c6a
--- /dev/null
+++ b/apps/v4/examples/radix/tooltip-basic.tsx
@@ -0,0 +1,21 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/radix/ui/tooltip"
+
+export function TooltipBasic() {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline" className="w-fit">
+          Show Tooltip
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Add to library</p>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
diff --git a/apps/v4/examples/radix/tooltip-disabled.tsx b/apps/v4/examples/radix/tooltip-disabled.tsx
new file mode 100644
index 000000000..11bfecaaf
--- /dev/null
+++ b/apps/v4/examples/radix/tooltip-disabled.tsx
@@ -0,0 +1,23 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/radix/ui/tooltip"
+
+export function TooltipDisabled() {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span className="inline-block w-fit">
+          <Button variant="outline" disabled>
+            Disabled
+          </Button>
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>This feature is currently unavailable</p>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
diff --git a/apps/v4/examples/radix/tooltip-formatted.tsx b/apps/v4/examples/radix/tooltip-formatted.tsx
new file mode 100644
index 000000000..9361c532e
--- /dev/null
+++ b/apps/v4/examples/radix/tooltip-formatted.tsx
@@ -0,0 +1,24 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/radix/ui/tooltip"
+
+export function TooltipFormatted() {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline" className="w-fit">
+          Status
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <div className="flex flex-col gap-1">
+          <p className="font-semibold">Active</p>
+          <p className="text-xs opacity-80">Last updated 2 hours ago</p>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
diff --git a/apps/v4/examples/radix/tooltip-long-content.tsx b/apps/v4/examples/radix/tooltip-long-content.tsx
new file mode 100644
index 000000000..802cd9b30
--- /dev/null
+++ b/apps/v4/examples/radix/tooltip-long-content.tsx
@@ -0,0 +1,22 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/radix/ui/tooltip"
+
+export function TooltipLongContent() {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline" className="w-fit">
+          Show Tooltip
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        To learn more about how this works, check out the docs. If you have any
+        questions, please reach out to us.
+      </TooltipContent>
+    </Tooltip>
+  )
+}
diff --git a/apps/v4/examples/radix/tooltip-on-link.tsx b/apps/v4/examples/radix/tooltip-on-link.tsx
new file mode 100644
index 000000000..75ac28fae
--- /dev/null
+++ b/apps/v4/examples/radix/tooltip-on-link.tsx
@@ -0,0 +1,24 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/radix/ui/tooltip"
+
+export function TooltipOnLink() {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <a
+          href="#"
+          className="text-primary w-fit text-sm underline-offset-4 hover:underline"
+          onClick={(e) => e.preventDefault()}
+        >
+          Learn more
+        </a>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Click to read the documentation</p>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
diff --git a/apps/v4/examples/radix/tooltip-sides.tsx b/apps/v4/examples/radix/tooltip-sides.tsx
new file mode 100644
index 000000000..17d76bcda
--- /dev/null
+++ b/apps/v4/examples/radix/tooltip-sides.tsx
@@ -0,0 +1,25 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/radix/ui/tooltip"
+
+export function TooltipSides() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {(["top", "right", "bottom", "left"] as const).map((side) => (
+        <Tooltip key={side}>
+          <TooltipTrigger asChild>
+            <Button variant="outline" className="w-fit capitalize">
+              {side}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side={side}>
+            <p>Add to library</p>
+          </TooltipContent>
+        </Tooltip>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/v4/examples/radix/tooltip-with-icon.tsx b/apps/v4/examples/radix/tooltip-with-icon.tsx
new file mode 100644
index 000000000..81d465fc5
--- /dev/null
+++ b/apps/v4/examples/radix/tooltip-with-icon.tsx
@@ -0,0 +1,23 @@
+import { Button } from "@/examples/radix/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/radix/ui/tooltip"
+import { InfoIcon } from "lucide-react"
+
+export function TooltipWithIcon() {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <InfoIcon />
+          <span className="sr-only">Info</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Additional information</p>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
diff --git a/apps/v4/examples/radix/tooltip-with-keyboard.tsx b/apps/v4/examples/radix/tooltip-with-keyboard.tsx
new file mode 100644
index 000000000..6862bb055
--- /dev/null
+++ b/apps/v4/examples/radix/tooltip-with-keyboard.tsx
@@ -0,0 +1,25 @@
+import { Button } from "@/examples/radix/ui/button"
+import { Kbd } from "@/examples/radix/ui/kbd"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/radix/ui/tooltip"
+import { SaveIcon } from "lucide-react"
+
+export function TooltipWithKeyboard() {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline" size="icon-sm">
+          <SaveIcon />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent className="pr-1.5">
+        <div className="flex items-center gap-2">
+          Save Changes <Kbd>S</Kbd>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
diff --git a/apps/v4/registry/bases/base/components/example.tsx b/apps/v4/registry/bases/base/components/example.tsx
index 2956a6aca..9c2dfa109 100644
--- a/apps/v4/registry/bases/base/components/example.tsx
+++ b/apps/v4/registry/bases/base/components/example.tsx
@@ -23,7 +23,7 @@ function Example({
   containerClassName,
   ...props
 }: React.ComponentProps<"div"> & {
-  title: string
+  title?: string
   containerClassName?: string
 }) {
   return (
@@ -35,9 +35,11 @@ function Example({
       )}
       {...props}
     >
-      <div className="text-muted-foreground px-1.5 py-2 text-xs font-medium">
-        {title}
-      </div>
+      {title && (
+        <div className="text-muted-foreground px-1.5 py-2 text-xs font-medium">
+          {title}
+        </div>
+      )}
       <div
         data-slot="example-content"
         className={cn(
diff --git a/apps/v4/registry/bases/radix/components/example.tsx b/apps/v4/registry/bases/radix/components/example.tsx
index 0ae15de06..5b04d9759 100644
--- a/apps/v4/registry/bases/radix/components/example.tsx
+++ b/apps/v4/registry/bases/radix/components/example.tsx
@@ -22,7 +22,7 @@ function Example({
   containerClassName,
   ...props
 }: React.ComponentProps<"div"> & {
-  title: string
+  title?: string
   containerClassName?: string
 }) {
   return (
@@ -34,9 +34,11 @@ function Example({
       )}
       {...props}
     >
-      <div className="text-muted-foreground px-1.5 py-2 text-xs font-medium">
-        {title}
-      </div>
+      {title && (
+        <div className="text-muted-foreground px-1.5 py-2 text-xs font-medium">
+          {title}
+        </div>
+      )}
       <div
         data-slot="example-content"
         className={cn(
diff --git a/apps/v4/styles/globals.css b/apps/v4/styles/globals.css
index 7d6d62b2e..1e41b5b27 100644
--- a/apps/v4/styles/globals.css
+++ b/apps/v4/styles/globals.css
@@ -167,7 +167,7 @@
     @apply bg-selection text-selection-foreground;
   }
   html {
-    @apply overscroll-y-none scroll-smooth;
+    @apply overscroll-y-none;
   }
   body {
     font-synthesis-weight: none;