From d697c5350320aff1e9497543315dba4b022f5140 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Tue, 20 Oct 2026 16:57:11 +0200
Subject: [PATCH] refactor(segmented-control): ship as a render-prop component

- Add SegmentedControl and SegmentedControlItem in ui/segmented-control.tsx;
  the rendered element (Radio Group, nav and links, Toggle Group) provides
  the behavior
- Render the sliding indicator inside SegmentedControl and share size via
  context like TabsList
- Remove lib/segmented-control.ts and lib/segmented-control-indicator.tsx;
  @coss/segmented-control is now a registry:ui item and
  @coss/segmented-control-indicator is removed
- Tabs imports the shared sizes, layout and indicator surface from the
  component
- Migrate the radio group and navigation particles, docs, skill references,
  and add a changelog entry with an agent migration prompt

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/ui/content/docs/(root)/changelog.mdx     |  86 +++++++
 .../docs/components/segmented-control.mdx     | 159 +++++++-----
 apps/ui/content/docs/components/tabs.mdx      |  18 +-
 apps/ui/public/r/p-navigation-1.json          |   5 +-
 apps/ui/public/r/p-navigation-2.json          |   5 +-
 apps/ui/public/r/p-navigation-3.json          |   5 +-
 apps/ui/public/r/p-radio-group-7.json         |   5 +-
 apps/ui/public/r/p-radio-group-8.json         |   5 +-
 apps/ui/public/r/p-radio-group-9.json         |   5 +-
 apps/ui/public/r/registry.json                |  58 ++---
 .../public/r/segmented-control-indicator.json |  16 --
 apps/ui/public/r/segmented-control.json       |  10 +-
 apps/ui/public/r/tabs.json                    |   2 +-
 apps/ui/registry.json                         |  58 ++---
 apps/ui/registry/__index__.tsx                |  66 ++---
 .../lib/segmented-control-indicator.tsx       | 155 ------------
 .../registry/default/lib/segmented-control.ts |  47 ----
 .../default/particles/p-navigation-1.tsx      |  42 ++--
 .../default/particles/p-navigation-2.tsx      |  45 ++--
 .../default/particles/p-navigation-3.tsx      |  45 ++--
 .../default/particles/p-radio-group-7.tsx     |  38 ++-
 .../default/particles/p-radio-group-8.tsx     |  36 ++-
 .../default/particles/p-radio-group-9.tsx     |  38 ++-
 .../registry/default/ui/segmented-control.tsx | 234 ++++++++++++++++++
 apps/ui/registry/default/ui/tabs.tsx          |   4 +-
 apps/ui/registry/registry-lib.ts              |  22 --
 apps/ui/registry/registry-particles.ts        |  33 +--
 apps/ui/registry/registry-ui.ts               |  11 +
 apps/ui/skills/coss/SKILL.md                  |   3 +-
 .../coss/references/component-registry.md     |   4 +-
 .../coss/references/primitives/radio-group.md |   2 +-
 .../primitives/segmented-control.md           | 111 +++++++++
 .../skills/coss/references/primitives/tabs.md |   6 +-
 .../references/primitives/toggle-group.md     |   2 +-
 .../coss/references/segmented-control.md      |  74 ------
 .../ui/src/components/segmented-control.tsx   | 234 ++++++++++++++++++
 packages/ui/src/components/tabs.tsx           |   2 +-
 .../src/lib/segmented-control-indicator.tsx   | 155 ------------
 packages/ui/src/lib/segmented-control.ts      |  47 ----
 39 files changed, 991 insertions(+), 902 deletions(-)
 delete mode 100644 apps/ui/public/r/segmented-control-indicator.json
 delete mode 100644 apps/ui/registry/default/lib/segmented-control-indicator.tsx
 delete mode 100644 apps/ui/registry/default/lib/segmented-control.ts
 create mode 100644 apps/ui/registry/default/ui/segmented-control.tsx
 create mode 100644 apps/ui/skills/coss/references/primitives/segmented-control.md
 delete mode 100644 apps/ui/skills/coss/references/segmented-control.md
 create mode 100644 packages/ui/src/components/segmented-control.tsx
 delete mode 100644 packages/ui/src/lib/segmented-control-indicator.tsx
 delete mode 100644 packages/ui/src/lib/segmented-control.ts

diff --git a/apps/ui/content/docs/(root)/changelog.mdx b/apps/ui/content/docs/(root)/changelog.mdx
index 24d405e65..14cd575ba 100644
--- a/apps/ui/content/docs/(root)/changelog.mdx
+++ b/apps/ui/content/docs/(root)/changelog.mdx
@@ -3,6 +3,92 @@ title: Changelog
 description: Breaking changes, migration guides, and notable updates.
 ---
 
+## October 20, 2026
+
+### Segmented Control component
+
+**`@coss/segmented-control`** is now a component at **`components/ui/segmented-control.tsx`** instead of a styling library at **`lib/segmented-control.ts`**. It exports **`SegmentedControl`** and **`SegmentedControlItem`**. The element you pass to **`render`** still decides the behavior — a Radio Group, links, or a Toggle Group — so the semantics stay those of the primitive you choose.
+
+```tsx
+<SegmentedControl
+  aria-label="Billing period"
+  render={<RadioGroupPrimitive defaultValue="monthly" />}
+>
+  <SegmentedControlItem render={<RadioPrimitive.Root value="monthly" />}>
+    Monthly
+  </SegmentedControlItem>
+  <SegmentedControlItem render={<RadioPrimitive.Root value="yearly" />}>
+    Yearly
+  </SegmentedControlItem>
+</SegmentedControl>
+```
+
+The sliding indicator is built in. **`SegmentedControl`** renders it after its children, so there is nothing to add or order by hand, and before hydration the active item paints its own static pill. **`size`** is set once on **`SegmentedControl`** and inherited by its items; an item can still override it. One item recipe now covers **`data-checked`**, **`aria-current="page"`**, and **`data-pressed`**, so there is no **`state`** option.
+
+These exports were removed: **`segmentedControlRootClassName`**, **`segmentedControlItemVariants`**, **`segmentedControlIndicatorClassName`**, and **`SegmentedControlIndicator`**. The **`@coss/segmented-control-indicator`** registry item no longer exists. **`SegmentedControlSize`**, **`segmentedControlItemSizeClassNames`**, **`segmentedControlItemLayoutClassName`**, and **`segmentedControlIndicatorSurfaceClassName`** are still exported, from the component file. Tabs imports them from there, and **`@coss/tabs`** declares the component as a registry dependency.
+
+**Migration:**
+
+Install the component, then update Tabs so it no longer imports from the library:
+
+```bash
+npx shadcn@latest add @coss/segmented-control @coss/tabs
+```
+
+If you maintain a local Tabs, change its import instead of overwriting it:
+
+```diff
+- } from "@/lib/segmented-control"
++ } from "@/components/ui/segmented-control"
+```
+
+Replace class-based compositions. Move the root class and the indicator into **`SegmentedControl`**, and each item recipe into **`SegmentedControlItem`**, keeping behavior props on the rendered element:
+
+```diff
+- <RadioGroupPrimitive
+-   aria-label="Billing period"
+-   className={segmentedControlRootClassName}
+-   defaultValue="monthly"
+- >
+-   <RadioPrimitive.Root className={itemClassName} value="monthly">
++ <SegmentedControl
++   aria-label="Billing period"
++   render={<RadioGroupPrimitive defaultValue="monthly" />}
++ >
++   <SegmentedControlItem render={<RadioPrimitive.Root value="monthly" />}>
+      Monthly
+-   </RadioPrimitive.Root>
+-   <SegmentedControlIndicator />
+- </RadioGroupPrimitive>
++   </SegmentedControlItem>
++ </SegmentedControl>
+```
+
+Navigation follows the same shape, with the **`<nav>`** as the rendered root and the link on each item:
+
+```diff
+- <nav aria-label="Project sections">
+-   <div className={segmentedControlRootClassName}>
+-     <a aria-current="page" className={itemClassName} href="/overview">
+-       Overview
+-     </a>
+-   </div>
+- </nav>
++ <SegmentedControl aria-label="Project sections" render={<nav />}>
++   <SegmentedControlItem render={<a aria-current="page" href="/overview" />}>
++     Overview
++   </SegmentedControlItem>
++ </SegmentedControl>
+```
+
+Extra classes from **`segmentedControlItemVariants({ className })`** move to **`className`** on **`SegmentedControlItem`**. Once nothing imports **`@/lib/segmented-control`** or **`@/lib/segmented-control-indicator`**, delete both files.
+
+**Agent migration prompt:**
+
+```text
+Migrate my codebase from the coss segmented-control styling library to the Segmented Control component. Install the component with `npx shadcn@latest add @coss/segmented-control`; it is written to components/ui/segmented-control.tsx and exports SegmentedControl, SegmentedControlItem, SegmentedControlSize, segmentedControlItemSizeClassNames, segmentedControlItemLayoutClassName, and segmentedControlIndicatorSurfaceClassName. Update the local Tabs component first: either reinstall it with `npx shadcn@latest add @coss/tabs`, or, if it has project-specific changes, only change its segmented-control import from @/lib/segmented-control to @/components/ui/segmented-control. Then find every file that imports segmentedControlRootClassName, segmentedControlItemVariants, segmentedControlIndicatorClassName, or SegmentedControlIndicator. For each composition, replace the element that has segmentedControlRootClassName with <SegmentedControl render={<ThatElement {...itsBehaviorProps} />}>: Radio Group roots become render={<RadioGroupPrimitive defaultValue=… />}, Toggle Group roots become render={<ToggleGroupPrimitive … />}, and a plain wrapper div inside a <nav> collapses so the nav itself is the rendered root via render={<nav />}. Keep accessibility props such as aria-label on SegmentedControl. Replace each item that used segmentedControlItemVariants with <SegmentedControlItem render={<ThatItem {...itsBehaviorProps} />}>, for example render={<RadioPrimitive.Root value="monthly" />} or render={<a href="/overview" aria-current={…} />}; put value, href, onClick, aria-current, and other behavior props on the rendered element, and move any className passed to segmentedControlItemVariants onto SegmentedControlItem. Drop the state option entirely. Move a shared size option to the size prop on SegmentedControl, and keep a per-item size prop only where items genuinely differ. Delete every <SegmentedControlIndicator /> element, because SegmentedControl renders the indicator itself. Do not convert Tabs call sites; Tabs keeps its own component. When nothing imports @/lib/segmented-control or @/lib/segmented-control-indicator any more, delete those files. Run formatting and typechecking, then visually check each segmented control in light and dark mode: the pill should sit exactly on the active item and slide when the selection changes.
+```
+
 ## October 18, 2026
 
 ### Avatar group clipping and inherited sizing
diff --git a/apps/ui/content/docs/components/segmented-control.mdx b/apps/ui/content/docs/components/segmented-control.mdx
index 128b415fe..5ee2344e8 100644
--- a/apps/ui/content/docs/components/segmented-control.mdx
+++ b/apps/ui/content/docs/components/segmented-control.mdx
@@ -7,7 +7,7 @@ description: A visual pattern for presenting related choices, navigation destina
 
 ## About
 
-A segmented control is a visual pattern, not a standalone behavior. COSS uses the same presentation across several components while preserving the semantics, keyboard interactions, and state model of each underlying primitive.
+A segmented control is a visual pattern, not a standalone behavior. `SegmentedControl` and `SegmentedControlItem` provide the presentation and the sliding indicator; the element you pass to `render` provides the semantics, keyboard interactions, and state model.
 
 ## Choose the right primitive
 
@@ -18,102 +18,129 @@ A segmented control is a visual pattern, not a standalone behavior. COSS uses th
 | Apply an exclusive filter or mode | [Toggle Group](/ui/docs/components/toggle-group) | Represents the pressed state of an action that may be cleared. |
 | Switch between related panels | [Tabs](/ui/docs/components/tabs) | Connects each tab to an associated content panel. |
 
-Choose the primitive from the interaction first, then apply the segmented-control styling. Visual similarity alone is not a reason to use Tabs or Toggle Group.
+Choose the primitive from the interaction first, then render it through the segmented control. Visual similarity alone is not a reason to use Tabs or Toggle Group.
 
 ## Installation
 
-Segmented controls are provided as particles. Install the implementation and size that match your interaction:
+<CodeTabs>
 
-| Implementation | Small | Default | Large |
-| -------------- | ----- | ------- | ----- |
-| Radio Group | `@coss/p-radio-group-7` | `@coss/p-radio-group-8` | `@coss/p-radio-group-9` |
-| Navigation | `@coss/p-navigation-2` | `@coss/p-navigation-1` | `@coss/p-navigation-3` |
-
-For example, install the default Radio Group version with:
+<TabsList>
+  <TabsTab value="cli">CLI</TabsTab>
+  <TabsTab value="manual">Manual</TabsTab>
+</TabsList>
+<TabsPanel value="cli">
 
 ```bash
-npx shadcn@latest add @coss/p-radio-group-8
+npx shadcn@latest add @coss/segmented-control
 ```
 
-The CLI installs the shared `segmented-control` styling library and the required primitive automatically.
+</TabsPanel>
+
+<TabsPanel value="manual">
 
-## Shared styling
+<Steps>
 
-For a custom composition, install the styling library directly:
+<Step>Install the following dependencies:</Step>
 
 ```bash
-npx shadcn@latest add @coss/segmented-control
+npm install @base-ui/react
 ```
 
-The library exports a root class, an item recipe, a shared item layout class for icons, and the indicator surface class:
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource
+  name="segmented-control"
+  title="components/ui/segmented-control.tsx"
+/>
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsPanel>
+
+</CodeTabs>
+
+## Usage
 
 ```tsx
 import {
-  segmentedControlItemLayoutClassName,
-  segmentedControlItemVariants,
-  segmentedControlRootClassName,
-} from "@/lib/segmented-control"
+  RadioGroupPrimitive,
+  RadioPrimitive,
+} from "@/components/ui/radio-group"
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+} from "@/components/ui/segmented-control"
 ```
 
 ```tsx
-const itemClassName = segmentedControlItemVariants({
-  size: "default",
-  state: "checked",
-})
+<SegmentedControl
+  aria-label="Billing period"
+  render={<RadioGroupPrimitive defaultValue="monthly" />}
+>
+  <SegmentedControlItem render={<RadioPrimitive.Root value="monthly" />}>
+    Monthly
+  </SegmentedControlItem>
+  <SegmentedControlItem render={<RadioPrimitive.Root value="yearly" />}>
+    Yearly
+  </SegmentedControlItem>
+</SegmentedControl>
 ```
 
-| Option | Values | Description |
-| ------ | ------ | ----------- |
-| `size` | `"sm" \| "default" \| "lg"` | Controls item height and horizontal padding. |
-| `state` | `"checked" \| "current" \| "pressed"` | Selects the state attribute used by the underlying element. |
+Put behavior props such as `defaultValue`, `value`, `onValueChange`, or `href` on the element passed to `render`. Use the Radio Group primitives rather than `RadioGroup` and `Radio`, so the native radio indicator is not rendered.
 
-Use `checked` with Radio Group, `current` with navigation links, and `pressed` with Toggle Group. Tabs do not use the shared state recipe; they reuse `segmentedControlItemLayoutClassName` so icons match the other segmented implementations.
+The same composition works for navigation links:
 
-At the outside edges, the item padding and the surface’s `p-0.5` inset combine to match the horizontal padding of the corresponding Button size. The outer segmented surface is slightly taller than that Button to optically balance its inset selected item when the controls appear next to each other.
+```tsx
+<SegmentedControl aria-label="Project sections" render={<nav />}>
+  <SegmentedControlItem render={<a aria-current="page" href="/overview" />}>
+    Overview
+  </SegmentedControlItem>
+  <SegmentedControlItem render={<a href="/activity" />}>
+    Activity
+  </SegmentedControlItem>
+</SegmentedControl>
+```
 
-<ComponentSource
-  name="segmented-control"
-  title="lib/segmented-control.ts"
-/>
+And for an exclusive filter that may be cleared:
 
-### Indicator
+```tsx
+<SegmentedControl render={<ToggleGroupPrimitive aria-label="Status" />}>
+  <SegmentedControlItem render={<TogglePrimitive value="open" />}>
+    Open
+  </SegmentedControlItem>
+  <SegmentedControlItem render={<TogglePrimitive value="closed" />}>
+    Closed
+  </SegmentedControlItem>
+</SegmentedControl>
+```
 
-The item recipe paints a static pill on the active item. To animate the selection, add the indicator, a separate element that slides to the active item:
+## API Reference
 
-```bash
-npx shadcn@latest add @coss/segmented-control-indicator
-```
+### SegmentedControl
 
-```tsx
-import { SegmentedControlIndicator } from "@/lib/segmented-control-indicator"
-```
+The segmented surface. Renders a `<div>` by default and appends the sliding indicator after its children. Provides the size to its items via context.
 
