Installation

Install VaneUI, a React component library built with TypeScript and Tailwind CSS, using your preferred package manager:

npm install @vaneui/ui

yarn add @vaneui/ui

pnpm add @vaneui/ui

CSS setup

VaneUI supports two CSS setup options depending on your project configuration.

Option 1: with Tailwind CSS (recommended)

If your project uses Tailwind CSS v4, VaneUI plugs in directly. Tailwind scans VaneUI components and generates only the CSS classes you use.

Install Tailwind CSS if you haven't already:

npm install -D tailwindcss @tailwindcss/postcss

Add the following to your main CSS file:

Copy

@import "tailwindcss";
@import "@vaneui/ui/tokens";
@import "@vaneui/ui/vars";
@source "../node_modules/@vaneui/ui";

This setup:

• Imports Tailwind CSS base styles
• Imports VaneUI theme tokens (registers custom breakpoints and design tokens with Tailwind)
• Imports VaneUI CSS variables and component rules
• Tells Tailwind to scan VaneUI components for class generation

Option 2: without Tailwind CSS

If your project doesn't use Tailwind CSS, you can import VaneUI's pre-built CSS bundle which includes all component styles.

Add the following to your main CSS file:

Copy

@import "@vaneui/ui/css";

This setup:

• Imports the complete pre-built VaneUI stylesheet (component styles and CSS variables in one file)
• Works without any Tailwind configuration

The pre-built stylesheet is compiled for VaneUI's own components; it does not contain Tailwind's full utility set. A Tailwind class passed through className or extraClasses has no effect unless it happens to be in the bundle, and most (max-w-md, p-6, size-8, ms-auto, z-40) are not. For arbitrary utilities, use Option 1 or the style prop.

ThemeProvider setup

Wrap your application in ThemeProvider. Without it, each component falls back to its own built-in default theme, but themeDefaults, extraClasses, and themeOverride only apply inside a provider. Place it once at the root, above every VaneUI component.

Copy

import { ThemeProvider } from '@vaneui/ui';

function Root() {
  return (
    <ThemeProvider>
      <App />
    </ThemeProvider>
  );
}

ThemeProvider needs no props to apply the built-in defaults. To set application-wide defaults, extra classes, or theme overrides, see Using ThemeProvider.

Usage

Start using VaneUI components in your React application:

Copy

import { Button, Stack } from '@vaneui/ui';

function App() {
  return (
    <Stack>
      <Button primary>Get Started</Button>
    </Stack>
  );
}

Per-component imports

For better tree-shaking, you can import components directly:

Copy

import { Button } from '@vaneui/ui/button';
import { Card } from '@vaneui/ui/card';
import { useTheme } from '@vaneui/ui/theme';

This is optional. Importing from @vaneui/ui works the same way. Per-component imports can reduce bundle size when using only a few components with bundlers that don't fully tree-shake barrel exports.

Available subpath imports include: @vaneui/ui/button, @vaneui/ui/iconButton, @vaneui/ui/icon, @vaneui/ui/badge, @vaneui/ui/card, @vaneui/ui/checkbox, @vaneui/ui/chip, @vaneui/ui/code, @vaneui/ui/divider, @vaneui/ui/img, @vaneui/ui/input, @vaneui/ui/kbd, @vaneui/ui/label, @vaneui/ui/mark, @vaneui/ui/menu, @vaneui/ui/modal, @vaneui/ui/navLink, @vaneui/ui/overlay, @vaneui/ui/popup, @vaneui/ui/section, @vaneui/ui/container, @vaneui/ui/row, @vaneui/ui/col, @vaneui/ui/stack, @vaneui/ui/grid, @vaneui/ui/typography, @vaneui/ui/layout, @vaneui/ui/theme, @vaneui/ui/props.