Changelog

Copy<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>

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @coss/segmented-control @coss/tabs
Copy

Copy- } from "@/lib/segmented-control"
+ } from "@/components/ui/segmented-control"

Copy- <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>

Copy- <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>

CopyMigrate 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.

Copy<AvatarGroup>
  <Avatar>…</Avatar>
  <Avatar>…</Avatar>
  <AvatarGroupCount>+2</AvatarGroupCount>
</AvatarGroup>

Copy<div className="[--avatar-size:--spacing(10)]">{/* every avatar below is 40px */}</div>

Copy- <Avatar className="size-10">
+ <Avatar className="[--avatar-size:--spacing(10)]">

Copy- <AvatarFallback className="text-[10px]">JD</AvatarFallback>
+ <AvatarFallback>JD</AvatarFallback>

Copy- <div className="flex -space-x-2">
-   <Avatar className="ring-2 ring-background">…</Avatar>
- </div>
+ <AvatarGroup>
+   <Avatar>…</Avatar>
+ </AvatarGroup>

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @coss/avatar
Copy

CopyUpdate the local coss Avatar component to the version with AvatarGroup, then migrate call sites. Install with `npx shadcn@latest add @coss/avatar`. Avatar now derives its box, font size and group geometry from one inherited custom property, --avatar-size (default 32px); --avatar-overlap, --avatar-gap and --avatar-nudge tune groups and inherit the same way. Replace size-* classes on Avatar with [--avatar-size:--spacing(N)] using the same N, and set it on a shared ancestor when several avatars share a size. After converting, delete hand-tuned text-* classes on AvatarFallback unless the design needs a size other than the derived one — the derived size is --avatar-size * 0.375. Replace hand-rolled overlapping stacks (flex with -space-x-* plus ring-2 ring-background on each avatar) with AvatarGroup, removing the negative spacing and ring utilities; add topmost="last" if the original kept the last avatar whole. Use AvatarGroupCount for a trailing "+N" chip instead of an Avatar with a fallback. Inside a group every avatar must be the same size, so set --avatar-size on the group, never on individual avatars. A status dot or badge on a clipped avatar is clipped with it; keep those on the avatar that stays whole, and place them in a relative wrapper as a sibling of Avatar rather than inside it. Note two visual default changes to review: AvatarFallback uses bg-border instead of bg-muted, and Avatar no longer paints bg-background. Run formatting and typechecking, then visually check avatars at every size the app uses, including any on gradients or images.

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @coss/tabs
Copy

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @coss/segmented-control
Copy

CopyUpdate the local coss Tabs component to the latest segmented-control sizing and item layout while preserving project-specific customizations. Install the shared registry dependency with `npx shadcn@latest add @coss/segmented-control`, then merge the latest @coss/tabs implementation. TabsList now accepts size="sm" | "default" | "lg" (default: "default") and propagates it to TabsTab; a TabsTab size prop overrides the inherited value. Replace the old hard-coded TabsTab height and horizontal-padding classes with segmentedControlItemSizeClassNames from the shared library, and replace inlined icon gap/size/opacity utilities with segmentedControlItemLayoutClassName. Existing Tabs JSX does not need a size prop. Audit local h-* and px-* overrides on TabsList/TabsTab and remove only those that unintentionally conflict with the new size API. Run formatting and typechecking, then visually verify default and underline Tabs in every size used by the app.

Copy- <ScrollArea scrollbarGutter scrollFade>
+ <ScrollArea overscrollContain scrollbarGutter scrollFade>

CopyAfter upgrading @coss/scroll-area, ScrollArea no longer applies overscroll-contain by default. Add overscrollContain only on nested scroll surfaces where wheel/touch should not chain to a parent scroller (dialogs, sheets, drawers, popups, sidebars, command panels). DialogPanel, SheetPanel, DrawerPanel, ComboboxList, AutocompleteList, and SidebarContent already pass overscrollContain—update local copies of those components if you vendor them.

Copy- import { DayPicker, type DateRange } from "react-day-picker"
+ import { DayPicker, type DateRange } from "@daypicker/react"

