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.
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>
);
}