VaneUI

VaneUI

Layout Components

Stack

A flexible layout component that arranges its children with consistent spacing. It can be used for both vertical and horizontal layouts.

Basic Stack

A flexible layout container.

Item 1
Item 2
Item 3
react-icon

BasicStack.tsx

<Stack>
  <div className="p-4 bg-gray-100 rounded">Item 1</div>
  <div className="p-4 bg-gray-100 rounded">Item 2</div>
  <div className="p-4 bg-gray-100 rounded">Item 3</div>
</Stack>

Stack Sizes

Stacks come in different sizes.

Extra Small Stack

Item 1
Item 2
Item 3

Large Stack

Item 1
Item 2
Item 3
react-icon

StackSizes.tsx

<Row flexWrap>
  <Col lg>
    <Text semibold>Extra Small Stack</Text>
    <Stack xs>
      <div className="p-2 bg-gray-100 rounded text-sm">Item 1</div>
      <div className="p-2 bg-gray-100 rounded text-sm">Item 2</div>
      <div className="p-2 bg-gray-100 rounded text-sm">Item 3</div>
    </Stack>
  </Col>
  <Col lg>
    <Text semibold>Large Stack</Text>
    <Stack lg>
      <div className="p-6 bg-gray-100 rounded">Item 1</div>
      <div className="p-6 bg-gray-100 rounded">Item 2</div>
      <div className="p-6 bg-gray-100 rounded">Item 3</div>
    </Stack>
  </Col>
</Row>

Stack with Gap

Control spacing between stack items.

No Gap

Item 1
Item 2
Item 3

With Gap

Item 1
Item 2
Item 3
react-icon

StackwithGap.tsx

<Row flexWrap>
  <Col lg>
    <Text semibold>No Gap</Text>
    <Stack noGap>
      <div className="p-4 bg-gray-100 border">Item 1</div>
      <div className="p-4 bg-gray-100 border">Item 2</div>
      <div className="p-4 bg-gray-100 border">Item 3</div>
    </Stack>
  </Col>
  <Col lg>
    <Text semibold>With Gap</Text>
    <Stack gap>
      <div className="p-4 bg-gray-100 rounded">Item 1</div>
      <div className="p-4 bg-gray-100 rounded">Item 2</div>
      <div className="p-4 bg-gray-100 rounded">Item 3</div>
    </Stack>
  </Col>
</Row>

Stack Flex Direction

Control the direction of stack content.

Column Direction

Item 1
Item 2
Item 3

Row Direction

Item 1
Item 2
Item 3
react-icon

StackFlexDirection.tsx

<Row flexWrap>
  <Col lg>
    <Text semibold>Column Direction</Text>
    <Stack column>
      <div className="p-4 bg-gray-100 rounded">Item 1</div>
      <div className="p-4 bg-gray-100 rounded">Item 2</div>
      <div className="p-4 bg-gray-100 rounded">Item 3</div>
    </Stack>
  </Col>
  <Col lg>
    <Text semibold>Row Direction</Text>
    <Stack row>
      <div className="p-4 bg-gray-100 rounded">Item 1</div>
      <div className="p-4 bg-gray-100 rounded">Item 2</div>
      <div className="p-4 bg-gray-100 rounded">Item 3</div>
    </Stack>
  </Col>
</Row>

Stack Wrap Options

Control how items wrap within the stack.

Flex Wrap

Long Item 1
Long Item 2
Long Item 3
Long Item 4

No Wrap

Long Item 1
Long Item 2
Long Item 3
react-icon

StackWrapOptions.tsx

<Row flexWrap>
  <Col lg>
    <Text semibold>Flex Wrap</Text>
    <Stack className="max-w-md" flexWrap row>
      <div className="p-4 bg-gray-100 rounded">Long Item 1</div>
      <div className="p-4 bg-gray-100 rounded">Long Item 2</div>
      <div className="p-4 bg-gray-100 rounded">Long Item 3</div>
      <div className="p-4 bg-gray-100 rounded">Long Item 4</div>
    </Stack>
  </Col>
  <Col lg>
    <Text semibold>No Wrap</Text>
    <Stack className="max-w-md" flexNoWrap row>
      <div className="p-4 bg-gray-100 rounded">Long Item 1</div>
      <div className="p-4 bg-gray-100 rounded">Long Item 2</div>
      <div className="p-4 bg-gray-100 rounded">Long Item 3</div>
    </Stack>
  </Col>
</Row>

Stack Justification

Control how items are distributed along the main axis.

Justify Start

Item 1
Item 2

Justify Center

Item 1
Item 2

Justify Between

Item 1
Item 2
react-icon

StackJustification.tsx

