Vega UI

Платформа

Внутри — настоящий HTML.

Диалог — это <dialog>, поповер — атрибут popover, поле — input с нативной валидацией. Фокус, Escape, top layer и автозаполнение берёт на себя браузер, а Vega UI добавляет стили и композицию.Как это устроено

ДиалогПоповерФорма

Живой DOM<dialog>появится в DOM при открытии

Композиция

Один слайдер, любой вид.

Компоненты собираются из частей: дорожка, заполнение, бегунок и его нативный input. Кладите внутрь своё, меняйте вид через CSS-переменные — клавиатура, ARIA и значение в форме останутся от библиотеки.Стилизация

Части

Наведите на строку, чтобы найти часть.

Пункт управления.sound

Звук

Музыка.scrubber

Midnight DriveNeon Coast

Настройки.steps

Удобный размер текста

Дом.home

Нагрев до21°

Клавиатура

Каждая клавиша проверена.

Таблицы клавиш в документации собираются из спецификаций, и каждую строку проверяет настоящий браузер: Playwright нажимает клавишу и смотрит, где оказались фокус и активный вариант. Так покрыто компонентов: 35.Доступность Listbox

Переведите фокус на список и нажмите любую клавишу из таблицы.

Клавиша	Действие
`Tab`	Переносит фокус на список, и активным становится выбранный вариант или первый доступный. Список — одна остановка табуляции.
`↓↑`	Делает активным следующий или предыдущий доступный вариант, пропуская отключённые и останавливаясь на краях. Фокус остаётся на списке.
`HomeEnd`	Делает активным первый или последний доступный вариант.
`Page DownPage Up`	Переносит активный вариант на 10 вариантов вниз или вверх, останавливаясь на последнем или первом доступном.
`p`	Поиск при наборе: печатный символ делает активным следующий вариант, чья подпись начинается с набранного текста; быстро набранные символы складываются. Отключается через `typeahead={false}`.
`EnterSpace`	Выбирает активный вариант. С `multiple` переключает его, сохраняя остальные выбранные варианты.

Доступность

Что слышит скринридер.

Подписи, роли и состояния берутся из нативных элементов, поэтому вспомогательные технологии объявляют их без лишней обвязки. Переведите фокус на элемент или измените его и посмотрите, что отдаёт браузер.Доступность Switch

ОбъявлениеПереведите фокус на любой элемент.

Мир

Одна дата, любой календарь.

Значение всегда хранится строкой ISO 8601, а локаль и календарь меняют только то, как дата показана. Персидский, еврейский, хиджри и японский календари подключаются через @vega-ui/i18n, а интерфейс справа налево зеркалится сам.Интернационализация

October 2026

SMTWTFS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

Что хранит приложение

value: 2026-10-23
locale: en-US
calendar: gregory
dir: ltr
Intl: October 23, 2026

Для AI

Документация, которую читает ассистент.

У каждой страницы есть версия в Markdown, а вся документация лежит текстовыми файлами для языковых моделей. Дайте их ассистенту, и он будет писать код на Vega UI по тому же источнику, что читаете вы.

llms.txt

# Vega UI > Composable, accessible React components on top of real dialogs, popovers and inputs. Themed with CSS tokens, in light and dark. Install with `pnpm add @vega-ui/react @vega-ui/theme-core @vega-ui/icons`. Every link below is the Markdown version of a docs page. The whole English documentation in one file: http://vega-ui.dev/llms-full.txt ## Guides - [Getting started](http://vega-ui.dev/docs/getting-started/index.md): Install the packages, connect the styles and the theme, and render your first component.- [Styling](http://vega-ui.dev/docs/styling/index.md): This section documents the global styling model behind VegaUI. Read it before the Styling page of a component.- [Themes](http://vega-ui.dev/docs/styling/themes/index.md): VegaUI ships a separate theme layer in @vega-ui/theme-core. The package entrypoint is packages/theme/src/index.css, which imports both light.css and dark.css.- [Tokens](http://vega-ui.dev/docs/styling/tokens/index.md): Global tokens live in @vega-ui/tokens-core: raw scales for color, type, radius, spacing, motion, shadow and layering that the themes build on.

Шаблоны

Экраны, а не сниппеты.

Шаблонов: 23. Каждый собирает целый экран продукта из тех же компонентов. Откройте любой, скопируйте исходник и сделайте своим.Все шаблоны

Каталог

Всё, что нужно продукту.

Компонентов — 62, и у всех одни токены, одна модель частей и одни правила клавиатуры. Размеры — JS и CSS после gzip.Все компоненты