Component reference

Stack

Lays out children in a column, with a gap from the spacing scale.

Preview

Reading and actions

The title, description, and actions of one piece of work stay close; the next block of work uses a wider rhythm.

packages/meowtail/stories/layout.stories.tsxline 77tsx

render: () => (
  <Measure width="content">
    <Stack gap="relaxed">
      <Stack gap="compact">
        <strong>Check the update order of search results</strong>
        <span>
          Keep the current input and check whether older requests overwrite newer results. Long
          descriptions wrap naturally and the order stays continuous.
        </span>
      </Stack>
      <Inline gap="compact">
        <Status state="success" label="Checked" />
        <span>2 changes awaiting review</span>
      </Inline>
      <Inline>
        <Button>Review changes</Button>
        <Button variant="quiet">Handle later</Button>
      </Inline>
    </Stack>
  </Measure>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { Stack } from "meowtail";

<Stack gap="compact">
  <strong>Check the update order of search results</strong>
  <span>
    Keep the current input and check whether older requests overwrite newer results. Long
    descriptions wrap naturally and the order stays continuous.
  </span>
</Stack>

Examples

The other stories that show this component.

Controls and composition

Check the proportions of text, controls, options, and containers on one screen. Default styles come straight from the component theme; nothing is enlarged or shrunk just for the demo.

packages/meowtail/stories/scale.stories.tsxline 36tsx

render: () => (
  <Measure width="content">
    <Stack gap="relaxed">
      <Stack gap="compact">
        <strong>Start with the basic controls, then check the composed scale</strong>
        <span>
          Related content stays close while separate regions get space. Text wraps when long and
          buttons stay recognizable.
        </span>
        <Inline gap="compact">
          <Input aria-label="Project name" placeholder="Project name" />
          <Button>Save</Button>
          <Button variant="quiet">Cancel</Button>
        </Inline>
        <Inline gap="compact">
          <Select aria-label="Native select" value="current">
            <option value="current">Current workspace</option>
            <option value="new">New workspace</option>
          </Select>
          <ChoiceSelect
            id="scale-select"
            aria-label="Custom select"
            defaultValue="current"
            options={[
              { value: "current", label: "Current workspace" },
              { value: "new", label: "New workspace" },
            ]}
          />
        </Inline>
      </Stack>
      <Card>
        <CardHeader>
          <CardTitle>Workspace settings</CardTitle>
          <CardDescription>
            Inside a separate container, fields and actions keep the same control scale.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Field label="Display name" htmlFor="scale-name">
            <Input id="scale-name" value="My workspace" />
          </Field>
        </CardContent>
        <CardFooter>
          <Button>Save settings</Button>
          <Button variant="quiet">Restore defaults</Button>
        </CardFooter>
      </Card>
      <ChatQuestion
        question="How should this question be handled next?"
        questionId="scale-question"
        actions={[
          <Button>Submit answer</Button>,
          <Button variant="quiet">Answer in text</Button>,
          <Button variant="quiet">Cancel question</Button>,
        ]}
      >
        <ChoiceGroup
          id="scale-choice"
          label="How to proceed"
          hideLabel
          options={[
            { value: "continue", label: "Keep investigating and preserve the existing work" },
            {
              value: "review",
              label:
                "Review the existing results first, then decide whether to continue with the unfinished parts",
            },
          ]}
        />
      </ChatQuestion>
    </Stack>
  </Measure>
)

API reference

Props

Prop	Type	Default
`gap`	`"none" \| "compact" \| "normal" \| "relaxed"`	`"normal"`
`rowGap`	`"auto" \| "none" \| "compact" \| "normal" \| "relaxed"`	`"auto"`
`columnGap`	`"auto" \| "none" \| "compact" \| "normal" \| "relaxed"`	`"auto"`
`as`	`LayoutElement`	`"div"`
`align`	`LayoutAlign`	`"stretch"`
`justify`	`LayoutJustify`	`"start"`

Also takes className, children and the attributes and events of its root element.

DOM parts

root

Registry

The component is registered as stack in the meowtail component registry.