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.

Source Edit this page

Basic usage

A horizontal flex container. Row defaults to gap, itemsCenter, noPadding, noBorder, noInsetRing, outline, and sharp: you don't need to pass these explicitly. Pass href to render Row as <a> instead of <div>. A focus-visible outline auto-enables when href is set.

Item 1

Item 2

Item 3

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

Spacing

Use size props (xs, sm, md, lg, xl) to control the gap amount, or noGap to disable.

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

md (default)

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

noGap

Item 1

Item 2

Item 3

<Col>
  <Text fontSemibold>xs</Text>
  <Row xs>
    <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 fontSemibold>sm</Text>
  <Row 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 fontSemibold>md (default)</Text>
  <Row>
    <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 fontSemibold>lg</Text>
  <Row 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>
  <Text fontSemibold>xl</Text>
  <Row xl>
    <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 fontSemibold>noGap</Text>
  <Row noGap>
    <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>

Justify (main axis)

Control horizontal distribution with justifyStart, justifyEnd, justifyCenter, justifyBetween, justifyAround, or justifyEvenly.

justifyStart

justifyEnd

justifyCenter

justifyBetween

justifyAround

justifyEvenly

<Col>
  <Text fontSemibold>justifyStart</Text>
  <Row justifyStart className="border-2 border-dashed border-gray-300 p-2">
    <div className="p-2 bg-gray-100 rounded">A</div>
    <div className="p-2 bg-gray-100 rounded">B</div>
    <div className="p-2 bg-gray-100 rounded">C</div>
  </Row>
  <Text fontSemibold>justifyEnd</Text>
  <Row justifyEnd className="border-2 border-dashed border-gray-300 p-2">
    <div className="p-2 bg-gray-100 rounded">A</div>
    <div className="p-2 bg-gray-100 rounded">B</div>
    <div className="p-2 bg-gray-100 rounded">C</div>
  </Row>
  <Text fontSemibold>justifyCenter</Text>
  <Row justifyCenter className="border-2 border-dashed border-gray-300 p-2">
    <div className="p-2 bg-gray-100 rounded">A</div>
    <div className="p-2 bg-gray-100 rounded">B</div>
    <div className="p-2 bg-gray-100 rounded">C</div>
  </Row>
  <Text fontSemibold>justifyBetween</Text>
  <Row justifyBetween className="border-2 border-dashed border-gray-300 p-2">
    <div className="p-2 bg-gray-100 rounded">A</div>
    <div className="p-2 bg-gray-100 rounded">B</div>
    <div className="p-2 bg-gray-100 rounded">C</div>
  </Row>
  <Text fontSemibold>justifyAround</Text>
  <Row justifyAround className="border-2 border-dashed border-gray-300 p-2">
    <div className="p-2 bg-gray-100 rounded">A</div>
    <div className="p-2 bg-gray-100 rounded">B</div>
    <div className="p-2 bg-gray-100 rounded">C</div>
  </Row>
  <Text fontSemibold>justifyEvenly</Text>
  <Row justifyEvenly className="border-2 border-dashed border-gray-300 p-2">
    <div className="p-2 bg-gray-100 rounded">A</div>
    <div className="p-2 bg-gray-100 rounded">B</div>
    <div className="p-2 bg-gray-100 rounded">C</div>
  </Row>
</Col>

Items (cross axis)

Control vertical alignment with itemsStart, itemsEnd, itemsCenter (default), itemsBaseline, or itemsStretch.

itemsStart

Small

Tall

Small

itemsEnd

Small

Tall

Small

itemsCenter (default)

Small

Tall

Small

itemsBaseline

Small text

Large text

Default

itemsStretch

<Col>
  <Text fontSemibold>itemsStart</Text>
  <Row itemsStart className="border-2 border-dashed border-gray-300 p-2 h-24">
    <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>
  <Text fontSemibold>itemsEnd</Text>
  <Row itemsEnd className="border-2 border-dashed border-gray-300 p-2 h-24">
    <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>
  <Text fontSemibold>itemsCenter (default)</Text>
  <Row className="border-2 border-dashed border-gray-300 p-2 h-24">
    <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>
  <Text fontSemibold>itemsBaseline</Text>
  <Row itemsBaseline className="border-2 border-dashed border-gray-300 p-2 h-24">
    <Text sm>Small text</Text>
    <Text xl>Large text</Text>
    <Text>Default</Text>
  </Row>
  <Text fontSemibold>itemsStretch</Text>
  <Row itemsStretch className="border-2 border-dashed border-gray-300 p-2 h-24">
    <div className="p-2 bg-gray-100 rounded">A</div>
    <div className="p-2 bg-gray-100 rounded">B</div>
    <div className="p-2 bg-gray-100 rounded">C</div>
  </Row>
