Flex

Flexbox layout with container query support.

import { Flex } from 'ui-lab-components/flex';
 
export function Example() {
  return (
    <Flex direction="row" justify-start align-stretch gap="md" wrap="nowrap">
      <div className="h-24 w-24 rounded-sm bg-background-800" />
      <div className="h-24 w-24 rounded-sm bg-background-800" />
      <div className="h-24 w-24 rounded-sm bg-background-800" />
      <div className="h-24 w-24 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
import { Flex } from 'ui-lab-components/flex';
import { Skeleton } from 'ui-lab-components/skeleton';
 
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="min-h-10">
        <div className="flex items-center gap-1">
          <Skeleton w={32} h={32} className="rounded" />
          <Skeleton w={112} h={12} />
        </div>
        <div className="flex gap-1">
          <Skeleton w={56} h={28} className="rounded-sm" />
          <Skeleton w={56} h={28} className="rounded-sm" />
        </div>
      </Flex>
      <div className="flex w-full gap-2">
        <Skeleton h={128} className="flex-1" />
        <Skeleton h={128} className="flex-1" />
      </div>
    </div>
  );
}

flex/03-sidebar-layout

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

Loading interactive preview
import { Flex } from 'ui-lab-components/flex';
import { Skeleton } from 'ui-lab-components/skeleton';
 
export default function Example() {
  return (
    <Flex gap="lg" className="w-full max-w-3xl">
      <Skeleton w={128} h="auto" className="shrink-0" />
      <div className="flex min-w-0 flex-1 flex-col gap-1">
        <Skeleton w={128} h={12} />
        <div className="flex flex-wrap gap-1">
          <Skeleton.Image ratio="1/1" className="min-w-28 flex-1" />
          <Skeleton.Image ratio="1/1" className="min-w-28 flex-1" />
          <Skeleton.Image ratio="1/1" className="min-w-28 flex-1" />
        </div>
      </div>
    </Flex>
  );
}

flex/04-toolbar

A heading, action toolbar, and flexible list rows composed with nested Flex layouts.

Loading interactive preview
import { Flex } from 'ui-lab-components/flex';
import { Skeleton } from 'ui-lab-components/skeleton';
 
export default function Example() {
  return (
    <Flex direction="column" gap="md" className="w-full max-w-3xl">
      <div className="flex items-center justify-between gap-2">
        <Skeleton w={112} h={12} />
        <div className="flex gap-0.5">
          <Skeleton w={48} h={28} className="rounded-sm" />
          <Skeleton w={56} h={28} className="rounded-sm" />
        </div>
      </div>
      <div className="flex flex-col gap-1">
        {Array.from({ length: 3 }, (_, index) => (
          <div
            key={index}
            className="flex h-12 items-center justify-between gap-2 rounded-sm border border-background-700/40 p-3"
          >
            <Skeleton w={index === 1 ? 96 : 128} h={10} />
            <Skeleton w={64} h={10} className="rounded-full" />
            <Skeleton w={40} h={10} />
          </div>
        ))}
      </div>
    </Flex>
  );
}
UI Lab