Skip to content

Stack

Vertical layout primitive — a flex column with token-driven gap, align, and justify. The right reach when children should flow top-to-bottom with consistent spacing.

stable
since v0.1.0
4.39 kB
primitive
layout
flex

Preview

tsx

import { Box, Stack } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Stack gap="3" padding="4" background="bg.subtle" borderRadius="md">
      <Box padding="3" background="bg.surface" borderRadius="sm">
        First
      </Box>
      <Box padding="3" background="bg.surface" borderRadius="sm">
        Second
      </Box>
      <Box padding="3" background="bg.surface" borderRadius="sm">
        Third
      </Box>
    </Stack>
  );
}

Gap

gap accepts any space token (or a responsive map). Cynosure stack-rhythm is built from this single prop — no per-child margins, no :not(:last-child) adjustments. Children always sit at the requested distance.

Align and justify

align controls cross-axis (horizontal) alignment, justify controls main-axis (vertical) distribution. Both accept the standard start | center | end | stretch set plus space-between / space-around / space-evenly for justify.

Preview

tsx

import { Box, Stack } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Stack gap="2" align="center" padding="4" background="bg.subtle" borderRadius="md">
      <Box padding="2" background="bg.surface" borderRadius="sm" width="40%">
        Narrow row
      </Box>
      <Box padding="2" background="bg.surface" borderRadius="sm" width="70%">
        Wider row
      </Box>
      <Box padding="2" background="bg.surface" borderRadius="sm" width="55%">
        Centered horizontally
      </Box>
    </Stack>
  );
}

Dividers between children

Pass any node to dividers and Stack inserts a copy between every pair of children — typically a <Divider /> but any thin element works.

Preview

tsx

import { Divider, Stack, Text } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Stack gap="3" padding="4" background="bg.subtle" borderRadius="md" dividers={<Divider />}>
      <Text weight="semibold">First section</Text>
      <Text weight="semibold">Second section</Text>
      <Text weight="semibold">Third section</Text>
    </Stack>
  );
}

API

PropTypeDefaultDescription

className

string

—

Additional class names appended after Cynosure's base classes.

style

CSSProperties

—

Inline style overrides merged last.

children

ReactNode

—

Stack children.

gap

Responsive<SpaceToken>

—

Vertical gap between children, from the spacing scale.

align

Responsive<StackAlign>

—

Cross-axis alignment — maps to `align-items` on the flex container.

justify

Responsive<StackJustify>

—

Main-axis distribution — maps to `justify-content` on the flex container.

dividers

ReactNode

—

When `true`, inserts a `<Divider/>` between children. Pass a custom node (e.g. `<Divider variant="dashed" />`) to use that instead.

padding

Responsive<SpaceToken>

—

Padding on all four sides. Token from the spacing scale.

paddingX

Responsive<SpaceToken>

—

Horizontal padding (left + right). Overrides `padding` on the X axis.

paddingY

Responsive<SpaceToken>

—

Vertical padding (top + bottom). Overrides `padding` on the Y axis.

paddingTop

Responsive<SpaceToken>

—

Padding on the top edge. Beats `padding` / `paddingY`.

paddingRight

Responsive<SpaceToken>

—

Padding on the right (inline-end in RTL) edge.

paddingBottom

Responsive<SpaceToken>

—

Padding on the bottom edge.

paddingLeft

Responsive<SpaceToken>

—

Padding on the left (inline-start in RTL) edge.

margin

Responsive<MarginValue>

—

Margin on all four sides. Accepts the spacing scale or `"auto"`.

marginX

Responsive<MarginValue>

—

Horizontal margin (left + right). Use `"auto"` to centre.

marginY

Responsive<MarginValue>

—

Vertical margin (top + bottom).

marginTop

Responsive<MarginValue>

—

Margin on the top edge.

marginRight

Responsive<MarginValue>

—

Margin on the right edge.

marginBottom

Responsive<MarginValue>

—

Margin on the bottom edge.

marginLeft

Responsive<MarginValue>