</Col>

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

<Row flexWrap className="max-w-md border-2 border-dashed border-gray-300 p-2">
  <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>

Reverse order

Use rowReverse to reverse the visual order of children.

First in DOM

Second

Last in DOM

<Row rowReverse className="border-2 border-dashed border-gray-300 p-2">
  <div className="p-4 bg-gray-100 rounded">First in DOM</div>
  <div className="p-4 bg-gray-100 rounded">Second</div>
  <div className="p-4 bg-gray-100 rounded">Last in DOM</div>
</Row>

Responsive layout

Use mobileStack to stack on mobile, or tabletStack to stack on tablet and below.

tabletStack (stacks below 1024px)

Column 1

Horizontal on desktop, stacked on tablet and below.

Column 2

Resize to see the responsive behavior.

mobileStack (stacks below 768px)

Column 1

Horizontal until mobile.

Column 2

Stacks only on narrow viewports.

<Col>
  <Text fontSemibold>tabletStack (stacks below 1024px)</Text>
  <Row tabletStack>
    <Col flex1 className="p-4 bg-primary-100 rounded">
      <Text fontSemibold>Column 1</Text>
      <Text>Horizontal on desktop, stacked on tablet and below.</Text>
    </Col>
    <Col flex1 className="p-4 bg-primary-100 rounded">
      <Text fontSemibold>Column 2</Text>
      <Text>Resize to see the responsive behavior.</Text>
    </Col>
  </Row>
  <Text fontSemibold>mobileStack (stacks below 768px)</Text>
  <Row mobileStack>
    <Col flex1 className="p-4 bg-primary-100 rounded">
      <Text fontSemibold>Column 1</Text>
      <Text>Horizontal until mobile.</Text>
    </Col>
    <Col flex1 className="p-4 bg-primary-100 rounded">
      <Text fontSemibold>Column 2</Text>
      <Text>Stacks only on narrow viewports.</Text>
    </Col>
  </Row>
</Col>

Breakpoints are desktop-first and exclusive: mobileStack collapses to a column below 768px, tabletStack below 1024px, desktopStack below 1280px. The boundary pixel itself stays in the row layout. Combining several stack props resolves to the widest, so mobileStack tabletStack stacks below 1024px. *Stack only affects row-direction components: it emits flex-col, so it is a no-op on Col, Stack, Container, and Section, which are already columns.

A stacked Row keeps its default itemsCenter, so stacked children shrink to content width. Add itemsStretch for full-width stacked cards.

Variants

Use filled or outline with appearance props for styled rows. Row uses sharp (no border-radius) by default: pair with rounded or pill for curved corners.

Filled Primary

Item 2

Outline Success

Item 2

<Col>
  <Row filled primary padding rounded>
    <div className="p-4 bg-white/80 rounded">Filled Primary</div>
    <div className="p-4 bg-white/80 rounded">Item 2</div>
  </Row>
  <Row border success padding rounded>
    <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.

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

Inside a Card

Row composes naturally inside a Card to lay out header actions, button groups, or any horizontal cluster.

Settings

Active

Configure your preferences below.

<Card>
  <Row justifyBetween>
    <Title>Settings</Title>
    <Badge success>Active</Badge>
  </Row>
  <Text>Configure your preferences below.</Text>
  <Row justifyEnd>
    <Button secondary>Cancel</Button>
    <Button filled>Save</Button>
  </Row>
</Card>

As Link

Add href to render the Row as an <a> tag, useful for clickable list rows. A keyboard focus-visible outline auto-renders so the link is reachable via Tab; opt out with noFocusVisible.

Inbox

Drafts

GitHub

External

<Col>
  <Row href="#inbox" justifyBetween padding border rounded>
    <Text fontSemibold>Inbox</Text>
    <Badge primary filled>12</Badge>
  </Row>
  <Row href="#drafts" justifyBetween padding border rounded>
    <Text fontSemibold>Drafts</Text>
    <Badge secondary>3</Badge>
  </Row>
  <Row href="https://github.com" target="_blank" rel="noopener noreferrer" justifyBetween padding border rounded>
    <Text fontSemibold>GitHub</Text>
    <Text sm secondary>External</Text>
  </Row>
