Components / Stack
Stack
Flex layout container for composing child components. Supports direction, gap, alignment, wrapping.
layout v0.1.0
Playground
Examples
Row with gap
<cg-stack direction="row" gap="md"><cg-button>One</cg-button><cg-button variant="secondary">Two</cg-button><cg-button variant="tertiary">Three</cg-button></cg-stack>Column layout
<cg-stack direction="column" gap="sm"><cg-text>First item</cg-text><cg-text>Second item</cg-text><cg-text>Third item</cg-text></cg-stack>Import
import { CgStack } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-stack';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
direction | "row" | "column" | "column" | Flex direction |
gap | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "md" | Gap between children |
align | "start" | "center" | "end" | "stretch" | "baseline" | "stretch" | Align items |
justify | "start" | "center" | "end" | "between" | "around" | "evenly" | "start" | Justify content |
wrap | "none" | "wrap" | "reverse" | "none" | Flex wrapping |