Components Layout
Stack
StableArranges children in a vertical or horizontal flow with consistent, token-based spacing.
Stack is the default way to space things apart. It owns the gap between children, so the children never need margins. Use `direction="row"` for horizontal groups, or `rowFrom` to switch from a column to a row at a breakpoint. For wrapping horizontal groups such as tags, use Inline.
Overview
Choose a template
Customise details
Assign to users
import type { ReactNode } from 'react';
import { Stack } from '@bindshq/stance-react';
const Tile = ({ children }: { children: ReactNode }) => (
<div
style={{
padding: '12px 16px',
border: '1px dashed var(--st-color-border-strong)',
borderRadius: 8,
fontSize: 14,
}}
>
{children}
</div>
);
export function Basic() {
return (
<Stack gap={3} style={{ width: '100%', maxWidth: 360 }}>
<Tile>Choose a template</Tile>
<Tile>Customise details</Tile>
<Tile>Assign to users</Tile>
</Stack>
);
}Light, dark and high contrast
Every Stance component is designed and tested in all three appearance modes.
Choose a template
Customise details
Assign to users
Choose a template
Customise details
Assign to users
Choose a template
Customise details
Assign to users
Import
import { Stack } from '@bindshq/stance-react';Playground
Draft
In review
Signed
<Stack />Examples
Column to row
Stacks on phones and becomes a row from 768px.
Templates: 24
Active users: 318
Pending deployments: 3
import type { ReactNode } from 'react';
import { Stack } from '@bindshq/stance-react';
const Tile = ({ children }: { children: ReactNode }) => (
<div
style={{
padding: '12px 16px',
border: '1px dashed var(--st-color-border-strong)',
borderRadius: 8,
fontSize: 14,
}}
>
{children}
</div>
);
export function Responsive() {
return (
<Stack gap={4} rowFrom="md" style={{ width: '100%' }}>
<Tile>Templates: 24</Tile>
<Tile>Active users: 318</Tile>
<Tile>Pending deployments: 3</Tile>
</Stack>
);
}Organisation users
import { Button, Stack, Text } from '@bindshq/stance-react';
export function Alignment() {
return (
<Stack direction="row" justify="between" align="center" style={{ width: '100%' }}>
<Text size="sm" weight="semibold">
Organisation users
</Text>
<Button size="sm">Invite user</Button>
</Stack>
);
}API reference
| Prop | Type | Default | Description |
|---|---|---|---|
as | keyof JSX.IntrinsicElements | 'div' | Element to render, e.g. ul or form. |
gap | SpaceKey | 4 | Gap between children. |
direction | 'column' | 'row' | 'column' | Flow direction. |
align | 'start' | 'center' | 'end' | 'stretch' | 'baseline' | 'stretch' | Cross-axis alignment. |
justify | 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'start' | Main-axis distribution. |
wrap | boolean | false | Allow wrapping in row direction. |
rowFrom | 'sm' | 'md' | 'lg' | None | Switch to a row from this breakpoint upwards. |
Accessibility
- Stack only changes visual layout. DOM order, and therefore reading and focus order, is unchanged.
- Render lists as lists: use `as="ul"` with `li` children when the items form a list.
Usage guidelines
Do
- Let Stack own spacing; remove margins from children.
- Nest stacks with smaller gaps for grouped content.
Don’t
- Reorder content visually with CSS order; keep DOM order meaningful.