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.
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.
Theming Overview
Understand VaneUI's powerful theming system and design token architecture.
Using ThemeProvider
Configure and customize themes throughout your application with ThemeProvider.
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.
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.
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.
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.