-Render `SegmentedControlIndicator` as the last child of the element with `segmentedControlRootClassName`:
+| Prop     | Type                        | Default     | Description                                                                 |
+| -------- | --------------------------- | ----------- | --------------------------------------------------------------------------- |
+| `size`   | `"sm" \| "default" \| "lg"` | `"default"` | Controls the height and horizontal padding of every item                    |
+| `render` | `ReactElement \| function`  | —           | Replaces the rendered element, for example with a Radio Group primitive or `<nav />` |
 
-```tsx
-<RadioGroupPrimitive className={segmentedControlRootClassName}>
-  <RadioPrimitive.Root className={itemClassName} value="monthly">
-    Monthly
-  </RadioPrimitive.Root>
-  <RadioPrimitive.Root className={itemClassName} value="yearly">
-    Yearly
-  </RadioPrimitive.Root>
-  <SegmentedControlIndicator />
-</RadioGroupPrimitive>
-```
+### SegmentedControlItem
 
-The indicator follows whichever direct child has `data-checked`, `aria-current="page"`, or `data-pressed`. It moves with a 200ms ease-in-out transition, stays still when the user prefers reduced motion, and is hidden when no item is active. While it is visible, the items drop their static pill; before hydration or without JavaScript, the static pill shows the selection. For navigation, the pill animates only when the root persists across route changes, such as in a shared layout; otherwise it appears in place on each page.
+A single segment. Renders a `<button type="button">` by default.
 
-Tabs use Base UI’s `Tabs.Indicator` instead of this component, but share its surface through `segmentedControlIndicatorSurfaceClassName` so both pills look the same.
+| Prop     | Type                        | Default             | Description                                                       |
+| -------- | --------------------------- | ------------------- | ----------------------------------------------------------------- |
+| `size`   | `"sm" \| "default" \| "lg"` | Inherited from root | Overrides the size inherited from `SegmentedControl`              |
+| `render` | `ReactElement \| function`  | —                   | Replaces the rendered element, for example with a radio or a link |
 
-<ComponentSource
-  name="segmented-control-indicator"
-  title="lib/segmented-control-indicator.tsx"
-/>
+An item is active when it has `data-checked` (Radio Group), `aria-current="page"` (links), or `data-pressed` (Toggle Group). The indicator slides to the active item over 200ms with an ease-in-out curve, stays still when the user prefers reduced motion, and is hidden when no item is active. Before hydration or without JavaScript, the active item paints its own static pill instead. For navigation, the pill animates only when the control persists across route changes, such as in a shared layout; otherwise it appears in place on each page.
 
-## Radio options
+At the outside edges, the item padding and the surface’s inset combine to match the horizontal padding of the corresponding Button size. The surface is slightly taller than that Button to optically balance its inset selected item when the controls appear next to each other.
 
-Use Radio Group when the selected segment represents a mutually exclusive value, especially in forms.
+## Examples
 
 ### Small Radio Group
 
@@ -127,10 +154,6 @@ Use Radio Group when the selected segment represents a mutually exclusive value,
 
 <ComponentPreview name="p-radio-group-9" />
 
-## Navigation
-
-Use links when each segment points to a different destination. Apply `aria-current="page"` to the active link.
-
 ### Small Navigation
 
 <ComponentPreview name="p-navigation-2" />
@@ -145,6 +168,10 @@ Use links when each segment points to a different destination. Apply `aria-curre
 
 ## Related content
 
-Use Tabs when each segment controls an associated content panel. Tabs share the visual language of segmented controls, including the sliding indicator, and add orientation support and panel semantics.
+Use Tabs when each segment controls an associated content panel. Tabs keep Base UI’s own indicator and add orientation support and panel semantics, but share the segmented control’s sizes, icon layout, and indicator surface so both look the same.
 
 <ComponentPreview name="p-tabs-1" />
+
+## Changelog
+
+- [Oct 20, 2026](/ui/docs/changelog#segmented-control-component) — Segmented control is now a component with a built-in sliding indicator
diff --git a/apps/ui/content/docs/components/tabs.mdx b/apps/ui/content/docs/components/tabs.mdx
index c08dd1dca..bdfcc7fb3 100644
--- a/apps/ui/content/docs/components/tabs.mdx
+++ b/apps/ui/content/docs/components/tabs.mdx
@@ -22,7 +22,7 @@ links:
 npx shadcn@latest add @coss/tabs
 ```
 
-The CLI installs the shared `@coss/segmented-control` registry dependency automatically.
+The CLI installs the `@coss/segmented-control` component automatically, because Tabs shares its sizes, icon layout, and indicator surface.
 
 </TabsPanel>
 
@@ -33,12 +33,15 @@ The CLI installs the shared `@coss/segmented-control` registry dependency automa
 <Step>Install the following dependencies:</Step>
 
 ```bash
-npm install @base-ui/react class-variance-authority
+npm install @base-ui/react
 ```
 
-<Step>Copy the shared segmented control styling into your project.</Step>
+<Step>Copy the Segmented Control component into your project.</Step>
 
-<ComponentSource name="segmented-control" title="lib/segmented-control.ts" />
+<ComponentSource
+  name="segmented-control"
+  title="components/ui/segmented-control.tsx"
+/>
 
 <Step>Copy and paste the Tabs component into your project.</Step>
 
@@ -100,7 +103,7 @@ Visual indicator for the active tab. Styled wrapper for `Tabs.Indicator` from Ba
 
 ## Examples
 
-For guidance on choosing between Tabs, Radio Group, Toggle Group, and navigation links, see the [Segmented Control](/ui/docs/components/segmented-control) pattern.
+For guidance on choosing between Tabs, Radio Group, Toggle Group, and navigation links, see [Segmented Control](/ui/docs/components/segmented-control).
 
 Tabs use the same optical sizing as segmented controls. The default surface is slightly taller than a Button of the same size so its inset active indicator remains visually balanced alongside adjacent controls.
 
@@ -123,3 +126,8 @@ Tabs use the same optical sizing as segmented controls. The default surface is s
 ### Underline with Vertical Orientation
 
 <ComponentPreview name="p-tabs-4" />
