ZNN199Ratio1 : 9.05QSR22
X Xenon GitHub

Components

Base UI and semantic HTML primitives.

Form controls

ButtonBase UITriggers an action or event. The primary affordance for committing, submitting, or navigating.@base-ui/react/buttonInput / Text fieldBase UICollects a single line of text. Paired with Field for label, hint, and error.@base-ui/react/field + @base-ui/react/inputTextareaSemantic HTMLCollects multi-line free text. Base UI has no dedicated textarea; use a semantic <textarea> inside Field.Field + native <textarea>SelectBase UIChooses one value from a list in a popover listbox. Composable replacement for the native <select>.@base-ui/react/selectCheckboxBase UIToggles a single boolean or selects one item from a set of independent options.@base-ui/react/checkboxRadio groupBase UISelects exactly one option from a mutually exclusive set.@base-ui/react/radio-group + @base-ui/react/radioSwitchBase UIToggles a setting that takes effect immediately (no submit needed).@base-ui/react/switch

Overlays & navigation

DialogBase UIA modal surface that demands attention for a focused task or confirmation.@base-ui/react/dialogPopoverBase UINon-modal floating content anchored to a trigger. For supplemental information or quick actions.@base-ui/react/popoverTooltipBase UIA short contextual label for a control. Supplements — never replaces — an accessible name.@base-ui/react/tooltipTabsBase UISwitches between related sections of content within one surface.@base-ui/react/tabsToastBase UIBrief, transient confirmation of a background action. Non-blocking and auto-dismissed.@base-ui/react/toastDropdown / MenuBase UIA list of actions or choices revealed from a trigger. Contextual command palette.@base-ui/react/menuScroll areaBase UIA styled, cross-browser scroll container with custom thumb controls.@base-ui/react/scroll-area

Data display & surfaces

CardSemantic HTMLA bounded surface that groups related content. The workhorse panel of a layout.Semantic <article>TableSemantic HTMLAligns structured rows and columns of data for scanning and comparison.Semantic <table>BadgeSemantic HTMLA compact label for status, category, or count. Read-only, not interactive.Semantic <span>SeparatorBase UIA horizontal or vertical rule that divides related sections of content.@base-ui/react/separatorAvatarBase UIRepresents a person or entity with an image and a text fallback.@base-ui/react/avatar