VaneUI

Documentation

GitHub

Getting Started

Core Concepts Installation Usage Basics

Basic Components

Button Badge Chip Checkbox Label Code Divider Input

Layout Components

Section Container Row Col Stack Card Grid3 Grid4 Grid5 Grid6

Typography Components

Text Title PageTitle SectionTitle Link List ListItem

Customization

Theming Overview Using ThemeProvider Theme & ThemeOverride ThemeDefaults ExtraClasses CSS Variables

Layout Components

Card

A flexible container component that groups related content with consistent styling. Cards can contain text, images, and other components.

Basic Card

A simple card container.

Card Title

This is a basic card with some content inside.

BasicCard.tsx

<Card>
  <Title>Card Title</Title>
  <Text>This is a basic card with some content inside.</Text>
</Card>

Card Sizes

Cards come in different sizes such as xs, sm, md, lg, xl.

Card xs

Content for xs size

Card sm

Content for sm size

Card md

Content for md size

Card lg

Content for lg size

Card xl

Content for xl size

CardSizes.tsx

<Row flexWrap>
  <Card xs>
    <Title xs>Card xs</Title>
    <Text xs>Content for xs size</Text>
  </Card>
  <Card sm>
    <Title sm>Card sm</Title>
    <Text sm>Content for sm size</Text>
  </Card>
  <Card md>
    <Title>Card md</Title>
    <Text>Content for md size</Text>
  </Card>
  <Card lg>
    <Title lg>Card lg</Title>
    <Text lg>Content for lg size</Text>
  </Card>
  <Card xl>
    <Title xl>Card xl</Title>
    <Text xl>Content for xl size</Text>
  </Card>
</Row>

Card Appearances

Cards can have different background appearances.

default Card

Card with default background

accent Card

Card with accent background

primary Card

Card with primary background

secondary Card

Card with secondary background

tertiary Card

Card with tertiary background

success Card

Card with success background

danger Card

Card with danger background

warning Card

Card with warning background

info Card

Card with info background

link Card

Card with link background

CardAppearances.tsx

<Row flexWrap>
  <Card default>
    <Title>default Card</Title>
    <Text>Card with default background</Text>
  </Card>
  <Card accent>
    <Title>accent Card</Title>
    <Text>Card with accent background</Text>
  </Card>
  <Card primary>
    <Title>primary Card</Title>
    <Text>Card with primary background</Text>
  </Card>
  <Card secondary>
    <Title>secondary Card</Title>
    <Text>Card with secondary background</Text>
  </Card>
  <Card tertiary>
    <Title>tertiary Card</Title>
    <Text>Card with tertiary background</Text>
  </Card>
  <Card success>
    <Title>success Card</Title>
    <Text>Card with success background</Text>
  </Card>
  <Card danger>
    <Title>danger Card</Title>
    <Text>Card with danger background</Text>
  </Card>
  <Card warning>
    <Title>warning Card</Title>
    <Text>Card with warning background</Text>
  </Card>
  <Card info>
    <Title>info Card</Title>
    <Text>Card with info background</Text>
  </Card>
  <Card link>
    <Title>link Card</Title>
    <Text>Card with link background</Text>
  </Card>
</Row>

Card Borders

Control card border appearance.

Card border

Card with border

Card borderT

Card with borderT

Card borderB

Card with borderB

Card borderL

Card with borderL

Card borderR

Card with borderR

Card borderX

Card with borderX

Card borderY

Card with borderY

Card noBorder

Card with noBorder

CardBorders.tsx

