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 that arranges children in a row.

Item 1
Item 2
Item 3
react-icon

BasicRow.tsx

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

Row Spacing

Use gap for spacing between items. Size props control the gap amount.

Small Gap

Item 1
Item 2
Item 3

Large Gap

Item 1
Item 2
Item 3
react-icon

RowSpacing.tsx

<Col gap>
  <Text semibold>Small Gap</Text>
  <Row gap sm>
    <div className="p-3 bg-gray-100 rounded">Item 1</div>
    <div className="p-3 bg-gray-100 rounded">Item 2</div>
    <div className="p-3 bg-gray-100 rounded">Item 3</div>
  </Row>
  <Text semibold>Large Gap</Text>
  <Row gap lg>
    <div className="p-3 bg-gray-100 rounded">Item 1</div>
    <div className="p-3 bg-gray-100 rounded">Item 2</div>
    <div className="p-3 bg-gray-100 rounded">Item 3</div>
  </Row>
</Col>

Row Alignment

Control alignment with justifyCenter, justifyBetween, itemsCenter, etc.

Justify Between

Left
Right

Items Center

Small
Tall
Small
react-icon

RowAlignment.tsx

<Col gap>
  <Text semibold>Justify Between</Text>
  <Row className="border-2 border-dashed border-gray-300 p-2" justifyBetween>
    <div className="p-4 bg-gray-100 rounded">Left</div>
    <div className="p-4 bg-gray-100 rounded">Right</div>
  </Row>
  <Text semibold>Items Center</Text>
  <Row
    className="border-2 border-dashed border-gray-300 p-2 h-24"
    gap
    itemsCenter
  >
    <div className="p-2 bg-gray-100 rounded">Small</div>
    <div className="p-6 bg-gray-100 rounded">Tall</div>
    <div className="p-2 bg-gray-100 rounded">Small</div>
  </Row>
</Col>

Row Wrap

Use flexWrap to allow items to wrap to the next line when they overflow.

Item 1
Item 2
Item 3
Item 4
Item 5
react-icon

RowWrap.tsx

<Row
  className="max-w-md border-2 border-dashed border-gray-300 p-2"
  flexWrap
  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>
  <div className="p-4 bg-gray-100 rounded">Item 4</div>
  <div className="p-4 bg-gray-100 rounded">Item 5</div>
</Row>

Row Variants

Use filled or outline with appearance props for styled rows.

Filled Primary
Item 2
Outline Success
Item 2
react-icon

RowVariants.tsx

<Col gap>
  <Row filled gap primary>
    <div className="p-4 bg-white/80 rounded">Filled Primary</div>
    <div className="p-4 bg-white/80 rounded">Item 2</div>
  </Row>
  <Row gap outline success>
    <div className="p-4 rounded">Outline Success</div>
    <div className="p-4 rounded">Item 2</div>
  </Row>
</Col>

Text Alignment

Use textCenter, textLeft, textRight, or textJustify to control text alignment within the row.

Left aligned content in a row.

Center aligned content in a row.

Right aligned content in a row.

react-icon

TextAlignment.tsx

<Col gap>
  <Row className="border-2 border-dashed border-gray-300 p-4" textLeft>
    <Text>Left aligned content in a row.</Text>
  </Row>
  <Row className="border-2 border-dashed border-gray-300 p-4" textCenter>
    <Text>Center aligned content in a row.</Text>
  </Row>
  <Row className="border-2 border-dashed border-gray-300 p-4" textRight>
    <Text>Right aligned content in a row.</Text>
  </Row>
</Col>

Responsive Layout

Use mobileCol or tabletCol to switch to column layout on smaller screens.

Column 1

Horizontal on desktop, stacked on tablet and below.

Column 2

Resize to see the responsive behavior.

react-icon

ResponsiveLayout.tsx

<Row gap tabletCol>
  <Col className="flex-1 p-4 bg-primary-100 rounded">
    <Text semibold>Column 1</Text>
    <Text>Horizontal on desktop, stacked on tablet and below.</Text>
  </Col>
  <Col className="flex-1 p-4 bg-primary-100 rounded">
    <Text semibold>Column 2</Text>
    <Text>Resize to see the responsive behavior.</Text>
  </Col>
</Row>

Row Props

Size

Size props for controlling component dimensions

xs

Extra small size

sm

Small size

md

Medium size (default)

lg

Large size

xl

Extra large size

Hide

Hide props for responsive element visibility

mobileHide

Hide element on mobile devices and below (max-mobile: 48rem)

tabletHide

Hide element on tablet devices and below (max-tablet: 64rem)

desktopHide

Hide element on desktop devices and below (max-desktop: 80rem)

Items

Items props for controlling flex item alignment (align-items)

itemsStart

Align items to start (top/left)

itemsEnd

Align items to end (bottom/right)

itemsCenter

Align items to center

itemsBaseline

Align items to baseline

itemsStretch

Stretch items to fill container

Justify

