VaneUI
v1.4.3
GitHub

Deliver clean UI
without complex code

VaneUI is a React component library powered by Tailwind CSS. Designed for building beautiful and responsive user interfaces.

Get started

$ npm install @vaneui/ui

Fig. 01: live render

Oliver

male

Oliver is a shy, sweet pup learning to trust. He needs a calm, patient home. Older kids and a gentle dog will help him feel secure.

react-icon

DogCard.tsx

<Card sm row noPadding noGap>
  <Img sm sharp src="/puppy.png" width={188} height={188}/>
  <Stack sm>
    <Row justifyBetween>
      <Title>Oliver</Title>
      <Chip sm fontBold>male</Chip>
    </Row>
    <Divider/>
    <Text sm>Oliver is a shy, sweet pup learning to trust.</Text>
    <Row sm justifyEnd>
      <Button filled>Adopt</Button>
      <Button secondary>Learn more</Button>
    </Row>
  </Stack>
</Card>

Works with

React 18 and 19

Next.js

Vite

TypeScript

Tailwind CSS v4

[01] Components

40+ components that fit together

Forms, data, feedback and overlays share one size scale and one set of colors. Every tile below is the real component, so try it.

Forms

Field, Checkbox, Button

ServiceStatusLatency
apiUp42ms
authSlow380ms
billingDownnone
searchUp65ms

Data

Table, Badge

Your changes were saved.
The payment failed. Check your card.

Feedback

Alert, Menu, Tooltip, Modal

Settings

Switch, Field with select

Navigation

NavLink, Badge

Change it any time.

Choices

RadioGroup, Radio

Catalog

40+

Browse every component

Buttons, inputs, overlays, tables and layout, each with live examples and a props table.

[02] Principles

Less code for the same interface

VaneUI keeps the styling decisions in the component, so the markup you write stays short and reads like the design.

02.1

Props instead of class names

Size, color, variant and shape are words you set on the component. Each group allows one value, so styles never fight.

One value per group: sharp replaces pill.

<Button>

1/6

02.2

Dark mode with one attribute

Every color is a CSS variable with a dark value. Set one attribute and the whole page follows, overlays included.

Oliver

Adoption profile

male
<html data-theme="dark">

02.3

Responsive without breakpoint classes

Type and spacing scale down on smaller screens by themselves. One prop stacks a row on tablets or phones.

<Row tabletStack>
  <Card>Plan</Card>
  <Card>Usage</Card>
</Row>

02.4

Theme once, for the whole app

Set defaults for every component in one provider, and nest providers to give a section its own look.

<ThemeProvider themeDefaults={{
  button: { main: { pill: true } }
}}>

02.5

Accessible building blocks

Field links its label, help and error text to the control. Modal traps focus, and Menu works from the keyboard.

<Field label="Email" error={error}>
  <Input type="email"/>
</Field>

02.6

Tailwind CSS when you need it

Use the Tailwind CSS v4 build you already have, or import one prebuilt stylesheet. className still works.

With your Tailwind CSS v4 build

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

Without Tailwind CSS

@import "@vaneui/ui/css";

[03] Theming

Restyle every component from one place

ThemeProvider sets default props and CSS variables for every component inside it. The themes below are three examples: yours can use any values, and a nested provider gives one section its own look.

Example theme

Rounded corners and soft shadows.

const themeDefaults: ThemeDefaults = {
  img: {
    xs: true
  },
  button: {
    main: {
      sm: true
    }
  },
  card: {
    main: {
      shadow: true,
      md: true
    }
  },
  chip: {
    sm: true,
    fontBold: true
  }
};

Oliver

male

Oliver is a shy, sweet pup learning to trust. He needs a calm, patient home. Older kids and a gentle dog will help him feel secure.

[04] AI agents

Ready for AI coding agents

The @vaneui/mcp (opens in new window) server gives your agent the real component docs and prop tables, so it writes valid VaneUI props instead of guessing.

Add it with one command

zsh

$ claude mcp add vaneui -- npx -y @vaneui/mcp

# then ask your agent

> Build a sign-in form with Field and Button

Setup for Claude Desktop, Cursor and VS Code is in the @vaneui/mcp README (opens in new window).

Works with

Claude Code

Claude Desktop

Cursor

Also VS Code and any other client that runs a stdio MCP server.

[05] Get started

Build your next interface with VaneUI

Install the package, import one stylesheet and render your first component.

$ npm install @vaneui/ui

Read the docs Open the playground GitHub