Flex

A flexible layout component for arranging elements using CSS Flexbox. Perfect for responsive layouts, alignment, and space distribution.

Basic Flex

A simple flex container with gap spacing between items. Perfect for buttons, navigation, and horizontal layouts.

Item 1

Item 2

Item 3

export function BasicFlex() {
  return (
    <div className="flex gap-4 p-6 bg-neutral-800 border border-white/10 rounded-lg">
      <div className="bg-neutral-700 px-4 py-3 rounded-md text-white text-sm font-medium">Item 1</div>
      <div className="bg-neutral-700 px-4 py-3 rounded-md text-white text-sm font-medium">Item 2</div>
      <div className="bg-neutral-700 px-4 py-3 rounded-md text-white text-sm font-medium">Item 3</div>
    </div>
  )
}

Flex Grow (flex-1)

Use flex-1 to make an element grow and fill available space. Essential for layouts with sidebars and flexible content areas.

Fixed

flex-1 (grows)

Fixed

export function FlexGrow() {
  return (
    <div className="flex gap-4 p-6 bg-neutral-800 border border-white/10 rounded-lg">
      <div className="bg-neutral-700 px-4 py-3 rounded-md text-white text-sm font-medium">Fixed</div>
      <div className="flex-1 bg-blue-600 px-4 py-3 rounded-md text-white text-sm font-medium text-center">flex-1 (grows)</div>
      <div className="bg-neutral-700 px-4 py-3 rounded-md text-white text-sm font-medium">Fixed</div>
    </div>
  )
}

Flex Wrap

Allow flex items to wrap to new lines when they don't fit. Perfect for tag lists, button groups, and responsive card layouts.

React

Node.js

GraphQL

TypeScript

JavaScript

Tailwind

export function FlexWrap() {
  return (
    <div className="flex flex-wrap gap-2 p-6 bg-neutral-800 border border-white/10 rounded-lg">
      <div className="bg-blue-600 px-3 py-2 rounded text-white text-sm">React</div>
      <div className="bg-green-600 px-3 py-2 rounded text-white text-sm">Node.js</div>
      <div className="bg-purple-600 px-3 py-2 rounded text-white text-sm">GraphQL</div>
      <div className="bg-red-600 px-3 py-2 rounded text-white text-sm">TypeScript</div>
      <div className="bg-yellow-600 px-3 py-2 rounded text-white text-sm">JavaScript</div>
      <div className="bg-indigo-600 px-3 py-2 rounded text-white text-sm">Tailwind</div>
    </div>
  )
}

Centered Content

Use flexbox to perfectly center content both horizontally and vertically. Ideal for loading states, empty states, and hero sections.

Perfectly Centered

export function CenteredFlex() {
  return (
    <div className="flex items-center justify-center h-40 p-6 bg-neutral-800 border border-white/10 rounded-lg">
      <div className="text-center">
        <div className="w-12 h-12 bg-blue-500 rounded-full mb-3 mx-auto"></div>
        <span className="text-white font-medium">Perfectly Centered</span>
      </div>
    </div>
  )
}

Space Between

Distribute space between elements, perfect for headers, footers, and navigation layouts.

Left Item

Right Item

export function BetweenFlex() {
  return (
    <div className="flex items-center justify-between w-full p-6 bg-neutral-800 border border-white/10 rounded-lg">
      <div className="bg-neutral-700 px-4 py-2 rounded-md">
        <span className="text-white font-medium">Left Item</span>
      </div>
      <div className="bg-neutral-700 px-4 py-2 rounded-md">
        <span className="text-white font-medium">Right Item</span>
      </div>
    </div>
  )
}

Box

Grid