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

Typography Components

List

A container for displaying a series of related items in an ordered or unordered fashion. It provides consistent styling for list elements.

Basic List

A simple list with items.

First list item
Second list item
Third list item

BasicList.tsx

<List>
  <ListItem>First list item</ListItem>
  <ListItem>Second list item</ListItem>
  <ListItem>Third list item</ListItem>
</List>

List Sizes

Lists come in different sizes.

Extra Small List

Extra small item 1
Extra small item 2
Extra small item 3

Large List

Large item 1
Large item 2
Large item 3

ListSizes.tsx

<Col lg>
  <div>
    <Text semibold>Extra Small List</Text>
    <List xs>
      <ListItem>Extra small item 1</ListItem>
      <ListItem>Extra small item 2</ListItem>
      <ListItem>Extra small item 3</ListItem>
    </List>
  </div>
  <div>
    <Text semibold>Large List</Text>
    <List lg>
      <ListItem>Large item 1</ListItem>
      <ListItem>Large item 2</ListItem>
      <ListItem>Large item 3</ListItem>
    </List>
  </div>
</Col>

List Font Weights

Lists support different font weights.

Thin list item
Another thin item

Bold list item
Another bold item

Semibold list item
Another semibold item

ListFontWeights.tsx

<Col lg>
  <List thin>
    <ListItem>Thin list item</ListItem>
    <ListItem>Another thin item</ListItem>
  </List>
  <List bold>
    <ListItem>Bold list item</ListItem>
    <ListItem>Another bold item</ListItem>
  </List>
  <List semibold>
    <ListItem>Semibold list item</ListItem>
    <ListItem>Another semibold item</ListItem>
  </List>
</Col>

List Appearances

Lists can have different color appearances.

Primary list item
Another primary item

Secondary list item
Another secondary item

Success list item
Another success item

Danger list item
Another danger item

ListAppearances.tsx

<Col lg>
  <List primary>
    <ListItem>Primary list item</ListItem>
    <ListItem>Another primary item</ListItem>
  </List>
  <List secondary>
    <ListItem>Secondary list item</ListItem>
    <ListItem>Another secondary item</ListItem>
  </List>
  <List success>
    <ListItem>Success list item</ListItem>
    <ListItem>Another success item</ListItem>
  </List>
  <List danger>
    <ListItem>Danger list item</ListItem>
    <ListItem>Another danger item</ListItem>
  </List>
</Col>

List Font Families

Lists support different font families.

Sans serif list item
Another sans serif item

Serif list item
Another serif item

Monospace list item
Another monospace item

ListFontFamilies.tsx

<Col lg>
  <List sans>
    <ListItem>Sans serif list item</ListItem>
    <ListItem>Another sans serif item</ListItem>
  </List>
  <List serif>
    <ListItem>Serif list item</ListItem>
    <ListItem>Another serif item</ListItem>
  </List>
  <List mono>
    <ListItem>Monospace list item</ListItem>
    <ListItem>Another monospace item</ListItem>
  </List>
</Col>

List Styles

Lists support different styles and decorations.

Italic list item
Another italic item

Underlined list item
Another underlined item

ListStyles.tsx

<Col lg>
  <List italic>
    <ListItem>Italic list item</ListItem>
    <ListItem>Another italic item</ListItem>
  </List>
  <List underline>
    <ListItem>Underlined list item</ListItem>
    <ListItem>Another underlined item</ListItem>
  </List>
</Col>

List Transformations

Lists support different case transformations.

uppercase list item
another uppercase item

LOWERCASE LIST ITEM
ANOTHER LOWERCASE ITEM

capitalize list item
another capitalize item

ListTransformations.tsx

<Col lg>
  <List uppercase>
    <ListItem>uppercase list item</ListItem>
    <ListItem>another uppercase item</ListItem>
  </List>
  <List lowercase>
    <ListItem>LOWERCASE LIST ITEM</ListItem>
    <ListItem>ANOTHER LOWERCASE ITEM</ListItem>
  </List>
  <List capitalize>
    <ListItem>capitalize list item</ListItem>
    <ListItem>another capitalize item</ListItem>
  </List>
</Col>

List Alignment

Lists can be aligned differently.

Left aligned list item
Another left aligned item

Center aligned list item
Another center aligned item

Right aligned list item
Another right aligned item

ListAlignment.tsx

<div className="space-y-4 border-2 border-dashed border-gray-300 p-4">
  <List textLeft>
    <ListItem>Left aligned list item</ListItem>
    <ListItem>Another left aligned item</ListItem>
  </List>
  <List textCenter>
    <ListItem>Center aligned list item</ListItem>
    <ListItem>Another center aligned item</ListItem>
  </List>
  <List textRight>
    <ListItem>Right aligned list item</ListItem>
    <ListItem>Another right aligned item</ListItem>
  </List>
</div>

Mixed List Items

List items can have different individual styling.

Regular list item
Primary list item
Secondary bold list item
Success italic list item
Danger underlined list item

MixedListItems.tsx

<List>
  <ListItem>Regular list item</ListItem>
  <ListItem primary>Primary list item</ListItem>
  <ListItem bold secondary>Secondary bold list item</ListItem>
  <ListItem italic success>Success italic list item</ListItem>
  <ListItem danger underline>Danger underlined list item</ListItem>
</List>

Nested Lists

Lists can contain nested sublists for hierarchical content.

First level item 1
First level item 2
- Second level item 1
- Second level item 2
- Second level item 3
  - Third level item 1
  - Third level item 2
First level item 3

NestedLists.tsx

<List>
  <ListItem>First level item 1</ListItem>
  <ListItem>
    First level item 2
    <List>
      <ListItem>Second level item 1</ListItem>
      <ListItem>Second level item 2</ListItem>
      <ListItem>
        Second level item 3
        <List>
          <ListItem>Third level item 1</ListItem>
          <ListItem>Third level item 2</ListItem>
        </List>
      </ListItem>
    </List>
  </ListItem>
  <ListItem>First level item 3</ListItem>
</List>