Vega UI

Platform

Real HTML underneath.

A dialog is a <dialog>, a popover uses the popover attribute, a field is an input with native validation. The browser handles focus, Escape, the top layer and autofill. Vega UI adds the styles and the composition.How it works

DialogPopoverForm

Live DOM<dialog>enters the DOM when opened

Composable

One slider, any look.

Components come as parts: a track, a range, a thumb and its native input. Put your own content inside, restyle them with CSS variables, and keep the keyboard, ARIA and form value the library already gives you.Styling

Parts

Point at a line to find the part.

Control Center.sound

Sound

Music.scrubber

Midnight DriveNeon Coast

Settings.steps

Preferred reading size

Home.home

Heat to21°

Keyboard

Every key is tested.

The keyboard tables in the docs are generated from specs, and a real browser checks every row: Playwright presses the key and looks where the focus and the active option land. 35 components are covered.Listbox accessibility

Focus the list and press any key from the table.

Key	Action
`Tab`	Moves the focus to the list, which makes the selected option, or the first enabled one, active. The list is one tab stop.
`↓↑`	Makes the next or previous enabled option active, skipping disabled ones and stopping at the ends. The focus stays on the list.
`HomeEnd`	Makes the first or last enabled option active.
`Page DownPage Up`	Moves the active option 10 options down or up, stopping at the last or first enabled one.
`p`	Typeahead: a printable character makes the next option whose label starts with the typed text active; characters typed quickly add up. Turned off with `typeahead={false}`.
`EnterSpace`	Selects the active option. With `multiple`, toggles it and keeps the other selected options.

Accessibility

What a screen reader hears.

Labels, roles and states come from native elements, so assistive tech announces them without extra wiring. Focus a control or change it to see what the browser exposes.Switch accessibility

AnnouncementFocus any control.

World

One date, every calendar.

Values stay ISO 8601 strings, and the locale and calendar only change how a date is shown. Persian, Hebrew, Hijri and Japanese calendars plug in through @vega-ui/i18n, and right-to-left layouts mirror on their own.Internationalization

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

What the app stores

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

For AI

Docs your assistant can read.

Every page has a Markdown twin, and the whole documentation comes as plain text files for language models. Point your assistant at them and it writes Vega UI code from the same source you read.

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: https://vega-ui.github.io/ui/llms-full.txt ## Guides - [Getting started](https://vega-ui.github.io/ui/docs/getting-started/index.md): Install the packages, connect the styles and the theme, and render your first component.- [Styling](https://vega-ui.github.io/ui/docs/styling/index.md): This section documents the global styling model behind VegaUI. Read it before the Styling page of a component.- [Themes](https://vega-ui.github.io/ui/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](https://vega-ui.github.io/ui/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.

Templates

Screens, not snippets.

23 templates assemble whole product screens from the same components. Open one, copy the source and make it yours.All templates

Catalog

Everything a product needs.

62 components share the same tokens, the same parts model and the same keyboard rules. Sizes are JS and CSS after gzip.All components