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 such as xs, sm, md, lg, xl.

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

Col 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

    • 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

    Col

    Basic Col

    Col Sizes

    Col with Gap

    Col Wrap Options

    Col Justification

    Col Appearances

    Col Reverse

    Col Props

    size

    hide

    items

    justify

    position

    display

    overflow

    wrap

    gap

    flexDirection

    reverse

    appearance

    transparent

    border

    shadow

    ring

    shape

    variant