chapter 4 started

pages/lesson-1/_meta.en.json

@@ -1,4 +1,6 @@
 {
   "chapter-1": "Chapter 1",
-  "chapter-2": "Chapter 2"
+  "chapter-2": "Chapter 2",
+  "chapter-3": "Chapter 3",
+  "chapter-4": "Chapter 4"
 }

pages/lesson-1/_meta.ru.json

@@ -1,5 +1,6 @@
 {
   "chapter-1": "1. Создание и настройка проекта",
   "chapter-2": "2. Storybook и css переменные",
-  "chapter-3": "3. Полиморфные компоненты"
+  "chapter-3": "3. Полиморфные компоненты",
+  "chapter-4": "4. Headless компоненты, универсальный доступ, Radix UI"
 }

pages/lesson-1/chapter-4.en.mdx

@@ -0,0 +1 @@
+# Under construction

pages/lesson-1/chapter-4.ru.mdx

@@ -0,0 +1,21 @@
+import { Callout } from 'nextra/components'
+
+# Headless компоненты, универсальный доступ, Radix UI
+
+## Headless компоненты
+
+### Теория
+
+Headless компоненты - это компоненты, которые не имеют своего визуального представления,
+но предоставляют нам API для управления внутренним состоянием компонента,
+а также поддерживают универсальный доступ из коробки (взаимодействие с помощью клавиатуры, поддержка screen reader'ов и т.д.).
+Такие компоненты удобно использовать когда у нас есть готовый дизайн и мы не хотим писать всю логику с нуля.
+
+#### Популярные библиотеки headless компонентов
+
+- [Radix UI](https://radix-ui.com/)
+- [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, потому что она предоставляет все нужные нам компоненты и с ней просто взаимодействовать.