Skip to content
Nim UI

Flex

The Flex component provides a complete flexbox layout abstraction. Unlike Stack, which is optimized for single-direction layouts, Flex gives you full control over direction, justification, alignment, wrapping, and gap — making it ideal for complex layout arrangements.

Import

import { Flex } from '@nim-ui/components';

Basic Usage

Default Flex (Row)

View Code 
<Flex gap="md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Direction

The direction prop controls the main axis direction of the flex container.

Direction Variants

View Code 
<Flex direction="row">Row (default)</Flex>
<Flex direction="column">Column</Flex>
<Flex direction="row-reverse">Row reversed</Flex>
<Flex direction="column-reverse">Column reversed</Flex>

Justify

The justify prop controls how items are distributed along the main axis.

Justify Variants

View Code 
<Flex justify="start">Pack items to the start</Flex>
<Flex justify="center">Center items</Flex>
<Flex justify="end">Pack items to the end</Flex>
<Flex justify="between">Space between items</Flex>
<Flex justify="around">Space around items</Flex>
<Flex justify="evenly">Space evenly between items</Flex>

Align

The align prop controls cross-axis alignment.

Align Variants

View Code 
<Flex align="start">Align to start</Flex>
<Flex align="center">Align to center</Flex>
<Flex align="end">Align to end</Flex>
<Flex align="stretch">Stretch to fill (default when set)</Flex>
<Flex align="baseline">Align to text baseline</Flex>

Wrap

The wrap prop enables flex wrapping so items flow to the next line when they exceed the container width.

Flex Wrap

View Code 
<Flex wrap gap="sm">
  <div className="w-32">Item 1</div>
  <div className="w-32">Item 2</div>
  <div className="w-32">Item 3</div>
  <div className="w-32">Item 4</div>
  <div className="w-32">Item 5</div>
  <div className="w-32">Item 6</div>
</Flex>

Gap

The gap prop controls spacing between flex items.

Gap Variants

View Code 
<Flex gap="xs">Extra small gap (0.25rem)</Flex>
<Flex gap="sm">Small gap (0.5rem)</Flex>
<Flex gap="md">Medium gap (1rem)</Flex>
<Flex gap="lg">Large gap (1.5rem)</Flex>
<Flex gap="xl">Extra large gap (2rem)</Flex>

Props

Name Type Default Description
direction 'row' | 'column' | 'row-reverse' | 'column-reverse' 'row' Flex direction for the main axis
justify 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' - How items are distributed along the main axis (justify-content)
align 'start' | 'center' | 'end' | 'stretch' | 'baseline' - How items are aligned on the cross axis (align-items)
wrap boolean false Whether items should wrap to the next line
gap 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' - Gap between flex items
className string - Additional CSS classes to apply
children * ReactNode - Flex items to render

Usage Examples

Header Layout

function Header() {
  return (
    <Flex justify="between" align="center" gap="md">
      <div className="text-xl font-bold">Logo</div>
      <nav>
        <Flex gap="md" align="center">
          <a href="/about">About</a>
          <a href="/docs">Docs</a>
          <Button variant="primary">Sign Up</Button>
        </Flex>
      </nav>
    </Flex>
  );
}

Centered Content

function EmptyState() {
  return (
    <Flex
      direction="column"
      justify="center"
      align="center"
      gap="lg"
      className="min-h-[400px]"
    >
      <img src="/empty.svg" alt="" className="w-48" />
      <h2>No items found</h2>
      <p>Try adjusting your search or filters.</p>
      <Button>Create New</Button>
    </Flex>
  );
}

Tag Cloud

function TagCloud({ tags }) {
  return (
    <Flex wrap gap="sm">
      {tags.map((tag) => (
        <Badge key={tag} variant="default">
          {tag}
        </Badge>
      ))}
    </Flex>
  );
}

Accessibility

The Flex component renders a <div> element with flexbox CSS applied. When using direction="row-reverse" or direction="column-reverse", be aware that the visual order differs from the DOM order, which can confuse screen reader users and keyboard navigation. Ensure the DOM order matches the logical reading order when possible.

{/* Use tabIndex to ensure keyboard order matches visual order */}
<Flex direction="row-reverse" gap="md">
  <Button tabIndex={2}>Second visually</Button>
  <Button tabIndex={1}>First visually</Button>
</Flex>
  • Stack - Simplified flexbox for single-direction layouts
  • Spacer - Push flex items apart
  • Grid - CSS Grid for two-dimensional layouts
  • Container - Responsive max-width wrapper