VaneUI

VaneUI

GitHubOpen 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

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.

react-icon

DogCard.tsx

<Card mobileCol noGap noPadding overflowHidden row sm>
  <Img 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.

react-icon

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

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.

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
react-icon

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.

react-icon

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

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Title Components

This is a title example

This is a title example

This is a title example

This is a title example

This is a title example

Link Components

Extra large bold linkLarge semibold linkMedium linkSmall italic linkExtra small underlined link

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.

puppy

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: {
    sm: true
  },
  card: {
    shadow: true,
    md: true
  },
  chip: {
    sm: true,
    bold: true
  }
};