# 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.
- [CSS variables](http://vega-ui.dev/docs/styling/css-variables/index.md): VegaUI styling is built as a layered CSS variable system.
- [Forms and validation](http://vega-ui.dev/docs/forms/index.md): Vega UI fields are native form controls, so a plain <form> submits them, validates them and resets them without extra state.
- [Next.js and SSR](http://vega-ui.dev/docs/nextjs/index.md): Vega UI renders on the server and hydrates on the client like any React library; a Next.js App Router app needs the right CSS order, client boundaries for composition, and stable dates.
- [Dates and calendar systems](http://vega-ui.dev/docs/i18n/index.md): @vega-ui/i18n provides the framework-agnostic locale and calendar-system layer used by Calendar, DayPicker, MonthPicker, YearPicker, DateField, DateTimeField, and DateRangeField.
- [Architecture](http://vega-ui.dev/docs/architecture/index.md): VegaUI is a pnpm workspace orchestrated with Turborepo. The important architectural idea is not just the folder tree, but the dependency flow across packages.
- [Glossary](http://vega-ui.dev/docs/glossary/index.md): This glossary defines common terms used across VegaUI documentation so component pages can stay concise and consistent.
- [Component families](http://vega-ui.dev/docs/families/index.md): This section groups VegaUI components by product decision area rather than by export name. Use these pages when the first question is "what kind of control or pattern do I need?" instead of "how do I use component X?".
- [Selection controls](http://vega-ui.dev/docs/families/selection-controls/index.md): Use this page when the user must choose, toggle, or combine values and the first decision is about interaction shape rather than API details.
- [Text inputs](http://vega-ui.dev/docs/families/text-inputs/index.md): Use this page when the user types content and the main decision is whether the field should stay generic, become multiline, or adopt a specialized entry contract.
- [Date inputs](http://vega-ui.dev/docs/families/date-inputs/index.md): Use this page when the product stores dates, ranges, or timestamps and the main choice is between field-led entry and calendar-led picking.
- [Overlays](http://vega-ui.dev/docs/families/overlays/index.md): Use this page when content opens above the current page and the main choice is about interruption level, anchor behavior, and panel shape.
- [Data displays](http://vega-ui.dev/docs/families/data-displays/index.md): Use this page when the UI is showing structured information and the first decision is whether the content is static, keyboard-navigable, selectable, picker-like, or paginated.
- [Status and feedback](http://vega-ui.dev/docs/families/status-feedback/index.md): Use this page when the UI should communicate state, loading, progress, measurement, or identity display and the main choice is between compact metadata, feedback messaging, or quantitative indicators.
- [Layout primitives](http://vega-ui.dev/docs/families/layout-primitives/index.md): Use this page when the UI mainly needs structure, grouping, spacing, or low-level composition rather than a specialized product interaction.

## Components: Actions

- [Accordion](http://vega-ui.dev/components/accordion/index.md): Accordion is a compound component for grouped expandable sections that share one root state model and item-level parts for headers, triggers, icons, and content.
- [Accordion API](http://vega-ui.dev/components/accordion/api/index.md): Props, types and defaults of every Accordion part.
- [Accordion Styling](http://vega-ui.dev/components/accordion/styling/index.md): How to style Accordion with tokens, classes and CSS variables.
- [Accordion Accessibility](http://vega-ui.dev/components/accordion/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Accordion.
- [Accordion Guides](http://vega-ui.dev/components/accordion/guides/index.md): Patterns, comparisons and troubleshooting for Accordion.
- [Button](http://vega-ui.dev/components/button/index.md): Button is the primary action component built on top of ButtonBase, with size and full-width behavior for common product actions.
- [Button API](http://vega-ui.dev/components/button/api/index.md): Props, types and defaults of every Button part.
- [Button Styling](http://vega-ui.dev/components/button/styling/index.md): How to style Button with tokens, classes and CSS variables.
- [Button Accessibility](http://vega-ui.dev/components/button/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Button.
- [Button Guides](http://vega-ui.dev/components/button/guides/index.md): Patterns, comparisons and troubleshooting for Button.
- [ButtonBase](http://vega-ui.dev/components/button-base/index.md): ButtonBase is the low-level action primitive behind Button and IconButton.
- [ButtonBase API](http://vega-ui.dev/components/button-base/api/index.md): Props, types and defaults of every ButtonBase part.
- [ButtonBase Styling](http://vega-ui.dev/components/button-base/styling/index.md): How to style ButtonBase with tokens, classes and CSS variables.
- [ButtonBase Accessibility](http://vega-ui.dev/components/button-base/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of ButtonBase.
- [ButtonBase Guides](http://vega-ui.dev/components/button-base/guides/index.md): Patterns, comparisons and troubleshooting for ButtonBase.
- [Collapsible](http://vega-ui.dev/components/collapsible/index.md): Collapsible is a compound component for one expandable region with a trigger and content surface.
- [Collapsible API](http://vega-ui.dev/components/collapsible/api/index.md): Props, types and defaults of every Collapsible part.
- [Collapsible Styling](http://vega-ui.dev/components/collapsible/styling/index.md): How to style Collapsible with tokens, classes and CSS variables.
- [Collapsible Accessibility](http://vega-ui.dev/components/collapsible/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Collapsible.
- [Collapsible Guides](http://vega-ui.dev/components/collapsible/guides/index.md): Patterns, comparisons and troubleshooting for Collapsible.
- [IconButton](http://vega-ui.dev/components/icon-button/index.md): IconButton is the icon-only action variant built on the same button foundation as Button.
- [IconButton API](http://vega-ui.dev/components/icon-button/api/index.md): Props, types and defaults of every IconButton part.
- [IconButton Styling](http://vega-ui.dev/components/icon-button/styling/index.md): How to style IconButton with tokens, classes and CSS variables.
- [IconButton Accessibility](http://vega-ui.dev/components/icon-button/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of IconButton.
- [IconButton Guides](http://vega-ui.dev/components/icon-button/guides/index.md): Patterns, comparisons and troubleshooting for IconButton.

## Components: Form

- [Checkbox](http://vega-ui.dev/components/checkbox/index.md): Checkbox is a compound component for independent selectable options, with optional native form participation, indicator rendering, and indeterminate state support.
- [Checkbox API](http://vega-ui.dev/components/checkbox/api/index.md): Props, types and defaults of every Checkbox part.
- [Checkbox Styling](http://vega-ui.dev/components/checkbox/styling/index.md): How to style Checkbox with tokens, classes and CSS variables.
- [Checkbox Accessibility](http://vega-ui.dev/components/checkbox/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Checkbox.
- [Checkbox Guides](http://vega-ui.dev/components/checkbox/guides/index.md): Patterns, comparisons and troubleshooting for Checkbox.
- [CheckboxCard](http://vega-ui.dev/components/checkbox-card/index.md): CheckboxCard combines checkbox behavior with a richer card surface for plans, templates, and selectable settings tiles.
- [CheckboxCard API](http://vega-ui.dev/components/checkbox-card/api/index.md): Props, types and defaults of every CheckboxCard part.
- [CheckboxCard Styling](http://vega-ui.dev/components/checkbox-card/styling/index.md): How to style CheckboxCard with tokens, classes and CSS variables.
- [CheckboxCard Accessibility](http://vega-ui.dev/components/checkbox-card/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of CheckboxCard.
- [CheckboxCard Guides](http://vega-ui.dev/components/checkbox-card/guides/index.md): Patterns, comparisons and troubleshooting for CheckboxCard.
- [DateField](http://vega-ui.dev/components/date-field/index.md): DateField is a compound component for single-date entry that combines typed input, optional calendar selection, and field-level constraints in one control.
- [DateField API](http://vega-ui.dev/components/date-field/api/index.md): Props, types and defaults of every DateField part.
- [DateField Styling](http://vega-ui.dev/components/date-field/styling/index.md): How to style DateField with tokens, classes and CSS variables.
- [DateField Accessibility](http://vega-ui.dev/components/date-field/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of DateField.
- [DateField Guides](http://vega-ui.dev/components/date-field/guides/index.md): Patterns, comparisons and troubleshooting for DateField.
- [DateRangeField](http://vega-ui.dev/components/date-range-field/index.md): DateRangeField is a compound component for connected start and end date entry that combines typed range input, optional calendar selection, and shared range validation.
- [DateRangeField API](http://vega-ui.dev/components/date-range-field/api/index.md): Props, types and defaults of every DateRangeField part.
- [DateRangeField Styling](http://vega-ui.dev/components/date-range-field/styling/index.md): How to style DateRangeField with tokens, classes and CSS variables.
- [DateRangeField Accessibility](http://vega-ui.dev/components/date-range-field/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of DateRangeField.
- [DateRangeField Guides](http://vega-ui.dev/components/date-range-field/guides/index.md): Patterns, comparisons and troubleshooting for DateRangeField.
- [DateTimeField](http://vega-ui.dev/components/date-time-field/index.md): DateTimeField is a compound component for combined date and time entry that coordinates typed input, optional calendar selection, and timestamp rules in one field.
- [DateTimeField API](http://vega-ui.dev/components/date-time-field/api/index.md): Props, types and defaults of every DateTimeField part.
- [DateTimeField Styling](http://vega-ui.dev/components/date-time-field/styling/index.md): How to style DateTimeField with tokens, classes and CSS variables.
- [DateTimeField Accessibility](http://vega-ui.dev/components/date-time-field/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of DateTimeField.
- [DateTimeField Guides](http://vega-ui.dev/components/date-time-field/guides/index.md): Patterns, comparisons and troubleshooting for DateTimeField.
- [Fieldset](http://vega-ui.dev/components/fieldset/index.md): Fieldset groups related controls under one semantic boundary.
- [Fieldset API](http://vega-ui.dev/components/fieldset/api/index.md): Props, types and defaults of every Fieldset part.
- [Fieldset Styling](http://vega-ui.dev/components/fieldset/styling/index.md): How to style Fieldset with tokens, classes and CSS variables.
- [Fieldset Accessibility](http://vega-ui.dev/components/fieldset/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Fieldset.
- [Fieldset Guides](http://vega-ui.dev/components/fieldset/guides/index.md): Patterns, comparisons and troubleshooting for Fieldset.
- [HelperText](http://vega-ui.dev/components/helper-text/index.md): HelperText renders supporting field copy such as hints, usage guidance, and validation-adjacent messages.
- [HelperText API](http://vega-ui.dev/components/helper-text/api/index.md): Props, types and defaults of every HelperText part.
- [HelperText Styling](http://vega-ui.dev/components/helper-text/styling/index.md): How to style HelperText with tokens, classes and CSS variables.
- [HelperText Accessibility](http://vega-ui.dev/components/helper-text/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of HelperText.
- [HelperText Guides](http://vega-ui.dev/components/helper-text/guides/index.md): Patterns, comparisons and troubleshooting for HelperText.
- [Label](http://vega-ui.dev/components/label/index.md): Label is the semantic label primitive for form fields.
- [Label API](http://vega-ui.dev/components/label/api/index.md): Props, types and defaults of every Label part.
- [Label Styling](http://vega-ui.dev/components/label/styling/index.md): How to style Label with tokens, classes and CSS variables.
- [Label Accessibility](http://vega-ui.dev/components/label/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Label.
- [Label Guides](http://vega-ui.dev/components/label/guides/index.md): Patterns, comparisons and troubleshooting for Label.
- [Listbox](http://vega-ui.dev/components/listbox/index.md): Listbox is an always visible list to choose one or several options from, like a native select with size.
- [Listbox API](http://vega-ui.dev/components/listbox/api/index.md): Props, types and defaults of every Listbox part.
- [Listbox Styling](http://vega-ui.dev/components/listbox/styling/index.md): How to style Listbox with tokens, classes and CSS variables.
- [Listbox Accessibility](http://vega-ui.dev/components/listbox/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Listbox.
- [Listbox Guides](http://vega-ui.dev/components/listbox/guides/index.md): Patterns, comparisons and troubleshooting for Listbox.
- [NumberField](http://vega-ui.dev/components/number-field/index.md): NumberField is a compound component for numeric entry with optional stepper buttons, bounds, masking, and wheel or keyboard stepping.
- [NumberField API](http://vega-ui.dev/components/number-field/api/index.md): Props, types and defaults of every NumberField part.
- [NumberField Styling](http://vega-ui.dev/components/number-field/styling/index.md): How to style NumberField with tokens, classes and CSS variables.
- [NumberField Accessibility](http://vega-ui.dev/components/number-field/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of NumberField.
- [NumberField Guides](http://vega-ui.dev/components/number-field/guides/index.md): Patterns, comparisons and troubleshooting for NumberField.
- [Option](http://vega-ui.dev/components/option/index.md): Option is the presentational selectable-row primitive reused by list-like controls.
- [Option API](http://vega-ui.dev/components/option/api/index.md): Props, types and defaults of every Option part.
- [Option Styling](http://vega-ui.dev/components/option/styling/index.md): How to style Option with tokens, classes and CSS variables.
- [Option Accessibility](http://vega-ui.dev/components/option/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Option.
- [Option Guides](http://vega-ui.dev/components/option/guides/index.md): Patterns, comparisons and troubleshooting for Option.
- [PasswordField](http://vega-ui.dev/components/password-field/index.md): PasswordField is a compound component built on TextField.
- [PasswordField API](http://vega-ui.dev/components/password-field/api/index.md): Props, types and defaults of every PasswordField part.
- [PasswordField Styling](http://vega-ui.dev/components/password-field/styling/index.md): How to style PasswordField with tokens, classes and CSS variables.
- [PasswordField Accessibility](http://vega-ui.dev/components/password-field/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of PasswordField.
- [PasswordField Guides](http://vega-ui.dev/components/password-field/guides/index.md): Patterns, comparisons and troubleshooting for PasswordField.
- [PhoneField](http://vega-ui.dev/components/phone-field/index.md): PhoneField is a compound component that combines a masked phone input with a nested country-code Select.
- [PhoneField API](http://vega-ui.dev/components/phone-field/api/index.md): Props, types and defaults of every PhoneField part.
- [PhoneField Styling](http://vega-ui.dev/components/phone-field/styling/index.md): How to style PhoneField with tokens, classes and CSS variables.
- [PhoneField Accessibility](http://vega-ui.dev/components/phone-field/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of PhoneField.
- [PhoneField Guides](http://vega-ui.dev/components/phone-field/guides/index.md): Patterns, comparisons and troubleshooting for PhoneField.
- [PinField](http://vega-ui.dev/components/pin-field/index.md): PinField is a compound component for fixed-length codes such as OTPs and PINs.
- [PinField API](http://vega-ui.dev/components/pin-field/api/index.md): Props, types and defaults of every PinField part.
- [PinField Styling](http://vega-ui.dev/components/pin-field/styling/index.md): How to style PinField with tokens, classes and CSS variables.
- [PinField Accessibility](http://vega-ui.dev/components/pin-field/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of PinField.
- [PinField Guides](http://vega-ui.dev/components/pin-field/guides/index.md): Patterns, comparisons and troubleshooting for PinField.
- [Radio](http://vega-ui.dev/components/radio/index.md): Radio is the single-choice selection control for mutually exclusive options that share the same name.
- [Radio API](http://vega-ui.dev/components/radio/api/index.md): Props, types and defaults of every Radio part.
- [Radio Styling](http://vega-ui.dev/components/radio/styling/index.md): How to style Radio with tokens, classes and CSS variables.
- [Radio Accessibility](http://vega-ui.dev/components/radio/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Radio.
- [Radio Guides](http://vega-ui.dev/components/radio/guides/index.md): Patterns, comparisons and troubleshooting for Radio.
- [SegmentedControl](http://vega-ui.dev/components/segmented-control/index.md): SegmentedControl is a compound component for short, always-visible exclusive option sets, with item-level native radio inputs and an animated selected-state indicator.
- [SegmentedControl API](http://vega-ui.dev/components/segmented-control/api/index.md): Props, types and defaults of every SegmentedControl part.
- [SegmentedControl Styling](http://vega-ui.dev/components/segmented-control/styling/index.md): How to style SegmentedControl with tokens, classes and CSS variables.
- [SegmentedControl Accessibility](http://vega-ui.dev/components/segmented-control/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of SegmentedControl.
- [SegmentedControl Guides](http://vega-ui.dev/components/segmented-control/guides/index.md): Patterns, comparisons and troubleshooting for SegmentedControl.
- [Select](http://vega-ui.dev/components/select/index.md): Select is a compound component built from a root state container plus exported child parts for trigger, value, options, and native form participation.
- [Select API](http://vega-ui.dev/components/select/api/index.md): Props, types and defaults of every Select part.
- [Select Styling](http://vega-ui.dev/components/select/styling/index.md): How to style Select with tokens, classes and CSS variables.
- [Select Accessibility](http://vega-ui.dev/components/select/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Select.
- [Select Guides](http://vega-ui.dev/components/select/guides/index.md): Patterns, comparisons and troubleshooting for Select.
- [Slider](http://vega-ui.dev/components/slider/index.md): Slider is a compound component for selecting one or several numbers from a bounded range.
- [Slider API](http://vega-ui.dev/components/slider/api/index.md): Props, types and defaults of every Slider part.
- [Slider Styling](http://vega-ui.dev/components/slider/styling/index.md): How to style Slider with tokens, classes and CSS variables.
- [Slider Accessibility](http://vega-ui.dev/components/slider/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Slider.
- [Slider Guides](http://vega-ui.dev/components/slider/guides/index.md): Patterns, comparisons and troubleshooting for Slider.
- [Switch](http://vega-ui.dev/components/switch/index.md): Switch is a compound component for immediate binary settings, with a native input for semantics and state and an indicator for the visible track and thumb.
- [Switch API](http://vega-ui.dev/components/switch/api/index.md): Props, types and defaults of every Switch part.
- [Switch Styling](http://vega-ui.dev/components/switch/styling/index.md): How to style Switch with tokens, classes and CSS variables.
- [Switch Accessibility](http://vega-ui.dev/components/switch/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Switch.
- [Switch Guides](http://vega-ui.dev/components/switch/guides/index.md): Patterns, comparisons and troubleshooting for Switch.
- [TextArea](http://vega-ui.dev/components/text-area/index.md): TextArea is the multiline text input for longer free-form content.
- [TextArea API](http://vega-ui.dev/components/text-area/api/index.md): Props, types and defaults of every TextArea part.
- [TextArea Styling](http://vega-ui.dev/components/text-area/styling/index.md): How to style TextArea with tokens, classes and CSS variables.
- [TextArea Accessibility](http://vega-ui.dev/components/text-area/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of TextArea.
- [TextArea Guides](http://vega-ui.dev/components/text-area/guides/index.md): Patterns, comparisons and troubleshooting for TextArea.
- [TextField](http://vega-ui.dev/components/text-field/index.md): TextField is a compound component for single-line text entry.
- [TextField API](http://vega-ui.dev/components/text-field/api/index.md): Props, types and defaults of every TextField part.
- [TextField Styling](http://vega-ui.dev/components/text-field/styling/index.md): How to style TextField with tokens, classes and CSS variables.
- [TextField Accessibility](http://vega-ui.dev/components/text-field/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of TextField.
- [TextField Guides](http://vega-ui.dev/components/text-field/guides/index.md): Patterns, comparisons and troubleshooting for TextField.
- [TimeField](http://vega-ui.dev/components/time-field/index.md): TimeField is a compound component for masked time entry.
- [TimeField API](http://vega-ui.dev/components/time-field/api/index.md): Props, types and defaults of every TimeField part.
- [TimeField Styling](http://vega-ui.dev/components/time-field/styling/index.md): How to style TimeField with tokens, classes and CSS variables.
- [TimeField Accessibility](http://vega-ui.dev/components/time-field/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of TimeField.
- [TimeField Guides](http://vega-ui.dev/components/time-field/guides/index.md): Patterns, comparisons and troubleshooting for TimeField.

## Components: Overlay

- [Dialog](http://vega-ui.dev/components/dialog/index.md): Dialog is a compound component for modal overlays with root, trigger, and content parts.
- [Dialog API](http://vega-ui.dev/components/dialog/api/index.md): Props, types and defaults of every Dialog part.
- [Dialog Styling](http://vega-ui.dev/components/dialog/styling/index.md): How to style Dialog with tokens, classes and CSS variables.
- [Dialog Accessibility](http://vega-ui.dev/components/dialog/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Dialog.
- [Dialog Guides](http://vega-ui.dev/components/dialog/guides/index.md): Patterns, comparisons and troubleshooting for Dialog.
- [Drawer](http://vega-ui.dev/components/drawer/index.md): Drawer is a compound component for edge-mounted overlays that preserve more page context than a centered modal.
- [Drawer API](http://vega-ui.dev/components/drawer/api/index.md): Props, types and defaults of every Drawer part.
- [Drawer Styling](http://vega-ui.dev/components/drawer/styling/index.md): How to style Drawer with tokens, classes and CSS variables.
- [Drawer Accessibility](http://vega-ui.dev/components/drawer/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Drawer.
- [Drawer Guides](http://vega-ui.dev/components/drawer/guides/index.md): Patterns, comparisons and troubleshooting for Drawer.
- [Popover](http://vega-ui.dev/components/popover/index.md): Popover is a compound component for non-modal floating content anchored to a trigger.
- [Popover API](http://vega-ui.dev/components/popover/api/index.md): Props, types and defaults of every Popover part.
- [Popover Styling](http://vega-ui.dev/components/popover/styling/index.md): How to style Popover with tokens, classes and CSS variables.
- [Popover Accessibility](http://vega-ui.dev/components/popover/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Popover.
- [Popover Guides](http://vega-ui.dev/components/popover/guides/index.md): Patterns, comparisons and troubleshooting for Popover.
- [Sheet](http://vega-ui.dev/components/sheet/index.md): Sheet is a compound component for panel-style overlays, usually bottom-mounted or mobile-first, with trigger, content, and handle parts.
- [Sheet API](http://vega-ui.dev/components/sheet/api/index.md): Props, types and defaults of every Sheet part.
- [Sheet Styling](http://vega-ui.dev/components/sheet/styling/index.md): How to style Sheet with tokens, classes and CSS variables.
- [Sheet Accessibility](http://vega-ui.dev/components/sheet/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Sheet.
- [Sheet Guides](http://vega-ui.dev/components/sheet/guides/index.md): Patterns, comparisons and troubleshooting for Sheet.
- [Tooltip](http://vega-ui.dev/components/tooltip/index.md): Tooltip is a compound component for lightweight floating descriptions attached to a trigger.
- [Tooltip API](http://vega-ui.dev/components/tooltip/api/index.md): Props, types and defaults of every Tooltip part.
- [Tooltip Styling](http://vega-ui.dev/components/tooltip/styling/index.md): How to style Tooltip with tokens, classes and CSS variables.
- [Tooltip Accessibility](http://vega-ui.dev/components/tooltip/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Tooltip.
- [Tooltip Guides](http://vega-ui.dev/components/tooltip/guides/index.md): Patterns, comparisons and troubleshooting for Tooltip.

## Components: Navigation

- [PageControl](http://vega-ui.dev/components/page-control/index.md): PageControl is a compound component for short page or step indicators, usually in carousels and onboarding flows.
- [PageControl API](http://vega-ui.dev/components/page-control/api/index.md): Props, types and defaults of every PageControl part.
- [PageControl Styling](http://vega-ui.dev/components/page-control/styling/index.md): How to style PageControl with tokens, classes and CSS variables.
- [PageControl Accessibility](http://vega-ui.dev/components/page-control/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of PageControl.
- [PageControl Guides](http://vega-ui.dev/components/page-control/guides/index.md): Patterns, comparisons and troubleshooting for PageControl.
- [Pagination](http://vega-ui.dev/components/pagination/index.md): Pagination is a compound component for paged navigation.
- [Pagination API](http://vega-ui.dev/components/pagination/api/index.md): Props, types and defaults of every Pagination part.
- [Pagination Styling](http://vega-ui.dev/components/pagination/styling/index.md): How to style Pagination with tokens, classes and CSS variables.
- [Pagination Accessibility](http://vega-ui.dev/components/pagination/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Pagination.
- [Pagination Guides](http://vega-ui.dev/components/pagination/guides/index.md): Patterns, comparisons and troubleshooting for Pagination.

## Components: Data

- [Calendar](http://vega-ui.dev/components/calendar/index.md): Calendar is an advanced interactive compound component for coordinated date selection across day, month, and year views.
- [Calendar API](http://vega-ui.dev/components/calendar/api/index.md): Props, types and defaults of every Calendar part.
- [Calendar Styling](http://vega-ui.dev/components/calendar/styling/index.md): How to style Calendar with tokens, classes and CSS variables.
- [Calendar Accessibility](http://vega-ui.dev/components/calendar/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Calendar.
- [Calendar Guides](http://vega-ui.dev/components/calendar/guides/index.md): Patterns, comparisons and troubleshooting for Calendar.
- [CalendarBase](http://vega-ui.dev/components/calendar-base/index.md): CalendarBase is the shared layout and context foundation for the VegaUI calendar family.
- [CalendarBase API](http://vega-ui.dev/components/calendar-base/api/index.md): Props, types and defaults of every CalendarBase part.
- [CalendarBase Styling](http://vega-ui.dev/components/calendar-base/styling/index.md): How to style CalendarBase with tokens, classes and CSS variables.
- [CalendarBase Accessibility](http://vega-ui.dev/components/calendar-base/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of CalendarBase.
- [CalendarBase Guides](http://vega-ui.dev/components/calendar-base/guides/index.md): Patterns, comparisons and troubleshooting for CalendarBase.
- [DataGrid](http://vega-ui.dev/components/data-grid/index.md): DataGrid is a compound component for keyboard-aware grid navigation across rows and cells.
- [DataGrid API](http://vega-ui.dev/components/data-grid/api/index.md): Props, types and defaults of every DataGrid part.
- [DataGrid Styling](http://vega-ui.dev/components/data-grid/styling/index.md): How to style DataGrid with tokens, classes and CSS variables.
- [DataGrid Accessibility](http://vega-ui.dev/components/data-grid/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of DataGrid.
- [DataGrid Guides](http://vega-ui.dev/components/data-grid/guides/index.md): Patterns, comparisons and troubleshooting for DataGrid.
- [DataGridPicker](http://vega-ui.dev/components/data-grid-picker/index.md): DataGridPicker is the visual picker layer built on top of DataGridSelectable.
- [DataGridPicker API](http://vega-ui.dev/components/data-grid-picker/api/index.md): Props, types and defaults of every DataGridPicker part.
- [DataGridPicker Styling](http://vega-ui.dev/components/data-grid-picker/styling/index.md): How to style DataGridPicker with tokens, classes and CSS variables.
- [DataGridPicker Accessibility](http://vega-ui.dev/components/data-grid-picker/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of DataGridPicker.
- [DataGridPicker Guides](http://vega-ui.dev/components/data-grid-picker/guides/index.md): Patterns, comparisons and troubleshooting for DataGridPicker.
- [DataGridSelectable](http://vega-ui.dev/components/data-grid-selectable/index.md): DataGridSelectable extends DataGrid with active-cell management and single, multiple, or range selection.
- [DataGridSelectable API](http://vega-ui.dev/components/data-grid-selectable/api/index.md): Props, types and defaults of every DataGridSelectable part.
- [DataGridSelectable Styling](http://vega-ui.dev/components/data-grid-selectable/styling/index.md): How to style DataGridSelectable with tokens, classes and CSS variables.
- [DataGridSelectable Accessibility](http://vega-ui.dev/components/data-grid-selectable/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of DataGridSelectable.
- [DataGridSelectable Guides](http://vega-ui.dev/components/data-grid-selectable/guides/index.md): Patterns, comparisons and troubleshooting for DataGridSelectable.
- [DayPicker](http://vega-ui.dev/components/day-picker/index.md): DayPicker is the lower-level day-grid subsystem used by the calendar stack.
- [DayPicker API](http://vega-ui.dev/components/day-picker/api/index.md): Props, types and defaults of every DayPicker part.
- [DayPicker Styling](http://vega-ui.dev/components/day-picker/styling/index.md): How to style DayPicker with tokens, classes and CSS variables.
- [DayPicker Accessibility](http://vega-ui.dev/components/day-picker/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of DayPicker.
- [DayPicker Guides](http://vega-ui.dev/components/day-picker/guides/index.md): Patterns, comparisons and troubleshooting for DayPicker.
- [MonthPicker](http://vega-ui.dev/components/month-picker/index.md): MonthPicker is the grid-based month-selection subsystem used directly or as part of the calendar family.
- [MonthPicker API](http://vega-ui.dev/components/month-picker/api/index.md): Props, types and defaults of every MonthPicker part.
- [MonthPicker Styling](http://vega-ui.dev/components/month-picker/styling/index.md): How to style MonthPicker with tokens, classes and CSS variables.
- [MonthPicker Accessibility](http://vega-ui.dev/components/month-picker/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of MonthPicker.
- [MonthPicker Guides](http://vega-ui.dev/components/month-picker/guides/index.md): Patterns, comparisons and troubleshooting for MonthPicker.
- [Table](http://vega-ui.dev/components/table/index.md): Table is a compound component for semantic tabular data where native table structure matters more than grid-like keyboard interaction.
- [Table API](http://vega-ui.dev/components/table/api/index.md): Props, types and defaults of every Table part.
- [Table Styling](http://vega-ui.dev/components/table/styling/index.md): How to style Table with tokens, classes and CSS variables.
- [Table Accessibility](http://vega-ui.dev/components/table/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Table.
- [Table Guides](http://vega-ui.dev/components/table/guides/index.md): Patterns, comparisons and troubleshooting for Table.
- [YearPicker](http://vega-ui.dev/components/year-picker/index.md): YearPicker is the year-selection subsystem of the calendar family.
- [YearPicker API](http://vega-ui.dev/components/year-picker/api/index.md): Props, types and defaults of every YearPicker part.
- [YearPicker Styling](http://vega-ui.dev/components/year-picker/styling/index.md): How to style YearPicker with tokens, classes and CSS variables.
- [YearPicker Accessibility](http://vega-ui.dev/components/year-picker/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of YearPicker.
- [YearPicker Guides](http://vega-ui.dev/components/year-picker/guides/index.md): Patterns, comparisons and troubleshooting for YearPicker.

## Components: Feedback

- [Alert](http://vega-ui.dev/components/alert/index.md): Alert presents short feedback or status messages with optional icon, title, and content areas.
- [Alert API](http://vega-ui.dev/components/alert/api/index.md): Props, types and defaults of every Alert part.
- [Alert Styling](http://vega-ui.dev/components/alert/styling/index.md): How to style Alert with tokens, classes and CSS variables.
- [Alert Accessibility](http://vega-ui.dev/components/alert/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Alert.
- [Alert Guides](http://vega-ui.dev/components/alert/guides/index.md): Patterns, comparisons and troubleshooting for Alert.
- [Badge](http://vega-ui.dev/components/badge/index.md): Badge is a compact status or categorization label for counts, states, and small metadata.
- [Badge API](http://vega-ui.dev/components/badge/api/index.md): Props, types and defaults of every Badge part.
- [Badge Styling](http://vega-ui.dev/components/badge/styling/index.md): How to style Badge with tokens, classes and CSS variables.
- [Badge Accessibility](http://vega-ui.dev/components/badge/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Badge.
- [Badge Guides](http://vega-ui.dev/components/badge/guides/index.md): Patterns, comparisons and troubleshooting for Badge.
- [Meter](http://vega-ui.dev/components/meter/index.md): Meter shows a bounded quantitative value, typically without the temporal progress semantics of a progress bar.
- [Meter API](http://vega-ui.dev/components/meter/api/index.md): Props, types and defaults of every Meter part.
- [Meter Styling](http://vega-ui.dev/components/meter/styling/index.md): How to style Meter with tokens, classes and CSS variables.
- [Meter Accessibility](http://vega-ui.dev/components/meter/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Meter.
- [Meter Guides](http://vega-ui.dev/components/meter/guides/index.md): Patterns, comparisons and troubleshooting for Meter.
- [MeterStack](http://vega-ui.dev/components/meter-stack/index.md): MeterStack is a compound component for segmented meter displays.
- [MeterStack API](http://vega-ui.dev/components/meter-stack/api/index.md): Props, types and defaults of every MeterStack part.
- [MeterStack Styling](http://vega-ui.dev/components/meter-stack/styling/index.md): How to style MeterStack with tokens, classes and CSS variables.
- [MeterStack Accessibility](http://vega-ui.dev/components/meter-stack/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of MeterStack.
- [MeterStack Guides](http://vega-ui.dev/components/meter-stack/guides/index.md): Patterns, comparisons and troubleshooting for MeterStack.
- [Progress](http://vega-ui.dev/components/progress/index.md): Progress communicates completion of an ongoing task or operation.
- [Progress API](http://vega-ui.dev/components/progress/api/index.md): Props, types and defaults of every Progress part.
- [Progress Styling](http://vega-ui.dev/components/progress/styling/index.md): How to style Progress with tokens, classes and CSS variables.
- [Progress Accessibility](http://vega-ui.dev/components/progress/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Progress.
- [Progress Guides](http://vega-ui.dev/components/progress/guides/index.md): Patterns, comparisons and troubleshooting for Progress.
- [Spinner](http://vega-ui.dev/components/spinner/index.md): Spinner is the loading indicator for pending states and asynchronous actions.
- [Spinner API](http://vega-ui.dev/components/spinner/api/index.md): Props, types and defaults of every Spinner part.
- [Spinner Styling](http://vega-ui.dev/components/spinner/styling/index.md): How to style Spinner with tokens, classes and CSS variables.
- [Spinner Accessibility](http://vega-ui.dev/components/spinner/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Spinner.
- [Spinner Guides](http://vega-ui.dev/components/spinner/guides/index.md): Patterns, comparisons and troubleshooting for Spinner.

## Components: Display

- [Avatar](http://vega-ui.dev/components/avatar/index.md): Avatar renders a user or entity representation with support for image, fallback, and icon content.
- [Avatar API](http://vega-ui.dev/components/avatar/api/index.md): Props, types and defaults of every Avatar part.
- [Avatar Styling](http://vega-ui.dev/components/avatar/styling/index.md): How to style Avatar with tokens, classes and CSS variables.
- [Avatar Accessibility](http://vega-ui.dev/components/avatar/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Avatar.
- [Avatar Guides](http://vega-ui.dev/components/avatar/guides/index.md): Patterns, comparisons and troubleshooting for Avatar.
- [AvatarStack](http://vega-ui.dev/components/avatar-stack/index.md): AvatarStack is a compound component for overlapping avatar groups such as participants, reviewers, and team previews.
- [AvatarStack API](http://vega-ui.dev/components/avatar-stack/api/index.md): Props, types and defaults of every AvatarStack part.
- [AvatarStack Styling](http://vega-ui.dev/components/avatar-stack/styling/index.md): How to style AvatarStack with tokens, classes and CSS variables.
- [AvatarStack Accessibility](http://vega-ui.dev/components/avatar-stack/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of AvatarStack.
- [AvatarStack Guides](http://vega-ui.dev/components/avatar-stack/guides/index.md): Patterns, comparisons and troubleshooting for AvatarStack.
- [Card](http://vega-ui.dev/components/card/index.md): Card is a surface container for grouped content such as settings panels, dashboard blocks, and inline summaries.
- [Card API](http://vega-ui.dev/components/card/api/index.md): Props, types and defaults of every Card part.
- [Card Styling](http://vega-ui.dev/components/card/styling/index.md): How to style Card with tokens, classes and CSS variables.
- [Card Accessibility](http://vega-ui.dev/components/card/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Card.
- [Card Guides](http://vega-ui.dev/components/card/guides/index.md): Patterns, comparisons and troubleshooting for Card.
- [Icon](http://vega-ui.dev/components/icon/index.md): Icon is the shared SVG wrapper for VegaUI icons and custom SVG content.
- [Icon API](http://vega-ui.dev/components/icon/api/index.md): Props, types and defaults of every Icon part.
- [Icon Styling](http://vega-ui.dev/components/icon/styling/index.md): How to style Icon with tokens, classes and CSS variables.
- [Icon Accessibility](http://vega-ui.dev/components/icon/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Icon.
- [Icon Guides](http://vega-ui.dev/components/icon/guides/index.md): Patterns, comparisons and troubleshooting for Icon.
- [Separator](http://vega-ui.dev/components/separator/index.md): Separator is the visual division primitive for horizontal and vertical boundaries between adjacent UI regions.
- [Separator API](http://vega-ui.dev/components/separator/api/index.md): Props, types and defaults of every Separator part.
- [Separator Styling](http://vega-ui.dev/components/separator/styling/index.md): How to style Separator with tokens, classes and CSS variables.
- [Separator Accessibility](http://vega-ui.dev/components/separator/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Separator.
- [Separator Guides](http://vega-ui.dev/components/separator/guides/index.md): Patterns, comparisons and troubleshooting for Separator.

## Components: Typography

- [Code](http://vega-ui.dev/components/code/index.md): Code is the inline code primitive.
- [Code API](http://vega-ui.dev/components/code/api/index.md): Props, types and defaults of every Code part.
- [Code Styling](http://vega-ui.dev/components/code/styling/index.md): How to style Code with tokens, classes and CSS variables.
- [Code Accessibility](http://vega-ui.dev/components/code/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Code.
- [Code Guides](http://vega-ui.dev/components/code/guides/index.md): Patterns, comparisons and troubleshooting for Code.
- [Heading](http://vega-ui.dev/components/heading/index.md): Heading is the semantic heading primitive.
- [Heading API](http://vega-ui.dev/components/heading/api/index.md): Props, types and defaults of every Heading part.
- [Heading Styling](http://vega-ui.dev/components/heading/styling/index.md): How to style Heading with tokens, classes and CSS variables.
- [Heading Accessibility](http://vega-ui.dev/components/heading/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Heading.
- [Heading Guides](http://vega-ui.dev/components/heading/guides/index.md): Patterns, comparisons and troubleshooting for Heading.
- [Link](http://vega-ui.dev/components/link/index.md): Link is the navigational text action component for inline and standalone navigation affordances.
- [Link API](http://vega-ui.dev/components/link/api/index.md): Props, types and defaults of every Link part.
- [Link Styling](http://vega-ui.dev/components/link/styling/index.md): How to style Link with tokens, classes and CSS variables.
- [Link Accessibility](http://vega-ui.dev/components/link/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Link.
- [Link Guides](http://vega-ui.dev/components/link/guides/index.md): Patterns, comparisons and troubleshooting for Link.
- [Text](http://vega-ui.dev/components/text/index.md): Text is the base body-typography primitive.
- [Text API](http://vega-ui.dev/components/text/api/index.md): Props, types and defaults of every Text part.
- [Text Styling](http://vega-ui.dev/components/text/styling/index.md): How to style Text with tokens, classes and CSS variables.
- [Text Accessibility](http://vega-ui.dev/components/text/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Text.
- [Text Guides](http://vega-ui.dev/components/text/guides/index.md): Patterns, comparisons and troubleshooting for Text.

## Components: Utils

- [IndexedSnapScroller](http://vega-ui.dev/components/indexed-snap-scroller/index.md): IndexedSnapScroller is a compound component built on SnapScroller for virtualized, index-windowed paging.
- [IndexedSnapScroller API](http://vega-ui.dev/components/indexed-snap-scroller/api/index.md): Props, types and defaults of every IndexedSnapScroller part.
- [IndexedSnapScroller Styling](http://vega-ui.dev/components/indexed-snap-scroller/styling/index.md): How to style IndexedSnapScroller with tokens, classes and CSS variables.
- [IndexedSnapScroller Accessibility](http://vega-ui.dev/components/indexed-snap-scroller/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of IndexedSnapScroller.
- [IndexedSnapScroller Guides](http://vega-ui.dev/components/indexed-snap-scroller/guides/index.md): Patterns, comparisons and troubleshooting for IndexedSnapScroller.
- [Slot](http://vega-ui.dev/components/slot/index.md): Slot is the low-level polymorphic composition primitive behind VegaUI asChild APIs.
- [Slot API](http://vega-ui.dev/components/slot/api/index.md): Props, types and defaults of every Slot part.
- [Slot Styling](http://vega-ui.dev/components/slot/styling/index.md): How to style Slot with tokens, classes and CSS variables.
- [Slot Accessibility](http://vega-ui.dev/components/slot/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of Slot.
- [Slot Guides](http://vega-ui.dev/components/slot/guides/index.md): Patterns, comparisons and troubleshooting for Slot.
- [SnapScroller](http://vega-ui.dev/components/snap-scroller/index.md): SnapScroller is a compound component for CSS scroll-snap-based horizontal paging.
- [SnapScroller API](http://vega-ui.dev/components/snap-scroller/api/index.md): Props, types and defaults of every SnapScroller part.
- [SnapScroller Styling](http://vega-ui.dev/components/snap-scroller/styling/index.md): How to style SnapScroller with tokens, classes and CSS variables.
- [SnapScroller Accessibility](http://vega-ui.dev/components/snap-scroller/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of SnapScroller.
- [SnapScroller Guides](http://vega-ui.dev/components/snap-scroller/guides/index.md): Patterns, comparisons and troubleshooting for SnapScroller.
- [VisuallyHidden](http://vega-ui.dev/components/visually-hidden/index.md): VisuallyHidden keeps content available to assistive technology while removing it from visual layout.
- [VisuallyHidden API](http://vega-ui.dev/components/visually-hidden/api/index.md): Props, types and defaults of every VisuallyHidden part.
- [VisuallyHidden Styling](http://vega-ui.dev/components/visually-hidden/styling/index.md): How to style VisuallyHidden with tokens, classes and CSS variables.
- [VisuallyHidden Accessibility](http://vega-ui.dev/components/visually-hidden/accessibility/index.md): Keyboard support, ARIA and screen reader behavior of VisuallyHidden.
- [VisuallyHidden Guides](http://vega-ui.dev/components/visually-hidden/guides/index.md): Patterns, comparisons and troubleshooting for VisuallyHidden.

## Optional

- [Changelog](http://vega-ui.dev/changelog/): Every release of the Vega UI packages, newest first.