<Row flexWrap>
  <Card border>
    <Title>Card border</Title>
    <Text>Card with border</Text>
  </Card>
  <Card borderT>
    <Title>Card borderT</Title>
    <Text>Card with borderT</Text>
  </Card>
  <Card borderB>
    <Title>Card borderB</Title>
    <Text>Card with borderB</Text>
  </Card>
  <Card borderL>
    <Title>Card borderL</Title>
    <Text>Card with borderL</Text>
  </Card>
  <Card borderR>
    <Title>Card borderR</Title>
    <Text>Card with borderR</Text>
  </Card>
  <Card borderX>
    <Title>Card borderX</Title>
    <Text>Card with borderX</Text>
  </Card>
  <Card borderY>
    <Title>Card borderY</Title>
    <Text>Card with borderY</Text>
  </Card>
  <Card noBorder>
    <Title>Card noBorder</Title>
    <Text>Card with noBorder</Text>
  </Card>
</Row>

Card Shapes

Cards support different border radius styles.

Card rounded

Card with rounded corners

Card sharp

Card with sharp corners

CardShapes.tsx

<Row flexWrap>
  <Card rounded>
    <Title>Card rounded</Title>
    <Text>Card with rounded corners</Text>
  </Card>
  <Card sharp>
    <Title>Card sharp</Title>
    <Text>Card with sharp corners</Text>
  </Card>
</Row>

Card with Shadow

Cards can have drop shadows.

Card shadow

Card with shadow

Card noShadow

Card with noShadow

CardwithShadow.tsx

<Row flexWrap>
  <Card shadow>
    <Title>Card shadow</Title>
    <Text>Card with shadow</Text>
  </Card>
  <Card noShadow>
    <Title>Card noShadow</Title>
    <Text>Card with noShadow</Text>
  </Card>
</Row>

Card with Ring

Cards can have focus rings.

Card ring

Card with ring

Card noRing

Card with noRing

CardwithRing.tsx

<Row flexWrap>
  <Card ring>
    <Title>Card ring</Title>
    <Text>Card with ring</Text>
  </Card>
  <Card noRing>
    <Title>Card noRing</Title>
    <Text>Card with noRing</Text>
  </Card>
</Row>

Card Padding

Control card internal padding.

Card padding

Card with padding

Card noPadding

Card with noPadding

CardPadding.tsx

<Row flexWrap>
  <Card padding>
    <Title>Card padding</Title>
    <Text>Card with padding</Text>
  </Card>
  <Card noPadding>
    <Title>Card noPadding</Title>
    <Text>Card with noPadding</Text>
  </Card>
</Row>

Card Flex Direction

Control the direction of card content.

Column Direction

Content flows vertically

Another line

Row Direction

Content flows horizontally

CardFlexDirection.tsx

<Row flexWrap>
  <Card column>
    <Title>Column Direction</Title>
    <Text>Content flows vertically</Text>
    <Text>Another line</Text>
  </Card>
  <Card row>
    <Title>Row Direction</Title>
    <Text>Content flows horizontally</Text>
  </Card>
</Row>

Card with Gap

Control spacing between card content.

Card gap

Content with gap

Another line

Card noGap

Content with noGap

Another line

CardwithGap.tsx

<Row flexWrap>
  <Card gap>
    <Title>Card gap</Title>
    <Text>Content with gap</Text>
    <Text>Another line</Text>
  </Card>
  <Card noGap>
    <Title>Card noGap</Title>
    <Text>Content with noGap</Text>
    <Text>Another line</Text>
  </Card>
</Row>

Filled and Outline Cards

Cards support filled and outline variants with typography color inheritance.

Filled Primary Card

Typography inherits primary color

Outline Success Card

Typography inherits success color

Filled Danger Card

Typography inherits danger color

FilledandOutlineCards.tsx

<Row flexWrap>
  <Card filled lg primary>
    <Title primary>Filled Primary Card</Title>
    <Text primary>Typography inherits primary color</Text>
  </Card>
  <Card lg outline success>
    <Title success>Outline Success Card</Title>
    <Text success>Typography inherits success color</Text>
  </Card>
  <Card danger filled lg>
    <Title danger>Filled Danger Card</Title>
    <Text danger>Typography inherits danger color</Text>
  </Card>
</Row>