Documentation
VaneUI provides a collection of reusable components that can be used to build modern and responsive web applications.
Getting Started
An overview of the library and instructions on how to install and configure it in your project.
Installation
Follow these steps to get the library installed and ready to use in your application.
Core Concepts
Understand VaneUI's philosophy of boolean props, Tailwind CSS integration, and component customization.
Usage Basics
Learn fundamental patterns and concepts for using VaneUI components effectively.
Basic Components
A collection of fundamental and interactive components for building user interfaces.
Button
Button triggers an action or event when clicked. It can contain text, an icon, or both, and is a primary way for users to interact with the app.
IconButton
A square icon-only button with customizable appearance, size, and shape. Supports loading state and renders as anchor when href is provided.
NavLink
A navigation link for sidebars, nav menus, and headers. Supports active state, icons, and renders as anchor or button.
Badge
Badge highlights information such as notifications or counts in a non-intrusive way. Often paired with other elements like icons or navigation links.
Chip
Compact token for tags, attributes, or other discrete entities inline with text. Defaults to secondary appearance, outline variant, and rounded shape.
Code
Renders inline code snippets in a themed monospace surface. Use for commands, file paths, or technical terms in prose; renders as an anchor when given href.
Kbd
Displays keyboard keys and shortcuts with monospace font, border, and a raised 3D effect. Ideal for documenting keyboard shortcuts.
Mark
Highlights text with a background color for emphasis. Defaults to warning (yellow) appearance for a natural highlighter effect.
Icon
A lightweight SVG wrapper that provides consistent sizing, color inheritance, and themed appearances for icons.
Alert
Alert is a live region for messages that follow a user action. It announces itself when it appears, assertively by default or politely on request.
Spinner
Spinner indicates that something is in progress. The ring is sized in em, so it scales with the size prop and lines up with text.
Form Components
Controls for capturing user input, and the label that ties them to their text.
Input
Input lets users enter text, numbers, and other data. A form element with support for various types, validation states, and styling options.
Checkbox
Allows users to select one or more options from a set. Checkboxes are ideal for binary choices and multiple selections within forms.
Label
Label associates text with a form control. Wrap an Input or Checkbox to make the label clickable, or use htmlFor when the control sits outside.
Field
Field wires a control to its label, help text and error message. It owns the id, points the label at the control, and links both messages with aria-describedby.
Textarea
Textarea captures multi-line input. It shares the Input size ramp and appearance props, resizes vertically, and never collapses below three lines.
Select
Select presents a list of options using the native dropdown, so it stays keyboard and screen-reader correct and behaves as expected on mobile.
Radio
Radio selects exactly one option from a set. RadioGroup shares a name across its options and exposes them as a single labelled group.
Switch
Switch toggles a setting that takes effect immediately. Use Checkbox instead when the value is submitted with a form.
Typography Components
A suite of components for rendering text and establishing a clear typographic hierarchy.
Text
The primary component for rendering all text content. It provides props to control typographic properties like size, weight, color, and alignment.
PageTitle
A specialized component for the primary heading of a page. It ensures consistent styling for top-level titles across your application.
SectionTitle
A component for rendering headings of major sections within a page. It helps to create a clear and accessible document structure.
Title
Renders a heading to establish a semantic hierarchy on the page. Use this component for the main titles of pages or sections.
Link
Renders an accessible and themeable anchor link for navigation. Use this to direct users to other pages or external websites.
List
A container for displaying a series of related items in an ordered or unordered fashion. Documents both List and its ListItem entries.
Blockquote
Displays quoted content with a left border accent. Inherits appearance from the parent by default, so it blends into themed containers.
Layout Components
A set of components designed to help structure and organize your page content.
Container
Manages the main content area by centering it and applying a max-width. It ensures a consistent and readable layout across different screen sizes.
Section
Groups related content and owns the outer padding and background of a page band. Renders as a plain wrapper by default; pass tag="section" for a landmark.
Row
A fundamental layout component that arranges its children in a horizontal line. It is built on the flexbox model and is used to create columns.
Col
Col organizes content vertically within a Row, creating responsive column-based layouts.
Stack
Stack arranges its children with consistent spacing. Works for both vertical and horizontal layouts.
Card
Card is a container that groups related content with consistent styling. It can contain text, images, and other components.
Grid
Responsive equal-width column layouts. Grid2 through Grid6 render two to six columns that reduce on smaller screens; they share one API and differ only in column count.
Divider
Renders a thin line to separate content and create a clear visual hierarchy. Dividers can be used to group related items in lists and layouts.
Img
Displays images with VaneUI styling support including sizes, shapes, borders, shadows, and object-fit options.
Table
Renders semantic table markup with Table, Thead, Tbody, Tfoot, Tr, Th, Td, and Caption. The size prop cascades from the table to every cell, and a cell or row can override it.
Overlay Components
Components for overlays, dialogs, and floating elements that appear above the page content.
Overlay
A fullscreen backdrop overlay for creating modal backgrounds, loading screens, and lightbox effects. Renders via portal with click-to-close and optional blur.
Modal
Modal is an accessible dialog with focus trapping, scroll lock, and keyboard navigation. Renders its portal backdrop with role="dialog" and aria-modal="true".
Popup
A floating element anchored to a trigger element using CSS Anchor Positioning. Supports 12 placement options, width matching, and click-outside dismissal.
Menu
A dropdown menu triggered by a button with full keyboard navigation. Contains MenuItem, Divider, and MenuLabel subcomponents.
Tooltip
Tooltip labels its trigger with a short hint on hover and on keyboard focus, describing the trigger rather than advertising a disclosure.
Customization
Learn how to customize and theme VaneUI components to match your design requirements.
Theming Overview
Understand VaneUI's theming system and design token architecture.
Using ThemeProvider
Configure and customize themes throughout your application with ThemeProvider.
Theme & ThemeOverride
Customize themes using ThemeProvider's theme and themeOverride properties (applied to providers, not components).
ThemeDefaults
Set default theme values across your application using themeDefaults.
ExtraClasses
Apply additional CSS classes to components using extraClasses.
CSS Variables
Customize VaneUI components using CSS custom properties and variables.
Dark Mode
Enable dark mode with the data-theme="dark" attribute and re-declare color tokens for custom themes.
Customizing Styles
Override VaneUI component styles using Tailwind CSS classes, CSS variables, and the className prop.
Variant Inheritance
How components inherit colors from ancestor layouts via CSS custom-property cascade.
Reference
Shared prop reference, cross-component documentation, and release notes.