Flex

Layout component based on CSS Flexbox for alignment, direction, wrapping, and spacing of child elements.

Box 1

Box 2

Box 3

default.tsx

1'use client';
2
3import React from 'react';
4import { Flex } from '../../layout/flex';
5
6export function Default() {
7  return (
8    <Flex
9      direction="row"
10      align="center"
11      justify="between"
12      gap="4"
13      className="border-border bg-card w-full rounded-xl border p-4"
14    >
15      <div className="bg-primary/20 text-primary border-primary/30 flex h-20 w-20 items-center justify-center rounded-lg border font-medium">
16        Box 1
17      </div>
18      <div className="bg-secondary/20 text-secondary-foreground border-border flex h-20 w-20 items-center justify-center rounded-lg border font-medium">
19        Box 2
20      </div>
21      <div className="bg-muted text-muted-foreground border-border flex h-20 w-20 items-center justify-center rounded-lg border font-medium">
22        Box 3
23      </div>
24    </Flex>
25  );
26}

Installation

pnpm dlx nachui add flex

Anatomy

1import { Flex } from '@/components/ui/flex';

1<Flex direction="row" align="center" justify="between" gap="4">
2  <div>Item 1</div>
3  <div>Item 2</div>
4</Flex>

API Reference

Flex

Prop	Type	Default	Description
`as`	`React.ElementType`	`'div'`	The element type to render the component as
`direction`	`'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`	`'row'`	CSS flex-direction mapping
`align`	`'start' \| 'center' \| 'end' \| 'baseline' \| 'stretch'`	`'stretch'`	CSS align-items mapping
`justify`	`'start' \| 'center' \| 'end' \| 'between' \| 'around' \| 'evenly'`	`'start'`	CSS justify-content mapping
`wrap`	`'nowrap' \| 'wrap' \| 'wrap-reverse'`	`'nowrap'`	CSS flex-wrap mapping
`gap`	`'0' \| '1' \| '2' \| '3' \| '4' \| '5' \| '6' \| '8' \| '10' \| '12' \| '16' \| '20' \| '24' \| '32'`	-	Gap spacing between elements
`className`	`string`	-	Custom CSS classes

Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue

PreviousTypography

NextStack