--- title: "Stack" description: "Arrange inline elements or cards in a flex row or column with token gaps, dividers and mobile overrides." requested_language: fr language: en translation_notice: "This page isn't translated yet" url: https://docs.systhema.app/fr/components/stack version: unreleased (main) docs_index: https://docs.systhema.app/fr/llms.txt --- > This page isn't translated yet. Showing English. `Stack` is a flexbox container for a row of inline elements (buttons, chips, icons) or a row of cards. It sets direction, alignment, wrapping and a token gap from props, and can draw hairlines between its children. Headings, paragraphs and block components belong directly inside a `Section`, `Card` or `Column` instead, where the rich-text rhythm spaces them. See [Spacing model](https://docs.systhema.app/fr/concepts/spacing-model.md#what-this-means-for-your-markup). ```tsx preview iframe height=200 title="Stack" import { Button, Chip, Stack } from '@systhemaui/next' export default function Demo() { return ( Design Development Content Start a project See our work ) } ``` ## Import ```tsx import { Stack } from '@systhemaui/next' ``` In a React app without Next.js, import it from `@systhemaui/react`. ## Examples ### Direction and alignment `direction` is `row` (the flex default), `row-reverse`, `col` or `col-reverse`. `justifyContent` (`start`, `end`, `center`, `between`, `around`, `evenly`) and `alignItems` (`start`, `end`, `center`, `baseline`, `stretch`) map to the matching flex utilities. ```tsx preview iframe height=240 title="Space between" import { Button, Paragraph, Stack } from '@systhemaui/next' export default function Demo() { return ( Ready to start? Book a call ) } ``` ### Gaps `gap` takes a size from the token gap scale (`none`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`), or `{ x, y }` with a size per axis. The values come from `--gap-*`, which change per breakpoint with the default tokens. See [Gap](https://docs.systhema.app/fr/styling/gap.md). ```tsx preview iframe height=260 title="Row and column gaps" import { Chip, Stack } from '@systhemaui/next' const tags = ['Branding', 'Web design', 'Copywriting', 'SEO', 'Photography', 'Analytics', 'Hosting'] export default function Demo() { return ( {tags.map((tag) => ( {tag} ))} ) } ``` ### Dividers `divider` draws a 1px hairline in `--color-separator-line` between adjacent children: vertical in a row, horizontal in a column. It is never drawn before the first or after the last child. Pass a node instead of `true` to use your own separator. ```tsx preview iframe height=360 title="Dividers" import { Paragraph, Stack } from '@systhemaui/next' export default function Demo() { return ( Design review Content migration Launch checklist ) } ``` ### Mobile overrides `mobileOverrides` takes `direction`, `justifyContent`, `alignItems`, `wrap` and `gap` again, applied below the `md` breakpoint (`max-md:` variants). Here the cards sit in a row on desktop and stack on a phone; switch the preview viewport to compare. ```tsx preview iframe bleed height=420 title="Mobile overrides" import { Card, Heading, Paragraph, Stack } from '@systhemaui/next' export default function Demo() { return (
Discovery Two workshops to agree on goals and scope. Delivery Weekly releases you can review on a preview site.
) } ``` ### Semantic lists `as` renders the stack as another element. Use `as="ul"` with `
  • ` children for a list of links or tags, so screen readers announce the item count. ```tsx preview iframe height=200 title="Stack as a list" import { Link, Stack } from '@systhemaui/next' export default function Demo() { return (
  • Services
  • Case studies
  • Contact
    • ) } ``` ### Child animations A Stack reveals as one unit: core's `.stack` rule cancels every scroll reveal below it, at any depth. When the Stack holds a list of independent items that should reveal one by one (a posts listing does this), set `allowChildAnimation`. It adds the `aos-allow-children` marker and no animation of its own. `disableAnimation` removes the Stack's own reveal. ## Props - `wrap`: pass `wrap` (or `wrap={true}`) to let items wrap, or `'wrap-reverse'` / `'nowrap'`. - `grow`, `shrink` and `inline` add `grow`, `shrink` and `inline-flex` (instead of `flex`). - `mobileOverrides` takes `direction`, `justifyContent`, `alignItems`, `wrap` and `gap`, with the same values as the props of the same name. > [!NOTE] > `wrap="wrap"` adds no class in the current release; use the boolean form `wrap`. | Prop | Type | Default | Description | | --------------------------- | ----------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `as` | `ElementType` | - | | | `children` | `ReactNode` | - | | | `className` | `string` | - | | | `direction` | `FlexDirection` | - | | | `justifyContent` | `JustifyContent` | - | | | `alignItems` | `AlignItems` | - | | | `wrap` | `boolean \| FlexWrap` | - | | | `gap` | `StackGap` | - | | | `grow` | `boolean` | - | | | `shrink` | `boolean` | - | | | `inline` | `boolean` | - | | | `divider` | `ReactNode` | - | Render a hairline separator between adjacent children — handy for post lists, search results, and archive rows. - `true` renders a 1px `--color-separator-line` hairline, oriented to match `direction` (vertical between row/inline items, horizontal between column items). - A `ReactNode` renders that custom node between children instead. No-op when there's only one child, and never rendered before the first or after the last child. | | `disableAnimation` | `boolean` | - | | | `allowChildAnimation` | `boolean` | - | Let the Stack's CHILDREN keep their own scroll-reveal animations. A Stack normally reveals as one composed unit, so core's `.stack` CSS cancels every `.aos` / `.animates-on-scroll` reveal below it, at any depth. That is right for a laid-out group and wrong for a Stack that holds a LIST of independent things (a posts listing, whose cards are meant to reveal one by one as they scroll into view). Setting this adds the `aos-allow-children` marker, which core's rule excludes (`.stack:not(.aos-allow-children)`). It does not add any animation of its own — it only stops the Stack from cancelling the children's. Defaults to `false`, so existing markup is unaffected. | | `mobileOverrides` | `{ direction?, justifyContent?, alignItems?, wrap?, gap? }` | - | | | …and all `
    ` attributes | | | | ## HTML and CSS `Stack` composes Tailwind flex utilities with the token gap classes: ```html
    Start a project See our work
    ``` A hand-written divider needs its own size and color (`height: 1px; background-color: var(--color-separator-line)`); the component sets them inline. The `.stack` class carries the reveal rule: | Class | Styles | | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `stack` | `:is(.richtext > :is(.columns, :is(.stack), .card-default, .card-highlighted, .accordion-default)):not(:first-child) { margin-top: calc(var(--typography-block-margin-y, 24px) * 2); }`
    `:is(.richtext > :is(.columns, :is(.stack), .card-default, .card-highlighted, .accordion-default)):not(:last-child) { margin-bottom: calc(var(--typography-block-margin-y, 24px) * 2); }`
    + 1 more rule | The gap values come from the token [gap scale](https://docs.systhema.app/fr/styling/gap.md). ## Next.js `@systhemaui/next` re-exports `Stack` from `@systhemaui/react` unchanged. ## Accessibility Dividers drawn with `divider` are `aria-hidden`; a custom divider node is announced, so mark it `aria-hidden="true"` when it is decorative. Flex `*-reverse` directions change the visual order but not the reading or tab order, so keep the source order meaningful. See [Child reveals](https://docs.systhema.app/fr/styling/animation.md#child-reveals) for the animation rule. ## Related - [Stack block](https://docs.systhema.app/fr/payload/blocks/stack.md) - [Columns](https://docs.systhema.app/fr/components/columns.md) - [Separator](https://docs.systhema.app/fr/components/separator.md) - [Gap](https://docs.systhema.app/fr/styling/gap.md)