v0.9.0 · Open Source

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

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 mobileCol 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 bold 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 mobileCol 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: { 
    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 mobileCol 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 mobileCol>
      <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

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

Create Account

NameEmailI agree to the Terms of Service and Privacy Policy

Example.tsx

<>
  <Card lg>
    <Title sm>Create Account</Title>
    <Col xs>
      <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>
        <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.

Theme: balanced. 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,
    bold: true
  }
};

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

Every component adapts to screen size automatically. Use responsive props like xs, sm, md, lg, xl to fine-tune layouts for any device.

Built on modern tools

VaneUI works with any React framework. No runtime CSS — just Tailwind utility classes.

React 19Tailwind CSS v4TypeScriptNext.jsVite

Ready to start building?

Install VaneUI and build your first component in minutes.

npm install @vaneui/ui

Read the Docs View on GitHub