CopyUpgrade React DayPicker to v10. Replace the react-day-picker dependency with @daypicker/react and update all imports, including style and locale imports. Audit custom Calendar and DatePicker wrappers for APIs removed in v10: replace deprecated navigation and focus props, aliases, component slots, and classNames/styles keys according to https://daypicker.dev/upgrading. If the app uses a non-Gregorian calendar, install the corresponding @daypicker/* add-on and update its imports. Run the typecheck and test affected date-picker screens after migrating.

Copy- import { OTPFieldPreview } from "@base-ui/react/otp-field"
+ import { OTPField } from "@base-ui/react/otp-field"

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @coss/context-menu
Copy

Copy  import {
    Menu,
-   MenuItem,
+   MenuLinkItem,
    MenuPopup,
    MenuTrigger,
  } from "@/components/ui/menu"

Copy- <MenuItem render={<Link href="/docs" />}>Docs</MenuItem>
+ <MenuLinkItem render={<Link href="/docs" />}>Docs</MenuLinkItem>

Copy<MenuLinkItem href="/docs">Docs</MenuLinkItem>

Copy- <ContextMenuItem render={<Link href="/docs" />}>Docs</ContextMenuItem>
+ <ContextMenuLinkItem render={<Link href="/docs" />}>Docs</ContextMenuLinkItem>

Copycoss now exports MenuLinkItem (menu.tsx) and ContextMenuLinkItem (context-menu.tsx) for navigation rows. Replace MenuItem/ContextMenuItem with render={<Link href="..." />} by changing only the component to MenuLinkItem/ContextMenuLinkItem — keep render={<Link … />}; do not replace render with href when using Next.js or another router Link. Use href on MenuLinkItem/ContextMenuLinkItem only for plain <a> navigation without a router Link. Keep MenuItem/ContextMenuItem for actions (onClick), not navigation. Context Menu is a new @coss/context-menu package—see Context Menu docs.

Copy- <ScrollArea className="flex-1 min-h-0">
+ <ScrollArea className="flex-1 min-h-0" fill>
    <div className="flex h-full flex-col">
      …
      <footer className="mt-auto">…</footer>
    </div>
  </ScrollArea>

CopyAfter upgrading @coss/scroll-area, ScrollArea has an optional fill prop (default false). Do not add fill to every ScrollArea. Add fill only where a flex column inside the scroll area must stretch to the viewport height (e.g. mt-auto footer in a sidebar). Pair fill with flex-1 min-h-0 on the ScrollArea and h-full flex-col on the inner wrapper. SidebarContent in @coss/sidebar already uses fill.

Copy- <Form onSubmit={…}>
+ <Form className="flex w-full flex-col gap-4" onSubmit={…}>

CopyThe coss Form component no longer adds default Tailwind layout. Add className="flex w-full flex-col gap-4" to Form where you relied on the old stacked-field layout. For dialog/sheet/drawer: put header outside the form; wrap only panel+footer in Form (or native form) with className="contents". Merge any existing Form className with flex utilities where needed (e.g. max-w-64 becomes flex w-full max-w-64 flex-col gap-4).

Copy- npx shadcn@latest add @coss/input-otp
+ npx shadcn@latest add @coss/otp-field

Copy- import { ... } from "@/components/ui/input-otp"
+ import { ... } from "@/components/ui/otp-field"

CopyReplace the removed @coss/input-otp / components/ui/input-otp.tsx with @coss/otp-field / components/ui/otp-field.tsx. Follow the OTP Field docs: use OTPField, OTPFieldInput, and OTPFieldSeparator; use length on the root; remove the old input-otp npm package if present.

Copy<Table variant="card">

CopyAfter upgrading @coss/table, Table supports an optional variant prop: "default" (default) or "card". Existing Table components require no edits. Add variant="card" to Table where you want the card-style table (e.g. inside Frame or CardFrame). Do not add variant to every table—only where the design calls for the card-style grid.

Copy- import { Toggle, ToggleGroup } from "@/components/ui/toggle-group"
+ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

Copy  <ToggleGroup>
-   <Toggle value="bold">Bold</Toggle>
+   <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
  </ToggleGroup>

CopyIn my codebase, rename all usages of `Toggle` imported from `toggle-group` to `ToggleGroupItem`. Update both the import statements and JSX usage. Do not change `Toggle` imports from `toggle.tsx` (standalone toggle). Only change files that import `Toggle` from the `toggle-group` module.