—

Margin on the left edge.

width

Responsive<SizeValue>

—

Element width. Accepts a `SpaceToken`, `LengthValue`, or named alias.

height

Responsive<SizeValue>

—

Element height. Accepts a `SpaceToken`, `LengthValue`, or named alias.

minWidth

Responsive<SizeValue>

—

Minimum width — useful for preventing flex children from collapsing.

maxWidth

Responsive<SizeValue>

—

Maximum width — `"prose"` caps to a comfortable reading measure.

minHeight

Responsive<SizeValue>

—

Minimum height.

maxHeight

Responsive<SizeValue>

—

Maximum height.

background

Responsive<ColorToken>

—

Background colour. Use a `ColorToken` like `"bg.surface"` for theme awareness.

color

Responsive<ColorToken>

—

Text colour. Inherits unless set.

borderColor

Responsive<ColorToken>

—

Border colour. Pair with `borderWidth` to make the border visible.

borderWidth

Responsive<BorderWidth>

—

Border thickness in scale steps.

borderStyle

Responsive<BorderStyle>

—

Border line style.

borderRadius

Responsive<RadiusToken>

—

Corner rounding token.

boxShadow

Responsive<ShadowToken>

—

Drop-shadow token from the elevation scale.

opacity

Responsive<number | `${number}`>

—

Opacity 0–1. Use sparingly — prefer surface tokens over translucency.

overflow

Responsive<Overflow>

—

How content that exceeds the box is handled.

overflowX

Responsive<Overflow>

—

Horizontal-axis overflow control. Overrides `overflow` for the X axis.

overflowY

Responsive<Overflow>

—

Vertical-axis overflow control.

display

Responsive<Display>

—

CSS `display` value. `"contents"` removes the element's box from layout.

position

Responsive<Position>

—

CSS `position`. Pair with `top`/`right`/`bottom`/`left` for placement.

top

Responsive<InsetValue>

—

Top inset (when positioned). Accepts a `SpaceToken`, `"auto"`, `"0"`, or `LengthValue`.

right

Responsive<InsetValue>

—

Right inset (when positioned).

bottom

Responsive<InsetValue>

—

Bottom inset (when positioned).

left

Responsive<InsetValue>

—

Left inset (when positioned).

zIndex

Responsive<ZIndexToken>

—

Stacking-context layer token (`"modal"`, `"tooltip"`, …).

gridColumn

Responsive<string>

—

Grid-column shorthand (e.g. `"1 / 3"`, `"span 2"`).

gridRow

Responsive<string>

—

Grid-row shorthand.

gridArea

Responsive<string>

—

Named grid area.

flex

Responsive<"1" | "none" | "auto" | "initial" | (string & {})>

—

Shorthand: `1 | auto | none | initial | <css>`. Resolves to `flex` on the child.

flexGrow

Responsive<number | `${number}`>

—

Grow factor inside a flex container.

flexShrink

Responsive<number | `${number}`>

—

Shrink factor inside a flex container.

flexBasis

Responsive<SizeValue | "content">

—

Initial main-axis size before grow/shrink.

alignSelf

Responsive<AlignSelf>

—

Override `align-items` for a single child.

justifySelf

Responsive<JustifySelf>

—

Override `justify-items` for a single child (grid).

order

Responsive<number | `${number}`>

—

Flex/grid child reorder index.

asChild

boolean

—

When `true`, renders the primitive's single React child via `Slot`, forwarding className/style/ref/event handlers onto it.

as

ElementType

"div"

Rendered intrinsic element or component.

ref

ForwardedRef<Element>

—

Recipes

Drop a Stack inside a Container for the canonical “stacked content column” pattern — see most foundation pages on this site.
Set align="stretch" (the default) to fill the cross-axis; switch to align="center" for centered cards on a wide canvas.
For horizontal flow, reach for Inline or Flex direction="row" — Stack is locked to column.
Pair dividers={<Divider />} with gap="0" to render an undivided list where the rules carry all of the visual rhythm.