+
+## Changelog
+
+- [Oct 20, 2026](/ui/docs/changelog#segmented-control-component) — Shared sizing and indicator surface now come from `components/ui/segmented-control.tsx`
+- [Aug 19, 2026](/ui/docs/changelog#tabs-sizing-and-segmented-control-styles) — `TabsList` `size` prop and segmented control sizing
diff --git a/apps/ui/public/r/p-navigation-1.json b/apps/ui/public/r/p-navigation-1.json
index f1c2d60c6..cc66d702c 100644
--- a/apps/ui/public/r/p-navigation-1.json
+++ b/apps/ui/public/r/p-navigation-1.json
@@ -3,13 +3,12 @@
   "name": "p-navigation-1",
   "description": "Segmented navigation built with links",
   "registryDependencies": [
-    "@coss/segmented-control",
-    "@coss/segmented-control-indicator"
+    "@coss/segmented-control"
   ],
   "files": [
     {
       "path": "registry/default/particles/p-navigation-1.tsx",
-      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  segmentedControlItemVariants,\n  segmentedControlRootClassName,\n} from \"@/registry/default/lib/segmented-control\";\nimport { SegmentedControlIndicator } from \"@/registry/default/lib/segmented-control-indicator\";\n\nconst itemClassName = segmentedControlItemVariants({ state: \"current\" });\n\nconst links = [\n  { href: \"#overview\", label: \"Overview\" },\n  { href: \"#activity\", label: \"Activity\" },\n  { href: \"#settings\", label: \"Settings\" },\n];\n\nexport default function Particle() {\n  const [current, setCurrent] = useState(\"#overview\");\n\n  return (\n    <nav aria-label=\"Project sections\">\n      <div className={segmentedControlRootClassName}>\n        {links.map((link) => (\n          <a\n            aria-current={link.href === current ? \"page\" : undefined}\n            className={itemClassName}\n            href={link.href}\n            key={link.href}\n            onClick={() => setCurrent(link.href)}\n          >\n            {link.label}\n          </a>\n        ))}\n        <SegmentedControlIndicator />\n      </div>\n    </nav>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  SegmentedControl,\n  SegmentedControlItem,\n} from \"@/registry/default/ui/segmented-control\";\n\nconst links = [\n  { href: \"#overview\", label: \"Overview\" },\n  { href: \"#activity\", label: \"Activity\" },\n  { href: \"#settings\", label: \"Settings\" },\n];\n\nexport default function Particle() {\n  const [current, setCurrent] = useState(\"#overview\");\n\n  return (\n    <SegmentedControl aria-label=\"Project sections\" render={<nav />}>\n      {links.map((link) => (\n        <SegmentedControlItem\n          key={link.href}\n          render={\n            // biome-ignore lint/a11y/useAnchorContent: SegmentedControlItem supplies the link content through the render prop.\n            <a\n              aria-current={link.href === current ? \"page\" : undefined}\n              href={link.href}\n              onClick={() => setCurrent(link.href)}\n            />\n          }\n        >\n          {link.label}\n        </SegmentedControlItem>\n      ))}\n    </SegmentedControl>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-navigation-2.json b/apps/ui/public/r/p-navigation-2.json
index 7c9f1f953..c589a7c07 100644
--- a/apps/ui/public/r/p-navigation-2.json
+++ b/apps/ui/public/r/p-navigation-2.json
@@ -3,13 +3,12 @@
   "name": "p-navigation-2",
   "description": "Small segmented navigation built with links",
   "registryDependencies": [
-    "@coss/segmented-control",
-    "@coss/segmented-control-indicator"
+    "@coss/segmented-control"
   ],
   "files": [
     {
       "path": "registry/default/particles/p-navigation-2.tsx",
-      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  segmentedControlItemVariants,\n  segmentedControlRootClassName,\n} from \"@/registry/default/lib/segmented-control\";\nimport { SegmentedControlIndicator } from \"@/registry/default/lib/segmented-control-indicator\";\n\nconst itemClassName = segmentedControlItemVariants({\n  size: \"sm\",\n  state: \"current\",\n});\n\nconst links = [\n  { href: \"#overview\", label: \"Overview\" },\n  { href: \"#activity\", label: \"Activity\" },\n  { href: \"#settings\", label: \"Settings\" },\n];\n\nexport default function Particle() {\n  const [current, setCurrent] = useState(\"#overview\");\n\n  return (\n    <nav aria-label=\"Project sections\">\n      <div className={segmentedControlRootClassName}>\n        {links.map((link) => (\n          <a\n            aria-current={link.href === current ? \"page\" : undefined}\n            className={itemClassName}\n            href={link.href}\n            key={link.href}\n            onClick={() => setCurrent(link.href)}\n          >\n            {link.label}\n          </a>\n        ))}\n        <SegmentedControlIndicator />\n      </div>\n    </nav>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  SegmentedControl,\n  SegmentedControlItem,\n} from \"@/registry/default/ui/segmented-control\";\n\nconst links = [\n  { href: \"#overview\", label: \"Overview\" },\n  { href: \"#activity\", label: \"Activity\" },\n  { href: \"#settings\", label: \"Settings\" },\n];\n\nexport default function Particle() {\n  const [current, setCurrent] = useState(\"#overview\");\n\n  return (\n    <SegmentedControl aria-label=\"Project sections\" render={<nav />} size=\"sm\">\n      {links.map((link) => (\n        <SegmentedControlItem\n          key={link.href}\n          render={\n            // biome-ignore lint/a11y/useAnchorContent: SegmentedControlItem supplies the link content through the render prop.\n            <a\n              aria-current={link.href === current ? \"page\" : undefined}\n              href={link.href}\n              onClick={() => setCurrent(link.href)}\n            />\n          }\n        >\n          {link.label}\n        </SegmentedControlItem>\n      ))}\n    </SegmentedControl>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-navigation-3.json b/apps/ui/public/r/p-navigation-3.json
index 41eaefa3f..6d2f475f9 100644
--- a/apps/ui/public/r/p-navigation-3.json
+++ b/apps/ui/public/r/p-navigation-3.json
@@ -3,13 +3,12 @@
   "name": "p-navigation-3",
   "description": "Large segmented navigation built with links",
   "registryDependencies": [
-    "@coss/segmented-control",
-    "@coss/segmented-control-indicator"
+    "@coss/segmented-control"
   ],
   "files": [
     {
       "path": "registry/default/particles/p-navigation-3.tsx",
-      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  segmentedControlItemVariants,\n  segmentedControlRootClassName,\n} from \"@/registry/default/lib/segmented-control\";\nimport { SegmentedControlIndicator } from \"@/registry/default/lib/segmented-control-indicator\";\n\nconst itemClassName = segmentedControlItemVariants({\n  size: \"lg\",\n  state: \"current\",\n});\n\nconst links = [\n  { href: \"#overview\", label: \"Overview\" },\n  { href: \"#activity\", label: \"Activity\" },\n  { href: \"#settings\", label: \"Settings\" },\n];\n\nexport default function Particle() {\n  const [current, setCurrent] = useState(\"#overview\");\n\n  return (\n    <nav aria-label=\"Project sections\">\n      <div className={segmentedControlRootClassName}>\n        {links.map((link) => (\n          <a\n            aria-current={link.href === current ? \"page\" : undefined}\n            className={itemClassName}\n            href={link.href}\n            key={link.href}\n            onClick={() => setCurrent(link.href)}\n          >\n            {link.label}\n          </a>\n        ))}\n        <SegmentedControlIndicator />\n      </div>\n    </nav>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  SegmentedControl,\n  SegmentedControlItem,\n} from \"@/registry/default/ui/segmented-control\";\n\nconst links = [\n  { href: \"#overview\", label: \"Overview\" },\n  { href: \"#activity\", label: \"Activity\" },\n  { href: \"#settings\", label: \"Settings\" },\n];\n\nexport default function Particle() {\n  const [current, setCurrent] = useState(\"#overview\");\n\n  return (\n    <SegmentedControl aria-label=\"Project sections\" render={<nav />} size=\"lg\">\n      {links.map((link) => (\n        <SegmentedControlItem\n          key={link.href}\n          render={\n            // biome-ignore lint/a11y/useAnchorContent: SegmentedControlItem supplies the link content through the render prop.\n            <a\n              aria-current={link.href === current ? \"page\" : undefined}\n              href={link.href}\n              onClick={() => setCurrent(link.href)}\n            />\n          }\n        >\n          {link.label}\n        </SegmentedControlItem>\n      ))}\n    </SegmentedControl>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-radio-group-7.json b/apps/ui/public/r/p-radio-group-7.json
index 9e4d4da61..ccc4cdc03 100644
--- a/apps/ui/public/r/p-radio-group-7.json
+++ b/apps/ui/public/r/p-radio-group-7.json
@@ -4,13 +4,12 @@
   "description": "Small segmented control built with a radio group",
   "registryDependencies": [
     "@coss/radio-group",
-    "@coss/segmented-control",
-    "@coss/segmented-control-indicator"
+    "@coss/segmented-control"
   ],
   "files": [
     {
       "path": "registry/default/particles/p-radio-group-7.tsx",
-      "content": "\"use client\";\n\nimport {\n  segmentedControlItemVariants,\n  segmentedControlRootClassName,\n} from \"@/registry/default/lib/segmented-control\";\nimport { SegmentedControlIndicator } from \"@/registry/default/lib/segmented-control-indicator\";\nimport {\n  RadioGroupPrimitive,\n  RadioPrimitive,\n} from \"@/registry/default/ui/radio-group\";\n\nconst itemClassName = segmentedControlItemVariants({\n  className: \"grow\",\n  size: \"sm\",\n  state: \"checked\",\n});\n\nexport default function Particle() {\n  return (\n    <RadioGroupPrimitive\n      aria-label=\"Billing period\"\n      className={segmentedControlRootClassName}\n      defaultValue=\"monthly\"\n    >\n      <RadioPrimitive.Root className={itemClassName} value=\"monthly\">\n        Monthly\n      </RadioPrimitive.Root>\n      <RadioPrimitive.Root className={itemClassName} value=\"yearly\">\n        Yearly\n      </RadioPrimitive.Root>\n      <SegmentedControlIndicator />\n    </RadioGroupPrimitive>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  RadioGroupPrimitive,\n  RadioPrimitive,\n} from \"@/registry/default/ui/radio-group\";\nimport {\n  SegmentedControl,\n  SegmentedControlItem,\n} from \"@/registry/default/ui/segmented-control\";\n\nexport default function Particle() {\n  return (\n    <SegmentedControl\n      aria-label=\"Billing period\"\n      render={<RadioGroupPrimitive defaultValue=\"monthly\" />}\n      size=\"sm\"\n    >\n      <SegmentedControlItem\n        className=\"grow\"\n        render={<RadioPrimitive.Root value=\"monthly\" />}\n      >\n        Monthly\n      </SegmentedControlItem>\n      <SegmentedControlItem\n        className=\"grow\"\n        render={<RadioPrimitive.Root value=\"yearly\" />}\n      >\n        Yearly\n      </SegmentedControlItem>\n    </SegmentedControl>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-radio-group-8.json b/apps/ui/public/r/p-radio-group-8.json
index fd590ee6d..1e53ea0dc 100644
--- a/apps/ui/public/r/p-radio-group-8.json
+++ b/apps/ui/public/r/p-radio-group-8.json
@@ -4,13 +4,12 @@
   "description": "Segmented control built with a radio group",
   "registryDependencies": [
     "@coss/radio-group",
-    "@coss/segmented-control",
-    "@coss/segmented-control-indicator"
+    "@coss/segmented-control"
   ],
   "files": [
     {
       "path": "registry/default/particles/p-radio-group-8.tsx",
-      "content": "\"use client\";\n\nimport {\n  segmentedControlItemVariants,\n  segmentedControlRootClassName,\n} from \"@/registry/default/lib/segmented-control\";\nimport { SegmentedControlIndicator } from \"@/registry/default/lib/segmented-control-indicator\";\nimport {\n  RadioGroupPrimitive,\n  RadioPrimitive,\n} from \"@/registry/default/ui/radio-group\";\n\nconst itemClassName = segmentedControlItemVariants({\n  className: \"grow\",\n  state: \"checked\",\n});\n\nexport default function Particle() {\n  return (\n    <RadioGroupPrimitive\n      aria-label=\"Billing period\"\n      className={segmentedControlRootClassName}\n      defaultValue=\"monthly\"\n    >\n      <RadioPrimitive.Root className={itemClassName} value=\"monthly\">\n        Monthly\n      </RadioPrimitive.Root>\n      <RadioPrimitive.Root className={itemClassName} value=\"yearly\">\n        Yearly\n      </RadioPrimitive.Root>\n      <SegmentedControlIndicator />\n    </RadioGroupPrimitive>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  RadioGroupPrimitive,\n  RadioPrimitive,\n} from \"@/registry/default/ui/radio-group\";\nimport {\n  SegmentedControl,\n  SegmentedControlItem,\n} from \"@/registry/default/ui/segmented-control\";\n\nexport default function Particle() {\n  return (\n    <SegmentedControl\n      aria-label=\"Billing period\"\n      render={<RadioGroupPrimitive defaultValue=\"monthly\" />}\n    >\n      <SegmentedControlItem\n        className=\"grow\"\n        render={<RadioPrimitive.Root value=\"monthly\" />}\n      >\n        Monthly\n      </SegmentedControlItem>\n      <SegmentedControlItem\n        className=\"grow\"\n        render={<RadioPrimitive.Root value=\"yearly\" />}\n      >\n        Yearly\n      </SegmentedControlItem>\n    </SegmentedControl>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-radio-group-9.json b/apps/ui/public/r/p-radio-group-9.json
index b254ed7be..247e541ad 100644
--- a/apps/ui/public/r/p-radio-group-9.json
+++ b/apps/ui/public/r/p-radio-group-9.json
@@ -4,13 +4,12 @@
   "description": "Large segmented control built with a radio group",
   "registryDependencies": [
     "@coss/radio-group",
-    "@coss/segmented-control",
-    "@coss/segmented-control-indicator"
+    "@coss/segmented-control"
   ],
   "files": [
     {
       "path": "registry/default/particles/p-radio-group-9.tsx",
-      "content": "\"use client\";\n\nimport {\n  segmentedControlItemVariants,\n  segmentedControlRootClassName,\n} from \"@/registry/default/lib/segmented-control\";\nimport { SegmentedControlIndicator } from \"@/registry/default/lib/segmented-control-indicator\";\nimport {\n  RadioGroupPrimitive,\n  RadioPrimitive,\n} from \"@/registry/default/ui/radio-group\";\n\nconst itemClassName = segmentedControlItemVariants({\n  className: \"grow\",\n  size: \"lg\",\n  state: \"checked\",\n});\n\nexport default function Particle() {\n  return (\n    <RadioGroupPrimitive\n      aria-label=\"Billing period\"\n      className={segmentedControlRootClassName}\n      defaultValue=\"monthly\"\n    >\n      <RadioPrimitive.Root className={itemClassName} value=\"monthly\">\n        Monthly\n      </RadioPrimitive.Root>\n      <RadioPrimitive.Root className={itemClassName} value=\"yearly\">\n        Yearly\n      </RadioPrimitive.Root>\n      <SegmentedControlIndicator />\n    </RadioGroupPrimitive>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  RadioGroupPrimitive,\n  RadioPrimitive,\n} from \"@/registry/default/ui/radio-group\";\nimport {\n  SegmentedControl,\n  SegmentedControlItem,\n} from \"@/registry/default/ui/segmented-control\";\n\nexport default function Particle() {\n  return (\n    <SegmentedControl\n      aria-label=\"Billing period\"\n      render={<RadioGroupPrimitive defaultValue=\"monthly\" />}\n      size=\"lg\"\n    >\n      <SegmentedControlItem\n        className=\"grow\"\n        render={<RadioPrimitive.Root value=\"monthly\" />}\n      >\n        Monthly\n      </SegmentedControlItem>\n      <SegmentedControlItem\n        className=\"grow\"\n        render={<RadioPrimitive.Root value=\"yearly\" />}\n      >\n        Yearly\n      </SegmentedControlItem>\n    </SegmentedControl>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/registry.json b/apps/ui/public/r/registry.json
index dc89d9872..f7cd76268 100644
--- a/apps/ui/public/r/registry.json
+++ b/apps/ui/public/r/registry.json
@@ -695,6 +695,19 @@
       "name": "select",
       "type": "registry:ui"
     },
+    {
+      "dependencies": [
+        "@base-ui/react"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/segmented-control.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "name": "segmented-control",
+      "type": "registry:ui"
+    },
     {
       "dependencies": [
         "@base-ui/react"
@@ -9011,8 +9024,7 @@
       ],
       "name": "p-navigation-1",
       "registryDependencies": [
-        "@coss/segmented-control",
-        "@coss/segmented-control-indicator"
+        "@coss/segmented-control"
       ],
       "type": "registry:block"
     },
@@ -9030,8 +9042,7 @@
       ],
       "name": "p-navigation-2",
       "registryDependencies": [
-        "@coss/segmented-control",
-        "@coss/segmented-control-indicator"
+        "@coss/segmented-control"
       ],
       "type": "registry:block"
     },
@@ -9049,8 +9060,7 @@
       ],
       "name": "p-navigation-3",
       "registryDependencies": [
-        "@coss/segmented-control",
-        "@coss/segmented-control-indicator"
+        "@coss/segmented-control"
       ],
       "type": "registry:block"
     },
@@ -9431,8 +9441,7 @@
       "name": "p-radio-group-7",
       "registryDependencies": [
         "@coss/radio-group",
-        "@coss/segmented-control",
-        "@coss/segmented-control-indicator"
+        "@coss/segmented-control"
       ],
       "type": "registry:block"
     },
@@ -9451,8 +9460,7 @@
       "name": "p-radio-group-8",
       "registryDependencies": [
         "@coss/radio-group",
-        "@coss/segmented-control",
-        "@coss/segmented-control-indicator"
+        "@coss/segmented-control"
       ],
       "type": "registry:block"
     },
@@ -9471,8 +9479,7 @@
       "name": "p-radio-group-9",
       "registryDependencies": [
         "@coss/radio-group",
-        "@coss/segmented-control",
-        "@coss/segmented-control-indicator"
+        "@coss/segmented-control"
       ],
       "type": "registry:block"
     },
@@ -12707,33 +12714,6 @@
       "name": "composer-query",
       "type": "registry:lib"
     },
-    {
-      "dependencies": [
-        "class-variance-authority"
-      ],
-      "files": [
-        {
-          "path": "registry/default/lib/segmented-control.ts",
-          "type": "registry:lib"
-        }
-      ],
-      "name": "segmented-control",
-      "type": "registry:lib"
-    },
-    {
-      "files": [
-        {
-          "path": "registry/default/lib/segmented-control-indicator.tsx",
-          "type": "registry:lib"
-        }
-      ],
-      "name": "segmented-control-indicator",
-      "registryDependencies": [
-        "@coss/segmented-control",
-        "@coss/utils"
-      ],
-      "type": "registry:lib"
-    },
     {
       "dependencies": [
         "clsx",
diff --git a/apps/ui/public/r/segmented-control-indicator.json b/apps/ui/public/r/segmented-control-indicator.json
deleted file mode 100644
index 7390ae648..000000000
--- a/apps/ui/public/r/segmented-control-indicator.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "segmented-control-indicator",
-  "registryDependencies": [
-    "@coss/segmented-control",
-    "@coss/utils"
-  ],
-  "files": [
-    {
-      "path": "registry/default/lib/segmented-control-indicator.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { segmentedControlIndicatorClassName } from \"@/registry/default/lib/segmented-control\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nconst activeItemSelector =\n  ':scope > [data-checked], :scope > [aria-current=\"page\"], :scope > [data-pressed]';\n\nconst observedAttributes = [\"data-checked\", \"aria-current\", \"data-pressed\"];\n\nconst MAX_LAYOUT_ROUNDING_ERROR = 2;\n\ninterface ActiveItemRect {\n  height: number;\n  left: number;\n  top: number;\n  width: number;\n}\n\nfunction isSameRect(\n  a: ActiveItemRect | null,\n  b: ActiveItemRect | null,\n): boolean {\n  return (\n    a?.left === b?.left &&\n    a?.top === b?.top &&\n    a?.width === b?.width &&\n    a?.height === b?.height\n  );\n}\n\nfunction getCssSize(element: HTMLElement): { height: number; width: number } {\n  const style = getComputedStyle(element);\n  const width = Number.parseFloat(style.width) || 0;\n  const height = Number.parseFloat(style.height) || 0;\n  if (\n    Math.round(width) !== element.offsetWidth ||\n    Math.round(height) !== element.offsetHeight\n  ) {\n    return { height: element.offsetHeight, width: element.offsetWidth };\n  }\n  return { height, width };\n}\n\nfunction measureItem(item: HTMLElement, root: HTMLElement): ActiveItemRect {\n  const { width, height } = getCssSize(item);\n  const rootSize = getCssSize(root);\n  const itemRect = item.getBoundingClientRect();\n  const rootRect = root.getBoundingClientRect();\n  const scaleX = rootSize.width > 0 ? rootRect.width / rootSize.width : 1;\n  const scaleY = rootSize.height > 0 ? rootRect.height / rootSize.height : 1;\n\n  const rectLeft =\n    (itemRect.left - rootRect.left) / scaleX -\n    root.clientLeft +\n    root.scrollLeft;\n  const rectTop =\n    (itemRect.top - rootRect.top) / scaleY - root.clientTop + root.scrollTop;\n\n  const isUndistorted =\n    Math.abs(rectLeft - item.offsetLeft) <= MAX_LAYOUT_ROUNDING_ERROR &&\n    Math.abs(rectTop - item.offsetTop) <= MAX_LAYOUT_ROUNDING_ERROR;\n\n  return {\n    height,\n    left: isUndistorted ? rectLeft : item.offsetLeft,\n    top: isUndistorted ? rectTop : item.offsetTop,\n    width,\n  };\n}\n\nexport function SegmentedControlIndicator({\n  className,\n  ref: refProp,\n  style,\n  ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n  const ref = React.useRef<HTMLSpanElement>(null);\n  const [rect, setRect] = React.useState<ActiveItemRect | null>(null);\n\n  const mergedRef = React.useCallback(\n    (node: HTMLSpanElement | null) => {\n      ref.current = node;\n      if (typeof refProp === \"function\") {\n        return refProp(node);\n      }\n      if (refProp) {\n        refProp.current = node;\n      }\n    },\n    [refProp],\n  );\n\n  React.useLayoutEffect(() => {\n    const root = ref.current?.parentElement;\n    if (!root) {\n      return;\n    }\n\n    const update = () => {\n      const item = root.querySelector<HTMLElement>(activeItemSelector);\n      const next = item ? measureItem(item, root) : null;\n      setRect((previous) => (isSameRect(previous, next) ? previous : next));\n    };\n\n    update();\n\n    const resizeObserver = new ResizeObserver(update);\n    const mutationObserver = new MutationObserver((records) => {\n      if (records.some((record) => record.type === \"childList\")) {\n        observeItems();\n      }\n      update();\n    });\n    const observeItems = () => {\n      resizeObserver.disconnect();\n      resizeObserver.observe(root);\n      for (const child of root.children) {\n        resizeObserver.observe(child);\n        mutationObserver.observe(child, {\n          attributeFilter: observedAttributes,\n          attributes: true,\n        });\n      }\n    };\n    mutationObserver.observe(root, { childList: true });\n    observeItems();\n\n    return () => {\n      resizeObserver.disconnect();\n      mutationObserver.disconnect();\n    };\n  }, []);\n\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cn(segmentedControlIndicatorClassName, className)}\n      data-slot=\"segmented-control-indicator\"\n      hidden={!rect}\n      ref={mergedRef}\n      style={\n        {\n          \"--active-item-height\": `${rect?.height ?? 0}px`,\n          \"--active-item-left\": `${rect?.left ?? 0}px`,\n          \"--active-item-top\": `${rect?.top ?? 0}px`,\n          \"--active-item-width\": `${rect?.width ?? 0}px`,\n          ...style,\n        } as React.CSSProperties\n      }\n      {...props}\n    />\n  );\n}\n",
-      "type": "registry:lib"
-    }
-  ],
-  "type": "registry:lib"
-}
\ No newline at end of file
diff --git a/apps/ui/public/r/segmented-control.json b/apps/ui/public/r/segmented-control.json
index e80891328..60e149d88 100644
--- a/apps/ui/public/r/segmented-control.json
+++ b/apps/ui/public/r/segmented-control.json
@@ -2,14 +2,14 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "segmented-control",
   "dependencies": [
-    "class-variance-authority"
+    "@base-ui/react"
   ],
   "files": [
     {
-      "path": "registry/default/lib/segmented-control.ts",
-      "content": "import { cva } from \"class-variance-authority\";\n\nexport type SegmentedControlSize = \"default\" | \"lg\" | \"sm\";\n\nexport const segmentedControlItemSizeClassNames: Record<\n  SegmentedControlSize,\n  string\n> = {\n  default: \"h-8.5 px-[calc(--spacing(2.5)-1px)] sm:h-7.5\",\n  lg: \"h-9.5 px-[calc(--spacing(3)-1px)] sm:h-8.5\",\n  sm: \"h-7.5 px-[calc(--spacing(2)-1px)] sm:h-6.5\",\n};\n\nexport const segmentedControlRootClassName =\n  \"relative z-0 flex w-fit items-center justify-center gap-0.5 rounded-lg bg-muted p-0.5\";\n\nexport const segmentedControlIndicatorSurfaceClassName =\n  \"rounded-md bg-background shadow-sm/5 dark:bg-input\";\n\nexport const segmentedControlIndicatorClassName = `pointer-events-none absolute top-0 left-0 -z-1 h-(--active-item-height) w-(--active-item-width) translate-x-(--active-item-left) translate-y-(--active-item-top) transition-[width,height,translate] duration-200 ease-in-out motion-reduce:transition-none ${segmentedControlIndicatorSurfaceClassName}`;\n\nexport const segmentedControlItemLayoutClassName =\n  \"gap-1.5 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\";\n\nexport const segmentedControlItemVariants = cva(\n  [\n    \"relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base text-muted-foreground/72 outline-2 outline-transparent transition-[color,outline-color] hover:bg-transparent hover:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm\",\n    \"[:has(>[data-slot=segmented-control-indicator]:not([hidden]))>&]:bg-transparent! [:has(>[data-slot=segmented-control-indicator]:not([hidden]))>&]:shadow-none!\",\n    segmentedControlItemLayoutClassName,\n  ],\n  {\n    defaultVariants: {\n      size: \"default\",\n    },\n    variants: {\n      size: segmentedControlItemSizeClassNames,\n      state: {\n        checked:\n          \"data-checked:bg-background data-checked:text-foreground data-checked:shadow-sm/5 dark:data-checked:bg-input\",\n        current:\n          \"aria-[current=page]:bg-background aria-[current=page]:text-foreground aria-[current=page]:shadow-sm/5 dark:aria-[current=page]:bg-input\",\n        pressed:\n          \"data-pressed:bg-background data-pressed:text-foreground data-pressed:shadow-sm/5 dark:data-pressed:bg-input\",\n      },\n    },\n  },\n);\n",
-      "type": "registry:lib"
+      "path": "registry/default/ui/segmented-control.tsx",
+      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type SegmentedControlSize = \"default\" | \"lg\" | \"sm\";\n\nexport const segmentedControlItemSizeClassNames: Record<\n  SegmentedControlSize,\n  string\n> = {\n  default: \"h-8.5 px-[calc(--spacing(2.5)-1px)] sm:h-7.5\",\n  lg: \"h-9.5 px-[calc(--spacing(3)-1px)] sm:h-8.5\",\n  sm: \"h-7.5 px-[calc(--spacing(2)-1px)] sm:h-6.5\",\n};\n\nexport const segmentedControlItemLayoutClassName =\n  \"gap-1.5 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\";\n\nexport const segmentedControlIndicatorSurfaceClassName =\n  \"rounded-md bg-background shadow-sm/5 dark:bg-input\";\n\nconst SegmentedControlContext: React.Context<SegmentedControlSize> =\n  React.createContext<SegmentedControlSize>(\"default\");\n\nexport function SegmentedControl({\n  className,\n  children,\n  render,\n  size = \"default\",\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  size?: SegmentedControlSize;\n}): React.ReactElement {\n  const defaultProps = {\n    children: (\n      <>\n        {children}\n        <SegmentedControlIndicator />\n      </>\n    ),\n    className: cn(\n      \"relative z-0 flex w-fit items-center justify-center gap-0.5 rounded-lg bg-muted p-0.5\",\n      className,\n    ),\n    \"data-size\": size,\n    \"data-slot\": \"segmented-control\",\n  };\n\n  const element = useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n\n  return (\n    <SegmentedControlContext.Provider value={size}>\n      {element}\n    </SegmentedControlContext.Provider>\n  );\n}\n\nexport function SegmentedControlItem({\n  className,\n  render,\n  size,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  size?: SegmentedControlSize;\n}): React.ReactElement {\n  const contextSize = React.useContext(SegmentedControlContext);\n  const resolvedSize = size ?? contextSize;\n\n  const defaultProps = {\n    className: cn(\n      \"relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base text-muted-foreground/72 outline-2 outline-transparent transition-[color,outline-color] hover:bg-transparent hover:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm\",\n      \"data-checked:bg-background data-checked:text-foreground data-checked:shadow-sm/5 dark:data-checked:bg-input\",\n      \"aria-[current=page]:bg-background aria-[current=page]:text-foreground aria-[current=page]:shadow-sm/5 dark:aria-[current=page]:bg-input\",\n      \"data-pressed:bg-background data-pressed:text-foreground data-pressed:shadow-sm/5 dark:data-pressed:bg-input\",\n      \"[:has(>[data-slot=segmented-control-indicator]:not([hidden]))>&]:bg-transparent! [:has(>[data-slot=segmented-control-indicator]:not([hidden]))>&]:shadow-none!\",\n      segmentedControlItemLayoutClassName,\n      segmentedControlItemSizeClassNames[resolvedSize],\n      className,\n    ),\n    \"data-size\": resolvedSize,\n    \"data-slot\": \"segmented-control-item\",\n    ...(render ? {} : { type: \"button\" as const }),\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nconst activeItemSelector =\n  ':scope > [data-checked], :scope > [aria-current=\"page\"], :scope > [data-pressed]';\n\nconst observedAttributes: string[] = [\n  \"data-checked\",\n  \"aria-current\",\n  \"data-pressed\",\n];\n\nconst MAX_LAYOUT_ROUNDING_ERROR = 2;\n\ninterface ActiveItemRect {\n  height: number;\n  left: number;\n  top: number;\n  width: number;\n}\n\nfunction isSameRect(\n  a: ActiveItemRect | null,\n  b: ActiveItemRect | null,\n): boolean {\n  return (\n    a?.left === b?.left &&\n    a?.top === b?.top &&\n    a?.width === b?.width &&\n    a?.height === b?.height\n  );\n}\n\nfunction getCssSize(element: HTMLElement): { height: number; width: number } {\n  const style = getComputedStyle(element);\n  const width = Number.parseFloat(style.width) || 0;\n  const height = Number.parseFloat(style.height) || 0;\n  if (\n    Math.round(width) !== element.offsetWidth ||\n    Math.round(height) !== element.offsetHeight\n  ) {\n    return { height: element.offsetHeight, width: element.offsetWidth };\n  }\n  return { height, width };\n}\n\nfunction measureItem(item: HTMLElement, root: HTMLElement): ActiveItemRect {\n  const { width, height } = getCssSize(item);\n  const rootSize = getCssSize(root);\n  const itemRect = item.getBoundingClientRect();\n  const rootRect = root.getBoundingClientRect();\n  const scaleX = rootSize.width > 0 ? rootRect.width / rootSize.width : 1;\n  const scaleY = rootSize.height > 0 ? rootRect.height / rootSize.height : 1;\n\n  const rectLeft =\n    (itemRect.left - rootRect.left) / scaleX -\n    root.clientLeft +\n    root.scrollLeft;\n  const rectTop =\n    (itemRect.top - rootRect.top) / scaleY - root.clientTop + root.scrollTop;\n\n  const isUndistorted =\n    Math.abs(rectLeft - item.offsetLeft) <= MAX_LAYOUT_ROUNDING_ERROR &&\n    Math.abs(rectTop - item.offsetTop) <= MAX_LAYOUT_ROUNDING_ERROR;\n\n  return {\n    height,\n    left: isUndistorted ? rectLeft : item.offsetLeft,\n    top: isUndistorted ? rectTop : item.offsetTop,\n    width,\n  };\n}\n\nfunction SegmentedControlIndicator(): React.ReactElement {\n  const ref = React.useRef<HTMLSpanElement>(null);\n  const [rect, setRect] = React.useState<ActiveItemRect | null>(null);\n\n  React.useLayoutEffect(() => {\n    const root = ref.current?.parentElement;\n    if (!root) {\n      return;\n    }\n\n    const update = (): void => {\n      const item = root.querySelector<HTMLElement>(activeItemSelector);\n      const next = item ? measureItem(item, root) : null;\n      setRect((previous) => (isSameRect(previous, next) ? previous : next));\n    };\n\n    update();\n\n    const resizeObserver = new ResizeObserver(update);\n    const mutationObserver = new MutationObserver((records) => {\n      if (records.some((record) => record.type === \"childList\")) {\n        observeItems();\n      }\n      update();\n    });\n    const observeItems = (): void => {\n      resizeObserver.disconnect();\n      resizeObserver.observe(root);\n      for (const child of root.children) {\n        resizeObserver.observe(child);\n        mutationObserver.observe(child, {\n          attributeFilter: observedAttributes,\n          attributes: true,\n        });\n      }\n    };\n    mutationObserver.observe(root, { childList: true });\n    observeItems();\n\n    return () => {\n      resizeObserver.disconnect();\n      mutationObserver.disconnect();\n    };\n  }, []);\n\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cn(\n        \"pointer-events-none absolute top-0 left-0 -z-1 h-(--active-item-height) w-(--active-item-width) translate-x-(--active-item-left) translate-y-(--active-item-top) transition-[width,height,translate] duration-200 ease-in-out motion-reduce:transition-none\",\n        segmentedControlIndicatorSurfaceClassName,\n      )}\n      data-slot=\"segmented-control-indicator\"\n      hidden={!rect}\n      ref={ref}\n      style={\n        {\n          \"--active-item-height\": `${rect?.height ?? 0}px`,\n          \"--active-item-left\": `${rect?.left ?? 0}px`,\n          \"--active-item-top\": `${rect?.top ?? 0}px`,\n          \"--active-item-width\": `${rect?.width ?? 0}px`,\n        } as React.CSSProperties\n      }\n    />\n  );\n}\n",
+      "type": "registry:ui"
     }
   ],
-  "type": "registry:lib"
+  "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/ui/public/r/tabs.json b/apps/ui/public/r/tabs.json
index 7e2a868d1..aeb2b0ced 100644
--- a/apps/ui/public/r/tabs.json
+++ b/apps/ui/public/r/tabs.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/default/ui/tabs.tsx",
-      "content": "\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport * as React from \"react\";\nimport {\n  type SegmentedControlSize,\n  segmentedControlIndicatorSurfaceClassName,\n  segmentedControlItemLayoutClassName,\n  segmentedControlItemSizeClassNames,\n} from \"@/registry/default/lib/segmented-control\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\ntype TabsVariant = \"default\" | \"underline\";\ntype TabsSize = SegmentedControlSize;\n\nconst TabsListContext: React.Context<TabsSize> =\n  React.createContext<TabsSize>(\"default\");\n\nexport function Tabs({\n  className,\n  ...props\n}: TabsPrimitive.Root.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Root\n      className={cn(\n        \"flex flex-col gap-2 data-[orientation=vertical]:flex-row\",\n        className,\n      )}\n      data-slot=\"tabs\"\n      {...props}\n    />\n  );\n}\n\nexport function TabsList({\n  variant = \"default\",\n  size = \"default\",\n  className,\n  children,\n  ...props\n}: TabsPrimitive.List.Props & {\n  size?: TabsSize;\n  variant?: TabsVariant;\n}): React.ReactElement {\n  return (\n    <TabsPrimitive.List\n      className={cn(\n        \"relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground\",\n        \"data-[orientation=vertical]:flex-col\",\n        variant === \"default\"\n          ? \"rounded-lg bg-muted p-0.5 text-muted-foreground/72\"\n          : \"data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-tab]:hover:bg-accent\",\n        className,\n      )}\n      data-size={size}\n      data-slot=\"tabs-list\"\n      {...props}\n    >\n      <TabsListContext.Provider value={size}>\n        {children}\n      </TabsListContext.Provider>\n      <TabsPrimitive.Indicator\n        className={cn(\n          \"absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom) transition-[width,translate] duration-200 ease-in-out motion-reduce:transition-none\",\n          variant === \"underline\"\n            ? \"z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:-translate-x-px data-[orientation=horizontal]:translate-y-px\"\n            : cn(\"-z-1\", segmentedControlIndicatorSurfaceClassName),\n        )}\n        data-slot=\"tab-indicator\"\n      />\n    </TabsPrimitive.List>\n  );\n}\n\nexport function TabsTab({\n  className,\n  size,\n  ...props\n}: TabsPrimitive.Tab.Props & {\n  size?: TabsSize;\n}): React.ReactElement {\n  const contextSize: TabsSize = React.useContext(TabsListContext);\n  const resolvedSize: TabsSize = size ?? contextSize;\n\n  return (\n    <TabsPrimitive.Tab\n      className={cn(\n        \"relative flex shrink-0 grow cursor-pointer items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:text-sm\",\n        segmentedControlItemLayoutClassName,\n        segmentedControlItemSizeClassNames[resolvedSize],\n        className,\n      )}\n      data-size={resolvedSize}\n      data-slot=\"tabs-tab\"\n      {...props}\n    />\n  );\n}\n\nexport function TabsPanel({\n  className,\n  ...props\n}: TabsPrimitive.Panel.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Panel\n      className={cn(\"flex-1 outline-none\", className)}\n      data-slot=\"tabs-content\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  TabsPrimitive,\n  TabsTab as TabsTrigger,\n  TabsPanel as TabsContent,\n  type TabsSize,\n  type TabsVariant,\n};\n",
+      "content": "\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  type SegmentedControlSize,\n  segmentedControlIndicatorSurfaceClassName,\n  segmentedControlItemLayoutClassName,\n  segmentedControlItemSizeClassNames,\n} from \"@/registry/default/ui/segmented-control\";\n\ntype TabsVariant = \"default\" | \"underline\";\ntype TabsSize = SegmentedControlSize;\n\nconst TabsListContext: React.Context<TabsSize> =\n  React.createContext<TabsSize>(\"default\");\n\nexport function Tabs({\n  className,\n  ...props\n}: TabsPrimitive.Root.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Root\n      className={cn(\n        \"flex flex-col gap-2 data-[orientation=vertical]:flex-row\",\n        className,\n      )}\n      data-slot=\"tabs\"\n      {...props}\n    />\n  );\n}\n\nexport function TabsList({\n  variant = \"default\",\n  size = \"default\",\n  className,\n  children,\n  ...props\n}: TabsPrimitive.List.Props & {\n  size?: TabsSize;\n  variant?: TabsVariant;\n}): React.ReactElement {\n  return (\n    <TabsPrimitive.List\n      className={cn(\n        \"relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground\",\n        \"data-[orientation=vertical]:flex-col\",\n        variant === \"default\"\n          ? \"rounded-lg bg-muted p-0.5 text-muted-foreground/72\"\n          : \"data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-tab]:hover:bg-accent\",\n        className,\n      )}\n      data-size={size}\n      data-slot=\"tabs-list\"\n      {...props}\n    >\n      <TabsListContext.Provider value={size}>\n        {children}\n      </TabsListContext.Provider>\n      <TabsPrimitive.Indicator\n        className={cn(\n          \"absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom) transition-[width,translate] duration-200 ease-in-out motion-reduce:transition-none\",\n          variant === \"underline\"\n            ? \"z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:-translate-x-px data-[orientation=horizontal]:translate-y-px\"\n            : cn(\"-z-1\", segmentedControlIndicatorSurfaceClassName),\n        )}\n        data-slot=\"tab-indicator\"\n      />\n    </TabsPrimitive.List>\n  );\n}\n\nexport function TabsTab({\n  className,\n  size,\n  ...props\n}: TabsPrimitive.Tab.Props & {\n  size?: TabsSize;\n}): React.ReactElement {\n  const contextSize: TabsSize = React.useContext(TabsListContext);\n  const resolvedSize: TabsSize = size ?? contextSize;\n\n  return (\n    <TabsPrimitive.Tab\n      className={cn(\n        \"relative flex shrink-0 grow cursor-pointer items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:text-sm\",\n        segmentedControlItemLayoutClassName,\n        segmentedControlItemSizeClassNames[resolvedSize],\n        className,\n      )}\n      data-size={resolvedSize}\n      data-slot=\"tabs-tab\"\n      {...props}\n    />\n  );\n}\n\nexport function TabsPanel({\n  className,\n  ...props\n}: TabsPrimitive.Panel.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Panel\n      className={cn(\"flex-1 outline-none\", className)}\n      data-slot=\"tabs-content\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  TabsPrimitive,\n  TabsTab as TabsTrigger,\n  TabsPanel as TabsContent,\n  type TabsSize,\n  type TabsVariant,\n};\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/registry.json b/apps/ui/registry.json
index dc89d9872..f7cd76268 100644
--- a/apps/ui/registry.json
+++ b/apps/ui/registry.json
@@ -695,6 +695,19 @@
       "name": "select",
       "type": "registry:ui"
     },
+    {
+      "dependencies": [
+        "@base-ui/react"
+      ],
+      "files": [
+        {
+          "path": "registry/default/ui/segmented-control.tsx",
+          "type": "registry:ui"
+        }
+      ],
+      "name": "segmented-control",
+      "type": "registry:ui"
+    },
     {
       "dependencies": [
         "@base-ui/react"
@@ -9011,8 +9024,7 @@
       ],
       "name": "p-navigation-1",
       "registryDependencies": [
-        "@coss/segmented-control",
-        "@coss/segmented-control-indicator"
+        "@coss/segmented-control"
       ],
       "type": "registry:block"
     },
@@ -9030,8 +9042,7 @@
       ],
       "name": "p-navigation-2",
       "registryDependencies": [
-        "@coss/segmented-control",
-        "@coss/segmented-control-indicator"
+        "@coss/segmented-control"
       ],
       "type": "registry:block"
     },
@@ -9049,8 +9060,7 @@
       ],
       "name": "p-navigation-3",
       "registryDependencies": [
-        "@coss/segmented-control",
-        "@coss/segmented-control-indicator"
+        "@coss/segmented-control"
       ],
       "type": "registry:block"
     },
