diff --git a/apps/v4/app/globals.css b/apps/v4/app/globals.css
index 219e78ed58..7b2725aa45 100644
--- a/apps/v4/app/globals.css
+++ b/apps/v4/app/globals.css
@@ -337,6 +337,33 @@
     display: inline-block;
   }
 
+  /*
+   * ```text composition trees use box-drawing characters; per-line padding makes
+   * vertical connectors look broken. rehype-pretty-code sets `data-language` on
+   * `pre`/`code` (not `language-*` classes). It also sets `code { display: grid }`,
+   * which can add visible row separation — reset to a normal pre stack for text.
+   */
+  [data-rehype-pretty-code-figure] pre[data-language="text"] code,
+  [data-rehype-pretty-code-figure] pre[data-language="plaintext"] code,
+  [data-slot="docs"] pre[data-language="text"] code,
+  [data-slot="docs"] pre[data-language="plaintext"] code {
+    display: block !important;
+    white-space: pre;
+  }
+
+  [data-rehype-pretty-code-figure] pre[data-language="text"] [data-line],
+  [data-rehype-pretty-code-figure] pre[data-language="plaintext"] [data-line],
+  [data-rehype-pretty-code-figure] code[data-language="text"] [data-line],
+  [data-rehype-pretty-code-figure] code[data-language="plaintext"] [data-line],
+  [data-slot="docs"] pre[data-language="text"] [data-line],
+  [data-slot="docs"] pre[data-language="plaintext"] [data-line] {
+    padding-top: 0;
+    padding-bottom: 0;
+    min-height: unset;
+    line-height: 1;
+    display: block;
+  }
+
   [data-line] span {
     color: var(--shiki-light);
 
diff --git a/apps/v4/content/docs/components/base/accordion.mdx b/apps/v4/content/docs/components/base/accordion.mdx
index 900722e273..04f71c4f80 100644
--- a/apps/v4/content/docs/components/base/accordion.mdx
+++ b/apps/v4/content/docs/components/base/accordion.mdx
@@ -80,6 +80,20 @@ import {
 </Accordion>
 ```
 
+## Composition
+
+Use the following composition to build an `Accordion`:
+
+```text
+Accordion
+├── AccordionItem
+│   ├── AccordionTrigger
+│   └── AccordionContent
+└── AccordionItem
+    ├── AccordionTrigger
+    └── AccordionContent
+```
+
 ## Examples
 
 ### Basic
diff --git a/apps/v4/content/docs/components/base/alert-dialog.mdx b/apps/v4/content/docs/components/base/alert-dialog.mdx
index 1bdb39334e..0095c52acd 100644
--- a/apps/v4/content/docs/components/base/alert-dialog.mdx
+++ b/apps/v4/content/docs/components/base/alert-dialog.mdx
@@ -94,6 +94,23 @@ import {
 </AlertDialog>
 ```
 
+## Composition
+
+Use the following composition to build an `AlertDialog`:
+
+```text
+AlertDialog
+├── AlertDialogTrigger
+└── AlertDialogContent
+    ├── AlertDialogHeader
+    │   ├── AlertDialogMedia
+    │   ├── AlertDialogTitle
+    │   └── AlertDialogDescription
+    └── AlertDialogFooter
+        ├── AlertDialogCancel
+        └── AlertDialogAction
+```
+
 ## Examples
 
 ### Basic
diff --git a/apps/v4/content/docs/components/base/alert.mdx b/apps/v4/content/docs/components/base/alert.mdx
index 924e6a6ccb..2ada5e5843 100644
--- a/apps/v4/content/docs/components/base/alert.mdx
+++ b/apps/v4/content/docs/components/base/alert.mdx
@@ -67,6 +67,18 @@ import {
 </Alert>
 ```
 
+## Composition
+
+Use the following composition to build an `Alert`:
+
+```text
+Alert
+├── Icon
+├── AlertTitle
+├── AlertDescription
+└── AlertAction
+```
+
 ## Examples
 
 ### Basic
diff --git a/apps/v4/content/docs/components/base/avatar.mdx b/apps/v4/content/docs/components/base/avatar.mdx
index 7005036e9a..5d52ebcd55 100644
--- a/apps/v4/content/docs/components/base/avatar.mdx
+++ b/apps/v4/content/docs/components/base/avatar.mdx
@@ -69,6 +69,32 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 </Avatar>
 ```
 
+## Composition
+
+Use the following composition to build an `Avatar`:
+
+```text
+Avatar
+├── AvatarImage
+├── AvatarFallback
+└── AvatarBadge
+```
+
+Use the following composition to build an `AvatarGroup`:
+
+```text
+AvatarGroup
+├── Avatar
+│   ├── AvatarImage
+│   ├── AvatarFallback
+│   └── AvatarBadge
+├── Avatar
+│   ├── AvatarImage
+│   ├── AvatarFallback
+│   └── AvatarBadge
+└── AvatarGroupCount
+```
+
 ## Examples
 
 ### Basic
diff --git a/apps/v4/content/docs/components/base/breadcrumb.mdx b/apps/v4/content/docs/components/base/breadcrumb.mdx
index 2de58ab85b..7b340c3f11 100644
--- a/apps/v4/content/docs/components/base/breadcrumb.mdx
+++ b/apps/v4/content/docs/components/base/breadcrumb.mdx
@@ -80,6 +80,23 @@ import {
 </Breadcrumb>
 ```
 
+## Composition
+
+Use the following composition to build a `Breadcrumb`:
+
+```text
+Breadcrumb
+└── BreadcrumbList
+    ├── BreadcrumbItem
+    │   └── BreadcrumbLink
+    ├── BreadcrumbSeparator
+    ├── BreadcrumbItem
+    │   └── BreadcrumbLink
+    ├── BreadcrumbSeparator
+    └── BreadcrumbItem
+        └── BreadcrumbPage
+```
+
 ## Examples
 
 ### Basic
diff --git a/apps/v4/content/docs/components/base/button-group.mdx b/apps/v4/content/docs/components/base/button-group.mdx
index aa2dfb98e8..2305285990 100644
--- a/apps/v4/content/docs/components/base/button-group.mdx
+++ b/apps/v4/content/docs/components/base/button-group.mdx
@@ -66,6 +66,17 @@ import {
 </ButtonGroup>
 ```
 
+## Composition
+
+Use the following composition to build a `ButtonGroup`:
+
+```text
+ButtonGroup
+├── Button or Input
+├── ButtonGroupSeparator
+└── ButtonGroupText
+```
+
 ## Accessibility
 
 - The `ButtonGroup` component has the `role` attribute set to `group`.
diff --git a/apps/v4/content/docs/components/base/card.mdx b/apps/v4/content/docs/components/base/card.mdx
index ef582164be..df4e531318 100644
--- a/apps/v4/content/docs/components/base/card.mdx
+++ b/apps/v4/content/docs/components/base/card.mdx
@@ -77,6 +77,20 @@ import {
 </Card>
 ```
 
+## Composition
+
+Use the following composition to build a `Card`:
+
+```text
+Card
+├── CardHeader
+│   ├── CardTitle
+│   ├── CardDescription
+│   └── CardAction
+├── CardContent
+└── CardFooter
+```
+
 ## Examples
 
 ### Size
diff --git a/apps/v4/content/docs/components/base/carousel.mdx b/apps/v4/content/docs/components/base/carousel.mdx
index a9a77c3b0a..d45bc7346a 100644
--- a/apps/v4/content/docs/components/base/carousel.mdx
+++ b/apps/v4/content/docs/components/base/carousel.mdx
@@ -85,6 +85,19 @@ import {
 </Carousel>
 ```
 
+## Composition
+
+Use the following composition to build a `Carousel`:
+
+```text
+Carousel
+├── CarouselContent
+│   ├── CarouselItem
+│   └── CarouselItem
+├── CarouselPrevious
+└── CarouselNext
+```
+
 ## Examples
 
 ### Sizes
diff --git a/apps/v4/content/docs/components/base/collapsible.mdx b/apps/v4/content/docs/components/base/collapsible.mdx
index 649ff09332..290970989c 100644
--- a/apps/v4/content/docs/components/base/collapsible.mdx
+++ b/apps/v4/content/docs/components/base/collapsible.mdx
@@ -73,6 +73,16 @@ import {
 </Collapsible>
 ```
 
+## Composition
+
+Use the following composition to build a `Collapsible`:
+
+```text
+Collapsible
+├── CollapsibleTrigger
+└── CollapsibleContent
+```
+
 ## Controlled State
 
 Use the `open` and `onOpenChange` props to control the state.
diff --git a/apps/v4/content/docs/components/base/combobox.mdx b/apps/v4/content/docs/components/base/combobox.mdx
index 1371b2916c..65dd991c54 100644
--- a/apps/v4/content/docs/components/base/combobox.mdx
+++ b/apps/v4/content/docs/components/base/combobox.mdx
@@ -90,6 +90,62 @@ export function ExampleCombobox() {
 }
 ```
 
+## Composition
+
+### Simple
+
+A single-line input and a flat list (see [Basic](#basic)).
+
+```text
+Combobox
+├── ComboboxInput
+└── ComboboxContent
+    ├── ComboboxEmpty
+    └── ComboboxList
+        ├── ComboboxItem
+        └── ComboboxItem
+```
+
+### With chips
+
+Multi-select with `multiple`, chips, and a chips input (see [Multiple](#multiple)).
+
+```text
+Combobox
+├── ComboboxChips
+│   ├── ComboboxValue
+│   │   └── ComboboxChip
+│   └── ComboboxChipsInput
+└── ComboboxContent
+    ├── ComboboxEmpty
+    └── ComboboxList
+        ├── ComboboxItem
+        └── ComboboxItem
+```
+
+### With groups and collection
+
+Nested items per group using `ComboboxCollection` inside each `ComboboxGroup`, with a separator between groups (see [Groups](#groups)).
+
+```text
+Combobox
+├── ComboboxInput
+└── ComboboxContent
+    ├── ComboboxEmpty
+    └── ComboboxList
+        ├── ComboboxGroup
+        │   ├── ComboboxLabel
+        │   └── ComboboxCollection
+        │       ├── ComboboxItem
+        │       └── ComboboxItem
+        ├── ComboboxSeparator
+        └── ComboboxGroup
+            ├── ComboboxLabel
+            └── ComboboxCollection
+                ├── ComboboxItem
+                └── ComboboxItem
+```
+
 ## Custom Items
 
 Use `itemToStringValue` when your items are objects.
diff --git a/apps/v4/content/docs/components/base/command.mdx b/apps/v4/content/docs/components/base/command.mdx
index 17c7a06ece..98ddf15bad 100644
--- a/apps/v4/content/docs/components/base/command.mdx
+++ b/apps/v4/content/docs/components/base/command.mdx
@@ -96,6 +96,24 @@ import {
 </Command>
 ```
 
+## Composition
+
+Use the following composition to build a `Command`:
+
+```text
+Command
+├── CommandInput
+└── CommandList
+    ├── CommandEmpty
+    ├── CommandGroup
+    │   ├── CommandItem
+    │   └── CommandItem
+    ├── CommandSeparator
+    └── CommandGroup
+        ├── CommandItem
+        └── CommandItem
+```
+
 ## Examples
 
 ### Basic
diff --git a/apps/v4/content/docs/components/base/context-menu.mdx b/apps/v4/content/docs/components/base/context-menu.mdx
index e5176174f3..1b32398fbe 100644
--- a/apps/v4/content/docs/components/base/context-menu.mdx
+++ b/apps/v4/content/docs/components/base/context-menu.mdx
@@ -79,6 +79,37 @@ import {
 </ContextMenu>
 ```
 
+## Composition
+
+Use the following composition to build a `ContextMenu`:
+
+```text
+ContextMenu
+├── ContextMenuTrigger
+└── ContextMenuContent
+    ├── ContextMenuGroup
+    │   ├── ContextMenuLabel
+    │   ├── ContextMenuItem
+    │   └── ContextMenuItem
+    ├── ContextMenuSeparator
+    ├── ContextMenuGroup
+    │   ├── ContextMenuLabel
+    │   ├── ContextMenuCheckboxItem
+    │   └── ContextMenuCheckboxItem
+    ├── ContextMenuSeparator
+    ├── ContextMenuGroup
+    │   ├── ContextMenuLabel
+    │   └── ContextMenuRadioGroup
+    │       ├── ContextMenuRadioItem
+    │       └── ContextMenuRadioItem
+    └── ContextMenuSub
+        ├── ContextMenuSubTrigger
+        └── ContextMenuSubContent
+            └── ContextMenuGroup
+                ├── ContextMenuItem
+                └── ContextMenuItem
+```
+
 ## Examples
 
 ### Basic
diff --git a/apps/v4/content/docs/components/base/date-picker.mdx b/apps/v4/content/docs/components/base/date-picker.mdx
index 47aa77ca1c..f93e897951 100644
--- a/apps/v4/content/docs/components/base/date-picker.mdx
+++ b/apps/v4/content/docs/components/base/date-picker.mdx
@@ -58,6 +58,17 @@ export function DatePickerDemo() {
 
 See the [React DayPicker](https://react-day-picker.js.org) documentation for more information.
 
+## Composition
+
+A date picker is built from `Popover` and `Calendar` (there is no `DatePicker` root component):
+
+```text
+Popover
+├── PopoverTrigger
+└── PopoverContent
+    └── Calendar
+```
+
 ## Examples
 
 ### Basic
diff --git a/apps/v4/content/docs/components/base/dialog.mdx b/apps/v4/content/docs/components/base/dialog.mdx
index 427da7fc64..8ab859d4ae 100644
--- a/apps/v4/content/docs/components/base/dialog.mdx
+++ b/apps/v4/content/docs/components/base/dialog.mdx
@@ -85,6 +85,20 @@ import {
 </Dialog>
 ```
 
+## Composition
+
+Use the following composition to build a `Dialog`:
+
+```text
+Dialog
+├── DialogTrigger
+└── DialogContent
+    ├── DialogHeader
+    │   ├── DialogTitle
+    │   └── DialogDescription
+    └── DialogFooter
+```
+
 ## Examples
 
 ### Custom Close Button
diff --git a/apps/v4/content/docs/components/base/drawer.mdx b/apps/v4/content/docs/components/base/drawer.mdx
index 762642e179..0b46bcbb00 100644
--- a/apps/v4/content/docs/components/base/drawer.mdx
+++ b/apps/v4/content/docs/components/base/drawer.mdx
@@ -88,6 +88,20 @@ import {
 </Drawer>
 ```
 
+## Composition
+
+Use the following composition to build a `Drawer`:
+
+```text
+Drawer
+├── DrawerTrigger
+└── DrawerContent
+    ├── DrawerHeader
+    │   ├── DrawerTitle
+    │   └── DrawerDescription
+    └── DrawerFooter
+```
+
 ## Examples
 
 ### Scrollable Content
diff --git a/apps/v4/content/docs/components/base/dropdown-menu.mdx b/apps/v4/content/docs/components/base/dropdown-menu.mdx
index 3913e0518c..72756bcdab 100644
--- a/apps/v4/content/docs/components/base/dropdown-menu.mdx
+++ b/apps/v4/content/docs/components/base/dropdown-menu.mdx
@@ -92,6 +92,38 @@ import {
 </DropdownMenu>
 ```
 
+## Composition
+
+Use the following composition to build a `DropdownMenu`:
+
+```text
+DropdownMenu
+├── DropdownMenuTrigger
+└── DropdownMenuContent
+    ├── DropdownMenuGroup
+    │   ├── DropdownMenuLabel
+    │   ├── DropdownMenuItem
+    │   └── DropdownMenuItem
+    ├── DropdownMenuSeparator
+    ├── DropdownMenuGroup
+    │   ├── DropdownMenuLabel
+    │   ├── DropdownMenuCheckboxItem
+    │   └── DropdownMenuCheckboxItem
+    ├── DropdownMenuSeparator
+    ├── DropdownMenuGroup
+    │   ├── DropdownMenuLabel
+    │   └── DropdownMenuRadioGroup
+    │       ├── DropdownMenuRadioItem
+    │       └── DropdownMenuRadioItem
+    └── DropdownMenuSub
+        ├── DropdownMenuSubTrigger
+        └── DropdownMenuSubContent
+            └── DropdownMenuGroup
+                ├── DropdownMenuLabel
+                ├── DropdownMenuItem
+                └── DropdownMenuItem
+```
+
 ## Examples
 
 ### Basic
diff --git a/apps/v4/content/docs/components/base/empty.mdx b/apps/v4/content/docs/components/base/empty.mdx
index 2ecdfaf391..cbb63199e2 100644
--- a/apps/v4/content/docs/components/base/empty.mdx
+++ b/apps/v4/content/docs/components/base/empty.mdx
@@ -75,6 +75,19 @@ import {
 </Empty>
 ```
 
+## Composition
+
+Use the following composition to build an `Empty` state:
+
+```text
+Empty
+├── EmptyHeader
+│   ├── EmptyMedia
+│   ├── EmptyTitle
+│   └── EmptyDescription
+└── EmptyContent
+```
+
 ## Examples
 
 ### Outline
diff --git a/apps/v4/content/docs/components/base/field.mdx b/apps/v4/content/docs/components/base/field.mdx
index d0116f04d8..1f06ccda74 100644
--- a/apps/v4/content/docs/components/base/field.mdx
+++ b/apps/v4/content/docs/components/base/field.mdx
@@ -87,6 +87,56 @@ import {
 </FieldSet>
 ```
 
+## Composition
+
+### Field
+
+A single control with label, helper text, and validation.
+
+```text
+Field
+├── FieldLabel
+├── Input / Textarea / Switch / Select
+├── FieldDescription
+└── FieldError
+```
+
+### FieldGroup
+
+Related fields in one group. Use `FieldSeparator` between sections when needed.
+
+```text
+FieldGroup
+├── Field
+│   ├── FieldLabel
+│   ├── Input / Textarea / Switch / Select
+│   ├── FieldDescription
+│   └── FieldError
+├── FieldSeparator
+└── Field
+    ├── FieldLabel
+    └── Input / Textarea / Switch / Select
+```
+
+### FieldSet
+
+Semantic grouping with a legend and description, usually containing a `FieldGroup`.
+
+```text
+FieldSet
+├── FieldLegend
+├── FieldDescription
+└── FieldGroup
+    ├── Field
+    │   ├── FieldLabel
+    │   ├── Input / Textarea / Switch / Select
+    │   ├── FieldDescription
+    │   └── FieldError
+    └── Field
+        ├── FieldLabel
+        └── Input / Textarea / Switch / Select
+```
+
 ## Anatomy
 
 The `Field` family is designed for composing accessible forms. A typical field is structured as follows:
diff --git a/apps/v4/content/docs/components/base/hover-card.mdx b/apps/v4/content/docs/components/base/hover-card.mdx
index 7705af75ea..5be492c693 100644
--- a/apps/v4/content/docs/components/base/hover-card.mdx
+++ b/apps/v4/content/docs/components/base/hover-card.mdx
@@ -75,6 +75,16 @@ import {
 </HoverCard>
 ```
 
+## Composition
+
+Use the following composition to build a `HoverCard`:
+
+```text
+HoverCard
+├── HoverCardTrigger
+└── HoverCardContent
+```
+
 ## Trigger Delays
 
 Use `delay` and `closeDelay` on the trigger to control when the card opens and
diff --git a/apps/v4/content/docs/components/base/input-group.mdx b/apps/v4/content/docs/components/base/input-group.mdx
index a781b50c4c..a972738a91 100644
--- a/apps/v4/content/docs/components/base/input-group.mdx
+++ b/apps/v4/content/docs/components/base/input-group.mdx
@@ -71,6 +71,18 @@ import {
 </InputGroup>
 ```
 
+## Composition
+
+Use the following composition to build an `InputGroup`:
+
+```text
+InputGroup
+├── InputGroupInput or InputGroupTextarea
+├── InputGroupAddon
+├── InputGroupButton
+└── InputGroupText
+```
+
 ## Align
 
 Use the `align` prop on `InputGroupAddon` to position the addon relative to the input.
diff --git a/apps/v4/content/docs/components/base/input-otp.mdx b/apps/v4/content/docs/components/base/input-otp.mdx
index 3b23441422..86c64ac887 100644
--- a/apps/v4/content/docs/components/base/input-otp.mdx
+++ b/apps/v4/content/docs/components/base/input-otp.mdx
@@ -82,6 +82,27 @@ import {
 </InputOTP>
 ```
 
+## Composition
+
+Use the following composition to build an `InputOTP`:
+
+```text
+InputOTP
+├── InputOTPGroup
+│   ├── InputOTPSlot
+│   ├── InputOTPSlot
+│   └── InputOTPSlot
+├── InputOTPSeparator
+├── InputOTPGroup
+│   ├── InputOTPSlot
+│   ├── InputOTPSlot
+│   └── InputOTPSlot
+├── InputOTPSeparator
+└── InputOTPGroup
+    ├── InputOTPSlot
+    └── InputOTPSlot
+```
+
 ## Pattern
 
 Use the `pattern` prop to define a custom pattern for the OTP input.
diff --git a/apps/v4/content/docs/components/base/item.mdx b/apps/v4/content/docs/components/base/item.mdx
index a9b17e50c2..db68c469dd 100644
--- a/apps/v4/content/docs/components/base/item.mdx
+++ b/apps/v4/content/docs/components/base/item.mdx
@@ -73,6 +73,22 @@ import {
 </Item>
 ```
 
+## Composition
+
+Use the following composition to build an `Item`:
+
+```text
+ItemGroup
+└── Item
+    ├── ItemHeader
+    ├── ItemMedia
+    ├── ItemContent
+    │   ├── ItemTitle
+    │   └── ItemDescription
+    ├── ItemActions
+    └── ItemFooter
+```
+
 ## Item vs Field
 
 Use `Field` if you need to display a form input such as a checkbox, input, radio, or select.
diff --git a/apps/v4/content/docs/components/base/kbd.mdx b/apps/v4/content/docs/components/base/kbd.mdx
index ee52f65116..98e517ecd4 100644
--- a/apps/v4/content/docs/components/base/kbd.mdx
+++ b/apps/v4/content/docs/components/base/kbd.mdx
@@ -53,6 +53,17 @@ import { Kbd } from "@/components/ui/kbd"
 <Kbd>Ctrl</Kbd>
 ```
 
+## Composition
+
+Use the following composition to build `Kbd` and `KbdGroup`:
+
+```text
+Kbd
+KbdGroup
+├── Kbd
+└── Kbd
+```
+
 ## Examples
 
 ### Group
diff --git a/apps/v4/content/docs/components/base/menubar.mdx b/apps/v4/content/docs/components/base/menubar.mdx
index d81470267d..709e0ce93d 100644
--- a/apps/v4/content/docs/components/base/menubar.mdx
+++ b/apps/v4/content/docs/components/base/menubar.mdx
@@ -88,6 +88,46 @@ import {
 </Menubar>
 ```
 
+## Composition
+
+Use the following composition to build a `Menubar`:
+
+```text
+Menubar
+├── MenubarMenu
+│   ├── MenubarTrigger
+│   └── MenubarContent
+│       ├── MenubarGroup
+│       │   ├── MenubarLabel
+│       │   ├── MenubarItem
+│       │   └── MenubarItem
+│       ├── MenubarSeparator
+│       ├── MenubarGroup
+│       │   ├── MenubarLabel
+│       │   ├── MenubarCheckboxItem
+│       │   └── MenubarCheckboxItem
+│       ├── MenubarSeparator
+│       ├── MenubarGroup
+│       │   ├── MenubarLabel
+│       │   └── MenubarRadioGroup
+│       │       ├── MenubarRadioItem
+│       │       └── MenubarRadioItem
+│       └── MenubarSub
+│           ├── MenubarSubTrigger
+│           └── MenubarSubContent
+│               └── MenubarGroup
+│                   ├── MenubarLabel
+│                   ├── MenubarItem
+│                   └── MenubarItem
+└── MenubarMenu
+    ├── MenubarTrigger
+    └── MenubarContent
+        └── MenubarGroup
+            ├── MenubarLabel
+            ├── MenubarItem
+            └── MenubarItem
+```
+
 ## Examples
 
 ### Checkbox
diff --git a/apps/v4/content/docs/components/base/native-select.mdx b/apps/v4/content/docs/components/base/native-select.mdx
index d644eebd86..5197d1a71a 100644
--- a/apps/v4/content/docs/components/base/native-select.mdx
+++ b/apps/v4/content/docs/components/base/native-select.mdx
@@ -70,6 +70,34 @@ import {
 </NativeSelect>
 ```
 
+## Composition
+
+### Simple
+
+Options placed directly under `NativeSelect` (no `NativeSelectOptGroup`).
+
+```text
+NativeSelect
+├── NativeSelectOption
+├── NativeSelectOption
+├── NativeSelectOption
+└── NativeSelectOption
+```
+
+### With groups
+
+Use `NativeSelectOptGroup` to organize options into categories.
+
+```text
+NativeSelect
+├── NativeSelectOptGroup
+│   ├── NativeSelectOption
+│   └── NativeSelectOption
+└── NativeSelectOptGroup
+    ├── NativeSelectOption
+    └── NativeSelectOption
+```
+
 ## Examples
 
 ### Groups
diff --git a/apps/v4/content/docs/components/base/navigation-menu.mdx b/apps/v4/content/docs/components/base/navigation-menu.mdx
index b998b1e29e..f2a8f03d29 100644
--- a/apps/v4/content/docs/components/base/navigation-menu.mdx
+++ b/apps/v4/content/docs/components/base/navigation-menu.mdx
@@ -82,6 +82,23 @@ import {
 </NavigationMenu>
 ```
 
+## Composition
+
+Use the following composition to build a `NavigationMenu`:
+
+```text
+NavigationMenu
+├── NavigationMenuList
+│   ├── NavigationMenuItem
+│   │   ├── NavigationMenuTrigger
+│   │   └── NavigationMenuContent
+│   │       ├── NavigationMenuLink
+│   │       └── NavigationMenuLink
+│   └── NavigationMenuItem
+│       └── NavigationMenuLink
+└── NavigationMenuIndicator
+```
+
 ## Link Component
 
 Use the `render` prop to compose a custom link component such as Next.js `Link`.
diff --git a/apps/v4/content/docs/components/base/pagination.mdx b/apps/v4/content/docs/components/base/pagination.mdx
index 39a3aea640..dd3f019900 100644
--- a/apps/v4/content/docs/components/base/pagination.mdx
+++ b/apps/v4/content/docs/components/base/pagination.mdx
@@ -84,6 +84,23 @@ import {
 </Pagination>
 ```
 
+## Composition
+
+Use the following composition to build a `Pagination`:
+
+```text
+Pagination
+└── PaginationContent
+    ├── PaginationItem
+    │   └── PaginationPrevious
+    ├── PaginationItem
+    │   └── PaginationLink
+    ├── PaginationItem
+    │   └── PaginationEllipsis
+    └── PaginationItem
+        └── PaginationNext
+```
+
 ## Examples
 
 ### Simple
diff --git a/apps/v4/content/docs/components/base/popover.mdx b/apps/v4/content/docs/components/base/popover.mdx
index c03e7805f2..140950ffbb 100644
--- a/apps/v4/content/docs/components/base/popover.mdx
+++ b/apps/v4/content/docs/components/base/popover.mdx
@@ -79,6 +79,16 @@ import {
 </Popover>
 ```
 
+## Composition
+
+Use the following composition to build a `Popover`:
+
+```text
+Popover
+├── PopoverTrigger
+└── PopoverContent
+```
+
 ## Examples
 
 ### Basic
diff --git a/apps/v4/content/docs/components/base/progress.mdx b/apps/v4/content/docs/components/base/progress.mdx
index 4e683af40b..b7cff3b7e6 100644
--- a/apps/v4/content/docs/components/base/progress.mdx
+++ b/apps/v4/content/docs/components/base/progress.mdx
@@ -62,6 +62,33 @@ import { Progress } from "@/components/ui/progress"
 <Progress value={33} />
 ```
 
+## Composition
+
+### With label and value
+
+Use `ProgressLabel` and `ProgressValue` to add a label and value display.
+
+```tsx showLineNumbers
+import {
+  Progress,
+  ProgressLabel,
+  ProgressValue,
+} from "@/components/ui/progress"
+
+<Progress value={56} className="w-full max-w-sm">
+  <ProgressLabel>Upload progress</ProgressLabel>
+  <ProgressValue />
+</Progress>
+```
+
+```text
+Progress
+├── ProgressLabel
+├── ProgressValue
+└── ProgressTrack
+    └── ProgressIndicator
+```
+
 ## Examples
 
 ### Label
diff --git a/apps/v4/content/docs/components/base/radio-group.mdx b/apps/v4/content/docs/components/base/radio-group.mdx
index c45dada58d..0a9f99caa2 100644
--- a/apps/v4/content/docs/components/base/radio-group.mdx
+++ b/apps/v4/content/docs/components/base/radio-group.mdx
@@ -72,6 +72,16 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 </RadioGroup>
 ```
 
+## Composition
+
+Use the following composition to build a `RadioGroup`:
+
+```text
+RadioGroup
+├── RadioGroupItem
+└── RadioGroupItem
+```
+
 ## Examples
 
 ### Description
diff --git a/apps/v4/content/docs/components/base/resizable.mdx b/apps/v4/content/docs/components/base/resizable.mdx
index 7c90653889..46b446a555 100644
--- a/apps/v4/content/docs/components/base/resizable.mdx
+++ b/apps/v4/content/docs/components/base/resizable.mdx
@@ -78,6 +78,17 @@ import {
 </ResizablePanelGroup>
 ```
 
+## Composition
+
+Use the following composition to build a `ResizablePanelGroup`:
+
+```text
+ResizablePanelGroup
+├── ResizablePanel
+├── ResizableHandle
+└── ResizablePanel
+```
+
 ## Examples
 
 ### Vertical
diff --git a/apps/v4/content/docs/components/base/scroll-area.mdx b/apps/v4/content/docs/components/base/scroll-area.mdx
index 3d961ff9a9..76db6ebca0 100644
--- a/apps/v4/content/docs/components/base/scroll-area.mdx
+++ b/apps/v4/content/docs/components/base/scroll-area.mdx
@@ -68,6 +68,15 @@ import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
 </ScrollArea>
 ```
 
+## Composition
+
+Use the following composition to build a `ScrollArea`:
+
+```text
+ScrollArea
+└── ScrollBar
+```
+
 ## Examples
 
 ### Horizontal
diff --git a/apps/v4/content/docs/components/base/select.mdx b/apps/v4/content/docs/components/base/select.mdx
index 53e0c848af..8d087179af 100644
--- a/apps/v4/content/docs/components/base/select.mdx
+++ b/apps/v4/content/docs/components/base/select.mdx
@@ -89,6 +89,26 @@ const items = [
 </Select>
 ```
 
+## Composition
+
+Use the following composition to build a `Select`:
+
+```text
+Select
+├── SelectTrigger
+│   └── SelectValue
+└── SelectContent
+    ├── SelectGroup
+    │   ├── SelectLabel
+    │   ├── SelectItem
+    │   └── SelectItem
+    ├── SelectSeparator
+    └── SelectGroup
+        ├── SelectLabel
+        ├── SelectItem
+        └── SelectItem
+```
+
 ## Examples
 
 ### Align Item With Trigger
diff --git a/apps/v4/content/docs/components/base/sheet.mdx b/apps/v4/content/docs/components/base/sheet.mdx
index 426063a588..e0fb7a09a9 100644
--- a/apps/v4/content/docs/components/base/sheet.mdx
+++ b/apps/v4/content/docs/components/base/sheet.mdx
@@ -79,6 +79,20 @@ import {
 </Sheet>
 ```
 
+## Composition
+
+Use the following composition to build a `Sheet`:
+
+```text
+Sheet
+├── SheetTrigger
+└── SheetContent
+    ├── SheetHeader
+    │   ├── SheetTitle
+    │   └── SheetDescription
+    └── SheetFooter
+```
+
 ## Examples
 
 ### Side
diff --git a/apps/v4/content/docs/components/base/sidebar.mdx b/apps/v4/content/docs/components/base/sidebar.mdx
index f89a3479cc..4c7e08706c 100644
--- a/apps/v4/content/docs/components/base/sidebar.mdx
+++ b/apps/v4/content/docs/components/base/sidebar.mdx
@@ -55,32 +55,6 @@ npx shadcn@latest add sidebar
 
 </CodeTabs>
 
-## Structure
-
-A `Sidebar` component is composed of the following parts:
-
-- `SidebarProvider` - Handles collapsible state.
-- `Sidebar` - The sidebar container.
-- `SidebarHeader` and `SidebarFooter` - Sticky at the top and bottom of the sidebar.
-- `SidebarContent` - Scrollable content.
-- `SidebarGroup` - Section within the `SidebarContent`.
-- `SidebarTrigger` - Trigger for the `Sidebar`.
-
-<Image
-  src="/images/sidebar-structure.png"
-  width="716"
-  height="420"
-  alt="Sidebar Structure"
-  className="mt-6 w-full overflow-hidden rounded-lg border dark:hidden"
-/>
-<Image
-  src="/images/sidebar-structure-dark.png"
-  width="716"
-  height="420"
-  alt="Sidebar Structure"
-  className="mt-6 hidden w-full overflow-hidden rounded-lg border dark:block"
-/>
-
 ## Usage
 
 ```tsx showLineNumbers title="app/layout.tsx"
@@ -123,6 +97,67 @@ export function AppSidebar() {
 }
 ```
 
+## Composition
+
+Use the following composition to build a `Sidebar` layout:
+
+```text
+SidebarProvider
+├── Sidebar
+│   ├── SidebarHeader
+│   ├── SidebarContent
+│   │   ├── SidebarGroup
+│   │   │   ├── SidebarGroupLabel
+│   │   │   ├── SidebarGroupAction
+│   │   │   ├── SidebarGroupContent
+│   │   │   └── SidebarMenu
+│   │   │       ├── SidebarMenuItem
+│   │   │       │   ├── SidebarMenuButton
+│   │   │       │   ├── SidebarMenuAction
+│   │   │       │   └── SidebarMenuBadge
+│   │   │       └── SidebarMenuItem
+│   │   │           ├── SidebarMenuButton
+│   │   │           └── SidebarMenuSub
+│   │   │               ├── SidebarMenuSubItem
+│   │   │               └── SidebarMenuSubItem
+│   │   └── SidebarGroup
+│   │       └── SidebarMenu
+│   │           ├── SidebarMenuItem
+│   │           └── SidebarMenuItem
+│   ├── SidebarFooter
+│   └── SidebarRail
+├── SidebarInset
+└── SidebarTrigger
+```
+
+## Structure
+
+- **SidebarProvider** — Handles collapsible state and provides sidebar context to child components.
+- **Sidebar** — The main collapsible sidebar panel.
+- **SidebarHeader** — Sticky at the top; use for branding, titles, or workspace switchers.
+- **SidebarFooter** — Sticky at the bottom; use for user menus, settings, or actions.
+- **SidebarContent** — Scrollable region between the header and footer.
+- **SidebarGroup** — Groups related navigation with optional label, action, and content areas.
+- **SidebarMenu** / **SidebarMenuItem** — Menu structure for links, badges, actions, and nested submenus.
+- **SidebarRail** — Resize handle for adjusting sidebar width when applicable.
+- **SidebarInset** — Wraps main content when using the `inset` variant.
+- **SidebarTrigger** — Control that toggles the sidebar open or collapsed.
+
+<Image
+  src="/images/sidebar-structure.png"
+  width="716"
+  height="420"
+  alt="Sidebar Structure"
+  className="mt-6 w-full overflow-hidden rounded-lg border dark:hidden"
+/>
+<Image
+  src="/images/sidebar-structure-dark.png"
+  width="716"
+  height="420"
+  alt="Sidebar Structure"
+  className="mt-6 hidden w-full overflow-hidden rounded-lg border dark:block"
+/>
+
 ## SidebarProvider
 
 The `SidebarProvider` component is used to provide the sidebar context to the `Sidebar` component. You should always wrap your application in a `SidebarProvider` component.
diff --git a/apps/v4/content/docs/components/base/table.mdx b/apps/v4/content/docs/components/base/table.mdx
index dea24857e2..ea8ae5d32e 100644
--- a/apps/v4/content/docs/components/base/table.mdx
+++ b/apps/v4/content/docs/components/base/table.mdx
@@ -83,6 +83,33 @@ import {
 </Table>
 ```
 
+## Composition
+
+Use the following composition to build a `Table`:
+
+```text
+Table
+├── TableCaption
+├── TableHeader
+│   └── TableRow
+│       ├── TableHead
+│       ├── TableHead
+│       ├── TableHead
+│       └── TableHead
+├── TableBody
+│   ├── TableRow
+│   │   ├── TableCell
+│   │   ├── TableCell
+│   │   ├── TableCell
+│   │   └── TableCell
+│   └── TableRow
+│       ├── TableCell
+│       ├── TableCell
+│       ├── TableCell
+│       └── TableCell
+└── TableFooter
+```
+
 ## Examples
 
 ### Footer
diff --git a/apps/v4/content/docs/components/base/tabs.mdx b/apps/v4/content/docs/components/base/tabs.mdx
index b3c42a4eca..cef05662f6 100644
--- a/apps/v4/content/docs/components/base/tabs.mdx
+++ b/apps/v4/content/docs/components/base/tabs.mdx
@@ -73,6 +73,19 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 </Tabs>
 ```
 
+## Composition
+
+Use the following composition to build `Tabs`:
+
+```text
+Tabs
+├── TabsList
+│   ├── TabsTrigger
+│   └── TabsTrigger
+├── TabsContent
+└── TabsContent
+```
+
 ## Examples
 
 ### Line
diff --git a/apps/v4/content/docs/components/base/toggle-group.mdx b/apps/v4/content/docs/components/base/toggle-group.mdx
index 17ed5aebbb..1e232f5c48 100644
--- a/apps/v4/content/docs/components/base/toggle-group.mdx
+++ b/apps/v4/content/docs/components/base/toggle-group.mdx
@@ -66,6 +66,16 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 </ToggleGroup>
 ```
 
+## Composition
+
+Use the following composition to build a `ToggleGroup`:
+
+```text
+ToggleGroup
+├── ToggleGroupItem
+└── ToggleGroupItem
+```
+
 ## Examples
 
 ### Outline
diff --git a/apps/v4/content/docs/components/base/tooltip.mdx b/apps/v4/content/docs/components/base/tooltip.mdx
index 8d1ff4f56a..365dec685a 100644
--- a/apps/v4/content/docs/components/base/tooltip.mdx
+++ b/apps/v4/content/docs/components/base/tooltip.mdx
@@ -109,6 +109,16 @@ import {
 </Tooltip>
 ```
 
+## Composition
+
+Use the following composition to build a `Tooltip`:
+
+```text
+Tooltip
+├── TooltipTrigger
+└── TooltipContent
+```
+
 ## Examples
 
 ### Side
diff --git a/apps/v4/content/docs/components/radix/accordion.mdx b/apps/v4/content/docs/components/radix/accordion.mdx
index 72d0b6fc36..9d43fc37fc 100644
--- a/apps/v4/content/docs/components/radix/accordion.mdx
+++ b/apps/v4/content/docs/components/radix/accordion.mdx
@@ -80,6 +80,20 @@ import {
 </Accordion>
 ```
 
+## Composition
+
+Use the following composition to build an `Accordion`:
+
+```text
+Accordion
+├── AccordionItem
+│   ├── AccordionTrigger
+│   └── AccordionContent
+└── AccordionItem
+    ├── AccordionTrigger
+    └── AccordionContent
+```
+
 ## Examples
 
 ### Basic
diff --git a/apps/v4/content/docs/components/radix/alert-dialog.mdx b/apps/v4/content/docs/components/radix/alert-dialog.mdx
index 425aa94937..38c9c130e3 100644
--- a/apps/v4/content/docs/components/radix/alert-dialog.mdx
+++ b/apps/v4/content/docs/components/radix/alert-dialog.mdx
@@ -94,6 +94,23 @@ import {
 </AlertDialog>
 ```
 
+## Composition
+
+Use the following composition to build an `AlertDialog`:
+
+```text
+AlertDialog
+├── AlertDialogTrigger
+└── AlertDialogContent
+    ├── AlertDialogHeader
+    │   ├── AlertDialogMedia
+    │   ├── AlertDialogTitle
+    │   └── AlertDialogDescription
+    └── AlertDialogFooter
+        ├── AlertDialogCancel
+        └── AlertDialogAction
+```
+
 ## Examples
 
 ### Basic
diff --git a/apps/v4/content/docs/components/radix/alert.mdx b/apps/v4/content/docs/components/radix/alert.mdx
index 3c65fdbd9f..84ea308db2 100644
--- a/apps/v4/content/docs/components/radix/alert.mdx
+++ b/apps/v4/content/docs/components/radix/alert.mdx
@@ -71,6 +71,18 @@ import {
 </Alert>
 ```
 
+## Composition
+
+Use the following composition to build an `Alert`:
+
+```text
+Alert
+├── Icon
+├── AlertTitle
+├── AlertDescription
+└── AlertAction
+```
+
 ## Examples
 
 ### Basic
diff --git a/apps/v4/content/docs/components/radix/avatar.mdx b/apps/v4/content/docs/components/radix/avatar.mdx
index ef8652b191..ac77ec8477 100644
--- a/apps/v4/content/docs/components/radix/avatar.mdx
+++ b/apps/v4/content/docs/components/radix/avatar.mdx
@@ -65,6 +65,32 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 </Avatar>
 ```
 
+## Composition
+
+Use the following composition to build an `Avatar`:
+
+```text
+Avatar
+├── AvatarImage
+├── AvatarFallback
+└── AvatarBadge
+```
+
+Use the following composition to build an `AvatarGroup`:
+
+```text
+AvatarGroup
+├── Avatar
+│   ├── AvatarImage
+│   ├── AvatarFallback
+│   └── AvatarBadge
+├── Avatar
+│   ├── AvatarImage
+│   ├── AvatarFallback
+│   └── AvatarBadge
+└── AvatarGroupCount
+```
+
 ## Examples
 
 ### Basic
diff --git a/apps/v4/content/docs/components/radix/breadcrumb.mdx b/apps/v4/content/docs/components/radix/breadcrumb.mdx
index 114c2aaf4a..a252ecb967 100644
--- a/apps/v4/content/docs/components/radix/breadcrumb.mdx
+++ b/apps/v4/content/docs/components/radix/breadcrumb.mdx
@@ -74,6 +74,23 @@ import {
 </Breadcrumb>
 ```
 
+## Composition
+
+Use the following composition to build a `Breadcrumb`:
+
+```text
+Breadcrumb
+└── BreadcrumbList
+    ├── BreadcrumbItem
+    │   └── BreadcrumbLink
+    ├── BreadcrumbSeparator
+    ├── BreadcrumbItem
+    │   └── BreadcrumbLink
+    ├── BreadcrumbSeparator
+    └── BreadcrumbItem
+        └── BreadcrumbPage
+```
+
 ## Examples
 
 ### Basic
diff --git a/apps/v4/content/docs/components/radix/button-group.mdx b/apps/v4/content/docs/components/radix/button-group.mdx
index a6d0091372..35ede376c3 100644
--- a/apps/v4/content/docs/components/radix/button-group.mdx
+++ b/apps/v4/content/docs/components/radix/button-group.mdx
@@ -66,6 +66,17 @@ import {
 </ButtonGroup>
 ```
 
+## Composition
+
+Use the following composition to build a `ButtonGroup`:
+
+```text
+ButtonGroup
+├── Button or Input
+├── ButtonGroupSeparator
+└── ButtonGroupText
+```
+
 ## Accessibility
 
 - The `ButtonGroup` component has the `role` attribute set to `group`.
diff --git a/apps/v4/content/docs/components/radix/card.mdx b/apps/v4/content/docs/components/radix/card.mdx
index 865694d6f4..79d3e5f51b 100644
--- a/apps/v4/content/docs/components/radix/card.mdx
+++ b/apps/v4/content/docs/components/radix/card.mdx
@@ -77,6 +77,20 @@ import {
 </Card>
 ```
 
+## Composition
+
+Use the following composition to build a `Card`:
+
+```text
+Card
+├── CardHeader
+│   ├── CardTitle
+│   ├── CardDescription
+│   └── CardAction
+├── CardContent
+└── CardFooter
+```
+
 ## Examples
 
 ### Size
diff --git a/apps/v4/content/docs/components/radix/carousel.mdx b/apps/v4/content/docs/components/radix/carousel.mdx
index 85aaf522a9..c622b25acb 100644
--- a/apps/v4/content/docs/components/radix/carousel.mdx
+++ b/apps/v4/content/docs/components/radix/carousel.mdx
@@ -85,6 +85,19 @@ import {
 </Carousel>
 ```
 
+## Composition
+
+Use the following composition to build a `Carousel`:
+
+```text
+Carousel
+├── CarouselContent
+│   ├── CarouselItem
+│   └── CarouselItem
+├── CarouselPrevious
+└── CarouselNext
+```
+
 ## Examples
 
 ### Sizes
diff --git a/apps/v4/content/docs/components/radix/collapsible.mdx b/apps/v4/content/docs/components/radix/collapsible.mdx
index 2571e312ca..0aeb9646fc 100644
--- a/apps/v4/content/docs/components/radix/collapsible.mdx
+++ b/apps/v4/content/docs/components/radix/collapsible.mdx
@@ -77,6 +77,16 @@ import {
 </Collapsible>
 ```
 
+## Composition
+
+Use the following composition to build a `Collapsible`:
+
+```text
+Collapsible
+├── CollapsibleTrigger
+└── CollapsibleContent
+```
+
 ## Controlled State
 
 Use the `open` and `onOpenChange` props to control the state.
diff --git a/apps/v4/content/docs/components/radix/combobox.mdx b/apps/v4/content/docs/components/radix/combobox.mdx
index 6170162a21..6ef706e6df 100644
--- a/apps/v4/content/docs/components/radix/combobox.mdx
+++ b/apps/v4/content/docs/components/radix/combobox.mdx
@@ -90,6 +90,62 @@ export function ExampleCombobox() {
 }
 ```
 
+## Composition
+
+### Simple
+
+A single-line input and a flat list (see [Basic](#basic)).
+
+```text
+Combobox
+├── ComboboxInput
+└── ComboboxContent
+    ├── ComboboxEmpty
+    └── ComboboxList
+        ├── ComboboxItem
+        └── ComboboxItem
+```
+
+### With chips
+
+Multi-select with `multiple`, chips, and a chips input (see [Multiple](#multiple)).
+
+```text
+Combobox
+├── ComboboxChips
+│   ├── ComboboxValue
+│   │   └── ComboboxChip
+│   └── ComboboxChipsInput
+└── ComboboxContent
+    ├── ComboboxEmpty
+    └── ComboboxList
+        ├── ComboboxItem
+        └── ComboboxItem
+```
+
+### With groups and collection
+
+Nested items per group using `ComboboxCollection` inside each `ComboboxGroup`, with a separator between groups (see [Groups](#groups)).
+
+```text
+Combobox
+├── ComboboxInput
+└── ComboboxContent
+    ├── ComboboxEmpty
+    └── ComboboxList
+        ├── ComboboxGroup
+        │   ├── ComboboxLabel
+        │   └── ComboboxCollection
+        │       ├── ComboboxItem
+        │       └── ComboboxItem
+        ├── ComboboxSeparator
+        └── ComboboxGroup
+            ├── ComboboxLabel
+            └── ComboboxCollection
+                ├── ComboboxItem
+                └── ComboboxItem
+```
+
 ## Custom Items
 
 Use `itemToStringValue` when your items are objects.
diff --git a/apps/v4/content/docs/components/radix/command.mdx b/apps/v4/content/docs/components/radix/command.mdx
index 3f1e46eb67..d465e906ce 100644
--- a/apps/v4/content/docs/components/radix/command.mdx
+++ b/apps/v4/content/docs/components/radix/command.mdx
@@ -96,6 +96,24 @@ import {
 </Command>
 ```
 
+## Composition
+
+Use the following composition to build a `Command`:
+
+```text
+Command
+├── CommandInput
+└── CommandList
+    ├── CommandEmpty
+    ├── CommandGroup
+    │   ├── CommandItem
+    │   └── CommandItem
+    ├── CommandSeparator
+    └── CommandGroup
+        ├── CommandItem
+        └── CommandItem
+```
+
 ## Examples
 
 ### Basic
diff --git a/apps/v4/content/docs/components/radix/context-menu.mdx b/apps/v4/content/docs/components/radix/context-menu.mdx
index 3022d286f4..e41b495f05 100644
--- a/apps/v4/content/docs/components/radix/context-menu.mdx
+++ b/apps/v4/content/docs/components/radix/context-menu.mdx
@@ -79,6 +79,37 @@ import {
 </ContextMenu>
 ```
 
+## Composition
+
+Use the following composition to build a `ContextMenu`:
+
+```text
+ContextMenu
+├── ContextMenuTrigger
+└── ContextMenuContent
+    ├── ContextMenuGroup
+    │   ├── ContextMenuLabel
+    │   ├── ContextMenuItem
+    │   └── ContextMenuItem
+    ├── ContextMenuSeparator
+    ├── ContextMenuGroup
+    │   ├── ContextMenuLabel
+    │   ├── ContextMenuCheckboxItem
+    │   └── ContextMenuCheckboxItem
+    ├── ContextMenuSeparator
+    ├── ContextMenuGroup
+    │   ├── ContextMenuLabel
+    │   └── ContextMenuRadioGroup
+    │       ├── ContextMenuRadioItem
+    │       └── ContextMenuRadioItem
+    └── ContextMenuSub
+        ├── ContextMenuSubTrigger
+        └── ContextMenuSubContent
+            └── ContextMenuGroup
+                ├── ContextMenuItem
+                └── ContextMenuItem
+```
+
 ## Examples
 
 ### Basic
diff --git a/apps/v4/content/docs/components/radix/date-picker.mdx b/apps/v4/content/docs/components/radix/date-picker.mdx
index 20ac0cc5f3..380ec99e21 100644
--- a/apps/v4/content/docs/components/radix/date-picker.mdx
+++ b/apps/v4/content/docs/components/radix/date-picker.mdx
@@ -56,6 +56,17 @@ export function DatePickerDemo() {
 
 See the [React DayPicker](https://react-day-picker.js.org) documentation for more information.
 
+## Composition
+
+A date picker is built from `Popover` and `Calendar` (there is no `DatePicker` root component):
+
+```text
+Popover
+├── PopoverTrigger
+└── PopoverContent
+    └── Calendar
+```
+
 ## Examples
 
 ### Basic
diff --git a/apps/v4/content/docs/components/radix/dialog.mdx b/apps/v4/content/docs/components/radix/dialog.mdx
index 032834b76d..e9fcc25325 100644
--- a/apps/v4/content/docs/components/radix/dialog.mdx
+++ b/apps/v4/content/docs/components/radix/dialog.mdx
@@ -85,6 +85,20 @@ import {
 </Dialog>
 ```
 
+## Composition
+
+Use the following composition to build a `Dialog`:
+
+```text
+Dialog
+├── DialogTrigger
+└── DialogContent
+    ├── DialogHeader
+    │   ├── DialogTitle
+    │   └── DialogDescription
+    └── DialogFooter
+```
+
 ## Examples
 
 ### Custom Close Button
diff --git a/apps/v4/content/docs/components/radix/drawer.mdx b/apps/v4/content/docs/components/radix/drawer.mdx
index 3f50d10f1b..b70f39079d 100644
--- a/apps/v4/content/docs/components/radix/drawer.mdx
+++ b/apps/v4/content/docs/components/radix/drawer.mdx
@@ -88,6 +88,20 @@ import {
 </Drawer>
 ```
 
+## Composition
+
+Use the following composition to build a `Drawer`:
+
+```text
+Drawer
+├── DrawerTrigger
+└── DrawerContent
+    ├── DrawerHeader
+    │   ├── DrawerTitle
+    │   └── DrawerDescription
+    └── DrawerFooter
+```
+
 ## Examples
 
 ### Scrollable Content
diff --git a/apps/v4/content/docs/components/radix/dropdown-menu.mdx b/apps/v4/content/docs/components/radix/dropdown-menu.mdx
index 44e0d2cf78..693f6cdb7a 100644
--- a/apps/v4/content/docs/components/radix/dropdown-menu.mdx
+++ b/apps/v4/content/docs/components/radix/dropdown-menu.mdx
@@ -92,6 +92,38 @@ import {
 </DropdownMenu>
 ```
 
+## Composition
+
+Use the following composition to build a `DropdownMenu`:
+
+```text
+DropdownMenu
+├── DropdownMenuTrigger
+└── DropdownMenuContent
+    ├── DropdownMenuGroup
+    │   ├── DropdownMenuLabel
+    │   ├── DropdownMenuItem
+    │   └── DropdownMenuItem
+    ├── DropdownMenuSeparator
+    ├── DropdownMenuGroup
+    │   ├── DropdownMenuLabel
+    │   ├── DropdownMenuCheckboxItem
+    │   └── DropdownMenuCheckboxItem
+    ├── DropdownMenuSeparator
+    ├── DropdownMenuGroup
+    │   ├── DropdownMenuLabel
+    │   └── DropdownMenuRadioGroup
+    │       ├── DropdownMenuRadioItem
+    │       └── DropdownMenuRadioItem
+    └── DropdownMenuSub
+        ├── DropdownMenuSubTrigger
+        └── DropdownMenuSubContent
+            └── DropdownMenuGroup
+                ├── DropdownMenuLabel
+                ├── DropdownMenuItem
+                └── DropdownMenuItem
+```
+
 ## Examples
 
 ### Basic
diff --git a/apps/v4/content/docs/components/radix/empty.mdx b/apps/v4/content/docs/components/radix/empty.mdx
index 89a01bb5fa..b509ccec67 100644
--- a/apps/v4/content/docs/components/radix/empty.mdx
+++ b/apps/v4/content/docs/components/radix/empty.mdx
@@ -75,6 +75,19 @@ import {
 </Empty>
 ```
 
+## Composition
+
+Use the following composition to build an `Empty` state:
+
+```text
+Empty
+├── EmptyHeader
+│   ├── EmptyMedia
+│   ├── EmptyTitle
+│   └── EmptyDescription
+└── EmptyContent
+```
+
 ## Examples
 
 ### Outline
diff --git a/apps/v4/content/docs/components/radix/field.mdx b/apps/v4/content/docs/components/radix/field.mdx
index 856c8eeb61..8671533e64 100644
--- a/apps/v4/content/docs/components/radix/field.mdx
+++ b/apps/v4/content/docs/components/radix/field.mdx
@@ -87,6 +87,56 @@ import {
 </FieldSet>
 ```
 
+## Composition
+
+### Field
+
+A single control with label, helper text, and validation.
+
+```text
+Field
+├── FieldLabel
+├── Input / Textarea / Switch / Select
+├── FieldDescription
+└── FieldError
+```
+
+### FieldGroup
+
+Related fields in one group. Use `FieldSeparator` between sections when needed.
+
+```text
+FieldGroup
+├── Field
+│   ├── FieldLabel
+│   ├── Input / Textarea / Switch / Select
+│   ├── FieldDescription
+│   └── FieldError
+├── FieldSeparator
+└── Field
+    ├── FieldLabel
+    └── Input / Textarea / Switch / Select
+```
+
+### FieldSet
+
+Semantic grouping with a legend and description, usually containing a `FieldGroup`.
+
+```text
+FieldSet
+├── FieldLegend
+├── FieldDescription
+└── FieldGroup
+    ├── Field
+    │   ├── FieldLabel
+    │   ├── Input / Textarea / Switch / Select
+    │   ├── FieldDescription
+    │   └── FieldError
+    └── Field
+        ├── FieldLabel
+        └── Input / Textarea / Switch / Select
+```
+
 ## Anatomy
 
 The `Field` family is designed for composing accessible forms. A typical field is structured as follows:
diff --git a/apps/v4/content/docs/components/radix/hover-card.mdx b/apps/v4/content/docs/components/radix/hover-card.mdx
index fe8e4f7ba7..6104265c07 100644
--- a/apps/v4/content/docs/components/radix/hover-card.mdx
+++ b/apps/v4/content/docs/components/radix/hover-card.mdx
@@ -75,6 +75,16 @@ import {
 </HoverCard>
 ```
 
+## Composition
+
+Use the following composition to build a `HoverCard`:
+
+```text
+HoverCard
+├── HoverCardTrigger
+└── HoverCardContent
+```
+
 ## Trigger Delays
 
 Use `openDelay` and `closeDelay` on the `HoverCard` to control when the card opens and
diff --git a/apps/v4/content/docs/components/radix/input-group.mdx b/apps/v4/content/docs/components/radix/input-group.mdx
index 1b27dffbd8..cdf820763b 100644
--- a/apps/v4/content/docs/components/radix/input-group.mdx
+++ b/apps/v4/content/docs/components/radix/input-group.mdx
@@ -71,6 +71,18 @@ import {
 </InputGroup>
 ```
 
+## Composition
+
+Use the following composition to build an `InputGroup`:
+
+```text
+InputGroup
+├── InputGroupInput or InputGroupTextarea
+├── InputGroupAddon
+├── InputGroupButton
+└── InputGroupText
+```
+
 ## Align
 
 Use the `align` prop on `InputGroupAddon` to position the addon relative to the input.
diff --git a/apps/v4/content/docs/components/radix/input-otp.mdx b/apps/v4/content/docs/components/radix/input-otp.mdx
index ef25bb6a8d..792f051c64 100644
--- a/apps/v4/content/docs/components/radix/input-otp.mdx
+++ b/apps/v4/content/docs/components/radix/input-otp.mdx
@@ -82,6 +82,27 @@ import {
 </InputOTP>
 ```
 
+## Composition
+
+Use the following composition to build an `InputOTP`:
+
+```text
+InputOTP
+├── InputOTPGroup
+│   ├── InputOTPSlot
+│   ├── InputOTPSlot
+│   └── InputOTPSlot
+├── InputOTPSeparator
+├── InputOTPGroup
+│   ├── InputOTPSlot
+│   ├── InputOTPSlot
+│   └── InputOTPSlot
+├── InputOTPSeparator
+└── InputOTPGroup
+    ├── InputOTPSlot
+    └── InputOTPSlot
+```
+
 ## Pattern
 
 Use the `pattern` prop to define a custom pattern for the OTP input.
diff --git a/apps/v4/content/docs/components/radix/item.mdx b/apps/v4/content/docs/components/radix/item.mdx
index f0d8939ab2..9765d28366 100644
--- a/apps/v4/content/docs/components/radix/item.mdx
+++ b/apps/v4/content/docs/components/radix/item.mdx
@@ -73,6 +73,22 @@ import {
 </Item>
 ```
 
+## Composition
+
+Use the following composition to build an `Item`:
+
+```text
+ItemGroup
+└── Item
+    ├── ItemHeader
+    ├── ItemMedia
+    ├── ItemContent
+    │   ├── ItemTitle
+    │   └── ItemDescription
+    ├── ItemActions
+    └── ItemFooter
+```
+
 ## Item vs Field
 
 Use `Field` if you need to display a form input such as a checkbox, input, radio, or select.
diff --git a/apps/v4/content/docs/components/radix/kbd.mdx b/apps/v4/content/docs/components/radix/kbd.mdx
index a4a408a398..4423b4d88e 100644
--- a/apps/v4/content/docs/components/radix/kbd.mdx
+++ b/apps/v4/content/docs/components/radix/kbd.mdx
@@ -53,6 +53,17 @@ import { Kbd } from "@/components/ui/kbd"
 <Kbd>Ctrl</Kbd>
 ```
 
+## Composition
+
+Use the following composition to build `Kbd` and `KbdGroup`:
+
+```text
+Kbd
+KbdGroup
+├── Kbd
+└── Kbd
+```
+
 ## Examples
 
 ### Group
diff --git a/apps/v4/content/docs/components/radix/menubar.mdx b/apps/v4/content/docs/components/radix/menubar.mdx
index e6f34b3e98..ed42aeed4f 100644
--- a/apps/v4/content/docs/components/radix/menubar.mdx
+++ b/apps/v4/content/docs/components/radix/menubar.mdx
@@ -88,6 +88,46 @@ import {
 </Menubar>
 ```
 
+## Composition
+
+Use the following composition to build a `Menubar`:
+
+```text
+Menubar
+├── MenubarMenu
+│   ├── MenubarTrigger
+│   └── MenubarContent
+│       ├── MenubarGroup
+│       │   ├── MenubarLabel
+│       │   ├── MenubarItem
+│       │   └── MenubarItem
+│       ├── MenubarSeparator
+│       ├── MenubarGroup
+│       │   ├── MenubarLabel
+│       │   ├── MenubarCheckboxItem
+│       │   └── MenubarCheckboxItem
+│       ├── MenubarSeparator
+│       ├── MenubarGroup
+│       │   ├── MenubarLabel
+│       │   └── MenubarRadioGroup
+│       │       ├── MenubarRadioItem
+│       │       └── MenubarRadioItem
+│       └── MenubarSub
+│           ├── MenubarSubTrigger
+│           └── MenubarSubContent
+│               └── MenubarGroup
+│                   ├── MenubarLabel
+│                   ├── MenubarItem
+│                   └── MenubarItem
+└── MenubarMenu
+    ├── MenubarTrigger
+    └── MenubarContent
+        └── MenubarGroup
+            ├── MenubarLabel
+            ├── MenubarItem
+            └── MenubarItem
+```
+
 ## Examples
 
 ### Checkbox
diff --git a/apps/v4/content/docs/components/radix/native-select.mdx b/apps/v4/content/docs/components/radix/native-select.mdx
index 3b16d3e7d4..0e257afc81 100644
--- a/apps/v4/content/docs/components/radix/native-select.mdx
+++ b/apps/v4/content/docs/components/radix/native-select.mdx
@@ -70,6 +70,34 @@ import {
 </NativeSelect>
 ```
 
+## Composition
+
+### Simple
+
+Options placed directly under `NativeSelect` (no `NativeSelectOptGroup`).
+
+```text
+NativeSelect
+├── NativeSelectOption
+├── NativeSelectOption
+├── NativeSelectOption
+└── NativeSelectOption
+```
+
+### With groups
+
+Use `NativeSelectOptGroup` to organize options into categories.
+
+```text
+NativeSelect
+├── NativeSelectOptGroup
+│   ├── NativeSelectOption
+│   └── NativeSelectOption
+└── NativeSelectOptGroup
+    ├── NativeSelectOption
+    └── NativeSelectOption
+```
+
 ## Examples
 
 ### Groups
diff --git a/apps/v4/content/docs/components/radix/navigation-menu.mdx b/apps/v4/content/docs/components/radix/navigation-menu.mdx
index 455b21f3ff..90ab6c36a7 100644
--- a/apps/v4/content/docs/components/radix/navigation-menu.mdx
+++ b/apps/v4/content/docs/components/radix/navigation-menu.mdx
@@ -82,6 +82,23 @@ import {
 </NavigationMenu>
 ```
 
+## Composition
+
+Use the following composition to build a `NavigationMenu`:
+
+```text
+NavigationMenu
+├── NavigationMenuList
+│   ├── NavigationMenuItem
+│   │   ├── NavigationMenuTrigger
+│   │   └── NavigationMenuContent
+│   │       ├── NavigationMenuLink
+│   │       └── NavigationMenuLink
+│   └── NavigationMenuItem
+│       └── NavigationMenuLink
+└── NavigationMenuIndicator
+```
+
 ## Link Component
 
 Use the `asChild` prop to compose a custom link component such as Next.js `Link`.
diff --git a/apps/v4/content/docs/components/radix/pagination.mdx b/apps/v4/content/docs/components/radix/pagination.mdx
index e109d411eb..0c29a4f308 100644
--- a/apps/v4/content/docs/components/radix/pagination.mdx
+++ b/apps/v4/content/docs/components/radix/pagination.mdx
@@ -84,6 +84,23 @@ import {
 </Pagination>
 ```
 
+## Composition
+
+Use the following composition to build a `Pagination`:
+
+```text
+Pagination
+└── PaginationContent
+    ├── PaginationItem
+    │   └── PaginationPrevious
+    ├── PaginationItem
+    │   └── PaginationLink
+    ├── PaginationItem
+    │   └── PaginationEllipsis
+    └── PaginationItem
+        └── PaginationNext
+```
+
 ## Examples
 
 ### Simple
diff --git a/apps/v4/content/docs/components/radix/popover.mdx b/apps/v4/content/docs/components/radix/popover.mdx
index 7636e1a798..ce72a8b222 100644
--- a/apps/v4/content/docs/components/radix/popover.mdx
+++ b/apps/v4/content/docs/components/radix/popover.mdx
@@ -79,6 +79,16 @@ import {
 </Popover>
 ```
 
+## Composition
+
+Use the following composition to build a `Popover`:
+
+```text
+Popover
+├── PopoverTrigger
+└── PopoverContent
+```
+
 ## Examples
 
 ### Basic
diff --git a/apps/v4/content/docs/components/radix/radio-group.mdx b/apps/v4/content/docs/components/radix/radio-group.mdx
index 154a1eb4df..64e5f7f0c2 100644
--- a/apps/v4/content/docs/components/radix/radio-group.mdx
+++ b/apps/v4/content/docs/components/radix/radio-group.mdx
@@ -72,6 +72,16 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 </RadioGroup>
 ```
 
+## Composition
+
+Use the following composition to build a `RadioGroup`:
+
+```text
+RadioGroup
+├── RadioGroupItem
+└── RadioGroupItem
+```
+
 ## Examples
 
 ### Description
diff --git a/apps/v4/content/docs/components/radix/resizable.mdx b/apps/v4/content/docs/components/radix/resizable.mdx
index 78ffa09780..ecb33dc3dd 100644
--- a/apps/v4/content/docs/components/radix/resizable.mdx
+++ b/apps/v4/content/docs/components/radix/resizable.mdx
@@ -78,6 +78,17 @@ import {
 </ResizablePanelGroup>
 ```
 
+## Composition
+
+Use the following composition to build a `ResizablePanelGroup`:
+
+```text
+ResizablePanelGroup
+├── ResizablePanel
+├── ResizableHandle
+└── ResizablePanel
+```
+
 ## Examples
 
 ### Vertical
diff --git a/apps/v4/content/docs/components/radix/scroll-area.mdx b/apps/v4/content/docs/components/radix/scroll-area.mdx
index 93be2c044d..f975171706 100644
--- a/apps/v4/content/docs/components/radix/scroll-area.mdx
+++ b/apps/v4/content/docs/components/radix/scroll-area.mdx
@@ -68,6 +68,15 @@ import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
 </ScrollArea>
 ```
 
+## Composition
+
+Use the following composition to build a `ScrollArea`:
+
+```text
+ScrollArea
+└── ScrollBar
+```
+
 ## Examples
 
 ### Horizontal
diff --git a/apps/v4/content/docs/components/radix/select.mdx b/apps/v4/content/docs/components/radix/select.mdx
index 073faf5b35..ec80a0f5d3 100644
--- a/apps/v4/content/docs/components/radix/select.mdx
+++ b/apps/v4/content/docs/components/radix/select.mdx
@@ -81,6 +81,26 @@ import {
 </Select>
 ```
 
+## Composition
+
+Use the following composition to build a `Select`:
+
+```text
+Select
+├── SelectTrigger
+│   └── SelectValue
+└── SelectContent
+    ├── SelectGroup
+    │   ├── SelectLabel
+    │   ├── SelectItem
+    │   └── SelectItem
+    ├── SelectSeparator
+    └── SelectGroup
+        ├── SelectLabel
+        ├── SelectItem
+        └── SelectItem
+```
+
 ## Examples
 
 ### Align Item With Trigger
diff --git a/apps/v4/content/docs/components/radix/sheet.mdx b/apps/v4/content/docs/components/radix/sheet.mdx
index 6ae74c6495..590099b1e1 100644
--- a/apps/v4/content/docs/components/radix/sheet.mdx
+++ b/apps/v4/content/docs/components/radix/sheet.mdx
@@ -79,6 +79,20 @@ import {
 </Sheet>
 ```
 
+## Composition
+
+Use the following composition to build a `Sheet`:
+
+```text
+Sheet
+├── SheetTrigger
+└── SheetContent
+    ├── SheetHeader
+    │   ├── SheetTitle
+    │   └── SheetDescription
+    └── SheetFooter
+```
+
 ## Examples
 
 ### Side
diff --git a/apps/v4/content/docs/components/radix/sidebar.mdx b/apps/v4/content/docs/components/radix/sidebar.mdx
index 9f5eef773f..3676a84c1c 100644
--- a/apps/v4/content/docs/components/radix/sidebar.mdx
+++ b/apps/v4/content/docs/components/radix/sidebar.mdx
@@ -55,32 +55,6 @@ npx shadcn@latest add sidebar
 
 </CodeTabs>
 
-## Structure
-
-A `Sidebar` component is composed of the following parts:
-
-- `SidebarProvider` - Handles collapsible state.
-- `Sidebar` - The sidebar container.
-- `SidebarHeader` and `SidebarFooter` - Sticky at the top and bottom of the sidebar.
-- `SidebarContent` - Scrollable content.
-- `SidebarGroup` - Section within the `SidebarContent`.
-- `SidebarTrigger` - Trigger for the `Sidebar`.
-
-<Image
-  src="/images/sidebar-structure.png"
-  width="716"
-  height="420"
-  alt="Sidebar Structure"
-  className="mt-6 w-full overflow-hidden rounded-lg border dark:hidden"
-/>
-<Image
-  src="/images/sidebar-structure-dark.png"
-  width="716"
-  height="420"
-  alt="Sidebar Structure"
-  className="mt-6 hidden w-full overflow-hidden rounded-lg border dark:block"
-/>
-
 ## Usage
 
 ```tsx showLineNumbers title="app/layout.tsx"
@@ -123,6 +97,67 @@ export function AppSidebar() {
 }
 ```
 
+## Composition
+
+Use the following composition to build a `Sidebar` layout:
+
+```text
+SidebarProvider
+├── Sidebar
+│   ├── SidebarHeader
+│   ├── SidebarContent
+│   │   ├── SidebarGroup
+│   │   │   ├── SidebarGroupLabel
+│   │   │   ├── SidebarGroupAction
+│   │   │   ├── SidebarGroupContent
+│   │   │   └── SidebarMenu
+│   │   │       ├── SidebarMenuItem
+│   │   │       │   ├── SidebarMenuButton
+│   │   │       │   ├── SidebarMenuAction
+│   │   │       │   └── SidebarMenuBadge
+│   │   │       └── SidebarMenuItem
+│   │   │           ├── SidebarMenuButton
+│   │   │           └── SidebarMenuSub
+│   │   │               ├── SidebarMenuSubItem
+│   │   │               └── SidebarMenuSubItem
+│   │   └── SidebarGroup
+│   │       └── SidebarMenu
+│   │           ├── SidebarMenuItem
+│   │           └── SidebarMenuItem
+│   ├── SidebarFooter
+│   └── SidebarRail
+├── SidebarInset
+└── SidebarTrigger
+```
+
+## Structure
+
+- **SidebarProvider** — Handles collapsible state and provides sidebar context to child components.
+- **Sidebar** — The main collapsible sidebar panel.
+- **SidebarHeader** — Sticky at the top; use for branding, titles, or workspace switchers.
+- **SidebarFooter** — Sticky at the bottom; use for user menus, settings, or actions.
+- **SidebarContent** — Scrollable region between the header and footer.
+- **SidebarGroup** — Groups related navigation with optional label, action, and content areas.
+- **SidebarMenu** / **SidebarMenuItem** — Menu structure for links, badges, actions, and nested submenus.
+- **SidebarRail** — Resize handle for adjusting sidebar width when applicable.
+- **SidebarInset** — Wraps main content when using the `inset` variant.
+- **SidebarTrigger** — Control that toggles the sidebar open or collapsed.
+
+<Image
+  src="/images/sidebar-structure.png"
+  width="716"
+  height="420"
+  alt="Sidebar Structure"
+  className="mt-6 w-full overflow-hidden rounded-lg border dark:hidden"
+/>
+<Image
+  src="/images/sidebar-structure-dark.png"
+  width="716"
+  height="420"
+  alt="Sidebar Structure"
+  className="mt-6 hidden w-full overflow-hidden rounded-lg border dark:block"
+/>
+
 ## SidebarProvider
 
 The `SidebarProvider` component is used to provide the sidebar context to the `Sidebar` component. You should always wrap your application in a `SidebarProvider` component.
diff --git a/apps/v4/content/docs/components/radix/table.mdx b/apps/v4/content/docs/components/radix/table.mdx
index e97a619811..523310291c 100644
--- a/apps/v4/content/docs/components/radix/table.mdx
+++ b/apps/v4/content/docs/components/radix/table.mdx
@@ -83,6 +83,33 @@ import {
 </Table>
 ```
 
+## Composition
+
+Use the following composition to build a `Table`:
+
+```text
+Table
+├── TableCaption
+├── TableHeader
+│   └── TableRow
+│       ├── TableHead
+│       ├── TableHead
+│       ├── TableHead
+│       └── TableHead
+├── TableBody
+│   ├── TableRow
+│   │   ├── TableCell
+│   │   ├── TableCell
+│   │   ├── TableCell
+│   │   └── TableCell
+│   └── TableRow
+│       ├── TableCell
+│       ├── TableCell
+│       ├── TableCell
+│       └── TableCell
+└── TableFooter
+```
+
 ## Examples
 
 ### Footer
diff --git a/apps/v4/content/docs/components/radix/tabs.mdx b/apps/v4/content/docs/components/radix/tabs.mdx
index 6c666dcea2..087658e801 100644
--- a/apps/v4/content/docs/components/radix/tabs.mdx
+++ b/apps/v4/content/docs/components/radix/tabs.mdx
@@ -73,6 +73,19 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 </Tabs>
 ```
 
+## Composition
+
+Use the following composition to build `Tabs`:
+
+```text
+Tabs
+├── TabsList
+│   ├── TabsTrigger
+│   └── TabsTrigger
+├── TabsContent
+└── TabsContent
+```
+
 ## Examples
 
 ### Line
diff --git a/apps/v4/content/docs/components/radix/toggle-group.mdx b/apps/v4/content/docs/components/radix/toggle-group.mdx
index 4e78927343..f3f86db9f2 100644
--- a/apps/v4/content/docs/components/radix/toggle-group.mdx
+++ b/apps/v4/content/docs/components/radix/toggle-group.mdx
@@ -66,6 +66,16 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 </ToggleGroup>
 ```
 
+## Composition
+
+Use the following composition to build a `ToggleGroup`:
+
+```text
+ToggleGroup
+├── ToggleGroupItem
+└── ToggleGroupItem
+```
+
 ## Examples
 
 ### Outline
diff --git a/apps/v4/content/docs/components/radix/tooltip.mdx b/apps/v4/content/docs/components/radix/tooltip.mdx
index 7eaa10c4a8..570a73106f 100644
--- a/apps/v4/content/docs/components/radix/tooltip.mdx
+++ b/apps/v4/content/docs/components/radix/tooltip.mdx
@@ -109,6 +109,16 @@ import {
 </Tooltip>
 ```
 
+## Composition
+
+Use the following composition to build a `Tooltip`:
+
+```text
+Tooltip
+├── TooltipTrigger
+└── TooltipContent
+```
+
 ## Examples
 
 ### Side