Stack

Pro

Children in a column or a row with the same space between each. A row runs in the reading direction, so it reverses itself in a right-to-left page, and start and end are the reading direction's.

Markdown

Version 5.2.0· other versions

This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).

Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0, 2.2.0, 2.3.0, 2.4.0, 2.5.0, 2.5.1, 2.6.0, 2.6.1, 2.6.2, 2.7.0, 2.8.0, 2.9.0, 2.10.0, 3.0.0, 4.0.0, 4.0.1, 4.0.2 and 4.1.0: the page came later, or had another name then.

Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/stack

Brings in: tokens, utils · npm: @base-ui/react@^1.9.0

Usage

TSX · The example above

"use client"

import { Stack } from "@/components/candor/stack"
import { Button } from "@/components/candor/ui/button"
import { Text } from "@/components/candor/text"

export default function Example() {
  return (
    <Stack gap={4} className="max-w-md">
      <Stack gap={1}>
        <Text weight="semibold">Archive 214 stale leads?</Text>
        <Text tone="muted" size="sm">
          They move to the archive and can be restored for 30 days.
        </Text>
      </Stack>
      <Stack direction="row" gap={2} justify="end" wrap>
        <Button variant="outline">Cancel</Button>
        <Button>Archive</Button>
      </Stack>
    </Stack>
  )
}

<Stack>

Prop	Type	Default	Description
gap	`StackGap \| undefined`	2	The space between children, a step of the spacing scale that follows `data-density`. Default `2`.
direction	`"column" \| "row" \| undefined`	"column"	`column` (the default) stacks the children; `row` lines them up in the reading direction.
align	`keyof typeof aligns \| undefined`	—	How the children sit across the stack: for a row, `center` or `baseline` lines up text of different sizes.
justify	`keyof typeof justifies \| undefined`	—	How the children share the stack's length: `between` pushes the first and last to the ends.
wrap	`boolean \| undefined`	false	Lets a row's children move onto a new line when they don't fit.
render	`useRender.RenderProp \| undefined`	—	The element to draw instead of a `<div>`: `render={<ul />}` for a list, `render={<section />}`.
className	`string \| undefined`	—	Classes for the element, applied last, so they win over the props.
children	`React.ReactNode \| undefined`	—	What to stack.

Also takes the props of React.ComponentProps<"div">.

Values

stackGaps

Each gap's class. The gaps are steps of --cd-control-gap, the space between a control's parts, so they follow data-density (three quarters as wide compact, a quarter wider spacious) and a theme that sets it; at the default density they are Tailwind's gap-1 to gap-8.

Record<StackGap, string>

Types

StackGap: A step of the spacing scale: `4` is 1rem at the default density.; 0 | 1 | 2 | 3 | 4 | 6 | 8