- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Command
- Date Picker
- Dialog
- DrawerNew
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input Group
- Kbd
- Label
- Menu
- Meter
- Number Field
- OTP FieldNew
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Changelog
Breaking changes, migration guides, and notable updates.
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.