v1.4.3 · MIT licensed

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 View on GitHub

or run npm install @vaneui/ui

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.

DogCard.tsx

<Card mobileStack noGap noPadding overflowHidden row sm>
  <Img
    alt="Oliver"
    className="max-mobile:w-full w-[188px] h-full"
    sharp
    sm
    src="/puppy.png"
  />
  <Stack sm>
    <Row justifyBetween>
      <Title>Oliver</Title>
      <Chip fontBold sm>male</Chip>
    </Row>
    <Divider />
    <Text sm>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.</Text>
    <Row justifyEnd mobileStack sm>
      <Button className="max-mobile:w-full" filled sm success>Adopt</Button>
      <Button className="max-mobile:w-full" secondary sm>Learn more</Button>
    </Row>
  </Stack>
</Card>

Works with

React 18 and 19

Next.js

Vite

TypeScript

Tailwind CSS v4

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.

Password

Remember me

Forms

Field, Checkbox, Button

Docs

Service	Status	Latency
api	Up	42ms
auth	Slow	380ms
billing	Down	none
search	Up	65ms

Data

Table, Badge

Docs

Your changes were saved.

The payment failed. Check your card.

Feedback and overlays

Alert, Menu, Tooltip, Modal

Docs

Email notifications Weekly digest

Region

Settings

Switch, Field with select

Docs

Plan

Free Pro, $12 a month Team

Change it any time.

Choices

RadioGroup, Radio

Docs

Navigation

NavLink, Badge

Docs

Browse all components

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.

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.

<Button primary lg filled>

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>

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 } }
}}>

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.

<html data-theme="dark">

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>

Tailwind CSS when you need it

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

@import "@vaneui/ui/css";

One component, three themes

The same card under three ThemeProvider presets. Switch them to see the defaults and CSS variables that change, then try the theme toggle in the header for dark mode.

Clean and modern with rounded corners.

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.

.theme-wrapper {
  --br-unit: 5;
}

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

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

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

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.

Start building

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

npm install @vaneui/ui

Then import the styles. On Tailwind CSS v4, follow the Tailwind setup in the Installation guide instead.

@import "@vaneui/ui/css";

Read the Docs Try the Playground View on GitHub