Flex

A layout primitive that arranges children in a row or column, with props for alignment, spacing, and wrapping.

Overview

Flex is the workhorse layout primitive: a div with display: flex and props for direction, align, justify, wrap, and gap, so you rarely write flexbox CSS by hand. By default it lays children out in a row (direction="row", align="stretch", justify="start", wrap="noWrap"). Reach for it whenever you're stacking or spacing things along one axis — toolbars, form rows, sidebars. For two-dimensional layouts use Grid, and for a page-width wrapper use Container.

Anatomy

Import and assemble the component:

1import { Flex } from "@raystack/apsara";
2

3<Flex />

API Reference

Renders a flex container for layout.

Prop

Type

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

SlotElement
flexThe flex container (or the element supplied via render)

Examples

Basic Usage

Nest Flex containers to compose layouts: here an outer row (the default direction) holds two columns, each spaced with gap.

1<Flex gap={9}>
2  <Flex gap={5} direction="column">
3    <Button>Primary button</Button>
4    <Button>Primary button</Button>
5    <Button>Primary button</Button>
6  </Flex>
7  <Flex gap={5} direction="column">
8    <Button>Primary button</Button>
9    <Button>Primary button</Button>
10    <Button>Primary button</Button>
11  </Flex>
12</Flex>

Accessibility

  • Renders a plain <div> and adds no roles or ARIA attributes — purely visual layout with no semantic meaning.
  • Screen readers read children in DOM order, so rowReverse and columnReverse change only the visual order. Don't rely on them to convey sequence.
  • Use the render prop to swap in a semantic element (<nav>, <ul>, <section>) when the group has meaning beyond layout.