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.

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

import { Card, Row, Stack, Title, Text, Chip, Divider, Button } from '@vaneui/ui';
import dog from './data/dog.json';

export function DogCard() {
  return (
    <Card row smCol noPadding noGap overflowHidden>
      <img src={dog.image} alt="puppy" className="w-[185px] max-sm:w-full"/>
      <Stack sm>
        <Row justifyBetween>
          <Title>{dog.name}</Title>
          <Chip sm bold>{dog.gender}</Chip>
        </Row>
        <Divider/>
        <Text sm>{dog.description}</Text>
        <Row sm smCol justifyEnd>
          <Button sm success filled className="max-sm:w-full">Adopt</Button>
          <Button sm secondary className="max-sm:w-full">Learn more</Button>
        </Row>
      </Stack>
    </Card>
  );
}

Basic components

VaneUI combines the flexibility of Tailwind CSS with the structure of a component library, giving you the best of both worlds.

Use the default UI components, like Buttons:

BasicComponents.tsx

<Col>
  <Text>Use the default UI components, like Buttons:</Text>
  <Row>
    <Button filled>Filled button</Button>
    <Button outline>Outline button</Button>
    <Button>Default button</Button>
  </Row>
</Col>

Typography

Ready-to-use text components

The quick brown fox jumps over the lazy dog

BasicComponents.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>

Theme Customization Demo

This demonstrates the Global Configuration Provider using React Context. Click the button to apply custom button settings using lambda functions. Lambda functions allow for more dynamic customization by accessing and modifying the default settings and classes.

Using Default Theme

The custom theme makes all buttons larger with bold text and filled by default.