Components
Stack
A flexbox layout primitive for row and column composition. Replaces inline flex utilities with named spacing tokens.
Preview
Item one
Item two
Item three
Direction
One
Two
Three
<Stack direction="column" gap="sm">One
Two
Three
<Stack direction="row" gap="sm">API
Prop
Type
Default
Description
direction"row" | "column""column"Flex direction.gap"none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"—Gap between children. Maps to the Cognition spacing scale.align"start" | "center" | "end" | "stretch" | "baseline"—Cross-axis alignment (align-items).justify"start" | "center" | "end" | "between" | "around" | "evenly"—Main-axis alignment (justify-content).wrapbooleanfalseAllows children to wrap onto multiple lines.Don't and Do
Don't
Don't write raw flex utilities inline. Gap and alignment values scattered across the codebase drift out of the spacing scale and are invisible to the token system.
Do
// Stack with Cognition tokens
<Stack direction="column" gap="md" align="start">
<span>Item one</span>
<span>Item two</span>
</Stack>Usage
import { Stack } from "@/components/ui/stack";
export function Example() {
return (
<Stack direction="row" gap="md" align="center">
<span>Item one</span>
<span>Item two</span>
<span>Item three</span>
</Stack>
);
}Cognition v1.3 · June 2026 · Questions? Ask Tony Yates #research-and-design