Stack

Component

About

A flex layout primitive that stacks children in a column or row with consistent, named spacing steps between them.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Stack to your project and fits it to your theme.

Code

How Stack is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Stack from "@/components/ui/stack";

function tile(text: string) {
  return (
    <div
      style={{
        padding: "var(--bs-space-2) var(--bs-space-3)",
        background: "var(--bs-color-surface-3)",
        border: "1px solid var(--bs-color-border)",
        fontSize: "var(--bs-font-size-sm)",
      }}
    >
      {text}
    </div>
  );
}

/** Siblings held apart by one named step — here the default `md`. */
export default function StackBasicDemo() {
  return (
    <Stack>
      {tile("First")}
      {tile("Second")}
      {tile("Third")}
    </Stack>
  );
}