</Col>

Next.js Link integration

Use the tag prop to render the Row as a Next.js Link for client-side navigation.

import Link from 'next/link';
import { Row, Text, Badge } from '@vaneui/ui';

<Row href="/inbox" tag={Link} justifyBetween padding border rounded>
  <Text fontSemibold>Inbox</Text>
  <Badge primary filled>12</Badge>
</Row>

Row Props

Prop	Category	Default	Description
`accent`	Appearance		Accent color appearance (rose)
`danger`	Appearance		Danger color appearance (red)
`info`	Appearance		Info color appearance (cyan)
`inheritAppearance`	Appearance		Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables
`primary`	Appearance		Primary color appearance (gray)
`secondary`	Appearance		Secondary color appearance (gray)
`success`	Appearance		Success color appearance (green)
`tertiary`	Appearance		Tertiary color appearance
`warning`	Appearance		Warning color appearance (amber)
`desktopStack`	Breakpoint		Stack into a column at desktop width and below (max-desktop: 80rem)
`mobileStack`	Breakpoint		Stack into a column at mobile width and below (max-mobile: 48rem)
`tabletStack`	Breakpoint		Stack into a column at tablet width and below (max-tablet: 64rem)
`flex1`	Flex		Take up remaining space (= `flex-1`, i.e. `flex: 1 1 0%`)
`flexAuto`	Flex		Grow but respect intrinsic size (= `flex-auto`, i.e. `flex: 1 1 auto`)
`flexNone`	Flex		Don't grow and don't shrink (= `flex-none`, i.e. `flex: none`)
`margin`	Margin		Enable margin on all sides
`marginB`	Margin		Enable only bottom margin
`marginT`	Margin		Enable only top margin
`marginX`	Margin		Enable only horizontal (inline) margin
`marginY`	Margin		Enable only vertical (block) margin
`noMargin`	Margin		Disable margin (reset to 0)
`noPadding`	Padding	✓	Disable internal padding
`padding`	Padding		Enable internal padding
`paddingX`	Padding		Enable only horizontal padding
`paddingY`	Padding		Enable only vertical padding
`pill`	Shape		Fully rounded corners (circular)
`rounded`	Shape		Medium rounded corners (default)
`sharp`	Shape	✓	No rounded corners (square)
`noShrink`	Shrink		Prevent the flex item from shrinking below its content size (= `shrink-0`)
`lg`	Size		Large size
`md`	Size	✓	Medium size (default)
`sm`	Size		Small size
`xl`	Size		Extra large size
`xs`	Size		Extra small size
`textCenter`	Text Align		Align text to center
`textEnd`	Text Align		Align text to the reading-direction end (right in LTR, left in RTL)
`textJustify`	Text Align		Justify text
`textLeft`	Text Align		Align text to left (physical side, does not flip under RTL)
`textRight`	Text Align		Align text to right (physical side, does not flip under RTL)
`textStart`	Text Align		Align text to the reading-direction start (left in LTR, right in RTL)
`filled`	Variant		Filled variant - solid background with contrasting text color
`ghost`	Variant		Ghost variant - transparent background, no border, appearance-colored text, tinted hover background
`outline`	Variant	✓	Outline variant - transparent background with border and colored text (default)

Layout & utility props (gap, padding, hide, items, justify, ...) — documented on Common Props

