Журнал изменений

17 апреля 2026

Form

Компонент Form (form.tsx) больше не применяет стандартные классы разметки (flex, flex-col, gap-4, w-full). Теперь это тонкая обертка вокруг Base UI. Передавайте нужные классы через className там, где вам нужна вертикальная структура полей, ограничение ширины или специфическая разметка для диалогов/штор (sheet).

Миграция:

Для типичной формы со списком полей добавьте классы явно:

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

Для Dialog, Sheet и Drawer держите DialogHeader (или его аналоги) вне формы. Оберните DialogPanel и DialogFooter в <Form className="contents">. Свойство display: contents позволит заголовку, панели и футеру оставаться прямыми дочерними элементами попапа, чтобы прокрутка и ограничения высоты работали корректно.

14 апреля 2026

OTP Field

Компонент input-otp.tsx был удален в пользу otp-field.tsx (@oracul/otp-field), который является оберткой над Base UI OTP Field. Подробности см. в документации OTP Field и руководстве по миграции.

Миграция:

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

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

12 апреля 2026

Table

Table теперь поддерживает опциональный проп variant: "default" (по умолчанию) или "card". Если проп не указан, внешний вид остается прежним. Используйте variant="card" для таблиц в стиле карточек (разделенные строки, скругленные ячейки, обновленные стили для ховера и футера) — это отлично подходит для таблиц внутри Frame или CardFrame.

Миграция:

Для существующих таблиц изменения не требуются. Используйте новый вариант там, где это необходимо:

Copy<Table variant="card">

20 марта 2026

Toggle Group

Компонент Toggle был переименован в ToggleGroupItem внутри toggle-group.tsx, чтобы избежать конфликта имен с отдельным экспортом Toggle.

Миграция:

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>