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.
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 displays text for categorization, status indicators, or highlighting information. Can be styled with different colors, sizes, and variants.
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.
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.
Grid2
A responsive layout component for creating a two-column grid. Ideal for side-by-side content layouts and balanced arrangements.
Grid3
A specialized layout component for creating a responsive three-column grid. It simplifies the arrangement of content into a balanced and organized structure.
Grid4
A responsive layout component that arranges its children into a four-column grid. This is ideal for displaying a collection of items or features.
Grid5
A responsive layout component that creates a five-column grid. Perfect for organizing content into balanced, visually appealing arrangements.
Grid6
A six-column grid layout component for creating compact, organized displays. Ideal for icon grids, feature collections, and detailed content arrangements.
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.
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.
Navigation Components
Components for building navigation interfaces like sidebars, menus, and header links.
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. It provides consistent styling for list elements.
ListItem
A single entry inside a List. Renders an <li> with Text's typography props (minus margin, letter-spacing, cursor), plus an icon prop for the marker.
Blockquote
Displays quoted content with a left border accent. Inherits appearance from the parent by default, so it blends into themed containers.
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.
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 and cross-component documentation.