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

Row Props

size

  • xs
  • sm
  • md
  • lg
  • xl

    • hide

  • xsHide
  • smHide
  • mdHide
  • lgHide
  • xlHide

    • items

  • itemsStart
  • itemsEnd
  • itemsCenter
  • itemsBaseline
  • itemsStretch

    • justify

  • justifyStart
  • justifyEnd
  • justifyCenter
  • justifyBetween
  • justifyAround
  • justifyEvenly
  • justifyStretch
  • justifyBaseline

    • position

  • relative
  • absolute
  • fixed
  • sticky
  • static

    • display

  • inline
  • block
  • inlineBlock
  • flex
  • inlineFlex
  • grid
  • inlineGrid
  • contents
  • table
  • tableCell
  • hidden

    • overflow

  • overflowAuto
  • overflowHidden
  • overflowClip
  • overflowVisible
  • overflowScroll
  • overflowXAuto
  • overflowYAuto
  • overflowXHidden
  • overflowYHidden
  • overflowXClip
  • overflowYClip
  • overflowXVisible
  • overflowYVisible
  • overflowXScroll
  • overflowYScroll

    • wrap

  • flexWrap
  • flexNoWrap
  • flexWrapReverse

    • gap

  • gap
  • noGap

    • flexDirection

  • row
  • column
  • rowReverse
  • columnReverse

    • reverse

  • reverse

    • breakpoint

  • xsCol
  • smCol
  • mdCol
  • lgCol
  • xlCol

    • appearance

  • default
  • accent
  • primary
  • secondary
  • tertiary
  • success
  • danger
  • warning
  • info
  • link

    • transparent

  • transparent

    • border

  • border
  • borderT
  • borderB
  • borderL
  • borderR
  • borderX
  • borderY
  • noBorder

    • shadow

  • shadow
  • noShadow

    • ring

  • ring
  • noRing

    • shape

  • pill
  • sharp
  • rounded

    • variant

  • filled
  • outline

    • On this page

    Row

    Basic Row

    Row Sizes

    Row with Gap

    Row Wrap Options

    Row Justification

    Row Appearances

    Row Reverse

    Row Props

    size

    hide

    items

    justify

    position

    display

    overflow

    wrap

    gap

    flexDirection

    reverse

    breakpoint

    appearance

    transparent

    border

    shadow

    ring

    shape

    variant