VaneUI
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.
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.
Basic Components
A collection of fundamental and interactive components for building user interfaces.
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.
Layout Components
A set of components designed to help structure and organize your page content.
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.
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.
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.
Customization
Learn how to customize and theme VaneUI components to match your design requirements.
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.