Changelog

Breaking changes, migration guides, and notable updates.

The Form component (form.tsx) no longer applies default layout classes (flex, flex-col, gap-4, w-full). It is a thin wrapper around Base UI only; pass className wherever you need a vertical field stack, width constraints, or dialog/sheet layout.

Migration:

For a typical stacked-field form, restore the previous default explicitly:

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

For dialogs, sheets, and drawers, keep DialogHeader (or SheetHeader, DrawerHeader) outside the form. Wrap DialogPanel and DialogFooter (or sheet/drawer equivalents) in <Form className="contents"> or a native <form className="contents">. display: contents keeps header, panel, and footer as the direct flex children of the popup’s column layout so DialogPanel scroll and height constraints work correctly.

Agent migration prompt:

The 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).

Apr 14, 2026

OTP Field

The input-otp.tsx registry component has been removed in favor of otp-field.tsx (@coss/otp-field), which wraps Base UI OTP Field. See the OTP Field docs and migration guide for API details.

Migration:

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

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

Agent migration prompt:

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

Apr 12, 2026

Table

Table now supports an optional variant prop: "default" (the default) or "card". Omitting it keeps the same appearance as before. Use variant="card" for the card-style grid (separated rows, rounded cells, updated hover/footer treatment)—including tables inside a Frame or CardFrame as shown in the Table docs.

Migration:

No change required for existing tables. Opt in where you want the card-style table:

<Table variant="card">

Agent migration prompt:

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

Mar 20, 2026

Toggle Group

Toggle was renamed to ToggleGroupItem in toggle-group.tsx to avoid a naming conflict with the standalone Toggle export.

Migration:

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

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

Agent migration prompt:

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

On This Page

Apr 17, 2026 Form Apr 14, 2026 OTP Field Apr 12, 2026 Table Mar 20, 2026 Toggle Group