Stack

Vertical or horizontal arrangement of elements with consistent spacing.

Preview · Stack

Code

HTML · @primus/ui-core

<div class="vstack" style="width:100%">
  <div>
    <p style="font-size:0.7rem;color:var(--muted-foreground);margin:0 0 0.5rem;text-transform:uppercase;letter-spacing:0.05em">.hstack</p>
    <div class="hstack">
      <button>Save</button>
      <button data-variant="secondary">Cancel</button>
      <button class="outline">Export</button>
    </div>
  </div>
  <div>
    <p style="font-size:0.7rem;color:var(--muted-foreground);margin:0 0 0.5rem;text-transform:uppercase;letter-spacing:0.05em">.vstack</p>
    <div class="vstack" style="max-width:200px">
      <div class="card" style="padding:0.75rem;font-size:0.875rem">Item 1</div>
      <div class="card" style="padding:0.75rem;font-size:0.875rem">Item 2</div>
      <div class="card" style="padding:0.75rem;font-size:0.875rem">Item 3</div>
    </div>
  </div>
</div>

React

import { Stack } from 'primus-react-ui';

<Stack direction="horizontal" gap="sm" align="center">
  <button>Save</button>
  <button data-variant="secondary">Cancel</button>
</Stack>
<Stack direction="vertical" gap="md">
  <div>Item 1</div><div>Item 2</div><div>Item 3</div>
</Stack>

Angular

<primus-stack direction="horizontal" gap="sm" align="center">
  <primus-button>Save</primus-button>
  <primus-button variant="secondary">Cancel</primus-button>
</primus-stack>
<primus-stack direction="vertical" gap="md">
  <div>Item 1</div><div>Item 2</div>
</primus-stack>

Props

Prop	Type	Default	Description
direction	horizontal | vertical	vertical	Layout direction
gap	none | sm | md | lg | xl	md	Gap
align	start | center | end | stretch	stretch	Cross-axis alignment

Version history

See the Changelog for version history and breaking changes.