Stack
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { Stack } from "@corew500/ui/stack"
<Stack>Content</Stack>Variants
stackVariants
| Axis | Values | Default |
|---|---|---|
| direction | verticalhorizontalresponsive | vertical |
| spacing | 012345681012 | 4 |
| align | startcenterendstretchbaseline | stretch |
| justify | startcenterendbetweenaroundevenly | start |
| wrap | truefalse | false |
| fullWidth | truefalse | false |
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| direction | enum | "vertical" | The flex direction of the stack. - `vertical`: Stacks children in a column (flex-col) - `horizontal`: Stacks children in a row (flex-row) - `responsive`: Vertical on mobile, horizontal on tablet+ (flex-col md:flex-row) |
| spacing | enum | 4 | The gap between stack children, using Tailwind's spacing scale. - `0`: No gap - `1`: 0.25rem (4px) - `2`: 0.5rem (8px) - `3`: 0.75rem (12px) - `4`: 1rem (16px) - `5`: 1.25rem (20px) - `6`: 1.5rem (24px) - `8`: 2rem (32px) - `10`: 2.5rem (40px) - `12`: 3rem (48px) |
| align | enum | "stretch" | Cross-axis alignment of children (align-items). - `start`: Align to flex-start - `center`: Center alignment - `end`: Align to flex-end - `stretch`: Stretch to fill container - `baseline`: Align to text baseline |
| justify | enum | "start" | Main-axis distribution of children (justify-content). - `start`: Pack items to the start - `center`: Center items - `end`: Pack items to the end - `between`: Distribute with space between - `around`: Distribute with space around - `evenly`: Distribute with equal space |
| wrap | enum | false | Whether children should wrap to new lines when they overflow. |
| fullWidth | enum | false | Whether the stack should take full width of its parent. |
Accessibility
Keyboard Navigation
- Does not affect tab order - children maintain their natural focus sequence
Screen Readers
- Uses a plain `<div>` element; add appropriate roles if needed for landmark regions
Additional
- - Stack is a purely visual layout component with no semantic meaning
Localization
Translatable Content
- - Stack has no text content and requires no localization
RTL Support
- For RTL layouts, horizontal stacks will automatically reverse due to flexbox behavior