Changelog

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.