VaneUI

VaneUI

Layout Components

Col

A container that organizes content vertically within a Row. It provides a simple way to create flexible and responsive column-based layouts.

Basic Col

A vertical flex container.

Item 1
Item 2
Item 3
react-icon

BasicCol.tsx

<Col>
  <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>
</Col>

Col Sizes

Cols come in different sizes.

Extra Small Col

Item 1
Item 2
Item 3

Large Col

Item 1
Item 2
Item 3
react-icon

ColSizes.tsx

<Row>
  <Col lg>
    <Text semibold>Extra Small Col</Text>
    <Col 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>
    </Col>
  </Col>
  <Col lg>
    <Text semibold>Large Col</Text>
    <Col 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>
    </Col>
  </Col>
</Row>

Col with Gap

Control spacing between col items.

No Gap

Item 1
Item 2
Item 3

With Gap

Item 1
Item 2
Item 3
react-icon

ColwithGap.tsx

<Row>
  <Col lg>
    <Text semibold>No Gap</Text>
    <Col 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>
    </Col>
  </Col>
  <Col lg>
    <Text semibold>With Gap</Text>
    <Col 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>
    </Col>
  </Col>
</Row>

Col Wrap Options

Control how items wrap within the col.

Flex Wrap

Tall Item 1
Tall Item 2
Tall Item 3
Tall Item 4

No Wrap

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

ColWrapOptions.tsx

<Row>
  <Col lg>
    <Text semibold>Flex Wrap</Text>
    <Col className="max-h-40" flexWrap>
      <div className="p-4 bg-gray-100 rounded">Tall Item 1</div>
      <div className="p-4 bg-gray-100 rounded">Tall Item 2</div>
      <div className="p-4 bg-gray-100 rounded">Tall Item 3</div>
      <div className="p-4 bg-gray-100 rounded">Tall Item 4</div>
    </Col>
  </Col>
  <Col lg>
    <Text semibold>No Wrap</Text>
    <Col className="max-h-40" flexNoWrap>
      <div className="p-4 bg-gray-100 rounded">Tall Item 1</div>
      <div className="p-4 bg-gray-100 rounded">Tall Item 2</div>
      <div className="p-4 bg-gray-100 rounded">Tall Item 3</div>
    </Col>
  </Col>
</Row>

Col 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

ColJustification.tsx

<Row>
  <Col lg>
    <Text semibold>Justify Start</Text>
    <Col 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>
    </Col>
  </Col>
  <Col lg>
    <Text semibold>Justify Center</Text>
    <Col 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>
    </Col>
  </Col>
  <Col lg>
    <Text semibold>Justify Between</Text>
    <Col 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>
    </Col>
  </Col>
</Row>

Col Appearances

Cols can have different background appearances.

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

ColAppearances.tsx

<Row>
  <Col 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>
  </Col>
  <Col 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>
  </Col>
</Row>

Col Reverse

Reverse the order of items in the col.

Normal Order

First
Second
Third

Reverse Order

First
Second
Third
react-icon

ColReverse.tsx

<Row>
  <Col lg>
    <Text semibold>Normal Order</Text>
    <Col>
      <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>
    </Col>
  </Col>
  <Col lg>
    <Text semibold>Reverse Order</Text>
    <Col 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>
    </Col>
  </Col>
</Row>