# Vitral

> A Vue 3 component library built around a token engine: design tokens, presets, light and dark, pass-through attributes and a fully unstyled mode. Nuxt is supported by a module of its own.

Vitral ships the usual control set plus the pieces applications need and most libraries leave out: charts, a scheduler, a task board, a rich text editor, a spreadsheet with its own formula engine, a command palette and layout panels. Everything that does not need a framework lives in framework-free packages (`@vitral/core`, `@vitral/themes`, `@vitral/styles`, `@vitral/icons`, `@vitral/dom`, `@vitral/controls`) — and the big components are among them: `@vitral/chart`, `@vitral/datagrid`, `@vitral/schedule`, `@vitral/taskboard`, `@vitral/editor` and `@vitral/spreadsheet` each hold their own engine and draw themselves, and `@vitral/forms` is a form's state and rules with nothing drawn at all, with `@vitral/vue` and `@vitral/nuxt` wrapping them.

Every page below is also available as Markdown: add `.md` to its URL, without the trailing slash.

## Guides

- [Accessibility](https://vitralui.github.io/vitral/docs/accessibility.md): A condition of a component existing, not a milestone on its way there. From the documentation of Vitral, a Vue 3 component library.
- [Coding agents](https://vitralui.github.io/vitral/docs/ai.md): Every page of this site is also plain Markdown, and the whole of it is one file, so an assistant can read the documentation instead of guessing at it.
- [Contributing](https://vitralui.github.io/vitral/docs/contributing.md): What a component is made of, and where each piece lives. From the documentation of Vitral, a Vue 3 component library.
- [Colour schemes](https://vitralui.github.io/vitral/docs/dark-mode.md): Light, dark and system: one branch inside the preset, not a second theme. From the documentation of Vitral, a Vue 3 component library.
- [Direction](https://vitralui.github.io/vitral/docs/direction.md): Left to right unless you say otherwise: one attribute turns the layout, the keyboard and the icons that mean "next" round together.
- [Forms and validation](https://vitralui.github.io/vitral/docs/forms.md): Form state, rules and schema validation as a package of its own. From the documentation of Vitral, a Vue 3 component library.
- [Installation](https://vitralui.github.io/vitral/docs/installation.md): One package, one plugin call, and what every option on it does. From the documentation of Vitral, a Vue 3 component library.
- [Introduction](https://vitralui.github.io/vitral/docs/introduction.md): What Vitral is and what lives in which package. From the documentation of Vitral, a Vue 3 component library.
- [Layout panels](https://vitralui.github.io/vitral/docs/layout.md): The seven components an application is assembled from, and what each one is for. From the documentation of Vitral, a Vue 3 component library.
- [Locale](https://vitralui.github.io/vitral/docs/locale.md): Every string a component says comes from one object, and numbers and dates are parsed with it too. From the documentation of Vitral, a Vue 3 component library.
- [Pass-through](https://vitralui.github.io/vitral/docs/pass-through.md): Reach any element of any component: attributes, classes, or a function of that part’s state. From the documentation of Vitral, a Vue 3 component library.
- [Presets](https://vitralui.github.io/vitral/docs/presets.md): Prism, Ink, Avalonia and Simple: what each one changes, and how to start a fifth. From the documentation of Vitral, a Vue 3 component library.
- [Server rendering](https://vitralui.github.io/vitral/docs/server-rendering.md): Collecting the CSS a render used, so the page arrives styled instead of styling itself later. From the documentation of Vitral, a Vue 3 component library.
- [Theming](https://vitralui.github.io/vitral/docs/theming.md): Three layers of tokens compiled to CSS variables, and the four ways to change one. From the documentation of Vitral, a Vue 3 component library.
- [Unstyled mode](https://vitralui.github.io/vitral/docs/unstyled.md): Keep the behaviour and the accessibility, drop every class. From the documentation of Vitral, a Vue 3 component library.

## Components

- [Accordion](https://vitralui.github.io/vitral/components/accordion.md): Stacked sections that open and close, one at a time or several at once, with headers that follow the WAI-ARIA accordion.
- [AspectRatio](https://vitralui.github.io/vitral/components/aspectratio.md): A box that keeps its ratio as its width changes, with the content cropped to fill it. Live examples with the code behind each one, and its API.
- [AutoComplete](https://vitralui.github.io/vitral/components/autocomplete.md): A text box that suggests as you type, with suggestions supplied by your app, single or multiple values as chips, and a button for the whole list.
- [Avatar](https://vitralui.github.io/vitral/components/avatar.md): A face, initials or an icon in a fixed box, in three sizes and with an optional badge; AvatarGroup overlaps a row of them.
- [Badge](https://vitralui.github.io/vitral/components/badge.md): A count or a status dot, on its own or pinned to the corner of what it wraps with OverlayBadge. Live examples with the code behind each one, and its API.
- [BlockUI](https://vitralui.github.io/vitral/components/blockui.md): A veil over a region, or the whole page, while it is busy, making what is under it inert and saying why.
- [Breadcrumb](https://vitralui.github.io/vitral/components/breadcrumb.md): Where the page sits in a hierarchy: a trail of links with the current page last and separators in between.
- [Button](https://vitralui.github.io/vitral/components/button.md): A command in eight severities, four variants and three sizes, with icons, a loading state, a badge, and rendering as a link.
- [ButtonGroup](https://vitralui.github.io/vitral/components/buttongroup.md): Buttons that belong together, joined into one named control, each keeping its own tab stop. Live examples with the code behind each one, and its API.
- [Card](https://vitralui.github.io/vitral/components/card.md): A container for one piece of content: an optional header image, a title and subtitle, the content and a footer of actions.
- [Carousel](https://vitralui.github.io/vitral/components/carousel.md): A track of items with paging and optional rotation, which pauses on demand and while you point at or work in it.
- [CascadeSelect](https://vitralui.github.io/vitral/components/cascadeselect.md): A select for nested options, one column per level, opening each group beside the last. Live examples with the code behind each one, and its API.
- [Chart](https://vitralui.github.io/vitral/components/chart.md): SVG charts with no dependency, over twenty types from one options object, with tooltips, legends, zoom and synced groups, readable from the keyboard.
- [Chat](https://vitralui.github.io/vitral/components/chat.md): A conversation with no dependency, in five shapes from a plain thread to an agent with its tool calls, with answers that stream in place.
- [Checkbox](https://vitralui.github.io/vitral/components/checkbox.md): A native checkbox under a drawn box, bound to a boolean or to an array of values, with a mixed state. Live examples with the code behind each one, and its API.
- [Chip](https://vitralui.github.io/vitral/components/chip.md): A compact token for a filter, a recipient or a tag, with an optional image, icon and remove button. Live examples with the code behind each one, and its API.
- [ColorPicker](https://vitralui.github.io/vitral/components/colorpicker.md): A swatch that opens a colour panel, with a value in hex, RGB or HSB and an optional opacity slider. Live examples with the code behind each one, and its API.
- [Command](https://vitralui.github.io/vitral/components/command.md): A search box over a list of commands that filters as you type, inline or as a modal palette opened with a hotkey.
- [ConfirmDialog](https://vitralui.github.io/vitral/components/confirmdialog.md): A modal question before an action, opened from anywhere with useConfirm, that can default to the safe answer.
- [ConfirmPopup](https://vitralui.github.io/vitral/components/confirmpopup.md): A confirmation anchored to the element it is about, opened with useConfirm and holding focus until answered.
- [ContextMenu](https://vitralui.github.io/vitral/components/contextmenu.md): The menu a right-click or the context-menu key opens, at the pointer or under the focused element, with submenus.
- [Cropper](https://vitralui.github.io/vitral/components/cropper.md): A crop rectangle over an image, with no dependency: lock a ratio, mask a circle, rotate and flip, and crop on a server or in the browser.
- [DataGrid](https://vitralui.github.io/vitral/components/datagrid.md): A data table that sorts, filters, pages and selects, locally or on your server, with columns the reader can resize, reorder, pin and hide.
- [DataTable](https://vitralui.github.io/vitral/components/datatable.md): The small table: rows already in hand, sorted, striped and sized, with a sticky head. DataGrid takes over when it needs more.
- [DataView](https://vitralui.github.io/vitral/components/dataview.md): Sorting and paging over your own template per item, shown as a list or a grid. Live examples with the code behind each one, and its API.
- [DatePicker](https://vitralui.github.io/vitral/components/datepicker.md): A date field you can type into or pick from a calendar, read in the locale's format. Live examples with the code behind each one, and its API.
- [DateRange](https://vitralui.github.io/vitral/components/daterange.md): Two dates and the days between them, picked on two months side by side or one, with the span drawn before it is committed.
- [Dialog](https://vitralui.github.io/vitral/components/dialog.md): A window over the page, modal or not, that takes focus in, keeps it inside and returns it when it closes.
- [Divider](https://vitralui.github.io/vitral/components/divider.md): A horizontal or vertical line between pieces of content, solid, dashed or dotted, with optional content set into it.
- [Dock](https://vitralui.github.io/vitral/components/dock.md): A strip of large icons that grow under the pointer, each labelled with a tooltip. Live examples with the code behind each one, and its API.
- [DockPanel](https://vitralui.github.io/vitral/components/dockpanel.md): Docks regions to its top, bottom, left and right edges and gives what is left to the fill; the order decides who wins the corners.
- [Drawer](https://vitralui.github.io/vitral/components/drawer.md): A panel that slides in from an edge of the viewport, or covers it, with the same modal behaviour as Dialog.
- [DynamicDialog](https://vitralui.github.io/vitral/components/dynamicdialog.md): A dialog opened from code with a component as its content, which receives data and closes with a result.
- [Editor](https://vitralui.github.io/vitral/components/editor.md): Rich text with its own engine and no dependency: headings, lists, tables, images, links and Markdown shortcuts, bound as sanitised HTML.
- [Fieldset](https://vitralui.github.io/vitral/components/fieldset.md): A native fieldset that names the controls inside it, and can collapse behind its legend. Live examples with the code behind each one, and its API.
- [FileUpload](https://vitralui.github.io/vitral/components/fileupload.md): A file input drawn as a button, a drop zone and a queue, checking type, size and count, with upload progress.
- [FloatLabel](https://vitralui.github.io/vitral/components/floatlabel.md): A real label that starts inside the field and lifts out on focus or once there is a value; IftaLabel keeps it inside, above the value.
- [Form](https://vitralui.github.io/vitral/components/form.md): Validation and submission built from parts that wire values, labels, hints and errors to any Vitral control, with rules or a schema.
- [Galleria](https://vitralui.github.io/vitral/components/galleria.md): Images with thumbnails, indicators, rotation and a full-screen mode. Live examples with the code behind each one, and its API.
- [Grid](https://vitralui.github.io/vitral/components/grid.md): A grid with star sizing: rows and columns sized to content, as shares of what is left, or in pixels, with children placed by row and column.
- [HoverCard](https://vitralui.github.io/vitral/components/hovercard.md): A preview of what a link points at, shown while the pointer rests on it or focus reaches it. Live examples with the code behind each one, and its API.
- [IconField](https://vitralui.github.io/vitral/components/iconfield.md): An icon inside a field, at the start or the end, with the text padded past it. Live examples with the code behind each one, and its API.
- [Image](https://vitralui.github.io/vitral/components/image.md): An image that can open in a viewer over the page, with rotate and zoom. Live examples with the code behind each one, and its API.
- [Inplace](https://vitralui.github.io/vitral/components/inplace.md): A display that turns into its editor when activated, and back again when done. Live examples with the code behind each one, and its API.
- [InputGroup](https://vitralui.github.io/vitral/components/inputgroup.md): Fields, buttons and addons welded into one control, with inner corners squared and a single border between neighbours.
- [InputMask](https://vitralui.github.io/vitral/components/inputmask.md): A text box that types into a pattern, such as a phone or a date, filling in the literals for you. Live examples with the code behind each one, and its API.
- [InputNumber](https://vitralui.github.io/vitral/components/inputnumber.md): A number box with steppers, clamped to a range and formatted in the locale, as a decimal, a currency or a percentage.
- [InputOtp](https://vitralui.github.io/vitral/components/inputotp.md): One box per character of a one-time code, that moves along as you type and fills at once from a paste or autofill.
- [InputPassword](https://vitralui.github.io/vitral/components/inputpassword.md): A password box with a reveal button and a strength meter. Live examples with the code behind each one, and its API.
- [InputTag](https://vitralui.github.io/vitral/components/inputtag.md): A field whose value is a list of short strings, each shown as a removable tag, added with Enter, a separator or a paste.
- [InputText](https://vitralui.github.io/vitral/components/inputtext.md): A single-line text box whose attributes land on the native input, with prefix and suffix content and a clear button.
- [Knob](https://vitralui.github.io/vitral/components/knob.md): A dial for a bounded number, set by dragging, pressing anywhere on it or the keyboard. Live examples with the code behind each one, and its API.
- [Label](https://vitralui.github.io/vitral/components/label.md): A native label with the fields' typography, that checks what it points at and dims when that control is disabled.
- [Listbox](https://vitralui.github.io/vitral/components/listbox.md): A list to choose one or several options from, always open: the sibling of Select. Live examples with the code behind each one, and its API.
- [MegaMenu](https://vitralui.github.io/vitral/components/megamenu.md): A menubar whose items open wide panels of grouped links in columns, like this site's own top bar. Live examples with the code behind each one, and its API.
- [Menu](https://vitralui.github.io/vitral/components/menu.md): A list of commands and links, inline or as a popup, with groups and separators. Live examples with the code behind each one, and its API.
- [Menubar](https://vitralui.github.io/vitral/components/menubar.md): The application menu bar, with nested menus, that becomes a single menu button on narrow screens. Live examples with the code behind each one, and its API.
- [Message](https://vitralui.github.io/vitral/components/message.md): An inline message with a title, an action and a close button, in every severity. Live examples with the code behind each one, and its API.
- [MeterGroup](https://vitralui.github.io/vitral/components/metergroup.md): Several values on one bar, with a legend, read out as a single total. Live examples with the code behind each one, and its API.
- [MultiSelect](https://vitralui.github.io/vitral/components/multiselect.md): A select for several choices, shown as a list, a count or chips, with an optional filter. Live examples with the code behind each one, and its API.
- [OrderList](https://vitralui.github.io/vitral/components/orderlist.md): A list the reader puts in order, with buttons, the keyboard or drag and drop. Live examples with the code behind each one, and its API.
- [OrganizationChart](https://vitralui.github.io/vitral/components/organizationchart.md): A tree drawn as a chart, with nodes that fold and open, can be selected, and take a template per node type.
- [Paginator](https://vitralui.github.io/vitral/components/paginator.md): Moves through pages of data, with first, previous, numbered, next and last buttons, and a rows-per-page choice.
- [Panel](https://vitralui.github.io/vitral/components/panel.md): A titled container that can collapse behind its header. Live examples with the code behind each one, and its API.
- [PanelMenu](https://vitralui.github.io/vitral/components/panelmenu.md): Sections of navigation that expand in place, each a tree of its items, for a sidebar. Live examples with the code behind each one, and its API.
- [PickList](https://vitralui.github.io/vitral/components/picklist.md): Two lists and the moves between them, with buttons, the keyboard or a double click, and reordering within each.
- [Popover](https://vitralui.github.io/vitral/components/popover.md): A non-modal dialog anchored to what opened it, closing on Escape, a press outside or tabbing out. Live examples with the code behind each one, and its API.
- [ProgressBar](https://vitralui.github.io/vitral/components/progressbar.md): How far along a task is, as a thin bar, with a value or indeterminate. Live examples with the code behind each one, and its API.
- [ProgressSpinner](https://vitralui.github.io/vitral/components/progressspinner.md): A ring that turns while something is running, or fills clockwise to a value. Live examples with the code behind each one, and its API.
- [RadioButton](https://vitralui.github.io/vitral/components/radiobutton.md): Native radios under drawn rings, grouped by RadioGroup with one name and one v-model. Live examples with the code behind each one, and its API.
- [Rating](https://vitralui.github.io/vitral/components/rating.md): Stars to rate with, in whole steps or in halves and quarters, cleared by choosing the same star again. Live examples with the code behind each one, and its API.
- [Schedule](https://vitralui.github.io/vitral/components/schedule.md): A calendar with month, week, day, agenda and resource timeline views, drag to move and resize, recurring events and any time zone.
- [ScrollPanel](https://vitralui.github.io/vitral/components/scrollpanel.md): A scroll container with the theme's own thin bars, over native scrolling. Live examples with the code behind each one, and its API.
- [ScrollTop](https://vitralui.github.io/vitral/components/scrolltop.md): A button back to the top of a long page or a scrolling element, shown past a threshold. Live examples with the code behind each one, and its API.
- [Select](https://vitralui.github.io/vitral/components/select.md): Choose one option from a list, with an optional filter that ignores case and accents. Live examples with the code behind each one, and its API.
- [SelectButton](https://vitralui.github.io/vitral/components/selectbutton.md): A segmented control for one choice, as a radio group, or several, as toggle buttons. Live examples with the code behind each one, and its API.
- [Sidebar](https://vitralui.github.io/vitral/components/sidebar.md): The collapsible application sidebar: navigation with sub-lists, that shrinks to its icons and becomes a drawer on small screens.
- [Skeleton](https://vitralui.github.io/vitral/components/skeleton.md): The outline of content that is still loading, in any shape, from a line of text to a whole card. Live examples with the code behind each one, and its API.
- [Slider](https://vitralui.github.io/vitral/components/slider.md): Pick a value, or a range, by dragging along a track or with the keyboard. Live examples with the code behind each one, and its API.
- [SpeedDial](https://vitralui.github.io/vitral/components/speeddial.md): A floating button that fans its actions out, in a line or around a circle. Live examples with the code behind each one, and its API.
- [SplitButton](https://vitralui.github.io/vitral/components/splitbutton.md): A command with a menu of related commands welded to it. Live examples with the code behind each one, and its API.
- [Splitter](https://vitralui.github.io/vitral/components/splitter.md): Panels with a gutter between each pair that resizes them, by dragging or from the keyboard, within each panel's minimum.
- [SplitView](https://vitralui.github.io/vitral/components/splitview.md): A pane beside the content, inline or as an overlay, that can shrink to a strip of icons when closed. Live examples with the code behind each one, and its API.
- [Spreadsheet](https://vitralui.github.io/vitral/components/spreadsheet.md): A spreadsheet with its own formula engine and no dependency: A1 references, sixty-three functions and recalculation of only what changed.
- [StackPanel](https://vitralui.github.io/vitral/components/stackpanel.md): Arranges its children in one line, stacked or side by side, with even spacing between them. Live examples with the code behind each one, and its API.
- [Stepper](https://vitralui.github.io/vitral/components/stepper.md): Steps and their panels, horizontal or vertical, with an optional linear mode that keeps later steps out of reach.
- [Tabs](https://vitralui.github.io/vitral/components/tabs.md): Views that share one place on the page, switched by a list of tabs. Live examples with the code behind each one, and its API.
- [Tag](https://vitralui.github.io/vitral/components/tag.md): A short label for a status or a category, in every severity, with an optional remove button. Live examples with the code behind each one, and its API.
- [Taskboard](https://vitralui.github.io/vitral/components/taskboard.md): A kanban board of cards in columns and swimlanes, dragged by mouse, touch or keyboard, with work-in-progress limits.
- [Terminal](https://vitralui.github.io/vitral/components/terminal.md): A prompt and a log, for a console inside an application, with a command history. Live examples with the code behind each one, and its API.
- [Textarea](https://vitralui.github.io/vitral/components/textarea.md): A multi-line text box on the same field chrome as InputText, that can grow with its content. Live examples with the code behind each one, and its API.
- [TieredMenu](https://vitralui.github.io/vitral/components/tieredmenu.md): A menu whose items open submenus beside them, to any depth, inline or as a popup. Live examples with the code behind each one, and its API.
- [Timeline](https://vitralui.github.io/vitral/components/timeline.md): Events on an axis, down the page or across it, with content on one side, the other, or alternating. Live examples with the code behind each one, and its API.
- [TimePicker](https://vitralui.github.io/vitral/components/timepicker.md): A time of day, typed freely or picked from a list, and kept as minutes past midnight rather than a Date.
- [Toast](https://vitralui.github.io/vitral/components/toast.md): Notifications sent from anywhere with useToast, stacked at a chosen position, that pause their timer while hovered or focused.
- [ToggleButton](https://vitralui.github.io/vitral/components/togglebutton.md): A button that stays pressed, with its own on and off labels and icons. Live examples with the code behind each one, and its API.
- [ToggleSwitch](https://vitralui.github.io/vitral/components/toggleswitch.md): An on/off switch over a native checkbox, with a header above and on/off content beside it. Live examples with the code behind each one, and its API.
- [Toolbar](https://vitralui.github.io/vitral/components/toolbar.md): A row of controls in start, center and end groups, with optional arrow-key navigation between them. Live examples with the code behind each one, and its API.
- [Tooltip](https://vitralui.github.io/vitral/components/tooltip.md): The v-tooltip directive: a hint shown on hover and on keyboard focus, which describes the element it sits on.
- [Tree](https://vitralui.github.io/vitral/components/tree.md): Hierarchical data with branches that open and close, selection by click or checkbox, a filter, and children loaded on demand.
- [TreeSelect](https://vitralui.github.io/vitral/components/treeselect.md): A select over a tree, with the same filter and checkbox selection as Tree. Live examples with the code behind each one, and its API.
- [TreeTable](https://vitralui.github.io/vitral/components/treetable.md): Rows that expand into rows, with sorting that keeps the nesting and a filter that keeps the branches leading to matches.
- [UniformGrid](https://vitralui.github.io/vitral/components/uniformgrid.md): A grid of equal cells that works out its rows or columns from the number of children. Live examples with the code behind each one, and its API.
- [VirtualScroller](https://vitralui.github.io/vitral/components/virtualscroller.md): Renders only the items near the viewport, so a hundred thousand rows cost what a screenful does, with lazy loading.
- [WrapPanel](https://vitralui.github.io/vitral/components/wrappanel.md): Lays children out in a line and wraps to the next when it is full, across or down, with an optional uniform size.

## Templates

- [Skylark Air template](https://vitralui.github.io/vitral/templates/airline.md): A flight booking flow: search, results, seat selection and a verified payment. A Vue 3 template built from Vitral components, with its source on GitHub.
- [Meridian Access template](https://vitralui.github.io/vitral/templates/auth.md): The screens before the application: sign in on a card, beside a panel or in a dialog, sign up, and reset a password.
- [Field Notes template](https://vitralui.github.io/vitral/templates/blog.md): A personal blog: posts with tags, a post page with comments, and an about page. A Vue 3 template built from Vitral components, with its source on GitHub.
- [Fernhill Supply template](https://vitralui.github.io/vitral/templates/ecommerce.md): An online store: catalogue, product page, cart and a three-step checkout. A Vue 3 template built from Vitral components, with its source on GitHub.
- [Harborline Bank template](https://vitralui.github.io/vitral/templates/finance.md): Online banking: account balances with charts, a transactions table and a transfer flow.
- [Brightpath Academy template](https://vitralui.github.io/vitral/templates/lms.md): A learning platform: courses, a video lesson, a class calendar and grades. A Vue 3 template built from Vitral components, with its source on GitHub.
- [The Lantern template](https://vitralui.github.io/vitral/templates/news.md): A news site: a front page, an article page and paginated sections. A Vue 3 template built from Vitral components, with its source on GitHub.
- [Orbit template](https://vitralui.github.io/vitral/templates/projects.md): Project management: a kanban board, a team timeline and workload. A Vue 3 template built from Vitral components, with its source on GitHub.
- [Northgate Homes template](https://vitralui.github.io/vitral/templates/realestate.md): A property site: search with a map, filtered listings and a home page with visit booking.
- [Lumen Metrics template](https://vitralui.github.io/vitral/templates/saas.md): A SaaS admin: revenue KPIs and charts, a customer table and settings. A Vue 3 template built from Vitral components, with its source on GitHub.

## Optional

- [Everything in one file](https://vitralui.github.io/vitral/llms-full.txt): every page above, concatenated.
- [Icons](https://vitralui.github.io/vitral/icons/): the icon set, searchable on the site.
- [Charts](https://vitralui.github.io/vitral/charts/): every kind of chart, drawn live with the options behind each one.