Justify props for controlling flex content alignment (justify-content)

justifyStart

Pack items toward the start of the main axis

justifyEnd

Pack items toward the end of the main axis

justifyCenter

Center items along the main axis

justifyBetween

Distribute items with space between them

justifyAround

Distribute items with space around them

justifyEvenly

Distribute items with equal space around them

justifyStretch

Stretch items to fill the main axis

justifyBaseline

Align items along their baseline on main axis

Position

Position props for controlling CSS position property

relative

Relative positioning

absolute

Absolute positioning

fixed

Fixed positioning

sticky

Sticky positioning

static

Static positioning

Display

Display props for controlling CSS display property

inline

Inline display - flows with text

block

Block display - takes full width, new line

inlineBlock

Inline-block display - inline but with block properties

flex

Flex display - flexbox container

inlineFlex

Inline-flex display - inline flexbox container

grid

Grid display - CSS grid container

inlineGrid

Inline-grid display - inline grid container

contents

Contents display - element's box is removed, children display as if parent didn't exist

table

Table display - behaves like table element

tableCell

Table-cell display - behaves like td element

hidden

Hidden display - element is not visible

Overflow

Overflow props for controlling content overflow behavior

overflowAuto

Auto overflow - show scrollbars if needed

overflowHidden

Hidden overflow - clip content without scrollbars

overflowClip

Clip overflow - hard clip without scrollbars

overflowVisible

Visible overflow - content extends beyond bounds

overflowScroll

Scroll overflow - always show scrollbars

overflowXAuto

Auto overflow on X-axis only

overflowYAuto

Auto overflow on Y-axis only

overflowXHidden

Hidden overflow on X-axis only

overflowYHidden

Hidden overflow on Y-axis only

overflowXClip

Clip overflow on X-axis only

overflowYClip

Clip overflow on Y-axis only

overflowXVisible

Visible overflow on X-axis only

overflowYVisible

Visible overflow on Y-axis only

overflowXScroll

Scroll overflow on X-axis only

overflowYScroll

Scroll overflow on Y-axis only

Wrap

Wrap props for controlling flex wrapping behavior

flexWrap

Allow flex items to wrap to new lines when container is too narrow

flexNoWrap

Force flex items to stay on single line (may overflow)

flexWrapReverse

Wrap flex items in reverse order (last items wrap first)

Gap

Gap props for controlling spacing between children

gap

Enable gap spacing between children

noGap

Disable gap spacing

Flex Direction

Flex direction props for controlling flex layout direction

row

Flex direction row (horizontal)

column

Flex direction column (vertical)

rowReverse

Flex direction row-reverse

columnReverse

Flex direction column-reverse

Reverse

Reverse props for reversing child order

reverse

Reverse the order of children

Breakpoint

Breakpoint props for responsive layout changes

mobileCol

Switch to column layout on mobile and below (max-mobile: 48rem)

tabletCol

Switch to column layout on tablet and below (max-tablet: 64rem)

desktopCol

Switch to column layout on desktop and below (max-desktop: 80rem)

Appearance

Appearance props for controlling component colors

primary

Primary color appearance (gray)

brand

Brand color appearance (blue)

accent

Accent color appearance (rose)

secondary

Secondary color appearance (gray)

tertiary

Tertiary color appearance

success

Success color appearance (green)

danger

Danger color appearance (red)

warning

Warning color appearance (amber)

info

Info color appearance (cyan)

link

Link color appearance (blue, for hyperlinks)

Border

Border props for controlling component borders

border

Enable border on all sides

borderT

Enable border on top

borderB

Enable border on bottom

borderL

Enable border on left

borderR

Enable border on right

borderX

Enable border on left and right

borderY

Enable border on top and bottom

noBorder

Disable all borders

Shadow

Shadow props for controlling drop shadows

shadow

Enable drop shadow

noShadow

Disable drop shadow

Ring

Ring props for controlling focus rings

ring

Enable focus ring

noRing

Disable focus ring

Shape

Shape props for controlling component border radius

pill

Fully rounded corners (circular)

sharp

No rounded corners (square)

rounded

Medium rounded corners (default)

Variant

Variant props for controlling component style variations

filled

Filled variant - solid background with contrasting text color

outline

Outline variant - transparent background with border and colored text (default)

Transparent

Transparent prop for disabling background color

transparent

Disable background color - makes component background transparent

Responsive

Responsive prop for enabling breakpoint-specific sizing

responsive

Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap

Text Align

Text alignment props for controlling text position

textLeft

Align text to left

textCenter

Align text to center

textRight

Align text to right

textJustify

Justify text

On this page

Row

Basic Row

Row Spacing

Row Alignment

Row Wrap

Row Variants

Text Alignment

Responsive Layout

Row Props

Size

Hide

Items

Justify

Position

Display

Overflow

Wrap

Gap

Flex Direction

Reverse

Breakpoint

Appearance

Border

Shadow

Ring

Shape

Variant

Transparent

Responsive

Text Align