# Headless компоненты, универсальный доступ, Radix UI

## Headless компоненты

### Теория

Headless компоненты - это компоненты, которые не имеют своего визуального представления, но
предоставляют нам API для управления внутренним состоянием компонента, а также поддерживают
универсальный доступ из коробки (взаимодействие с помощью клавиатуры, поддержка screen reader'ов и
т.д.). Такие компоненты удобно использовать когда у нас есть готовый дизайн и мы не хотим писать всю
логику с нуля.

#### Популярные библиотеки headless компонентов

- [Radix UI](https://www.radix-ui.com/primitives)
- [Headless UI](https://headlessui.dev/)
- [React Aria](https://react-spectrum.adobe.com/react-aria/index.html)
- [Base UI от MUI (beta)](https://mui.com/base-ui/getting-started/overview/)

Мы будем использовать Radix UI Primitives (не Themes!), потому что она предоставляет все нужные нам
компоненты и с ней просто взаимодействовать.

### Материалы для изучения:

#### Видео на тему ui библиотек

- [So You Think You Can Build A Dropdown? - Pedro Duarte](https://youtu.be/pcMYcjtWwVI)
- [Сравнение MUI, Tailwind, Bootstrap](https://youtu.be/CQuTF-bkOgc)
- [Radix overview](https://www.youtube.com/watch?v=EUrbuROiuaA)
- [Shadcn UI - библиотека компонентов на основе Radix UI и TailwindCss](https://www.youtube.com/watch?v=7MKEOfSP2s4)

#### Откуда начать?

##### Библиотека компонентов it-incubator:

Построена на базе Radix UI и Headless UI, для стилизации используется SASS.

- [Github](https://github.com/it-incubator/incubator-libs/tree/dev/packages/ui-kit/src/components)
- [Storybook](https://ui-kit.it-incubator.io/?path=/docs/getting-started-installation--docs)

Многие вопросы отпадут если просто посмотреть код.

##### Shadcn UI

Компоненты которые можно копировать и вставлять в свой проект.

Конечно же есть нюансы, но в целом это хороший способ понять как работает Radix UI.

- [Github](https://github.com/shadcn/ui)
- [Docs](https://ui.shadcn.com/)