@@ -9431,8 +9441,7 @@
       "name": "p-radio-group-7",
       "registryDependencies": [
         "@coss/radio-group",
-        "@coss/segmented-control",
-        "@coss/segmented-control-indicator"
+        "@coss/segmented-control"
       ],
       "type": "registry:block"
     },
@@ -9451,8 +9460,7 @@
       "name": "p-radio-group-8",
       "registryDependencies": [
         "@coss/radio-group",
-        "@coss/segmented-control",
-        "@coss/segmented-control-indicator"
+        "@coss/segmented-control"
       ],
       "type": "registry:block"
     },
@@ -9471,8 +9479,7 @@
       "name": "p-radio-group-9",
       "registryDependencies": [
         "@coss/radio-group",
-        "@coss/segmented-control",
-        "@coss/segmented-control-indicator"
+        "@coss/segmented-control"
       ],
       "type": "registry:block"
     },
@@ -12707,33 +12714,6 @@
       "name": "composer-query",
       "type": "registry:lib"
     },
-    {
-      "dependencies": [
-        "class-variance-authority"
-      ],
-      "files": [
-        {
-          "path": "registry/default/lib/segmented-control.ts",
-          "type": "registry:lib"
-        }
-      ],
-      "name": "segmented-control",
-      "type": "registry:lib"
-    },
-    {
-      "files": [
-        {
-          "path": "registry/default/lib/segmented-control-indicator.tsx",
-          "type": "registry:lib"
-        }
-      ],
-      "name": "segmented-control-indicator",
-      "registryDependencies": [
-        "@coss/segmented-control",
-        "@coss/utils"
-      ],
-      "type": "registry:lib"
-    },
     {
       "dependencies": [
         "clsx",
diff --git a/apps/ui/registry/__index__.tsx b/apps/ui/registry/__index__.tsx
index 36a2cb51a..08ab35eae 100644
--- a/apps/ui/registry/__index__.tsx
+++ b/apps/ui/registry/__index__.tsx
@@ -727,6 +727,24 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined,
   },
+  "segmented-control": {
+    name: "segmented-control",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    files: [{
+      path: "registry/default/ui/segmented-control.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/ui/segmented-control.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: undefined,
+    meta: undefined,
+  },
   "separator": {
     name: "separator",
     description: "",
@@ -7705,7 +7723,7 @@ export const Index: Record<string, any> = {
     name: "p-navigation-1",
     description: "Segmented navigation built with links",
     type: "registry:block",
-    registryDependencies: ["@coss/segmented-control","@coss/segmented-control-indicator"],
+    registryDependencies: ["@coss/segmented-control"],
     files: [{
       path: "registry/default/particles/p-navigation-1.tsx",
       type: "registry:block",
@@ -7723,7 +7741,7 @@ export const Index: Record<string, any> = {
     name: "p-navigation-2",
     description: "Small segmented navigation built with links",
     type: "registry:block",
-    registryDependencies: ["@coss/segmented-control","@coss/segmented-control-indicator"],
+    registryDependencies: ["@coss/segmented-control"],
     files: [{
       path: "registry/default/particles/p-navigation-2.tsx",
       type: "registry:block",
@@ -7741,7 +7759,7 @@ export const Index: Record<string, any> = {
     name: "p-navigation-3",
     description: "Large segmented navigation built with links",
     type: "registry:block",
-    registryDependencies: ["@coss/segmented-control","@coss/segmented-control-indicator"],
+    registryDependencies: ["@coss/segmented-control"],
     files: [{
       path: "registry/default/particles/p-navigation-3.tsx",
       type: "registry:block",
@@ -8065,7 +8083,7 @@ export const Index: Record<string, any> = {
     name: "p-radio-group-7",
     description: "Small segmented control built with a radio group",
     type: "registry:block",
-    registryDependencies: ["@coss/radio-group","@coss/segmented-control","@coss/segmented-control-indicator"],
+    registryDependencies: ["@coss/radio-group","@coss/segmented-control"],
     files: [{
       path: "registry/default/particles/p-radio-group-7.tsx",
       type: "registry:block",
@@ -8083,7 +8101,7 @@ export const Index: Record<string, any> = {
     name: "p-radio-group-8",
     description: "Segmented control built with a radio group",
     type: "registry:block",
-    registryDependencies: ["@coss/radio-group","@coss/segmented-control","@coss/segmented-control-indicator"],
+    registryDependencies: ["@coss/radio-group","@coss/segmented-control"],
     files: [{
       path: "registry/default/particles/p-radio-group-8.tsx",
       type: "registry:block",
@@ -8101,7 +8119,7 @@ export const Index: Record<string, any> = {
     name: "p-radio-group-9",
     description: "Large segmented control built with a radio group",
     type: "registry:block",
-    registryDependencies: ["@coss/radio-group","@coss/segmented-control","@coss/segmented-control-indicator"],
+    registryDependencies: ["@coss/radio-group","@coss/segmented-control"],
     files: [{
       path: "registry/default/particles/p-radio-group-9.tsx",
       type: "registry:block",
@@ -10753,42 +10771,6 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined,
   },
-  "segmented-control": {
-    name: "segmented-control",
-    description: "",
-    type: "registry:lib",
-    registryDependencies: undefined,
-    files: [{
-      path: "registry/default/lib/segmented-control.ts",
-      type: "registry:lib",
-      target: ""
-    }],
-    component: React.lazy(async () => {
-      const mod = await import("@/registry/default/lib/segmented-control.ts")
-      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
-      return { default: mod.default || mod[exportName] }
-    }),
-    categories: undefined,
-    meta: undefined,
-  },
-  "segmented-control-indicator": {
-    name: "segmented-control-indicator",
-    description: "",
-    type: "registry:lib",
-    registryDependencies: ["@coss/segmented-control","@coss/utils"],
-    files: [{
-      path: "registry/default/lib/segmented-control-indicator.tsx",
-      type: "registry:lib",
-      target: ""
-    }],
-    component: React.lazy(async () => {
-      const mod = await import("@/registry/default/lib/segmented-control-indicator.tsx")
-      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
-      return { default: mod.default || mod[exportName] }
-    }),
-    categories: undefined,
-    meta: undefined,
-  },
   "utils": {
     name: "utils",
     description: "",
diff --git a/apps/ui/registry/default/lib/segmented-control-indicator.tsx b/apps/ui/registry/default/lib/segmented-control-indicator.tsx
deleted file mode 100644
index 45b427c1b..000000000
--- a/apps/ui/registry/default/lib/segmented-control-indicator.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { segmentedControlIndicatorClassName } from "@/registry/default/lib/segmented-control";
-import { cn } from "@/registry/default/lib/utils";
-
-const activeItemSelector =
-  ':scope > [data-checked], :scope > [aria-current="page"], :scope > [data-pressed]';
-
-const observedAttributes = ["data-checked", "aria-current", "data-pressed"];
-
-const MAX_LAYOUT_ROUNDING_ERROR = 2;
-
-interface ActiveItemRect {
-  height: number;
-  left: number;
-  top: number;
-  width: number;
-}
-
-function isSameRect(
-  a: ActiveItemRect | null,
-  b: ActiveItemRect | null,
-): boolean {
-  return (
-    a?.left === b?.left &&
-    a?.top === b?.top &&
-    a?.width === b?.width &&
-    a?.height === b?.height
-  );
-}
-
-function getCssSize(element: HTMLElement): { height: number; width: number } {
-  const style = getComputedStyle(element);
-  const width = Number.parseFloat(style.width) || 0;
-  const height = Number.parseFloat(style.height) || 0;
-  if (
-    Math.round(width) !== element.offsetWidth ||
-    Math.round(height) !== element.offsetHeight
-  ) {
-    return { height: element.offsetHeight, width: element.offsetWidth };
-  }
-  return { height, width };
-}
-
-function measureItem(item: HTMLElement, root: HTMLElement): ActiveItemRect {
-  const { width, height } = getCssSize(item);
-  const rootSize = getCssSize(root);
-  const itemRect = item.getBoundingClientRect();
-  const rootRect = root.getBoundingClientRect();
-  const scaleX = rootSize.width > 0 ? rootRect.width / rootSize.width : 1;
-  const scaleY = rootSize.height > 0 ? rootRect.height / rootSize.height : 1;
-
-  const rectLeft =
-    (itemRect.left - rootRect.left) / scaleX -
-    root.clientLeft +
-    root.scrollLeft;
-  const rectTop =
-    (itemRect.top - rootRect.top) / scaleY - root.clientTop + root.scrollTop;
-
-  const isUndistorted =
-    Math.abs(rectLeft - item.offsetLeft) <= MAX_LAYOUT_ROUNDING_ERROR &&
-    Math.abs(rectTop - item.offsetTop) <= MAX_LAYOUT_ROUNDING_ERROR;
-
-  return {
-    height,
-    left: isUndistorted ? rectLeft : item.offsetLeft,
-    top: isUndistorted ? rectTop : item.offsetTop,
-    width,
-  };
-}
-
-export function SegmentedControlIndicator({
-  className,
-  ref: refProp,
-  style,
-  ...props
-}: React.ComponentProps<"span">): React.ReactElement {
-  const ref = React.useRef<HTMLSpanElement>(null);
-  const [rect, setRect] = React.useState<ActiveItemRect | null>(null);
-
-  const mergedRef = React.useCallback(
-    (node: HTMLSpanElement | null) => {
-      ref.current = node;
-      if (typeof refProp === "function") {
-        return refProp(node);
-      }
-      if (refProp) {
-        refProp.current = node;
-      }
-    },
-    [refProp],
-  );
-
-  React.useLayoutEffect(() => {
-    const root = ref.current?.parentElement;
-    if (!root) {
-      return;
-    }
-
-    const update = () => {
-      const item = root.querySelector<HTMLElement>(activeItemSelector);
-      const next = item ? measureItem(item, root) : null;
-      setRect((previous) => (isSameRect(previous, next) ? previous : next));
-    };
-
-    update();
-
-    const resizeObserver = new ResizeObserver(update);
-    const mutationObserver = new MutationObserver((records) => {
-      if (records.some((record) => record.type === "childList")) {
-        observeItems();
-      }
-      update();
-    });
-    const observeItems = () => {
-      resizeObserver.disconnect();
-      resizeObserver.observe(root);
-      for (const child of root.children) {
-        resizeObserver.observe(child);
-        mutationObserver.observe(child, {
-          attributeFilter: observedAttributes,
-          attributes: true,
-        });
-      }
-    };
-    mutationObserver.observe(root, { childList: true });
-    observeItems();
-
-    return () => {
-      resizeObserver.disconnect();
-      mutationObserver.disconnect();
-    };
-  }, []);
-
-  return (
-    <span
-      aria-hidden="true"
-      className={cn(segmentedControlIndicatorClassName, className)}
-      data-slot="segmented-control-indicator"
-      hidden={!rect}
-      ref={mergedRef}
-      style={
-        {
-          "--active-item-height": `${rect?.height ?? 0}px`,
-          "--active-item-left": `${rect?.left ?? 0}px`,
-          "--active-item-top": `${rect?.top ?? 0}px`,
-          "--active-item-width": `${rect?.width ?? 0}px`,
-          ...style,
-        } as React.CSSProperties
-      }
-      {...props}
-    />
-  );
-}
diff --git a/apps/ui/registry/default/lib/segmented-control.ts b/apps/ui/registry/default/lib/segmented-control.ts
deleted file mode 100644
index a6b20d276..000000000
--- a/apps/ui/registry/default/lib/segmented-control.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { cva } from "class-variance-authority";
-
-export type SegmentedControlSize = "default" | "lg" | "sm";
-
-export const segmentedControlItemSizeClassNames: Record<
-  SegmentedControlSize,
-  string
-> = {
-  default: "h-8.5 px-[calc(--spacing(2.5)-1px)] sm:h-7.5",
-  lg: "h-9.5 px-[calc(--spacing(3)-1px)] sm:h-8.5",
-  sm: "h-7.5 px-[calc(--spacing(2)-1px)] sm:h-6.5",
-};
-
-export const segmentedControlRootClassName =
-  "relative z-0 flex w-fit items-center justify-center gap-0.5 rounded-lg bg-muted p-0.5";
-
-export const segmentedControlIndicatorSurfaceClassName =
-  "rounded-md bg-background shadow-sm/5 dark:bg-input";
-
-export const segmentedControlIndicatorClassName = `pointer-events-none absolute top-0 left-0 -z-1 h-(--active-item-height) w-(--active-item-width) translate-x-(--active-item-left) translate-y-(--active-item-top) transition-[width,height,translate] duration-200 ease-in-out motion-reduce:transition-none ${segmentedControlIndicatorSurfaceClassName}`;
-
-export const segmentedControlItemLayoutClassName =
-  "gap-1.5 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0";
-
-export const segmentedControlItemVariants = cva(
-  [
-    "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base text-muted-foreground/72 outline-2 outline-transparent transition-[color,outline-color] hover:bg-transparent hover:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm",
-    "[:has(>[data-slot=segmented-control-indicator]:not([hidden]))>&]:bg-transparent! [:has(>[data-slot=segmented-control-indicator]:not([hidden]))>&]:shadow-none!",
-    segmentedControlItemLayoutClassName,
-  ],
-  {
-    defaultVariants: {
-      size: "default",
-    },
-    variants: {
-      size: segmentedControlItemSizeClassNames,
-      state: {
-        checked:
-          "data-checked:bg-background data-checked:text-foreground data-checked:shadow-sm/5 dark:data-checked:bg-input",
-        current:
-          "aria-[current=page]:bg-background aria-[current=page]:text-foreground aria-[current=page]:shadow-sm/5 dark:aria-[current=page]:bg-input",
-        pressed:
-          "data-pressed:bg-background data-pressed:text-foreground data-pressed:shadow-sm/5 dark:data-pressed:bg-input",
-      },
-    },
-  },
-);
diff --git a/apps/ui/registry/default/particles/p-navigation-1.tsx b/apps/ui/registry/default/particles/p-navigation-1.tsx
index b1c0bf274..274f6df6f 100644
--- a/apps/ui/registry/default/particles/p-navigation-1.tsx
+++ b/apps/ui/registry/default/particles/p-navigation-1.tsx
@@ -2,12 +2,9 @@
 
 import { useState } from "react";
 import {
-  segmentedControlItemVariants,
-  segmentedControlRootClassName,
-} from "@/registry/default/lib/segmented-control";
-import { SegmentedControlIndicator } from "@/registry/default/lib/segmented-control-indicator";
-
-const itemClassName = segmentedControlItemVariants({ state: "current" });
+  SegmentedControl,
+  SegmentedControlItem,
+} from "@/registry/default/ui/segmented-control";
 
 const links = [
   { href: "#overview", label: "Overview" },
@@ -19,21 +16,22 @@ export default function Particle() {
   const [current, setCurrent] = useState("#overview");
 
   return (
-    <nav aria-label="Project sections">
-      <div className={segmentedControlRootClassName}>
-        {links.map((link) => (
-          <a
-            aria-current={link.href === current ? "page" : undefined}
-            className={itemClassName}
-            href={link.href}
-            key={link.href}
-            onClick={() => setCurrent(link.href)}
-          >
-            {link.label}
-          </a>
-        ))}
-        <SegmentedControlIndicator />
-      </div>
-    </nav>
+    <SegmentedControl aria-label="Project sections" render={<nav />}>
+      {links.map((link) => (
+        <SegmentedControlItem
+          key={link.href}
+          render={
+            // biome-ignore lint/a11y/useAnchorContent: SegmentedControlItem supplies the link content through the render prop.
+            <a
+              aria-current={link.href === current ? "page" : undefined}
+              href={link.href}
+              onClick={() => setCurrent(link.href)}
+            />
+          }
+        >
+          {link.label}
+        </SegmentedControlItem>
+      ))}
+    </SegmentedControl>
   );
 }
diff --git a/apps/ui/registry/default/particles/p-navigation-2.tsx b/apps/ui/registry/default/particles/p-navigation-2.tsx
index a57dd6ac7..4f293847c 100644
--- a/apps/ui/registry/default/particles/p-navigation-2.tsx
+++ b/apps/ui/registry/default/particles/p-navigation-2.tsx
@@ -2,15 +2,9 @@
 
 import { useState } from "react";
 import {
-  segmentedControlItemVariants,
-  segmentedControlRootClassName,
-} from "@/registry/default/lib/segmented-control";
-import { SegmentedControlIndicator } from "@/registry/default/lib/segmented-control-indicator";
-
-const itemClassName = segmentedControlItemVariants({
-  size: "sm",
-  state: "current",
-});
+  SegmentedControl,
+  SegmentedControlItem,
+} from "@/registry/default/ui/segmented-control";
 
 const links = [
   { href: "#overview", label: "Overview" },
@@ -22,21 +16,22 @@ export default function Particle() {
   const [current, setCurrent] = useState("#overview");
 
   return (
-    <nav aria-label="Project sections">
-      <div className={segmentedControlRootClassName}>
-        {links.map((link) => (
-          <a
-            aria-current={link.href === current ? "page" : undefined}
-            className={itemClassName}
-            href={link.href}
-            key={link.href}
-            onClick={() => setCurrent(link.href)}
-          >
-            {link.label}
-          </a>
-        ))}
-        <SegmentedControlIndicator />
-      </div>
-    </nav>
+    <SegmentedControl aria-label="Project sections" render={<nav />} size="sm">
+      {links.map((link) => (
+        <SegmentedControlItem
+          key={link.href}
+          render={
+            // biome-ignore lint/a11y/useAnchorContent: SegmentedControlItem supplies the link content through the render prop.
+            <a
+              aria-current={link.href === current ? "page" : undefined}
+              href={link.href}
+              onClick={() => setCurrent(link.href)}
+            />
+          }
+        >
+          {link.label}
+        </SegmentedControlItem>
+      ))}
+    </SegmentedControl>
   );
 }
diff --git a/apps/ui/registry/default/particles/p-navigation-3.tsx b/apps/ui/registry/default/particles/p-navigation-3.tsx
index cd23e3561..322a6dbdd 100644
--- a/apps/ui/registry/default/particles/p-navigation-3.tsx
+++ b/apps/ui/registry/default/particles/p-navigation-3.tsx
@@ -2,15 +2,9 @@
 
 import { useState } from "react";
 import {
-  segmentedControlItemVariants,
-  segmentedControlRootClassName,
-} from "@/registry/default/lib/segmented-control";
-import { SegmentedControlIndicator } from "@/registry/default/lib/segmented-control-indicator";
-
-const itemClassName = segmentedControlItemVariants({
-  size: "lg",
-  state: "current",
-});
+  SegmentedControl,
+  SegmentedControlItem,
+} from "@/registry/default/ui/segmented-control";
 
 const links = [
   { href: "#overview", label: "Overview" },
@@ -22,21 +16,22 @@ export default function Particle() {
   const [current, setCurrent] = useState("#overview");
 
   return (
-    <nav aria-label="Project sections">
-      <div className={segmentedControlRootClassName}>
-        {links.map((link) => (
-          <a
-            aria-current={link.href === current ? "page" : undefined}
-            className={itemClassName}
-            href={link.href}
-            key={link.href}
-            onClick={() => setCurrent(link.href)}
-          >
-            {link.label}
-          </a>
-        ))}
-        <SegmentedControlIndicator />
-      </div>
-    </nav>
+    <SegmentedControl aria-label="Project sections" render={<nav />} size="lg">
+      {links.map((link) => (
+        <SegmentedControlItem
+          key={link.href}
+          render={
+            // biome-ignore lint/a11y/useAnchorContent: SegmentedControlItem supplies the link content through the render prop.
+            <a
+              aria-current={link.href === current ? "page" : undefined}
+              href={link.href}
+              onClick={() => setCurrent(link.href)}
+            />
+          }
+        >
+          {link.label}
+        </SegmentedControlItem>
+      ))}
+    </SegmentedControl>
   );
 }
diff --git a/apps/ui/registry/default/particles/p-radio-group-7.tsx b/apps/ui/registry/default/particles/p-radio-group-7.tsx
index 0a24b83a8..850aeede5 100644
--- a/apps/ui/registry/default/particles/p-radio-group-7.tsx
+++ b/apps/ui/registry/default/particles/p-radio-group-7.tsx
@@ -1,35 +1,33 @@
 "use client";
 
-import {
-  segmentedControlItemVariants,
-  segmentedControlRootClassName,
-} from "@/registry/default/lib/segmented-control";
-import { SegmentedControlIndicator } from "@/registry/default/lib/segmented-control-indicator";
 import {
   RadioGroupPrimitive,
   RadioPrimitive,
 } from "@/registry/default/ui/radio-group";
-
-const itemClassName = segmentedControlItemVariants({
-  className: "grow",
-  size: "sm",
-  state: "checked",
-});
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+} from "@/registry/default/ui/segmented-control";
 
 export default function Particle() {
   return (
-    <RadioGroupPrimitive
+    <SegmentedControl
       aria-label="Billing period"
-      className={segmentedControlRootClassName}
-      defaultValue="monthly"
+      render={<RadioGroupPrimitive defaultValue="monthly" />}
+      size="sm"
     >
-      <RadioPrimitive.Root className={itemClassName} value="monthly">
+      <SegmentedControlItem
+        className="grow"
+        render={<RadioPrimitive.Root value="monthly" />}
+      >
         Monthly
-      </RadioPrimitive.Root>
-      <RadioPrimitive.Root className={itemClassName} value="yearly">
+      </SegmentedControlItem>
+      <SegmentedControlItem
+        className="grow"
+        render={<RadioPrimitive.Root value="yearly" />}
+      >
         Yearly
-      </RadioPrimitive.Root>
-      <SegmentedControlIndicator />
-    </RadioGroupPrimitive>
+      </SegmentedControlItem>
+    </SegmentedControl>
   );
 }
diff --git a/apps/ui/registry/default/particles/p-radio-group-8.tsx b/apps/ui/registry/default/particles/p-radio-group-8.tsx
index aa090c597..63670d1d3 100644
--- a/apps/ui/registry/default/particles/p-radio-group-8.tsx
+++ b/apps/ui/registry/default/particles/p-radio-group-8.tsx
@@ -1,34 +1,32 @@
 "use client";
 
-import {
-  segmentedControlItemVariants,
-  segmentedControlRootClassName,
-} from "@/registry/default/lib/segmented-control";
-import { SegmentedControlIndicator } from "@/registry/default/lib/segmented-control-indicator";
 import {
   RadioGroupPrimitive,
   RadioPrimitive,
 } from "@/registry/default/ui/radio-group";
-
-const itemClassName = segmentedControlItemVariants({
-  className: "grow",
-  state: "checked",
-});
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+} from "@/registry/default/ui/segmented-control";
 
 export default function Particle() {
   return (
-    <RadioGroupPrimitive
+    <SegmentedControl
       aria-label="Billing period"
-      className={segmentedControlRootClassName}
-      defaultValue="monthly"
+      render={<RadioGroupPrimitive defaultValue="monthly" />}
     >
-      <RadioPrimitive.Root className={itemClassName} value="monthly">
+      <SegmentedControlItem
+        className="grow"
+        render={<RadioPrimitive.Root value="monthly" />}
+      >
         Monthly
-      </RadioPrimitive.Root>
-      <RadioPrimitive.Root className={itemClassName} value="yearly">
+      </SegmentedControlItem>
+      <SegmentedControlItem
+        className="grow"
+        render={<RadioPrimitive.Root value="yearly" />}
+      >
         Yearly
-      </RadioPrimitive.Root>
-      <SegmentedControlIndicator />
-    </RadioGroupPrimitive>
+      </SegmentedControlItem>
+    </SegmentedControl>
   );
 }
diff --git a/apps/ui/registry/default/particles/p-radio-group-9.tsx b/apps/ui/registry/default/particles/p-radio-group-9.tsx
index 267631bd3..148a1ec1a 100644
--- a/apps/ui/registry/default/particles/p-radio-group-9.tsx
+++ b/apps/ui/registry/default/particles/p-radio-group-9.tsx
@@ -1,35 +1,33 @@
 "use client";
 
-import {
-  segmentedControlItemVariants,
-  segmentedControlRootClassName,
-} from "@/registry/default/lib/segmented-control";
-import { SegmentedControlIndicator } from "@/registry/default/lib/segmented-control-indicator";
 import {
   RadioGroupPrimitive,
   RadioPrimitive,
 } from "@/registry/default/ui/radio-group";
-
-const itemClassName = segmentedControlItemVariants({
-  className: "grow",
-  size: "lg",
-  state: "checked",
-});
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+} from "@/registry/default/ui/segmented-control";
 
 export default function Particle() {
   return (
-    <RadioGroupPrimitive
+    <SegmentedControl
       aria-label="Billing period"
-      className={segmentedControlRootClassName}
-      defaultValue="monthly"
+      render={<RadioGroupPrimitive defaultValue="monthly" />}
+      size="lg"
     >
-      <RadioPrimitive.Root className={itemClassName} value="monthly">
+      <SegmentedControlItem
+        className="grow"
+        render={<RadioPrimitive.Root value="monthly" />}
+      >
         Monthly
-      </RadioPrimitive.Root>
-      <RadioPrimitive.Root className={itemClassName} value="yearly">
+      </SegmentedControlItem>
+      <SegmentedControlItem
+        className="grow"
+        render={<RadioPrimitive.Root value="yearly" />}
+      >
         Yearly
-      </RadioPrimitive.Root>
-      <SegmentedControlIndicator />
-    </RadioGroupPrimitive>
+      </SegmentedControlItem>
+    </SegmentedControl>
   );
 }
diff --git a/apps/ui/registry/default/ui/segmented-control.tsx b/apps/ui/registry/default/ui/segmented-control.tsx
new file mode 100644
index 000000000..f234e049c
--- /dev/null
+++ b/apps/ui/registry/default/ui/segmented-control.tsx
@@ -0,0 +1,234 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import * as React from "react";
+import { cn } from "@/registry/default/lib/utils";
+
+export type SegmentedControlSize = "default" | "lg" | "sm";
+
+export const segmentedControlItemSizeClassNames: Record<
+  SegmentedControlSize,
+  string
+> = {
+  default: "h-8.5 px-[calc(--spacing(2.5)-1px)] sm:h-7.5",
+  lg: "h-9.5 px-[calc(--spacing(3)-1px)] sm:h-8.5",
+  sm: "h-7.5 px-[calc(--spacing(2)-1px)] sm:h-6.5",
+};
+
+export const segmentedControlItemLayoutClassName =
+  "gap-1.5 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0";
+
+export const segmentedControlIndicatorSurfaceClassName =
+  "rounded-md bg-background shadow-sm/5 dark:bg-input";
+
+const SegmentedControlContext: React.Context<SegmentedControlSize> =
+  React.createContext<SegmentedControlSize>("default");
+
+export function SegmentedControl({
+  className,
+  children,
+  render,
+  size = "default",
+  ...props
+}: useRender.ComponentProps<"div"> & {
+  size?: SegmentedControlSize;
+}): React.ReactElement {
+  const defaultProps = {
+    children: (
+      <>
+        {children}
+        <SegmentedControlIndicator />
+      </>
+    ),
+    className: cn(
+      "relative z-0 flex w-fit items-center justify-center gap-0.5 rounded-lg bg-muted p-0.5",
+      className,
+    ),
+    "data-size": size,
+    "data-slot": "segmented-control",
+  };
+
+  const element = useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+
+  return (
+    <SegmentedControlContext.Provider value={size}>
+      {element}
+    </SegmentedControlContext.Provider>
+  );
+}
+
+export function SegmentedControlItem({
+  className,
+  render,
+  size,
+  ...props
+}: useRender.ComponentProps<"button"> & {
+  size?: SegmentedControlSize;
+}): React.ReactElement {
+  const contextSize = React.useContext(SegmentedControlContext);
+  const resolvedSize = size ?? contextSize;
+
+  const defaultProps = {
+    className: cn(
+      "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base text-muted-foreground/72 outline-2 outline-transparent transition-[color,outline-color] hover:bg-transparent hover:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm",
+      "data-checked:bg-background data-checked:text-foreground data-checked:shadow-sm/5 dark:data-checked:bg-input",
+      "aria-[current=page]:bg-background aria-[current=page]:text-foreground aria-[current=page]:shadow-sm/5 dark:aria-[current=page]:bg-input",
+      "data-pressed:bg-background data-pressed:text-foreground data-pressed:shadow-sm/5 dark:data-pressed:bg-input",
+      "[:has(>[data-slot=segmented-control-indicator]:not([hidden]))>&]:bg-transparent! [:has(>[data-slot=segmented-control-indicator]:not([hidden]))>&]:shadow-none!",
+      segmentedControlItemLayoutClassName,
+      segmentedControlItemSizeClassNames[resolvedSize],
+      className,
+    ),
+    "data-size": resolvedSize,
+    "data-slot": "segmented-control-item",
+    ...(render ? {} : { type: "button" as const }),
+  };
+
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(defaultProps, props),
+    render,
+  });
+}
+
+const activeItemSelector =
+  ':scope > [data-checked], :scope > [aria-current="page"], :scope > [data-pressed]';
+
+const observedAttributes: string[] = [
+  "data-checked",
+  "aria-current",
+  "data-pressed",
+];
+
+const MAX_LAYOUT_ROUNDING_ERROR = 2;
+
+interface ActiveItemRect {
+  height: number;
+  left: number;
+  top: number;
+  width: number;
+}
+
+function isSameRect(
+  a: ActiveItemRect | null,
+  b: ActiveItemRect | null,
+): boolean {
+  return (
+    a?.left === b?.left &&
+    a?.top === b?.top &&
+    a?.width === b?.width &&
+    a?.height === b?.height
+  );
+}
+
+function getCssSize(element: HTMLElement): { height: number; width: number } {
+  const style = getComputedStyle(element);
+  const width = Number.parseFloat(style.width) || 0;
+  const height = Number.parseFloat(style.height) || 0;
+  if (
+    Math.round(width) !== element.offsetWidth ||
+    Math.round(height) !== element.offsetHeight
+  ) {
+    return { height: element.offsetHeight, width: element.offsetWidth };
+  }
+  return { height, width };
+}
+
+function measureItem(item: HTMLElement, root: HTMLElement): ActiveItemRect {
+  const { width, height } = getCssSize(item);
+  const rootSize = getCssSize(root);
+  const itemRect = item.getBoundingClientRect();
+  const rootRect = root.getBoundingClientRect();
+  const scaleX = rootSize.width > 0 ? rootRect.width / rootSize.width : 1;
+  const scaleY = rootSize.height > 0 ? rootRect.height / rootSize.height : 1;
+
+  const rectLeft =
+    (itemRect.left - rootRect.left) / scaleX -
+    root.clientLeft +
+    root.scrollLeft;
+  const rectTop =
+    (itemRect.top - rootRect.top) / scaleY - root.clientTop + root.scrollTop;
+
+  const isUndistorted =
+    Math.abs(rectLeft - item.offsetLeft) <= MAX_LAYOUT_ROUNDING_ERROR &&
+    Math.abs(rectTop - item.offsetTop) <= MAX_LAYOUT_ROUNDING_ERROR;
+
+  return {
+    height,
+    left: isUndistorted ? rectLeft : item.offsetLeft,
+    top: isUndistorted ? rectTop : item.offsetTop,
+    width,
+  };
+}
+
+function SegmentedControlIndicator(): React.ReactElement {
+  const ref = React.useRef<HTMLSpanElement>(null);
+  const [rect, setRect] = React.useState<ActiveItemRect | null>(null);
+
+  React.useLayoutEffect(() => {
+    const root = ref.current?.parentElement;
+    if (!root) {
+      return;
+    }
+
+    const update = (): void => {
+      const item = root.querySelector<HTMLElement>(activeItemSelector);
+      const next = item ? measureItem(item, root) : null;
+      setRect((previous) => (isSameRect(previous, next) ? previous : next));
+    };
+
+    update();
+
+    const resizeObserver = new ResizeObserver(update);
+    const mutationObserver = new MutationObserver((records) => {
+      if (records.some((record) => record.type === "childList")) {
+        observeItems();
+      }
+      update();
+    });
+    const observeItems = (): void => {
+      resizeObserver.disconnect();
+      resizeObserver.observe(root);
+      for (const child of root.children) {
+        resizeObserver.observe(child);
+        mutationObserver.observe(child, {
+          attributeFilter: observedAttributes,
+          attributes: true,
+        });
+      }
+    };
+    mutationObserver.observe(root, { childList: true });
+    observeItems();
+
+    return () => {
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, []);
+
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute top-0 left-0 -z-1 h-(--active-item-height) w-(--active-item-width) translate-x-(--active-item-left) translate-y-(--active-item-top) transition-[width,height,translate] duration-200 ease-in-out motion-reduce:transition-none",
+        segmentedControlIndicatorSurfaceClassName,
+      )}
+      data-slot="segmented-control-indicator"
+      hidden={!rect}
+      ref={ref}
+      style={
+        {
+          "--active-item-height": `${rect?.height ?? 0}px`,
+          "--active-item-left": `${rect?.left ?? 0}px`,
+          "--active-item-top": `${rect?.top ?? 0}px`,
+          "--active-item-width": `${rect?.width ?? 0}px`,
+        } as React.CSSProperties
+      }
+    />
+  );
+}
diff --git a/apps/ui/registry/default/ui/tabs.tsx b/apps/ui/registry/default/ui/tabs.tsx
index eab656dba..48285576b 100644
--- a/apps/ui/registry/default/ui/tabs.tsx
+++ b/apps/ui/registry/default/ui/tabs.tsx
@@ -2,13 +2,13 @@
 
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
 import * as React from "react";
+import { cn } from "@/registry/default/lib/utils";
 import {
   type SegmentedControlSize,
   segmentedControlIndicatorSurfaceClassName,
   segmentedControlItemLayoutClassName,
   segmentedControlItemSizeClassNames,
-} from "@/registry/default/lib/segmented-control";
-import { cn } from "@/registry/default/lib/utils";
+} from "@/registry/default/ui/segmented-control";
 
 type TabsVariant = "default" | "underline";
 type TabsSize = SegmentedControlSize;
diff --git a/apps/ui/registry/registry-lib.ts b/apps/ui/registry/registry-lib.ts
index df6ef4e9b..422be01d5 100644
--- a/apps/ui/registry/registry-lib.ts
+++ b/apps/ui/registry/registry-lib.ts
@@ -25,28 +25,6 @@ export const lib: Registry["items"] = [
     name: "composer-query",
     type: "registry:lib",
   },
-  {
-    dependencies: ["class-variance-authority"],
-    files: [
-      {
-        path: "lib/segmented-control.ts",
-        type: "registry:lib",
-      },
-    ],
-    name: "segmented-control",
-    type: "registry:lib",
-  },
-  {
-    files: [
-      {
-        path: "lib/segmented-control-indicator.tsx",
-        type: "registry:lib",
-      },
-    ],
-    name: "segmented-control-indicator",
-    registryDependencies: ["@coss/segmented-control", "@coss/utils"],
-    type: "registry:lib",
-  },
   {
     dependencies: ["clsx", "tailwind-merge"],
     files: [
diff --git a/apps/ui/registry/registry-particles.ts b/apps/ui/registry/registry-particles.ts
index cc36c29d0..7f7cbcbfe 100644
--- a/apps/ui/registry/registry-particles.ts
+++ b/apps/ui/registry/registry-particles.ts
@@ -4165,10 +4165,7 @@ export const particles: ParticleItem[] = [
     description: "Segmented navigation built with links",
     files: [{ path: "particles/p-navigation-1.tsx", type: "registry:block" }],
     name: "p-navigation-1",
-    registryDependencies: [
-      "@coss/segmented-control",
-      "@coss/segmented-control-indicator",
-    ],
+    registryDependencies: ["@coss/segmented-control"],
     type: "registry:block",
   },
   {
@@ -4176,10 +4173,7 @@ export const particles: ParticleItem[] = [
     description: "Small segmented navigation built with links",
     files: [{ path: "particles/p-navigation-2.tsx", type: "registry:block" }],
     name: "p-navigation-2",
-    registryDependencies: [
-      "@coss/segmented-control",
-      "@coss/segmented-control-indicator",
-    ],
+    registryDependencies: ["@coss/segmented-control"],
     type: "registry:block",
   },
   {
@@ -4187,10 +4181,7 @@ export const particles: ParticleItem[] = [
     description: "Large segmented navigation built with links",
     files: [{ path: "particles/p-navigation-3.tsx", type: "registry:block" }],
     name: "p-navigation-3",
-    registryDependencies: [
-      "@coss/segmented-control",
-      "@coss/segmented-control-indicator",
-    ],
+    registryDependencies: ["@coss/segmented-control"],
     type: "registry:block",
   },
   {
@@ -4390,11 +4381,7 @@ export const particles: ParticleItem[] = [
     description: "Small segmented control built with a radio group",
     files: [{ path: "particles/p-radio-group-7.tsx", type: "registry:block" }],
     name: "p-radio-group-7",
-    registryDependencies: [
-      "@coss/radio-group",
-      "@coss/segmented-control",
-      "@coss/segmented-control-indicator",
-    ],
+    registryDependencies: ["@coss/radio-group", "@coss/segmented-control"],
     type: "registry:block",
   },
   {
@@ -4402,11 +4389,7 @@ export const particles: ParticleItem[] = [
     description: "Segmented control built with a radio group",
     files: [{ path: "particles/p-radio-group-8.tsx", type: "registry:block" }],
     name: "p-radio-group-8",
-    registryDependencies: [
-      "@coss/radio-group",
-      "@coss/segmented-control",
-      "@coss/segmented-control-indicator",
-    ],
+    registryDependencies: ["@coss/radio-group", "@coss/segmented-control"],
     type: "registry:block",
   },
   {
@@ -4414,11 +4397,7 @@ export const particles: ParticleItem[] = [
     description: "Large segmented control built with a radio group",
     files: [{ path: "particles/p-radio-group-9.tsx", type: "registry:block" }],
     name: "p-radio-group-9",
-    registryDependencies: [
-      "@coss/radio-group",
-      "@coss/segmented-control",
-      "@coss/segmented-control-indicator",
-    ],
+    registryDependencies: ["@coss/radio-group", "@coss/segmented-control"],
     type: "registry:block",
   },
   {
diff --git a/apps/ui/registry/registry-ui.ts b/apps/ui/registry/registry-ui.ts
index a608c71d0..e9805b726 100644
--- a/apps/ui/registry/registry-ui.ts
+++ b/apps/ui/registry/registry-ui.ts
@@ -591,6 +591,17 @@ export const ui: Registry["items"] = [
     name: "select",
     type: "registry:ui",
   },
+  {
+    dependencies: ["@base-ui/react"],
+    files: [
+      {
+        path: "ui/segmented-control.tsx",
+        type: "registry:ui",
+      },
+    ],
+    name: "segmented-control",
+    type: "registry:ui",
+  },
   {
     dependencies: ["@base-ui/react"],
     files: [
diff --git a/apps/ui/skills/coss/SKILL.md b/apps/ui/skills/coss/SKILL.md
index 9a05502b6..4d11fb230 100644
--- a/apps/ui/skills/coss/SKILL.md
+++ b/apps/ui/skills/coss/SKILL.md
@@ -61,12 +61,11 @@ Rule references (read on demand when the task touches these areas):
 - `./references/rules/forms.md` — Field composition, validation, input patterns
 - `./references/rules/composition.md` — Trigger/popup hierarchies, grouped controls
 - `./references/rules/migration.md` — shadcn/Radix to coss/Base UI migration patterns
-- `./references/segmented-control.md` — choose Radio Group, links, Toggle Group, or Tabs before applying segmented-control styling
 - `./references/portal-props.md` — optional `portalProps` on composed popups and toast providers (`keepMounted`, `container`, which surfaces support it)
 
 ## Component discovery
 
-All 54 primitives have dedicated reference guides at `./references/primitives/<name>.md`. To find the right one for a task, consult the component registry index:
+All 55 primitives have dedicated reference guides at `./references/primitives/<name>.md`. To find the right one for a task, consult the component registry index:
 
 - `./references/component-registry.md`
 
diff --git a/apps/ui/skills/coss/references/component-registry.md b/apps/ui/skills/coss/references/component-registry.md
index f7cef2a1a..e6604ffbb 100644
--- a/apps/ui/skills/coss/references/component-registry.md
+++ b/apps/ui/skills/coss/references/component-registry.md
@@ -4,9 +4,6 @@ Use this file to quickly identify the right coss primitive for a UI task. Each e
 
 For optional **`portalProps`** on composed `*Popup` components and **toast** providers (Base UI portal forwarding), see `./references/portal-props.md`.
 
-## Cross-component patterns
-- **Segmented Control** — Shared visual treatment for radio choices, navigation links, exclusive toggles, or tabbed panels; choose semantics first. `./references/segmented-control.md`
-
 ## Overlays & Popups
 - **Dialog** — Centered modal requiring user focus. `./references/primitives/dialog.md`
 - **AlertDialog** — Destructive/critical confirmation modal. `./references/primitives/alert-dialog.md`
@@ -41,6 +38,7 @@ For optional **`portalProps`** on composed `*Popup` components and **toast** pro
 - **Checkbox** — Single boolean toggle. `./references/primitives/checkbox.md`
 - **CheckboxGroup** — Multiple-selection set. `./references/primitives/checkbox-group.md`
 - **RadioGroup** — Mutually exclusive single choice. `./references/primitives/radio-group.md`
+- **SegmentedControl** — Segmented presentation rendered over radio choices, navigation links, or exclusive toggles; choose semantics first. `./references/primitives/segmented-control.md`
 - **Switch** — Binary on/off preference toggle. `./references/primitives/switch.md`
 - **Toggle** — Pressable two-state command button. `./references/primitives/toggle.md`
 - **ToggleGroup** — Grouped pressed-state controls. `./references/primitives/toggle-group.md`
diff --git a/apps/ui/skills/coss/references/primitives/radio-group.md b/apps/ui/skills/coss/references/primitives/radio-group.md
index 001a06158..96714e7c0 100644
--- a/apps/ui/skills/coss/references/primitives/radio-group.md
+++ b/apps/ui/skills/coss/references/primitives/radio-group.md
@@ -86,7 +86,7 @@ const [value, setValue] = useState("default")
 
 ### More examples
 
-See `p-radio-group-1` through `p-radio-group-5` for disabled, description, card-style, and form integration patterns. For a segmented presentation, use `p-radio-group-7`, `p-radio-group-8`, or `p-radio-group-9`; read `../segmented-control.md` before choosing the underlying primitive.
+See `p-radio-group-1` through `p-radio-group-5` for disabled, description, card-style, and form integration patterns. For a segmented presentation, use `p-radio-group-7`, `p-radio-group-8`, or `p-radio-group-9`; read `./segmented-control.md` before choosing the underlying primitive.
 
 ## Common pitfalls
 
diff --git a/apps/ui/skills/coss/references/primitives/segmented-control.md b/apps/ui/skills/coss/references/primitives/segmented-control.md
new file mode 100644
index 000000000..5fc1f6e16
--- /dev/null
+++ b/apps/ui/skills/coss/references/primitives/segmented-control.md
@@ -0,0 +1,111 @@
+# coss Segmented Control
+
+A segmented control is a visual pattern, not a standalone behavior. `SegmentedControl` and `SegmentedControlItem` provide the presentation and the sliding indicator; the element passed to `render` provides the semantics. Choose that element from the interaction first.
+
+## Choose the behavior
+
+| Intent | Render | State model |
+| --- | --- | --- |
+| Choose one value, especially in a form | Radio Group primitives | Exactly one mutually exclusive value |
+| Navigate to another URL or route | `<nav />` and links | Browser navigation with `aria-current="page"` on the current link |
+| Apply an exclusive filter or reversible mode | Toggle Group primitives | At most one pressed item by default; the current item may be cleared |
+| Switch between associated content panels | Use Tabs instead | Each tab controls a matching panel |
+
+Do not use Tabs for navigation links, form values, or filters merely because the result should look segmented. Do not use Toggle Group when one value must always remain selected; use Radio Group instead.
+
+## Install
+
+```bash
+npx shadcn@latest add @coss/segmented-control
+```
+
+Manual deps from docs:
+
+```bash
+npm install @base-ui/react
+```
+
+## Canonical imports
+
+```tsx
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+} from "@/components/ui/segmented-control"
+```
+
+## Minimal pattern
+
+```tsx
+import {
+  RadioGroupPrimitive,
+  RadioPrimitive,
+} from "@/components/ui/radio-group"
+
+<SegmentedControl
+  aria-label="Billing period"
+  render={<RadioGroupPrimitive defaultValue="monthly" />}
+>
+  <SegmentedControlItem render={<RadioPrimitive.Root value="monthly" />}>
+    Monthly
+  </SegmentedControlItem>
+  <SegmentedControlItem render={<RadioPrimitive.Root value="yearly" />}>
+    Yearly
+  </SegmentedControlItem>
+</SegmentedControl>
+```
+
+## Patterns from coss particles
+
+### Key patterns
+
+Navigation renders the `<nav>` as the root and a link per item:
+
+```tsx
+<SegmentedControl aria-label="Project sections" render={<nav />}>
+  <SegmentedControlItem render={<a aria-current="page" href="/overview" />}>
+    Overview
+  </SegmentedControlItem>
+  <SegmentedControlItem render={<a href="/activity" />}>
+    Activity
+  </SegmentedControlItem>
+</SegmentedControl>
+```
+
+An exclusive filter that may be cleared renders the Toggle Group primitives:
+
+```tsx
+import { ToggleGroupPrimitive } from "@/components/ui/toggle-group"
+import { TogglePrimitive } from "@/components/ui/toggle"
+
+<SegmentedControl render={<ToggleGroupPrimitive aria-label="Status" />}>
+  <SegmentedControlItem render={<TogglePrimitive value="open" />}>
+    Open
+  </SegmentedControlItem>
+  <SegmentedControlItem render={<TogglePrimitive value="closed" />}>
+    Closed
+  </SegmentedControlItem>
+</SegmentedControl>
+```
+
+- Put behavior props (`defaultValue`, `value`, `onValueChange`, `href`, `aria-current`, `onClick`) on the rendered element, not on `SegmentedControl` or `SegmentedControlItem`.
+- Use the `*Primitive` exports, not the styled `RadioGroup`/`Radio` or `ToggleGroup`/`ToggleGroupItem`, so their own indicator and styling are not rendered.
+- Set `size="sm" | "default" | "lg"` once on `SegmentedControl`; items inherit it. Use an item `size` only as an override.
+- Add `className="grow"` to items to fill a full-width control.
+- The indicator is built in: it slides to the item with `data-checked`, `aria-current="page"`, or `data-pressed`. Before hydration, the active item paints a static pill. For navigation, the pill animates only when the control persists across route changes, such as in a shared layout.
+
+Tabs keep their own component and Base UI indicator. They import `SegmentedControlSize`, `segmentedControlItemSizeClassNames`, `segmentedControlItemLayoutClassName`, and `segmentedControlIndicatorSurfaceClassName` from `components/ui/segmented-control.tsx` so both look the same.
+
+## Common pitfalls
+
+- Choosing the primitive by appearance instead of interaction.
+- Putting `defaultValue`, `value`, or `href` on `SegmentedControl` or `SegmentedControlItem` instead of on the rendered element.
+- Rendering a styled `Radio` or `ToggleGroupItem` inside an item, which adds a second indicator or conflicting styles.
+- Wrapping the control in an extra `<nav>` or `<div>` instead of rendering it as the root.
+- Adding a separate indicator element; `SegmentedControl` already renders one.
+- Importing from the removed `lib/segmented-control.ts` library; see the Oct 20, 2026 changelog entry for the migration.
+
+## Useful particle references
+
+- radio group, small/default/large: `p-radio-group-7`, `p-radio-group-8`, `p-radio-group-9`
+- navigation, small/default/large: `p-navigation-2`, `p-navigation-1`, `p-navigation-3`
diff --git a/apps/ui/skills/coss/references/primitives/tabs.md b/apps/ui/skills/coss/references/primitives/tabs.md
index 350a852c7..0ddee55b9 100644
--- a/apps/ui/skills/coss/references/primitives/tabs.md
+++ b/apps/ui/skills/coss/references/primitives/tabs.md
@@ -14,10 +14,10 @@ npx shadcn@latest add @coss/tabs
 Manual deps from docs:
 
 ```bash
-npm install @base-ui/react class-variance-authority
+npm install @base-ui/react
 ```
 
-The CLI installs the shared `@coss/segmented-control` registry dependency automatically. For a manual installation, also copy `lib/segmented-control.ts` before copying the Tabs component.
+The CLI installs the `@coss/segmented-control` component automatically. For a manual installation, also copy `components/ui/segmented-control.tsx` before copying the Tabs component.
 
 ## Canonical imports
 
@@ -90,7 +90,7 @@ Underline variant:
 
 - Mismatching `TabsTab value` and `TabsPanel value` pairs.
 - Using tabs for workflows that require route-level navigation instead.
-- Using tabs for a form value or reversible filter just because it looks like a segmented control. Read `../segmented-control.md` and choose semantics first.
+- Using tabs for a form value or reversible filter just because it looks like a segmented control. Read `./segmented-control.md` and choose semantics first.
 - Mounting expensive panel content without considering visibility/performance.
 
 ## Useful particle references
diff --git a/apps/ui/skills/coss/references/primitives/toggle-group.md b/apps/ui/skills/coss/references/primitives/toggle-group.md
index a9a5cf9dc..585c23b81 100644
--- a/apps/ui/skills/coss/references/primitives/toggle-group.md
+++ b/apps/ui/skills/coss/references/primitives/toggle-group.md
@@ -105,7 +105,7 @@ function ControlledToggleGroup() {
 
 ### More examples
 
-See `p-toggle-group-1` through `p-toggle-group-9` for sizes, outline, vertical, disabled, multiple, and tooltip patterns. Read `../segmented-control.md` before applying segmented styling to a custom reversible mode.
+See `p-toggle-group-1` through `p-toggle-group-9` for sizes, outline, vertical, disabled, multiple, and tooltip patterns. Read `./segmented-control.md` before rendering a reversible mode as a segmented control.
 
 ## Common pitfalls
 
diff --git a/apps/ui/skills/coss/references/segmented-control.md b/apps/ui/skills/coss/references/segmented-control.md
deleted file mode 100644
index 048458ab3..000000000
--- a/apps/ui/skills/coss/references/segmented-control.md
+++ /dev/null
@@ -1,74 +0,0 @@
-# coss Segmented Control Pattern
-
-A segmented control is a shared visual treatment, not a standalone behavior. Choose the underlying primitive from the interaction before applying the styling.
-
-## Choose the behavior
-
-| Intent | Use | State model |
-| --- | --- | --- |
-| Choose one value, especially in a form | Radio Group | Exactly one mutually exclusive value |
-| Navigate to another URL or route | Links | Browser navigation with `aria-current="page"` on the current link |
-| Apply an exclusive filter or reversible mode | Toggle Group | At most one pressed item by default; the current item may be cleared |
-| Switch between associated content panels | Tabs | Each tab controls a matching panel |
-
-Do not use Tabs for navigation links, form values, or filters merely because the result should look segmented. Do not use Toggle Group when one value must always remain selected; use Radio Group instead.
-
-## Install a particle
-
-| Implementation | Small | Default | Large |
-| --- | --- | --- | --- |
-| Radio Group | `@coss/p-radio-group-7` | `@coss/p-radio-group-8` | `@coss/p-radio-group-9` |
-| Navigation links | `@coss/p-navigation-2` | `@coss/p-navigation-1` | `@coss/p-navigation-3` |
-
-The CLI installs the relevant primitive, the shared `@coss/segmented-control` styling library, and the `@coss/segmented-control-indicator` sliding pill automatically.
-
-COSS does not publish a Toggle Group segmented particle. Use the shared styling directly only when a reversible mode genuinely allows no active option.
-
-## Custom composition
-
-Install the styling library directly when none of the particles matches:
-
-```bash
-npx shadcn@latest add @coss/segmented-control @coss/segmented-control-indicator
-```
-
-```tsx
-import {
-  segmentedControlItemVariants,
-  segmentedControlRootClassName,
-} from "@/lib/segmented-control"
-import { SegmentedControlIndicator } from "@/lib/segmented-control-indicator"
-```
-
-Apply `segmentedControlRootClassName` to the group surface. Generate one item class with the matching state selector:
-
-```tsx
-const itemClassName = segmentedControlItemVariants({
-  size: "default",
-  state: "checked",
-})
-```
-
-- `state: "checked"` for Radio Group
-- `state: "current"` for navigation links
-- `state: "pressed"` for Toggle Group
-- `size: "sm" | "default" | "lg"`
-
-The `state` variants paint a static pill on the active item. Render `<SegmentedControlIndicator />` as the last child of the root to animate it; while the indicator is visible, items drop their static pill:
-
-```tsx
-<RadioGroupPrimitive className={segmentedControlRootClassName}>
-  <RadioPrimitive.Root className={itemClassName} value="monthly">
-    Monthly
-  </RadioPrimitive.Root>
-  <SegmentedControlIndicator />
-</RadioGroupPrimitive>
-```
-
-The indicator tracks the direct child with `data-checked`, `aria-current="page"`, or `data-pressed`, slides to it (200ms ease-in-out, none under reduced motion), and hides when no item is active. For navigation links, it animates only when the root persists across route changes, such as in a shared layout.
-
-Use the exported Radio Group primitives for a custom segmented radio presentation so the native radio indicator is not rendered. Keep a default or controlled value when the interface requires one option to remain selected.
-
-Tabs do not use the shared state recipe or `SegmentedControlIndicator`; they use Base UI’s `Tabs.Indicator`, styled with the shared `segmentedControlIndicatorSurfaceClassName`. They also import the shared size map and `segmentedControlItemLayoutClassName`: set `size="sm" | "default" | "lg"` on `TabsList`, and use a `TabsTab` size only as an item-level override.
-
-Reuse the shared root, item, layout, and indicator recipes instead of copying their classes into a new segmented particle. This keeps Tabs and the radio, navigation, and toggle implementations optically aligned.
diff --git a/packages/ui/src/components/segmented-control.tsx b/packages/ui/src/components/segmented-control.tsx
new file mode 100644
index 000000000..245ffe718
--- /dev/null
+++ b/packages/ui/src/components/segmented-control.tsx
@@ -0,0 +1,234 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "@coss/ui/lib/utils";
+import * as React from "react";
+
+export type SegmentedControlSize = "default" | "lg" | "sm";
+
+export const segmentedControlItemSizeClassNames: Record<
+  SegmentedControlSize,
+  string
+> = {
+  default: "h-8.5 px-[calc(--spacing(2.5)-1px)] sm:h-7.5",
+  lg: "h-9.5 px-[calc(--spacing(3)-1px)] sm:h-8.5",
+  sm: "h-7.5 px-[calc(--spacing(2)-1px)] sm:h-6.5",
+};
+
+export const segmentedControlItemLayoutClassName =
+  "gap-1.5 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0";
+
+export const segmentedControlIndicatorSurfaceClassName =
+  "rounded-md bg-background shadow-sm/5 dark:bg-input";
+
+const SegmentedControlContext: React.Context<SegmentedControlSize> =
+  React.createContext<SegmentedControlSize>("default");
+
+export function SegmentedControl({
+  className,
+  children,
+  render,
+  size = "default",
+  ...props
+}: useRender.ComponentProps<"div"> & {
+  size?: SegmentedControlSize;
+}): React.ReactElement {
+  const defaultProps = {
+    children: (
+      <>
+        {children}
+        <SegmentedControlIndicator />
+      </>
+    ),
+    className: cn(
+      "relative z-0 flex w-fit items-center justify-center gap-0.5 rounded-lg bg-muted p-0.5",
+      className,
+    ),
+    "data-size": size,
+    "data-slot": "segmented-control",
+  };
+
+  const element = useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+
+  return (
+    <SegmentedControlContext.Provider value={size}>
+      {element}
+    </SegmentedControlContext.Provider>
+  );
+}
+
+export function SegmentedControlItem({
+  className,
+  render,
+  size,
+  ...props
+}: useRender.ComponentProps<"button"> & {
+  size?: SegmentedControlSize;
+}): React.ReactElement {
+  const contextSize = React.useContext(SegmentedControlContext);
+  const resolvedSize = size ?? contextSize;
+
+  const defaultProps = {
+    className: cn(
+      "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base text-muted-foreground/72 outline-2 outline-transparent transition-[color,outline-color] hover:bg-transparent hover:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm",
+      "data-checked:bg-background data-checked:text-foreground data-checked:shadow-sm/5 dark:data-checked:bg-input",
+      "aria-[current=page]:bg-background aria-[current=page]:text-foreground aria-[current=page]:shadow-sm/5 dark:aria-[current=page]:bg-input",
+      "data-pressed:bg-background data-pressed:text-foreground data-pressed:shadow-sm/5 dark:data-pressed:bg-input",
+      "[:has(>[data-slot=segmented-control-indicator]:not([hidden]))>&]:bg-transparent! [:has(>[data-slot=segmented-control-indicator]:not([hidden]))>&]:shadow-none!",
+      segmentedControlItemLayoutClassName,
+      segmentedControlItemSizeClassNames[resolvedSize],
+      className,
+    ),
+    "data-size": resolvedSize,
+    "data-slot": "segmented-control-item",
+    ...(render ? {} : { type: "button" as const }),
+  };
+
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(defaultProps, props),
+    render,
+  });
+}
+
+const activeItemSelector =
+  ':scope > [data-checked], :scope > [aria-current="page"], :scope > [data-pressed]';
+
+const observedAttributes: string[] = [
+  "data-checked",
+  "aria-current",
+  "data-pressed",
+];
+
+const MAX_LAYOUT_ROUNDING_ERROR = 2;
+
+interface ActiveItemRect {
+  height: number;
+  left: number;
+  top: number;
+  width: number;
+}
+
+function isSameRect(
+  a: ActiveItemRect | null,
+  b: ActiveItemRect | null,
+): boolean {
+  return (
+    a?.left === b?.left &&
+    a?.top === b?.top &&
+    a?.width === b?.width &&
+    a?.height === b?.height
+  );
+}
+
+function getCssSize(element: HTMLElement): { height: number; width: number } {
+  const style = getComputedStyle(element);
+  const width = Number.parseFloat(style.width) || 0;
+  const height = Number.parseFloat(style.height) || 0;
+  if (
+    Math.round(width) !== element.offsetWidth ||
+    Math.round(height) !== element.offsetHeight
+  ) {
+    return { height: element.offsetHeight, width: element.offsetWidth };
+  }
+  return { height, width };
+}
+
+function measureItem(item: HTMLElement, root: HTMLElement): ActiveItemRect {
+  const { width, height } = getCssSize(item);
+  const rootSize = getCssSize(root);
+  const itemRect = item.getBoundingClientRect();
+  const rootRect = root.getBoundingClientRect();
+  const scaleX = rootSize.width > 0 ? rootRect.width / rootSize.width : 1;
+  const scaleY = rootSize.height > 0 ? rootRect.height / rootSize.height : 1;
+
+  const rectLeft =
+    (itemRect.left - rootRect.left) / scaleX -
+    root.clientLeft +
+    root.scrollLeft;
+  const rectTop =
+    (itemRect.top - rootRect.top) / scaleY - root.clientTop + root.scrollTop;
+
+  const isUndistorted =
+    Math.abs(rectLeft - item.offsetLeft) <= MAX_LAYOUT_ROUNDING_ERROR &&
+    Math.abs(rectTop - item.offsetTop) <= MAX_LAYOUT_ROUNDING_ERROR;
+
+  return {
+    height,
+    left: isUndistorted ? rectLeft : item.offsetLeft,
+    top: isUndistorted ? rectTop : item.offsetTop,
+    width,
+  };
+}
+
+function SegmentedControlIndicator(): React.ReactElement {
+  const ref = React.useRef<HTMLSpanElement>(null);
+  const [rect, setRect] = React.useState<ActiveItemRect | null>(null);
+
+  React.useLayoutEffect(() => {
+    const root = ref.current?.parentElement;
+    if (!root) {
+      return;
+    }
+
+    const update = (): void => {
+      const item = root.querySelector<HTMLElement>(activeItemSelector);
+      const next = item ? measureItem(item, root) : null;
+      setRect((previous) => (isSameRect(previous, next) ? previous : next));
+    };
+
+    update();
+
+    const resizeObserver = new ResizeObserver(update);
+    const mutationObserver = new MutationObserver((records) => {
+      if (records.some((record) => record.type === "childList")) {
+        observeItems();
+      }
+      update();
+    });
+    const observeItems = (): void => {
+      resizeObserver.disconnect();
+      resizeObserver.observe(root);
+      for (const child of root.children) {
+        resizeObserver.observe(child);
+        mutationObserver.observe(child, {
+          attributeFilter: observedAttributes,
+          attributes: true,
+        });
+      }
+    };
+    mutationObserver.observe(root, { childList: true });
+    observeItems();
+
+    return () => {
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, []);
+
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute top-0 left-0 -z-1 h-(--active-item-height) w-(--active-item-width) translate-x-(--active-item-left) translate-y-(--active-item-top) transition-[width,height,translate] duration-200 ease-in-out motion-reduce:transition-none",
+        segmentedControlIndicatorSurfaceClassName,
+      )}
+      data-slot="segmented-control-indicator"
+      hidden={!rect}
+      ref={ref}
+      style={
+        {
+          "--active-item-height": `${rect?.height ?? 0}px`,
+          "--active-item-left": `${rect?.left ?? 0}px`,
+          "--active-item-top": `${rect?.top ?? 0}px`,
+          "--active-item-width": `${rect?.width ?? 0}px`,
+        } as React.CSSProperties
+      }
+    />
+  );
+}
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
index 3683bc6a0..c30e221a4 100644
--- a/packages/ui/src/components/tabs.tsx
+++ b/packages/ui/src/components/tabs.tsx
@@ -6,7 +6,7 @@ import {
   segmentedControlIndicatorSurfaceClassName,
   segmentedControlItemLayoutClassName,
   segmentedControlItemSizeClassNames,
-} from "@coss/ui/lib/segmented-control";
+} from "@coss/ui/components/segmented-control";
 import { cn } from "@coss/ui/lib/utils";
 import * as React from "react";
 
diff --git a/packages/ui/src/lib/segmented-control-indicator.tsx b/packages/ui/src/lib/segmented-control-indicator.tsx
deleted file mode 100644
index ba12337e5..000000000
--- a/packages/ui/src/lib/segmented-control-indicator.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-"use client";
-
-import { segmentedControlIndicatorClassName } from "@coss/ui/lib/segmented-control";
-import { cn } from "@coss/ui/lib/utils";
-import * as React from "react";
-
-const activeItemSelector =
-  ':scope > [data-checked], :scope > [aria-current="page"], :scope > [data-pressed]';
-
-const observedAttributes = ["data-checked", "aria-current", "data-pressed"];
-
-const MAX_LAYOUT_ROUNDING_ERROR = 2;
-
-interface ActiveItemRect {
-  height: number;
-  left: number;
-  top: number;
-  width: number;
-}
-
-function isSameRect(
-  a: ActiveItemRect | null,
-  b: ActiveItemRect | null,
-): boolean {
-  return (
-    a?.left === b?.left &&
-    a?.top === b?.top &&
-    a?.width === b?.width &&
-    a?.height === b?.height
-  );
-}
-
-function getCssSize(element: HTMLElement): { height: number; width: number } {
-  const style = getComputedStyle(element);
-  const width = Number.parseFloat(style.width) || 0;
-  const height = Number.parseFloat(style.height) || 0;
-  if (
-    Math.round(width) !== element.offsetWidth ||
-    Math.round(height) !== element.offsetHeight
-  ) {
-    return { height: element.offsetHeight, width: element.offsetWidth };
-  }
-  return { height, width };
-}
-
-function measureItem(item: HTMLElement, root: HTMLElement): ActiveItemRect {
-  const { width, height } = getCssSize(item);
-  const rootSize = getCssSize(root);
-  const itemRect = item.getBoundingClientRect();
-  const rootRect = root.getBoundingClientRect();
-  const scaleX = rootSize.width > 0 ? rootRect.width / rootSize.width : 1;
-  const scaleY = rootSize.height > 0 ? rootRect.height / rootSize.height : 1;
-
-  const rectLeft =
-    (itemRect.left - rootRect.left) / scaleX -
-    root.clientLeft +
-    root.scrollLeft;
-  const rectTop =
-    (itemRect.top - rootRect.top) / scaleY - root.clientTop + root.scrollTop;
-
-  const isUndistorted =
-    Math.abs(rectLeft - item.offsetLeft) <= MAX_LAYOUT_ROUNDING_ERROR &&
-    Math.abs(rectTop - item.offsetTop) <= MAX_LAYOUT_ROUNDING_ERROR;
-
-  return {
-    height,
-    left: isUndistorted ? rectLeft : item.offsetLeft,
-    top: isUndistorted ? rectTop : item.offsetTop,
-    width,
-  };
-}
-
-export function SegmentedControlIndicator({
-  className,
-  ref: refProp,
-  style,
-  ...props
-}: React.ComponentProps<"span">): React.ReactElement {
-  const ref = React.useRef<HTMLSpanElement>(null);
-  const [rect, setRect] = React.useState<ActiveItemRect | null>(null);
-
-  const mergedRef = React.useCallback(
-    (node: HTMLSpanElement | null) => {
-      ref.current = node;
-      if (typeof refProp === "function") {
-        return refProp(node);
-      }
-      if (refProp) {
-        refProp.current = node;
-      }
-    },
-    [refProp],
-  );
-
-  React.useLayoutEffect(() => {
-    const root = ref.current?.parentElement;
-    if (!root) {
-      return;
-    }
-
-    const update = () => {
-      const item = root.querySelector<HTMLElement>(activeItemSelector);
-      const next = item ? measureItem(item, root) : null;
-      setRect((previous) => (isSameRect(previous, next) ? previous : next));
-    };
-
-    update();
-
-    const resizeObserver = new ResizeObserver(update);
-    const mutationObserver = new MutationObserver((records) => {
-      if (records.some((record) => record.type === "childList")) {
-        observeItems();
-      }
-      update();
-    });
-    const observeItems = () => {
-      resizeObserver.disconnect();
-      resizeObserver.observe(root);
-      for (const child of root.children) {
-        resizeObserver.observe(child);
-        mutationObserver.observe(child, {
-          attributeFilter: observedAttributes,
-          attributes: true,
-        });
-      }
-    };
-    mutationObserver.observe(root, { childList: true });
-    observeItems();
-
-    return () => {
-      resizeObserver.disconnect();
-      mutationObserver.disconnect();
-    };
-  }, []);
-
-  return (
-    <span
-      aria-hidden="true"
-      className={cn(segmentedControlIndicatorClassName, className)}
-      data-slot="segmented-control-indicator"
-      hidden={!rect}
-      ref={mergedRef}
-      style={
-        {
-          "--active-item-height": `${rect?.height ?? 0}px`,
-          "--active-item-left": `${rect?.left ?? 0}px`,
-          "--active-item-top": `${rect?.top ?? 0}px`,
-          "--active-item-width": `${rect?.width ?? 0}px`,
-          ...style,
-        } as React.CSSProperties
-      }
-      {...props}
-    />
-  );
-}
diff --git a/packages/ui/src/lib/segmented-control.ts b/packages/ui/src/lib/segmented-control.ts
deleted file mode 100644
index a6b20d276..000000000
--- a/packages/ui/src/lib/segmented-control.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { cva } from "class-variance-authority";
-
-export type SegmentedControlSize = "default" | "lg" | "sm";
-
-export const segmentedControlItemSizeClassNames: Record<
-  SegmentedControlSize,
-  string
-> = {
-  default: "h-8.5 px-[calc(--spacing(2.5)-1px)] sm:h-7.5",
-  lg: "h-9.5 px-[calc(--spacing(3)-1px)] sm:h-8.5",
-  sm: "h-7.5 px-[calc(--spacing(2)-1px)] sm:h-6.5",
-};
-
-export const segmentedControlRootClassName =
-  "relative z-0 flex w-fit items-center justify-center gap-0.5 rounded-lg bg-muted p-0.5";
-
-export const segmentedControlIndicatorSurfaceClassName =
-  "rounded-md bg-background shadow-sm/5 dark:bg-input";
-
-export const segmentedControlIndicatorClassName = `pointer-events-none absolute top-0 left-0 -z-1 h-(--active-item-height) w-(--active-item-width) translate-x-(--active-item-left) translate-y-(--active-item-top) transition-[width,height,translate] duration-200 ease-in-out motion-reduce:transition-none ${segmentedControlIndicatorSurfaceClassName}`;
-
-export const segmentedControlItemLayoutClassName =
-  "gap-1.5 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0";
-
-export const segmentedControlItemVariants = cva(
-  [
-    "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-base text-muted-foreground/72 outline-2 outline-transparent transition-[color,outline-color] hover:bg-transparent hover:text-muted-foreground focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm",
-    "[:has(>[data-slot=segmented-control-indicator]:not([hidden]))>&]:bg-transparent! [:has(>[data-slot=segmented-control-indicator]:not([hidden]))>&]:shadow-none!",
-    segmentedControlItemLayoutClassName,
-  ],
-  {
-    defaultVariants: {
-      size: "default",
-    },
-    variants: {
-      size: segmentedControlItemSizeClassNames,
-      state: {
-        checked:
-          "data-checked:bg-background data-checked:text-foreground data-checked:shadow-sm/5 dark:data-checked:bg-input",
-        current:
-          "aria-[current=page]:bg-background aria-[current=page]:text-foreground aria-[current=page]:shadow-sm/5 dark:aria-[current=page]:bg-input",
-        pressed:
-          "data-pressed:bg-background data-pressed:text-foreground data-pressed:shadow-sm/5 dark:data-pressed:bg-input",
-      },
-    },
-  },
-);