|Kit

Flex

Polymorphic

Flex layout primitive. Vertical by default with a small gap — the dominant case in forms and dashboards.

Flex is a flex container with prebuilt direction, gap, align, justify, and wrap variants. Defaults to a vertical stack with gap="md" because that's what most form / dashboard sections want.

import { Flex } from '@42/ui-react/flex';

<Flex gap="lg">
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
</Flex>

Playground

Component

SpinnerLoading preview

Props

Code

<Component  direction="col"  gap="md"  align="stretch"/>

Full prop browser

Direction

Code

<Flex gap="md">  <Button>One</Button>  <Button>Two</Button></Flex><Flex direction="row" gap="md">  <Button>One</Button>  <Button>Two</Button></Flex>

Alignment

Use align for cross-axis alignment and justify for main-axis. Common toolbar pattern:

Code

<Flex direction="row" justify="between" align="center">  <Button variant="subtle">Cancel</Button>  <Flex direction="row" gap="md">    <Button>Save draft</Button>    <Button>Publish</Button>  </Flex></Flex>

API

Prop

Type

When to use Flex vs Grid

Flex flows children in one direction. Reach for Grid when you need equal-width tracks (cards on a dashboard, columns of a settings page).

Grid

CSS-grid layout primitive. Static column + gap variants for Tailwind's compile-time class scanning.

Divider

A horizontal or vertical separator line, with an optional label.

On this page

PlaygroundFull prop browserDirectionAlignmentAPIWhen to use Flex vs Grid