# Vean Docs English LLM-friendly documentation index for the Vean docs site. ## Details - Generated from src/content/en for the ubean documentation site. - Mirrors the current docs routing model: overview pages and component detail pages. - Markdown component placeholders are normalized into short textual hints for LLM consumption. ## Table of Contents - [Aria](/aria.md): Unstyled, fully accessible component logic — the foundation @vean/ui is built on. - [Chart Demos](/chart.md): shadcn-styled chart demos built with TanStack Charts and VeanUI theme tokens. - [Installation](/chart/installation.md): Install TanStack Charts and wire it into a VeanUI project. - [Quick Start](/chart/quick-start.md): Describe a chart with defineChart, render it with the Vue Chart component, and wire in VeanUI theme colors. - [VeanUI CLI](/cli.md): vean is the command-line tool for VeanUI. It helps you initialize projects, add components, manage your UI configuration, and migrate a project to Vean. - [Accordion](/components/accordion.md): A vertically (or horizontally) stacked set of interactive headings that each reveal a section of content, supporting single or multiple expansion. SAccordion combines an AccordionRoot/AccordionItem/AccordionHeader/AccordionTrigger/AccordionContent/AccordionDescription family of Aria primitives (zero styles) with the accordionVariants style recipe (8 slots, 6 sizes). - [Affix](/components/affix.md): Affix keeps content pinned to the top or bottom edge of the viewport or a custom scroll container while the target area is scrolling. - [Alert](/components/alert.md): A callout that surfaces important, time-sensitive information — warnings, errors, or confirmations — near the content it refers to. SAlert combines an AlertRoot/AlertTitle/AlertDescription/AlertClose family of Aria primitives (zero styles) with the alertVariants style recipe (6 slots, 8 colors × 5 variants × 6 sizes). - [Anchor](/components/anchor.md): Anchor provides in-page navigation for long content sections and keeps the current section highlighted while scrolling. - [AppShell](/components/app-shell.md): An aggregated application shell that assembles the layout regions, menu, breadcrumb, page tabs, brand, and footer from props and slots. - [AspectRatio](/components/aspect-ratio.md): SAspectRatio maintains a fixed aspect ratio for its content using the CSS padding-bottom technique. It wraps content in a relatively-positioned container with a dynamic paddingBottom percentage, and an absolutely-positioned inner element that fills the container. Use it to prevent layout shift when loading images, videos, or embeds with known dimensions. - [Autocomplete](/components/autocomplete.md): An autocomplete that filters suggestion items from text input and quickly fills the input with a selected result. It opens as you type, fuzzy-matches options with Fuse, and supports grouping, a clearable input, and a data-driven compact API. Use it when users should type keywords to get suggestions over free text; when options come from a fixed list, prefer SSelect; when options come from a known set that benefits from type-to-filter, SCombobox is the closer sibling. - [Avatar](/components/avatar.md): An image element with a fallback for representing the user. SAvatar combines a AvatarRoot/AvatarImage/AvatarFallback family of Aria primitives (zero styles) with the avatarVariants style recipe (3 slots: root/image/fallback, 6 sizes xs–2xl). - [Backtop](/components/backtop.md): SBacktop reveals a floating button after the scroll target passes a configurable threshold and smoothly scrolls that target back to the top when activated. It wraps SButton with scroll-position tracking, requestAnimationFrame-based smooth scrolling, and prefers-reduced-motion support. Use it to let users quickly return to the top of long pages or scrollable containers. - [Badge](/components/badge.md): A small status/notification marker that overlays a trigger (button, avatar, nav item) to indicate a count, a state, or new content. SBadge is a UI-only component: a relative root plus an absolutely positioned bubble with controllable visibility, styled by the badgeVariants style recipe (2 slots: root/content; 8 colors × 6 sizes × 4 positions). - [Breadcrumb](/components/breadcrumb.md): Breadcrumbs allow users to navigate through the hierarchy of pages. It displays the current location within the application structure. - [Button](/components/button.md): A button component that can be used to trigger an action. - [Calendar](/components/calendar.md): A monthly date grid that supports single or multiple selection, disabled and unavailable dates, min/max bounds, custom cell rendering, and month/year Select controls in the compact header. Use it for booking, scheduling, or any date-picking surface that needs keyboard-navigable grids instead of a plain text input. Pair it with SDatePicker when you need a popup trigger, or SRangeCalendar-style composites for range selection. - [CalendarRange](/components/calendar-range.md): CalendarRange displays one or more month grids and lets users pick a start and end date directly from the calendar surface. Selecting the first date starts the range, a live hover preview highlights the candidate range, and the second click commits it — with reversed selections sorted automatically. Use it for booking, scheduling, or any range-picking surface that needs a keyboard-navigable grid instead of two text inputs. Pair it with SDateRangePicker when you need a popup trigger, or use it standalone inside forms and custom layouts. - [Card](/components/card.md): A container that groups related content and actions into a bordered, shadowed surface. SCard is a UI-only composition over the admitted collapsible primitives (CollapsibleRoot/CollapsibleContent/CollapsibleTrigger) plus its own header/title/description/footer chrome, styled by the cardVariants recipe (8 slots, 6 sizes, scrollable/split flags). - [Carousel](/components/carousel.md): A carousel built on top of Embla Carousel that lets users browse a sequence of content (images, cards, banners, etc.) horizontally or vertically in a constrained space. SCarousel combines a CarouselRoot-family of Aria primitives (zero styles) with the carouselVariants style recipe (8 slots: root/content/container/item/control/navigation/previous/next, 6 sizes × 2 orientations). - [Cascader](/components/cascader.md): A cascader for selecting values from hierarchical tree data. It renders a linked multi-column panel and supports single/multiple selection, full-path value mode, parent-child check-state propagation, local filtering and remote search, lazy loading of children, and virtual scrolling for large datasets. Use it when options are organized as a tree and selection must happen level by level; for flat option lists, prefer SSelect or SCombobox. - [Checkbox](/components/checkbox.md): A control that lets the user select or clear an option, with an indeterminate half-check state for partial selections. It ships as a standalone control, a roving-focus group, and data-driven card variants. Use it for independent toggles, multi-select lists, and "select all" scenarios with cascading half-check; for single-choice from a set, prefer SRadioGroup. - [Clipboard](/components/clipboard.md): SClipboard is a clipboard action component built on SButton that copies a plain-text value to the system clipboard with accessible button semantics and copied-state feedback. - [Collapsible](/components/collapsible.md): An interactive component that expands/collapses a panel. SCollapsible wraps the Aria CollapsibleRoot with the collapsibleVariants style recipe (3 slots: root/trigger/content; 6 sizes), and the Aria CollapsibleTrigger/CollapsibleContent primitives provide the toggle button and the animated panel. - [Color Area](/components/color-area.md): A two-dimensional color editor for saturation/lightness, saturation/brightness, or OKLCH chroma/lightness selection. SColorArea combines the Aria ColorAreaRoot/ColorAreaArea/ColorAreaThumb primitives with the colorAreaVariants style recipe (3 slots, 6 sizes). - [Color Field](/components/color-field.md): An input for editing either a full color string or a single channel, with support for hex, rgb, hsl, and oklch output. SColorField combines the Aria ColorFieldRoot/ColorFieldInput primitives with the colorFieldVariants style recipe (2 slots, 6 sizes). - [Color Picker](/components/color-picker.md): A composite color picker that combines a color area, hue/alpha sliders, formatted inputs, and preset swatches, with full oklch editing and output support. SColorPicker composes the Aria color primitives (ColorArea/ColorSlider/ColorField/ColorSwatch/ColorSwatchPicker) inside a popover, with a SegmentCompact for format switching. Nested part styles are unified in colorPickerVariants and forwarded through provideColorPickerUi. - [Color Slider](/components/color-slider.md): A single-channel color slider for hue, alpha, and individual RGB/HSL/HSV/OKLCH channels. SColorSlider combines the Aria ColorSliderRoot/ColorSliderTrack/ColorSliderThumb primitives with the shared sliderVariants style recipe (via sliderVariants). - [Color Swatch](/components/color-swatch.md): A read-only color preview block with support for transparent and OKLCH values. SColorSwatch combines the Aria ColorSwatchRoot/ColorSwatchChecker/ColorSwatchFill primitives with the colorSwatchVariants style recipe (3 slots, 6 sizes × 2 shapes). - [Color Swatch Picker](/components/color-swatch-picker.md): Choose a color quickly from a preset palette, useful for theme panels and suggested color selections. SColorSwatchPicker combines the Aria ColorSwatchPickerRoot/Item/ItemSwatch/ItemIndicator primitives (built on the listbox) with the colorSwatchPickerVariants style recipe (6 slots, 6 sizes × 2 shapes). - [Combobox](/components/combobox.md): A combobox for searching and selecting values from an option list, with an explicit anchor composition, clearable input, and complete popup/filtering behavior. The input filters options as you type and keyboard navigation follows the WAI-ARIA combobox pattern. Use it when users must type to filter a list; for selection without typing, use SSelect; for fuzzy-matching suggestions over text, use SAutocomplete. - [Command](/components/command.md): Fast, composable, command menu for Vue. SCommand is a searchable command palette built on the Aria listbox primitives with Fuse fuzzy matching. It delegates filtering, grouped item aggregation, and default item composition to the Aria CommandCompact; the UI wrapper only injects styles. - [ConfigProvider](/components/config-provider.md): The SConfigProvider component is the root configuration provider for the VeanUI library. It manages global themes, localization, icon settings, and other context-aware features. It should wrap your entire application or specific sections that require isolated configuration. - [ContextMenu](/components/context-menu.md): Displays a menu located at the pointer, triggered by a right-click. SContextMenu is a data-driven menu built on the shared Aria menu primitives, opening at the pointer position via the contextmenu event (or a press-and-hold on touch, after pressOpenDelay). The family also ships checkbox (SContextMenuCheckbox), radio (SContextMenuRadio) and custom (SContextMenuWrapper) variants. - [DateField](/components/date-field.md): A segmented date input that keeps day, month, year, and optional time values as separate keyboard-editable parts while still submitting a native form value. Use it for compact date entry where typing should be fast — birth dates, expiry dates, or any single date that needs validation against a range. For a date chosen from a calendar popup, prefer SDatePicker; for browsing a calendar grid, use SCalendar. - [DatePicker](/components/date-picker.md): A date picker that pairs a keyboard-editable segmented date field with a calendar popup for visual selection. Type a date directly into the segments or click the calendar toggle to pick from a month grid. Use it whenever a user must choose a single date — booking, scheduling, filtering, or any form that needs a validated date range. For pure typing with no popup, prefer SDateField; for browsing a standalone calendar grid, use SCalendar. - [DateRangeField](/components/date-range-field.md): A segmented date range input that renders two groups of keyboard-editable date segments — one for the start date and one for the end date — while submitting native form values for both. Use it whenever a user must enter a bounded interval fast, such as booking stay dates, reporting windows, or filter ranges where typing beats calendar clicking. For a range chosen from a calendar popup, prefer SDateRangePicker; for a single date, use SDateField. - [DateRangePicker](/components/date-range-picker.md): A date range picker that pairs a keyboard-editable dual segmented date range field with a calendar range popup for visual selection. Type a start and end date directly into the segments or click the calendar toggle and pick both ends from a single month-range grid. Use it whenever a user must choose a bounded interval — booking stay dates, reporting windows, or filter ranges. For pure typing with no popup, prefer SDateRangeField; for a single date with a popup, use SDatePicker. - [Dialog](/components/dialog.md): A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. - [Drawer](/components/drawer.md): A gesture-driven panel that slides in from an edge of the screen. It owns its own Aria family — snap points, swipe dismiss, drag handle and nested scaling — built on the dialog primitives for modality, focus and dismissal. - [DropdownMenu](/components/dropdown-menu.md): Displays a menu to the user—such as a set of actions or functions—triggered by a button. SDropdownMenu is a data-driven menu built on the Aria menu primitives (MenuOptions/MenuItem/…), rendered through the shared popover portal. The family also ships checkbox (SDropdownMenuCheckbox, multi-select), radio (SDropdownMenuRadio, single-select) and custom (SDropdownMenuWrapper) variants. - [Editable](/components/editable.md): An inline text editor that switches between preview and edit states. In preview mode the value is shown as a focusable text node (or a placeholder); focusing, double-clicking, or clicking the edit button enters edit mode, then submitting (Enter/blur/submit trigger) or cancelling (Esc/cancel trigger) returns to preview. The structure follows the Aria core + styled wrapper split: the 8 EditableRoot-family components in @vean/aria (zero styles) own the full state machine, and SEditable injects the editableVariants styles (8 slots: root/area/preview/input/controls/editTrigger/submitTrigger/cancelTrigger). - [Empty](/components/empty.md): A lightweight empty-state component that highlights missing content and guides the user toward a next action. SEmpty is a UI-only composition of plain elements plus the SIcon component, styled by the emptyVariants style recipe (6 slots, 6 sizes). - [Form](/components/form.md): A form composition layer for building validated forms with an Aria core and styled wrappers. The useForm composable is backed by the TanStack Form engine (@tanstack/vue-form) for field-level subscriptions, field arrays, and the submit lifecycle, accepts any Standard Schema validator (Zod, Valibot, ArkType, Yup, …), and returns a context with SFormField / SFormFieldArray used to render the form. Fields register through slots, so any VeanUI input (SInput, SSelect, SCheckbox, SSwitch, SRadioGroup, …) or a plain custom control works without a per-control API. - [Hover Card](/components/hover-card.md): Displays a richer preview card when the trigger is hovered or receives focus. SHoverCard combines the Aria HoverCardRoot/HoverCardTrigger/HoverCardPositioner/HoverCardPopup/HoverCardArrow primitive family (built on the shared Popper) with the hoverCardVariants style recipe (3 slots, 6 sizes). - [Icon](/components/icon.md): SIcon is a unified icon component built on top of Iconify. It supports rendering icons from the Iconify dataset or custom components/VNodes. It integrates with SConfigProvider for consistent sizing across the application. - [Input](/components/input.md): A single-line text input that collects user input, supporting standard input attributes, prefix/suffix slots, and clearable functionality. Use it for any short free-text entry — form fields, search boxes, filters. For multi-line text use STextarea; for sensitive values use SPassword; for numeric values use SInputNumber. - [InputNumber](/components/input-number.md): A numeric input field that only accepts numeric values, with increment/decrement controls, keyboard interaction, and min/max boundary handling. Use it for quantities, prices, ages, or any value that must stay numeric and within a range. For general text use SInput. - [InputOtp](/components/input-otp.md): A one-time-password (OTP / verification code) input built around a real native input. It keeps the robust selection, paste, and mobile autofill behavior of vue-input-otp while exposing a default VeanUI presentation and a fully custom scoped slot. Use it for SMS codes, email verification codes, two-factor authentication, or any fixed-length code entry. - [Kbd](/components/kbd.md): The SKbd component represents a keyboard input element, typically used to display keyboard shortcuts and key combinations. It wraps the native element and optionally symbolizes key names (e.g., shift → ⇧, enter → ↵) with platform-aware resolution for modifier keys (meta, alt, ctrl). - [Label](/components/label.md): The SLabel component renders a native