Theme

Stack

layout @dryui/ui

Vertical or horizontal stack layout with predictable spacing

layoutstackverticalhorizontalgap

Start Here

Start from the smallest working snippet, then move to interactive examples and the full API contract below.

Styled quick start

Copy this entrypoint first. It includes the imports required to get the component on screen.

svelte
<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { Stack } from '@dryui/ui';
</script>

<Stack direction="row" gap="md">
  <p>First item</p>
  <p>Second item</p>
</Stack>

Import options

Root package

ts
import { Stack } from '@dryui/ui'

Per-component subpath

ts
import { Stack } from '@dryui/ui/stack'

Customize

Use the interactive examples to see common variants, states, and composition patterns before building your own.

Vertical Stack (default)

Item 1
Item 2
Item 3
svelte
<Stack gap="md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Stack>

Horizontal Stack

Item 1
Item 2
Item 3
svelte
<Stack direction="horizontal" gap="md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Stack>

Row alias

Item 1
Item 2
Item 3
svelte
<Stack direction="row" gap="md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Stack>

Column alias

Item 1
Item 2
Item 3
svelte
<Stack direction="column" gap="md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Stack>

Stack gap sizes

sm
A
B
md
A
B
lg
A
B
svelte
<Stack gap="sm">...</Stack>
<Stack gap="md">...</Stack>
<Stack gap="lg">...</Stack>
<Stack gap="xl">...</Stack>

Compose

The full API contract lives here: props, CSS variables, and the public data attributes you can target when styling.

Prop Type Default Required Bindable
direction
verticalhorizontalrowcolumn
Controls whether items stack vertically or horizontally. Also accepts row and column aliases.
 'vertical' — —
gap
smmdlgxl
Uses DryUI spacing scale tokens, not raw CSS units.
 'md' — —
align
startcenterendstretch
Maps to align-items for the stack container.
 'stretch' — —
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.