Skip to main content

Flex

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

LM

Lucia Mendez

lucia@acmestudio.dev

1'use client';
2

3import { Avatar } from '@/components/ui/avatar';
4import { Badge } from '@/components/ui/badge';
5import { Button } from '@/components/ui/button';
6import { Flex } from '@/components/ui/flex';
7

8export function Default() {
9  return (
10    <Flex
11      direction="row"
12      align="center"
13      justify="between"
14      gap="3"
15      className="border-border bg-card w-full max-w-lg rounded-xl border p-4 sm:gap-4"
16    >
17      <Flex align="center" gap="3" className="min-w-0 flex-1">
18        <Avatar className="shrink-0">
19          <Avatar.Fallback>LM</Avatar.Fallback>
20        </Avatar>
21        <div className="min-w-0">
22          <p className="truncate text-sm font-medium">Lucia Mendez</p>
23          <p className="text-muted-foreground truncate text-xs">lucia@acmestudio.dev</p>
24        </div>
25      </Flex>
26      <Flex align="center" gap="2" className="shrink-0">
27        <Badge variant="secondary" className="hidden sm:inline-flex">
28          Owner
29        </Badge>
30        <Button variant="secondary" size="sm">
31          Manage
32        </Button>
33      </Flex>
34    </Flex>
35  );
36}

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

PropTypeDefaultDescription
asReact.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
classNamestring-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
Ctrl+I