Stack
First
Second
import { Stack } from "@combric/react";
export function Example() {
return <Stack gap="3"><div>First</div><div>Second</div></Stack>;
}Stack
Vertical flow with canonical gaps.
@combric/layout · v1.1.1 · Current
Import and usage
import { Stack } from "@combric/react";The framework-independent CSS contract is available from@combric/layout/css; the React wrapper comes from@combric/react.
Examples
Canonical gaps
One
Two
One
Two
One
Two
import { Stack } from "@combric/react";
export function Example() {
return <div style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: "1rem" }}><Stack gap="1"><div>One</div><div>Two</div></Stack><Stack gap="3"><div>One</div><div>Two</div></Stack><Stack gap="6"><div>One</div><div>Two</div></Stack></div>;
}Public API
| Name |
|---|
Stack |
| Contract |
|---|
| gap: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 16 |
Accessibility
Layout changes presentation only. Choose semantic elements and preserve meaningful source order; Combric does not add ARIA, reorder content, or measure the viewport.