Prop	Category	Default	Description
`border`	Border		Enable border on all sides
`borderB`	Border		Enable border on bottom
`borderEnd`	Border		Enable border on the inline-end side (right in LTR, left in RTL)
`borderL`	Border		Enable border on left
`borderR`	Border		Enable border on right
`borderStart`	Border		Enable border on the inline-start side (left in LTR, right in RTL)
`borderT`	Border		Enable border on top
`borderX`	Border		Enable border on left and right
`borderY`	Border		Enable border on top and bottom
`noBorder`	Border	✓	Disable all borders
`block`	Display		Block display - takes full width, new line
`contents`	Display		Contents display - element's box is removed, children display as if parent didn't exist
`flex`	Display	✓	Flex display - flexbox container
`grid`	Display		Grid display - CSS grid container
`hidden`	Display		Hidden display - element is not visible
`inline`	Display		Inline display - flows with text
`inlineBlock`	Display		Inline-block display - inline but with block properties
`inlineFlex`	Display		Inline-flex display - inline flexbox container
`inlineGrid`	Display		Inline-grid display - inline grid container
`table`	Display		Table display - behaves like table element
`tableCell`	Display		Table-cell display - behaves like td element
`column`	Flex Direction		Flex direction column (vertical)
`columnReverse`	Flex Direction		Flex direction column-reverse
`row`	Flex Direction	✓	Flex direction row (horizontal)
`rowReverse`	Flex Direction		Flex direction row-reverse
`focusVisible`	Focus Visible		Enable focus-visible outline
`noFocusVisible`	Focus Visible		Disable focus-visible outline
`gap`	Gap	✓	Enable gap spacing between children
`noGap`	Gap		Disable gap spacing
`hAuto`	Height		Set height to auto
`hFit`	Height		Set height to fit-content
`hFull`	Height		Set height to 100%
`hScreen`	Height		Set height to 100vh (viewport height), removes max-height constraint
`desktopHide`	Hide		Hide element on desktop devices and below (max-desktop: 80rem)
`mobileHide`	Hide		Hide element on mobile devices and below (max-mobile: 48rem)
`tabletHide`	Hide		Hide element on tablet devices and below (max-tablet: 64rem)
`itemsBaseline`	Items		Align items to baseline
`itemsCenter`	Items	✓	Align items to center
`itemsEnd`	Items		Align items to end (bottom/right)
`itemsStart`	Items		Align items to start (top/left)
`itemsStretch`	Items		Stretch items to fill container
`justifyAround`	Justify		Distribute items with space around them
`justifyBaseline`	Justify		Align items along their baseline on main axis
`justifyBetween`	Justify		Distribute items with space between them
`justifyCenter`	Justify		Center items along the main axis
`justifyEnd`	Justify		Pack items toward the end of the main axis
`justifyEvenly`	Justify		Distribute items with equal space around them
`justifyStart`	Justify		Pack items toward the start of the main axis
`justifyStretch`	Justify		Stretch items to fill the main axis
`overflowAuto`	Overflow		Auto overflow - show scrollbars if needed
`overflowClip`	Overflow		Clip overflow - hard clip without scrollbars
`overflowHidden`	Overflow		Hidden overflow - clip content without scrollbars
`overflowScroll`	Overflow		Scroll overflow - always show scrollbars
`overflowVisible`	Overflow		Visible overflow - content extends beyond bounds
`overflowXAuto`	Overflow		Auto overflow on X-axis only
`overflowXClip`	Overflow		Clip overflow on X-axis only
`overflowXHidden`	Overflow		Hidden overflow on X-axis only
`overflowXScroll`	Overflow		Scroll overflow on X-axis only
`overflowXVisible`	Overflow		Visible overflow on X-axis only
`overflowYAuto`	Overflow		Auto overflow on Y-axis only
`overflowYClip`	Overflow		Clip overflow on Y-axis only
`overflowYHidden`	Overflow		Hidden overflow on Y-axis only
`overflowYScroll`	Overflow		Scroll overflow on Y-axis only
`overflowYVisible`	Overflow		Visible overflow on Y-axis only
`absolute`	Position		Absolute positioning
`fixed`	Position		Fixed positioning
`relative`	Position		Relative positioning
`static`	Position		Static positioning
`sticky`	Position		Sticky positioning
`responsiveSizing`	Responsive Sizing		Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap
`insetRing`	Ring		Enable the inset ring — emits ring-inset
`noInsetRing`	Ring	✓	Disable the inset ring
`noShadow`	Shadow		Disable drop shadow
`shadow`	Shadow		Enable drop shadow
`transparent`	Transparent		Disable background color - makes component background transparent
`wAuto`	Width		Set width to auto
`wFit`	Width		Set width to fit-content
`wFull`	Width		Set width to 100%
`wScreen`	Width		Set width to 100vw (viewport width), removes max-width constraint
`flexNoWrap`	Wrap		Force flex items to stay on single line (may overflow)
`flexWrap`	Wrap		Allow flex items to wrap to new lines when container is too narrow
`flexWrapReverse`	Wrap		Wrap flex items in reverse order (last items wrap first)