Skip to content

Stack

Flex and grid wrappers with a gap from the 4px scale, so spacing lives in one place instead of in margins.

LayoutServer-rendered

Examples

Stack

A vertical flow. Use gap 1_5 inside a text group, 4 between controls, 6 between blocks.

Light

GitHub

Issues, pull requests and code search for your repositories.

Dark

GitHub

Issues, pull requests and code search for your repositories.

Example
<Stack gap="1_5">
  <Text weight="medium">GitHub</Text>
  <Text size="sm" tone="ink-2">Issues, pull requests and code search for your repositories.</Text>
</Stack>

Inline

A horizontal row, vertically centred. justify="between" pushes the ends apart; wrap lets it break on narrow screens.

Connected

Linear

HTTP

12 tools enabled

Example
<Inline gap="2">
  <Lamp state="live" label="Connected" />
  <Text weight="medium">Linear</Text>
  <Badge mono>HTTP</Badge>
</Inline>
<Inline gap="2" justify="between" wrap>
  <Text size="sm" tone="ink-2">12 tools enabled</Text>
  <Inline gap="2">
    <Button size="sm" variant="secondary">Test connection</Button>
    <Button size="sm">Save</Button>
  </Inline>
</Inline>

Grid

Without columns the grid fills as many tracks as fit at the min width (240px by default). columns fixes the count.

GitHub

Linear

Sentry

Notion

Example
<Grid gap="4" min="180px">
  {servers.map((server) => (
    <Card key={server.id}>
      <CardBody><Text weight="medium">{server.name}</Text></CardBody>
    </Card>
  ))}
</Grid>

Usage

Usage
import { Stack, Inline, Grid } from '@switchboard/ui'

<Stack as="section" gap="6">
  <Inline gap="2" justify="between">…</Inline>
  …
</Stack>

Props

Every component also takes mix, for css() and mixins applied after its own style.

Stack

Stack props
PropTypeDefaultDescription
as'div' | 'section' | 'ul' | 'ol' | 'li' | 'nav' | 'header' | 'footer' | 'main' | 'aside' | 'form' | 'fieldset' | 'dl''div'Element to render. Lists lose their bullets and padding.
gapSpace–Space step from the 4px scale: '1_5', '2', '4', '6', '8' and so on.
align'start' | 'center' | 'end' | 'stretch' | 'baseline'–align-items.
justify'start' | 'center' | 'end' | 'between'–justify-content.
mixMix–Extra css() or mixins, applied after the layout style.

Also accepts every <div> attribute. Inline and Grid take the same props as Stack, plus their own below.

Inline

Inline props
PropTypeDefaultDescription
wrapboolean–Let items wrap onto a new line.

Grid

Grid props
PropTypeDefaultDescription
columnsnumber–Fixed number of equal columns.
minstring'240px'Minimum track width when columns is not set.

Accessibility

  • Purely visual: no roles are added. Pick `as` so the markup says what it is (a list of servers is `as="ul"` with `li` children).
  • Order on screen follows source order; nothing is reordered with CSS, so reading and tab order match.

Guidance

Do

  • Space siblings with gap on the parent, not margins on the children.
  • Use Inline with justify="between" for a title and its actions on one line.

Don’t

  • Pass raw pixel values; stay on the space scale.
  • Nest a Stack only to add one more gap; give the outer one the right step.