<Row flexWrap>
  <Col lg>
    <Text semibold>Justify Start</Text>
    <Stack className="h-40 border-2 border-dashed border-gray-300" justifyStart>
      <div className="p-4 bg-gray-100 rounded">Item 1</div>
      <div className="p-4 bg-gray-100 rounded">Item 2</div>
    </Stack>
  </Col>
  <Col lg>
    <Text semibold>Justify Center</Text>
    <Stack className="h-40 border-2 border-dashed border-gray-300" justifyCenter>
      <div className="p-4 bg-gray-100 rounded">Item 1</div>
      <div className="p-4 bg-gray-100 rounded">Item 2</div>
    </Stack>
  </Col>
  <Col lg>
    <Text semibold>Justify Between</Text>
    <Stack
      className="h-40 border-2 border-dashed border-gray-300"
      justifyBetween
    >
      <div className="p-4 bg-gray-100 rounded">Item 1</div>
      <div className="p-4 bg-gray-100 rounded">Item 2</div>
    </Stack>
  </Col>
</Row>

Stack Appearances

Stacks can have different background appearances.

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
react-icon

StackAppearances.tsx

<Row flexWrap>
  <Stack default>
    <div className="p-4 bg-white rounded">Item 1</div>
    <div className="p-4 bg-white rounded">Item 2</div>
    <div className="p-4 bg-white rounded">Item 3</div>
  </Stack>
  <Stack accent>
    <div className="p-4 bg-white rounded">Item 1</div>
    <div className="p-4 bg-white rounded">Item 2</div>
    <div className="p-4 bg-white rounded">Item 3</div>
  </Stack>
  <Stack primary>
    <div className="p-4 bg-white rounded">Item 1</div>
    <div className="p-4 bg-white rounded">Item 2</div>
    <div className="p-4 bg-white rounded">Item 3</div>
  </Stack>
  <Stack secondary>
    <div className="p-4 bg-white rounded">Item 1</div>
    <div className="p-4 bg-white rounded">Item 2</div>
    <div className="p-4 bg-white rounded">Item 3</div>
  </Stack>
  <Stack tertiary>
    <div className="p-4 bg-white rounded">Item 1</div>
    <div className="p-4 bg-white rounded">Item 2</div>
    <div className="p-4 bg-white rounded">Item 3</div>
  </Stack>
  <Stack success>
    <div className="p-4 bg-white rounded">Item 1</div>
    <div className="p-4 bg-white rounded">Item 2</div>
    <div className="p-4 bg-white rounded">Item 3</div>
  </Stack>
  <Stack danger>
    <div className="p-4 bg-white rounded">Item 1</div>
    <div className="p-4 bg-white rounded">Item 2</div>
    <div className="p-4 bg-white rounded">Item 3</div>
  </Stack>
  <Stack warning>
    <div className="p-4 bg-white rounded">Item 1</div>
    <div className="p-4 bg-white rounded">Item 2</div>
    <div className="p-4 bg-white rounded">Item 3</div>
  </Stack>
  <Stack info>
    <div className="p-4 bg-white rounded">Item 1</div>
    <div className="p-4 bg-white rounded">Item 2</div>
    <div className="p-4 bg-white rounded">Item 3</div>
  </Stack>
</Row>

Stack Reverse

Reverse the order of items in the stack.

Normal Order

First
Second
Third

Reverse Order

First
Second
Third
react-icon

StackReverse.tsx

<Row flexWrap>
  <Col lg>
    <Text semibold>Normal Order</Text>
    <Stack>
      <div className="p-4 bg-gray-100 rounded">First</div>
      <div className="p-4 bg-gray-200 rounded">Second</div>
      <div className="p-4 bg-gray-300 rounded">Third</div>
    </Stack>
  </Col>
  <Col lg>
    <Text semibold>Reverse Order</Text>
    <Stack reverse>
      <div className="p-4 bg-gray-100 rounded">First</div>
      <div className="p-4 bg-gray-200 rounded">Second</div>
      <div className="p-4 bg-gray-300 rounded">Third</div>
    </Stack>
  </Col>
</Row>

Stack with Padding

Control stack internal padding.

Item 1
Item 2
Item 1
Item 2
react-icon

StackwithPadding.tsx

<Row flexWrap>
  <Stack className="border-2 border-dashed border-gray-300" padding>
    <div className="p-4 bg-gray-100 rounded">Item 1</div>
    <div className="p-4 bg-gray-100 rounded">Item 2</div>
  </Stack>
  <Stack className="border-2 border-dashed border-gray-300" noPadding>
    <div className="p-4 bg-gray-100 rounded">Item 1</div>
    <div className="p-4 bg-gray-100 rounded">Item 2</div>
  </Stack>
</Row>