Layout

Stack

Flex row or column with gaps from the 4px spacing scale. Direction and gap can change per breakpoint.

Usage

Use it to:

  • space groups of controls and content blocks
  • switch from a column on phones to a row on wide screens

Don’t use it to:

  • equal-width columns (use Grid)
  • adding separators (use Divider between children)

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/StackExample.tsx
import { Button, Stack } from '@krackedui/motion';

export function FormActions() {
  return (
    <Stack direction="row" gap={2}>
      <Button variant="secondary">Cancel</Button>
      <Button variant="primary">Save</Button>
    </Stack>
  );
}

Examples

Responsive direction

A column on phones, a row from md (768px).

One
Two
Three

Align and justify

Members

Wrap

DesignResearchQ3RoadmapHiringDocs

API Reference

Stack

A flex <div>; supports all of its props. Adds:

PropTypeDefault
direction
"column""row"{ base, sm, md, lg, xl }
"column"
gap
01234568101216{ base, sm, md, lg, xl }
align
"start""center""end""stretch""baseline"
justify
"start""center""end""between"
wrap
boolean
false
asChild
boolean
false

Accessibility

  • Layout only: no role. Use asChild to lay out a semantic element (<nav>, <ul>, <form>).
  • Visual order follows DOM order, so keyboard and reading order stay the same at every breakpoint.
© 2026 Motion. Internal documentation.