Layout Primitives

Component

About

A set of layout primitives — a centered page container, a vertical stack, and a wrapping horizontal cluster — for composing consistent spacing in page sections and panels.

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

Code

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

Usage.tsx

import { PageContainer, Stack, Cluster } from "@/components/ui/layout";

const members = [
  { name: "Ava Thompson", role: "Owner" },
  { name: "Noah Patel", role: "Admin" },
  { name: "Mia Chen", role: "Member" },
];

export default function LayoutDemo() {
  return (
    <PageContainer width={560} style={{ paddingBlock: 32 }}>
      <Stack gap={24}>
        <Stack gap={4}>
          <h2
            style={{
              margin: 0,
              fontSize: 20,
              fontWeight: 600,
              color: "var(--foreground)",
            }}
          >
            Team members
          </h2>
          <p
            style={{
              margin: 0,
              fontSize: 14,
              color: "var(--muted-foreground)",
            }}
          >
            Manage who has access to this project.
          </p>
        </Stack>

        <Stack gap={12}>
          {members.map((member) => (
            <Cluster
              key={member.name}
              gap={12}
              style={{
                justifyContent: "space-between",
                padding: 12,
                border: "1px solid var(--border)",
                borderRadius: 10,
                background: "var(--card)",
              }}
            >
              <Cluster gap={10}>
                <div
                  style={{
                    width: 32,
                    height: 32,
                    borderRadius: "50%",
                    background: "var(--muted)",
                  }}
                />
                <Stack gap={0}>
                  <span
                    style={{
                      fontWeight: 500,
                      fontSize: 14,
                      color: "var(--foreground)",
                    }}
                  >
                    {member.name}
                  </span>
                  <span
                    style={{ fontSize: 12, color: "var(--muted-foreground)" }}
                  >
                    {member.role}
                  </span>
                </Stack>
              </Cluster>
              <button
                type="button"
                style={{
                  fontSize: 13,
                  padding: "6px 10px",
                  borderRadius: 8,
                  border: "1px solid var(--border)",
                  background: "transparent",
                  color: "var(--foreground)",
                }}
              >
                Manage
              </button>
            </Cluster>
          ))}
        </Stack>

        <Cluster gap={8}>
          <button
            type="button"
            style={{
              fontSize: 13,
              padding: "8px 14px",
              borderRadius: 8,
              border: "none",
              background: "var(--primary)",
              color: "var(--primary-foreground)",
            }}
          >
            Invite member
          </button>
          <button
            type="button"
            style={{
              fontSize: 13,
              padding: "8px 14px",
              borderRadius: 8,
              border: "1px solid var(--border)",
              background: "transparent",
              color: "var(--foreground)",
            }}
          >
            View all
          </button>
        </Cluster>
      </Stack>
    </PageContainer>
  );
}