VaneUI

VaneUI

Layout Components

Row

A fundamental layout component that arranges its children in a horizontal line. It is built on the flexbox model and is used to create columns.

Basic Row

A horizontal flex container.

Item 1
Item 2
Item 3
react-icon

BasicRow.tsx

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

Row Sizes

Rows come in different sizes.

Extra Small Row

Item 1
Item 2
Item 3

Large Row

Item 1
Item 2
Item 3
react-icon

RowSizes.tsx

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

Row with Gap

Control spacing between row items.

No Gap

Item 1
Item 2
Item 3

With Gap

Item 1
Item 2
Item 3
react-icon

RowwithGap.tsx

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

Row Wrap Options

Control how items wrap within the row.

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

RowWrapOptions.tsx

<Col lg>
  <div>
    <Text semibold>Flex Wrap</Text>
    <Row className="max-w-md" flexWrap>
      <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>
    </Row>
  </div>
  <div>
    <Text semibold>No Wrap</Text>
    <Row className="max-w-md" flexNoWrap>
      <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>
    </Row>
  </div>
</Col>

Row 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

RowJustification.tsx

<div className="space-y-4 min-w-80">
  <Col>
    <Text semibold>Justify Start</Text>
    <Row className="w-full 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>
    </Row>
  </Col>
  <Col>
    <Text semibold>Justify Center</Text>
    <Row className="w-full 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>
    </Row>
  </Col>
  <Col>
    <Text semibold>Justify Between</Text>
    <Row
      className="w-full 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>
    </Row>
  </Col>
</div>

Row Appearances

Rows can have different background appearances.

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

RowAppearances.tsx

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

Row Reverse

Reverse the order of items in the row.

Normal Order

First
Second
Third

Reverse Order

First
Second
Third
react-icon

RowReverse.tsx

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