Flex

Flexbox layout with container query support.

import { Flex } from 'ui-lab-components/flex';
Gap TokenMedium
Numeric GapUse Token
Items4
import { Flex } from 'ui-lab-components/flex';
 
export default function Example() {
  return (
    <Flex direction="row" justify-start align-stretch gap="md" className="h-full w-full">
      <div className="h-[5rem] w-[4rem] shrink-0 rounded-sm bg-background-800" />
      <div className="h-[7rem] w-[6rem] shrink-0 rounded-sm bg-background-800" />
      <div className="h-[4rem] w-[5rem] shrink-0 rounded-sm bg-background-800" />
      <div className="h-[6rem] w-[5.5rem] shrink-0 rounded-sm bg-background-800" />
    </Flex>
  );
}

flex/02-page-header

A compact page header with a brand mark, contextual status, and primary actions.

Loading interactive preview
"use client";
 
import type { CSSProperties } from 'react';
import { Flex } from 'ui-lab-components/flex';
import { Frame } from 'ui-lab-components/frame';
 
const BASE_CELL_STYLE = {
  '--fill': 'var(--background-900)',
  '--stroke-color': 'var(--background-600)',
} as CSSProperties;
 
function FrameCell({ label, style, className }: { label: number; style?: CSSProperties; className?: string }) {
  return (
    <Frame className={`p-2 ${className ?? ''}`} pathStroke="dashed" style={{ ...BASE_CELL_STYLE, ...style }}>
      <span className="w-6 h-6 font-medium underline text-foreground-400 flex rounded-sm items-center justify-center text-xs">
        {label}
      </span>
    </Frame>
  );
}
 
export default function Example() {
  return (
    <div className="flex w-full max-w-3xl flex-col gap-2">
      <Flex align-center justify-between gap="md" className="h-8">
        <FrameCell label={1} className="shrink-0 rounded" style={{ width: 32, height: 32 }} />
        <FrameCell label={2} className="min-w-0 flex-1" style={{ height: 32 }} />
        <div className="flex shrink-0 gap-1">
          <FrameCell label={3} className="rounded-sm" style={{ width: 56, height: 32 }} />
          <FrameCell label={4} className="rounded-sm" style={{ width: 56, height: 32 }} />
        </div>
      </Flex>
      <div className="flex w-full gap-2">
        <FrameCell label={5} className="flex-1" style={{ height: 128 }} />
        <FrameCell label={6} className="flex-1" style={{ height: 128 }} />
      </div>
    </div>
  );
}

flex/03-sidebar-layout

A common application shell with fixed navigation beside flexible page content.

Loading interactive preview
"use client";
 
import type { CSSProperties } from 'react';
import { Flex } from 'ui-lab-components/flex';
import { Frame } from 'ui-lab-components/frame';
 
const BASE_CELL_STYLE = {
  '--fill': 'var(--background-900)',
  '--stroke-color': 'var(--background-600)',
} as CSSProperties;
 
function FrameCell({ label, style, className }: { label: number; style?: CSSProperties; className?: string }) {
  return (
    <Frame className={`p-2 ${className ?? ''}`} pathStroke="dashed" style={{ ...BASE_CELL_STYLE, ...style }}>
      <span className="w-6 h-6 font-medium underline text-foreground-400 flex rounded-sm items-center justify-center text-xs">
        {label}
      </span>
    </Frame>
  );
}
 
export default function Example() {
  return (
    <Flex gap="sm" className="w-full max-w-3xl">
      <FrameCell label={1} className="shrink-0" style={{ width: 128, height: 'auto' }} />
      <div className="flex min-w-0 flex-1 flex-col gap-1">
        <FrameCell label={2} className="w-full" style={{ height: 32 }} />
        <div className="flex flex-wrap gap-1">
          <FrameCell label={3} className="min-w-28 flex-1" style={{ aspectRatio: '1/1' }} />
          <FrameCell label={4} className="min-w-28 flex-1" style={{ aspectRatio: '1/1' }} />
          <FrameCell label={5} className="min-w-28 flex-1" style={{ aspectRatio: '1/1' }} />
        </div>
      </div>
    </Flex>
  );
}

