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>

What is VaneUI?

A modern React component library powered by Tailwind CSS.

VaneUI bridges the gap between utility-first CSS and component-based development. Write less code, build faster, and maintain consistency across your entire application.

// Other UI framework's button
<Button appearance="primary" 
        size="large"
        variant="filled" />

// VaneUI button:
<Button primary lg filled />

Clean, readable component syntax

Style components with simple words like primary, filled, or outline. No complicated settings or long property names.

// Typography and layout scales 
// on mobile, tablet, and desktop screens 
<Section xl>
  <PageTitle>Welcome to My App</PageTitle>
  <SectionTitle>Features</SectionTitle>
  <Title>Getting Started</Title>
</Section>

Responsive layout and typography

Headings and text scale down on smaller screens without any extra code. Your content looks great on every device right out of the box.

<ThemeProvider themeDefaults={{
  button: {
    main: { filled: true, sm: true }
  }
}}>
  <App />
</ThemeProvider>

Theme once, apply everywhere

Set default styles for your entire app or customize sections individually. Nest themes to create different looks for different areas.

See it in action

Watch how changing props instantly transforms components.

CardExample.tsx

<Card row mobileStack overflowHidden>
  <Img src="/puppy.png" alt="puppy" width={185} height={185}
       className="shrink-0 max-mobile:w-full"/>
  <Stack sm>
    <Row justifyBetween>
      <Title>{dog.name}</Title>
      <Chip sm>{dog.gender}</Chip>
    </Row>
    <Divider/>
    <Text sm>{dog.description}</Text>
    <Row mobileStack>
      <Button className="max-mobile:w-full">Adopt</Button>
      <Button className="max-mobile:w-full">Learn more</Button>
    </Row>
  </Stack>
</Card>

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.

Component library

40+ components for layout, typography, forms, and overlays.

Create Account

NameEmailI agree to the Terms of Service and Privacy Policy

Example.tsx

<>
  <Card className="max-w-80" lg>
    <Title sm>Create Account</Title>
    <Col>
      <Label htmlFor="name">Name</Label>
      <Input id="name" placeholder="Enter your name" />
      <Label htmlFor="email">Email</Label>
      <Input id="email" placeholder="you@example.com" type="email" />
      <Label row sm>
        <Checkbox />
        I agree to the Terms of Service and Privacy Policy
      </Label>
    </Col>
    <Button filled lg success wFull>Sign Up</Button>
  </Card>
</>

Theme customization

Switch between different themes to see how components adapt. Each theme demonstrates the flexibility of the VaneUI theming system.

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

Give your agent the real docs and prop tables, so it writes valid VaneUI props instead of guessing.

MCP server

@vaneui/mcp serves every component page plus a prop table per component to Claude Code, Claude Desktop, Cursor, VS Code and other MCP clients.

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

Set up the MCP server

llms.txt

The whole documentation as one plain-text file for tools and models that read llms.txt.

https://vaneui.com/llms-full.txt

Open llms.txt

Why VaneUI

Built for developers who value simplicity and speed.

Rapid development

Pre-built components with sensible defaults get you started immediately. Customize with Tailwind utilities when needed, without breaking the component abstraction.

Composable architecture

Every component is designed to work seamlessly with others. Build complex UIs by combining simple, predictable building blocks that just work together.

Flexible theming

Built-in theme system with dark mode support. Override any component style with Tailwind classes or create your own theme variants effortlessly.

Responsive by default

Typography and spacing scale with the screen automatically. Use breakpoint props like mobileStack, tabletStack and tabletHide to change layouts per device.

Built on modern tools

VaneUI works with any React framework. No CSS-in-JS runtime: use it with Tailwind CSS v4, or import the prebuilt stylesheet without Tailwind.

React 18 and 19Tailwind CSS v4TypeScriptNext.jsVite

Ready to start building?

Install VaneUI and build your first component in minutes.

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