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.

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.

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.

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.

ListItem

Represents a single item within a List component. It can contain text, icons, or other components to create complex list structures.

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.