VaneUI

Open source components

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

Luka

male

Luka is a 5 months old puppy who loves to play with his toys. He is a very friendly and playful puppy, and he is looking for a new home.

DogCard.tsx

<Card noGap noPadding overflowHidden row sm smCol>
  <Img className="shrink-0 max-sm:w-full w-[185px]" sharp sm src="/puppy.png" />
  <Stack xs>
    <Row justifyBetween>
      <Title>Luka</Title>
      <Chip bold sm>male</Chip>
    </Row>
    <Divider />
    <Text sm>Luka is a 5 months old puppy who loves to play with his toys. He is a very friendly and playful puppy, and he is looking for a new home.</Text>
    <Row justifyEnd smCol xs>
      <Button className="max-sm:w-full" filled sm success>Adopt</Button>
      <Button className="max-sm: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.

Build faster with ready components

Start your project with a collection of prebuilt React components. Each component is designed to save development time and help you focus on building features instead of basic UI.

Customize easily to fit your brand

Quickly adjust colors, styles, spacing, and appearance to match your product’s look and feel. VaneUI makes it simple to create a consistent design system without extra effort.

Developer-friendly from the start

Enjoy a smooth developer experience with TypeScript support, clean APIs, and utility-first styling. VaneUI helps you write reliable code while keeping development efficient.

See it in action

Watch how changing props instantly transforms components.

CardExample.tsx

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

Luka

male

Luka is a 5 months old puppy who loves to play with his toys. He is a very friendly and playful puppy, and he is looking for a new home.

Basic components

Essential UI elements like buttons, badges, and chips.

Button Components

Badge Components

Primary badgeSuccess badgeWarning badgeDanger badgeSecondary badge

Chip Components

Extra small chipSmall chipMedium chipLarge chipExtra large chip

ButtonComponents.tsx

<Row flexWrap>
  <Button filled primary>Filled primary button</Button>
  <Button outline success>Outline success button</Button>
  <Button danger sharp>Danger sharp button</Button>
  <Button filled secondary>Filled secondary</Button>
  <Button pill warning>Outline warning</Button>
</Row>

Typography

Scalable text system with built-in hierarchy. From headings to body text, maintain perfect readability across all screen sizes.

Textcomponents.tsx

<Col xs>
  <Text xl>The quick brown fox jumps over the lazy dog</Text>
  <Text lg>The quick brown fox jumps over the lazy dog</Text>
  <Text md>The quick brown fox jumps over the lazy dog</Text>
  <Text sm>The quick brown fox jumps over the lazy dog</Text>
  <Text xs>The quick brown fox jumps over the lazy dog</Text>
</Col>

Text components

The quick brown fox jumps over the lazy dog

Title components

This is a title example

Link components

Extra large primary link Large semibold link Medium link ,success color Small link, warning color Extra small link, danger color

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.

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.

Luka

male

Luka is a 5 months old puppy who loves to play with his toys. He is a very friendly and playful puppy, and he is looking for a new home.