flex/04-stack-layout

A fixed header and footer pinned to the block axis, with a flexible region between them that absorbs all remaining space.

Loading interactive preview
"use client";
 
import type { CSSProperties } from 'react';
import { Flex } from 'ui-lab-components/flex';
import { Frame } from 'ui-lab-components/frame';
 
const BASE_CELL_STYLE = {
  '--fill': 'var(--background-900)',
  '--stroke-color': 'var(--background-600)',
} as CSSProperties;
 
function FrameCell({ label, style, className }: { label: number; style?: CSSProperties; className?: string }) {
  return (
    <Frame className={`p-2 ${className ?? ''}`} pathStroke="dashed" style={{ ...BASE_CELL_STYLE, ...style }}>
      <span className="w-6 h-6 font-medium underline text-foreground-400 flex rounded-sm items-center justify-center text-xs">
        {label}
      </span>
    </Frame>
  );
}
 
export default function Example() {
  return (
    <div className="flex h-full min-h-0 w-full flex-col">
      <Flex direction="column" gap="md" className="h-full min-h-0 w-full">
        <FrameCell label={1} className="shrink-0" style={{ height: '3rem' }} />
        <FrameCell label={2} className="min-h-0 flex-1" />
        <FrameCell label={3} className="shrink-0" style={{ height: '3rem' }} />
      </Flex>
    </div>
  );
}

flex/05-split-layout

One pane holds an intrinsic size on the main axis while the other pane grows to absorb all remaining space.

Loading interactive preview
"use client";
 
import type { CSSProperties } from 'react';
import { Flex } from 'ui-lab-components/flex';
import { Frame } from 'ui-lab-components/frame';
 
const BASE_CELL_STYLE = {
  '--fill': 'var(--background-900)',
  '--stroke-color': 'var(--background-600)',
} as CSSProperties;
 
function FrameCell({ label, style, className }: { label: number; style?: CSSProperties; className?: string }) {
  return (
    <Frame className={`p-2 ${className ?? ''}`} pathStroke="dashed" style={{ ...BASE_CELL_STYLE, ...style }}>
      <span className="w-6 h-6 font-medium underline text-foreground-400 flex rounded-sm items-center justify-center text-xs">
        {label}
      </span>
    </Frame>
  );
}
 
export default function Example() {
  return (
    <div className="flex h-full min-h-0 w-full flex-col">
      <Flex gap="md" className="h-full min-h-0 w-full">
        <FrameCell label={1} className="shrink-0" style={{ width: '10rem' }} />
        <FrameCell label={2} className="min-w-0 flex-1" />
      </Flex>
    </div>
  );
}

flex/06-center-layout

A single region centered on both axes within the full bounds of its container.

Loading interactive preview
"use client";
 
import type { CSSProperties } from 'react';
import { Flex } from 'ui-lab-components/flex';
import { Frame } from 'ui-lab-components/frame';
 
const BASE_CELL_STYLE = {
  '--fill': 'var(--background-900)',
  '--stroke-color': 'var(--background-600)',
} as CSSProperties;
 
function FrameCell({ label, style, className }: { label: number; style?: CSSProperties; className?: string }) {
  return (
    <Frame className={`p-2 ${className ?? ''}`} pathStroke="dashed" style={{ ...BASE_CELL_STYLE, ...style }}>
      <span className="w-6 h-6 font-medium underline text-foreground-400 flex rounded-sm items-center justify-center text-xs">
        {label}
      </span>
    </Frame>
  );
}
 
export default function Example() {
  return (
    <div className="flex h-full min-h-0 w-full flex-col">
      <Flex justify-center align-center className="h-full min-h-0 w-full">
        <FrameCell label={1} style={{ width: '10rem', height: '6rem' }} />
      </Flex>
    </div>
  );
}