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

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

Stack 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

    • padding

  • padding
  • noPadding

    • 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

    Stack

    Basic Stack

    Stack Sizes

    Stack with Gap

    Stack Flex Direction

    Stack Wrap Options

    Stack Justification

    Stack Appearances

    Stack Reverse

    Stack with Padding

    Stack Props

    size

    hide

    items

    justify

    position

    display

    overflow

    wrap

    gap

    flexDirection

    reverse

    breakpoint

    padding

    appearance

    transparent

    border

    shadow

    ring

    shape

    variant