Перейти до вмісту

Бібліотека безголових компонентів React без стилів, що забезпечують повний контроль над розміткою та CSS, а також високий рівень доступності за замовчуванням і поведінку, сумісну з ARIA.

Компоненти створені як компоновані примітиви з API на основі слотів. Вони підтримують tree shaking і TypeScript та працюють із будь-яким підходом до стилізації, зокрема Tailwind, CSS Modules, CSS-in-JS або звичайним CSS.

Бібліотека охоплює широкий спектр шаблонів та примітивів UI: Accordion, Alert Dialog, Avatar, Checkbox і Checkbox Group, Collapsible, Context Menu, Dialog, Field і Fieldset, Form, Input, Menu і Menubar, Meter, Navigation Menu, Number Field, Popover, Progress, Radio, Scroll Area, Select, Separator, Slider, Switch, Tabs, Toast, Toggle і Toggle Group, Toolbar, Tooltip, а також утиліти Direction Provider і useRender.

У спливних компонентах використовуються React Portals. Щоб уникнути конфліктів z-index і показувати накладені елементи поверх вмісту сторінки, рекомендується створити ізольований контекст накладання. Документація містить приклади збирання компонентів, поєднання їхніх частин та інтеграції з різними системами стилізації.

Бібліотека має відкритий вихідний код і ліцензію MIT, регулярно оновлюється та містить рекомендації з акцентом на доступність. Сторінки документації доступні у форматі Markdown і містять ресурси, зручні для LLM, щоб спростити вивчення коду та інтеграцію.

Можливості

  • Безголові компоненти React без стилів
  • Доступність за замовчуванням і поведінка, сумісна з ARIA
  • Компонований API на основі слотів
  • Збірки ESM із підтримкою tree shaking
  • Типи TypeScript
  • Працює з Tailwind, CSS Modules, CSS-in-JS або звичайним CSS
  • React Portals для спливних елементів і накладень
  • Рекомендації щодо ізоляції контексту накладання для уникнення проблем із z-index
  • Варіанти використання з керуванням станом і без нього
  • Широкий вибір компонентів (меню, діалогові вікна, спливні елементи, вкладки, списки вибору, повзунки тощо)
  • Сумісність із SSR і незалежність від фреймворків
  • Відкритий вихідний код, ліцензія MIT
  • Документація доступна у форматі Markdown із помічниками на основі LLM

Пов’язані матеріали

ArkUI

Це відкрите UI-рішення дає змогу створювати складні дизайн-системи за допомогою компонентів, які можна налаштувати відповідно до різних візуальних стилів і стандартів доступності.

MaterialUI

Цей продукт пропонує надійний набір інструментів для створення інтерфейсів користувача на React, зосереджуючись на гнучкості та дотриманні стандартів дизайну.

Radix Vue

Неофіційна версія Radix для Vue з налаштовуваними й доступними компонентами інтерфейсу для створення дизайн-систем.

PrimeVue

Багатий набір відкритих UI-компонентів для легкої та ефективної розробки застосунків на Vue.js.

Radix Primitives

Не стилізовані, доступні примітиви React із відкритим кодом для високоякісних вебзастосунків і дизайн-систем.

Vaul

Неоформлений компонент висувної панелі для зручної інтеграції в застосунки React, що покращує взаємодію на мобільних пристроях.

ChakraUI

Швидко й ефективно створюйте доступні вебзастосунки за допомогою набору основних компонентів, які легко використовувати та гнучко налаштовувати.

cmdk

Цей компонент — комплексне рішення для меню команд у React, що поєднує зручність для користувачів із гнучкістю для розробників.