28.8K ·GitHub
Что это такое?
Headless UI — это набор полностью нестилизованных и при этом полностью доступных UI-компонентов, созданных командой Tailwind Labs так, чтобы они идеально сочетались с Tailwind CSS.
Headless UI — это набор полностью нестилизованных и при этом полностью доступных UI-компонентов, созданных командой Tailwind Labs так, чтобы они идеально сочетались с Tailwind CSS.Это для React, Vue или для обоих?Для обоих, через отдельные npm-пакеты: @headlessui/react для приложений на React и @headlessui/vue для приложений на Vue. Также публикуется третий пакет — @headlessui/tailwindcss.
Для обоих, через отдельные npm-пакеты: @headlessui/react для приложений на React и @headlessui/vue для приложений на Vue. Также публикуется третий пакет — @headlessui/tailwindcss.Как добавить его в свой проект?Установите пакет для своего фреймворка: npm install @headlessui/react@latest или npm install @headlessui/vue@latest. Полная документация находится на headlessui.com.
Установите пакет для своего фреймворка: npm install @headlessui/react@latest или npm install @headlessui/vue@latest. Полная документация находится на headlessui.com.Обязательно использовать вместе с ним Tailwind CSS?Компоненты созданы так, чтобы идеально сочетаться с Tailwind CSS. Поскольку они поставляются вообще без стилей, весь внешний вид вы описываете сами — Tailwind просто напрашивается в пару.
Компоненты созданы так, чтобы идеально сочетаться с Tailwind CSS. Поскольку они поставляются вообще без стилей, весь внешний вид вы описываете сами — Tailwind просто напрашивается в пару.Можно ли безопасно использовать insiders-сборку в продакшене?Стабильными считайте релизные версии; insiders-сборка следует за последним коммитом в ветке main, не придерживается semver, и её API могут измениться до официального релиза.
Стабильными считайте релизные версии; insiders-сборка следует за последним коммитом в ветке main, не придерживается semver, и её API могут измениться до официального релиза.Придётся ли самому заниматься поддержкой клавиатуры и ARIA-атрибутами?Нет — доступность здесь главная фишка: компоненты полностью доступны сразу из коробки, так что фокус и работа с клавиатурой уже обработаны, а вам остаётся только оформление.
Нет — доступность здесь главная фишка: компоненты полностью доступны сразу из коробки, так что фокус и работа с клавиатурой уже обработаны, а вам остаётся только оформление.Зачем выбирать нестилизованные компоненты вместо готового UI-кита?Вы сохраняете полный контроль над разметкой и внешним видом — оформляете всё своими классами Tailwind — а библиотека по-прежнему берёт на себя доступное поведение.
Вы сохраняете полный контроль над разметкой и внешним видом — оформляете всё своими классами Tailwind — а библиотека по-прежнему берёт на себя доступное поведение.Это устоявшийся проект или новый эксперимент?Проект вполне устоявшийся: он размещён в GitHub-организации tailwindlabs, развивается с 2020 года и собрал около 28 800 звёзд.
Проект вполне устоявшийся: он размещён в GitHub-организации tailwindlabs, развивается с 2020 года и собрал около 28 800 звёзд.What are similar projects?arc-library, base-ui, chakra-ui, bootstrap-vue, Semantic-UI-React, primitives, vant, shoelace
arc-library, base-ui, chakra-ui, bootstrap-vue, Semantic-UI-React, primitives, vant, shoelaceWhich topics is it in?a11y, components, ui-library, accessibility, tailwindcss, component-library, vue, ui-components, customization, ui, web-development, react
a11y, components, ui-library, accessibility, tailwindcss, component-library, vue, ui-components, customization, ui, web-development, react