Продуктовые и «безголовые» системы: Polaris, Primer, Radix, shadcn/ui, Tailwind

Безголовые компоненты — поведение и доступность детали интерфейса без оформления, как в Radix. Polaris, Primer, shadcn/ui и Tailwind берут на себя другие слои.

Деталь интерфейса, разрезанная на слои

Возьмите модальное окно. Что нужно, чтобы оно было хорошим?

1. Структура: разметка окна, заголовок, кнопка закрытия.
2. Поведение: открывается по нажатию, закрывается по Esc и по щелчку за краем, удерживает фокус внутри, возвращает его на кнопку.
3. Доступность: диктор объявляет окно, а фон не читается.
4. Вид: цвета, скругления, тень, анимация.

Новичок думает про четвёртое, а трудности лежат в первых трёх: их и вручную-то правильно сделать нелегко. Поэтому системы различаются тем, сколько слоёв они берут на себя. Выберите подход на схеме и посмотрите, что остаётся вам.

Обычный HTML (dialog, details)Безстилевые компоненты (Radix, React Aria, Headless UI)Копируемый код (shadcn/ui)Готовая система (Polaris, Primer, Material UI)Утилиты (Tailwind CSS)

Структура	Поведение	Доступность	Вид
готово	готово	готово	пишете вы

Обычный HTML (dialog, details). Браузер знает, как открыть и закрыть, как ловить фокус и что сказать диктору. Вид пишете вы.

Цена выбора. Поведение ограничено тем, что умеет браузер.

Проверьте себя: какие четыре слоя у детали интерфейса?

Структура, поведение, доступность и вид.

Продуктовые системы: Polaris и Primer

Polaris это система Shopify для интерфейса администратора магазина, а Primer система GitHub. Обе сделаны для собственных продуктов компании, и в этом их сила и слабость.

Сила: они подробно отвечают на вопрос «как строить рабочие экраны»: списки и подробности, таблицы, формы настроек. Примеры хорошо видны и живы: ими пользуются миллионы людей.

Слабость: вне своей платформы они переносятся плохо. Polaris теперь опирается на веб-компоненты для приложений, встраиваемых в панель Shopify. А Primer у GitHub два лица: Product UI для интерфейса самого сервиса, и Brand UI вместе с Brand toolkit для рекламных страниц. Это поучительное разделение: у «интерфейса, в котором работают» и «страницы, которая убеждает» разные требования к плотности и воздуху, и системы для них должны быть разными или хотя бы с разными режимами. Токены Primer называет «примитивами»: цвет, отступы и типографика.

Shopify PolarisPrimer (GitHub)Radix Primitivesshadcn/uiTailwind CSS как система

Shopify

Идея

Интерфейс администратора магазина: понятные операции над товарами, заказами и клиентами.

Токены

Основы и токены для приложений Shopify; система переехала на веб-компоненты.

Компоненты

Веб-компоненты для приложений, которые встраиваются в панель администратора Shopify.

Доступность

Доступность описана вместе с компонентами.

Открытость

Документация публична (shopify.dev/docs/api/polaris).

Что взять себе

Рабочие экраны администрирования: «список и подробности».

Когда не брать

Вне Shopify: система сделана как часть платформы и вне её плохо переносится.

Открыть документацию системы (откроется сайт системы)

Безголовые: Radix и родственники

Radix Primitives (проект компании WorkOS) даёт сложные поведения без единой строчки оформления: аккордеон, диалог, выпадающее меню, вкладки и другие, каждый отдельным пакетом. Всё построено по рекомендациям WAI-ARIA, с управлением с клавиатуры и переносом фокуса, проверенными с экранными дикторами. Вид вы пишете сами: хоть на CSS, хоть на Tailwind.

Родственники у Radix: React Aria от Adobe и Headless UI. Идея одна: самую трудную и самую скучную часть (доступность) сделать один раз и бесплатно для всех, а оформление оставить авторам.

Но до библиотеки подумайте о платформе. Браузер сам умеет немало: details раскрывает блок, dialog держит фокус и закрывается по Esc, атрибут popover даёт всплывающий слой. Всё это уже «безголовые» компоненты, встроенные в язык. Если задача решается ими, библиотека не нужна.

shadcn/ui: код, которым вы владеете

shadcn/ui называет себя «не библиотекой»: компоненты не ставятся пакетом, а копируются командой прямо в ваш проект как исходный код. Вы получаете и поведение, и начальный вид, и можете менять что угодно, не ожидая релиза чужой версии. Платите вы тем, что обновления и исправления вносите сами. Это выбор владельца: «мой код, моя забота». Исходники открыты.

Tailwind: система внутри разметки

Tailwind CSS переворачивает привычный порядок. Вместо готового компонента вы получаете словарь коротких классов, а они построены на токенах темы: p-4 это отступ из шкалы отступов, text-lg это размер из шкалы шрифтов, bg-blue-600 это цвет из палитры. В Tailwind тема описывается переменными CSS, и каждая переменная порождает классы-утилиты.

Главное свойство такой системы: по умолчанию «17 пикселей» не написать, берётся значение из словаря. Запасной выход есть (значение в квадратных скобках, p-[17px]), но он бросается в глаза в разметке и считается исключением. Это и есть дисциплина дизайн-системы, встроенная в сам способ писать. Цена: разметка обрастает классами, а за доступность отвечаете вы. Вы уже знаете токены; в этом уроке вы сделаете маленький словарь утилит и увидите, как это устроено изнутри.

Проверьте себя: чем shadcn/ui отличается от библиотеки?

Код компонентов копируется в ваш проект и становится вашим: свобода менять, но и чинить придётся самому.

Как выбрать

Грубое правило:

• Нужно быстро и без характера (внутренний сервис): готовая система.
• Нужен свой характер и сложные виджеты: безголовые компоненты или shadcn/ui.
• Нужен только вид по правилам: утилиты.
• Простой сайт без сложных виджетов: обычный HTML, свои токены и компоненты.

Для вашего проекта почти наверняка последний вариант. Но знать остальные полезно, потому что именно на них собраны сайты и конструкторы, с которыми вы встретитесь в частях про ИИ.

Практика

Постройте мини-Tailwind из токенов вашего проекта: восемь утилитных классов и страница, собранная только из них. Заметьте, как правило вида переезжает из одного места («так выглядит карточка») в слова («у неё отступ 4, скругление и акцент»).

Что было не так с 2014 годом

В 2014 году ограниченного словаря не было: каждый писал размеры и цвета как хотел, и страницы расходились. Позже именно ограничения («можно только эти значения») оказались самым ценным в системах, и Tailwind, shadcn/ui и Radix построены на этом открытии.