Documentation

Core Concepts

Understand VaneUI's philosophy of boolean props, Tailwind CSS integration, and component customization.

Installation

Follow these steps to get the library installed and ready to use in your application.

Usage Basics

Learn fundamental patterns and concepts for using VaneUI components effectively.

Button

Triggers an action or event when the user clicks on it. Buttons are a primary way for users to interact with the application and can contain text, an icon, or both.

Badge

Highlights important information such as notifications or counts in a non-intrusive way. Badges are typically used in conjunction with other elements like icons or navigation links.

Chip

Represents a complex entity in a compact form, such as an attribute, tag, or contact. Chips can be interactive, allowing for user input or triggering actions.

Checkbox

Allows users to select one or more options from a set. Checkboxes are ideal for binary choices and multiple selections within forms.

Label

Displays text with various styling options for categorization, status indicators, or highlighting important information. Labels can be styled with different colors, sizes, and variants.

Code

Renders inline code snippets with syntax highlighting. Perfect for displaying code examples, commands, file paths, or technical terms within text content.

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.

Input

Allows users to enter text, numbers, and other data. Inputs are essential form elements with support for various types, validation states, and styling options.

Img

Displays images with VaneUI styling support including sizes, shapes, borders, shadows, and object-fit options.

Icon

A lightweight SVG wrapper that provides consistent sizing, color inheritance, and themed appearances for icons.

IconButton

A square icon-only button with customizable appearance, size, and shape. Supports loading state and renders as anchor when href is provided.

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.

Section

A semantic container used to group related content within a page. This component helps to create a clear document outline and improve accessibility.

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.

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

A container that organizes content vertically within a Row. It provides a simple way to create flexible and responsive column-based layouts.

Stack

A flexible layout component that arranges its children with consistent spacing. It can be used for both vertical and horizontal layouts.

Card

A flexible container component that groups related content with consistent styling. Cards 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.

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

An accessible dialog component with focus trapping, scroll lock, and keyboard navigation. Built on Overlay with ARIA 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.

NavLink

A navigation link for sidebars, nav menus, and headers. Supports active state, icons, and renders as anchor or button.

Text

The primary component for rendering all text content. It provides props to control typographic properties like size, weight, color, and alignment.

Title

Renders a heading to establish a semantic hierarchy on the page. Use this component for the main titles of pages or sections.

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.

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.

Blockquote

Displays quoted content with a left border accent. Inherits appearance from the parent by default for seamless embedding in themed containers.

Theming Overview

Understand VaneUI's powerful 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.