Stack

A flexbox layout component that stacks children with consistent spacing. Use HStack for horizontal layouts and VStack for vertical layouts.

Anatomy 

<script>
  import { Stack, HStack, VStack } from "@saas-ui/svelte/layout/stack";
</script>

<!-- Vertical stack (default) -->
<Stack gap={4}>
  <div>Item 1</div>
  <div>Item 2</div>
</Stack>

<!-- Horizontal stack -->
<HStack gap={4}>
  <div>Item 1</div>
  <div>Item 2</div>
</HStack>

<!-- Explicit vertical stack -->
<VStack gap={4}>
  <div>Item 1</div>
  <div>Item 2</div>
</VStack>

Examples

Basic Accessibility

Basic vertical stack with items arranged in a column with consistent gap.

Horizontal Accessibility

Use direction="row" to arrange items horizontally instead of vertically.

Responsive Accessibility

Combine Stack with responsive classes to change layout direction based on viewport size.

With H Stack

HStack is a convenience component that defaults to horizontal direction with centered alignment.

With Separator Accessibility

Add visual separators between stack items using the Divider component.

With V Stack

VStack is a convenience component that defaults to vertical direction with stretch alignment.

Props

Prop Type Default Description
direction row | column | row-reverse | col-reverse column -
align start | center | end | stretch | baseline stretch -
justify start | center | end | between | around start -
class text - Additional CSS classes to apply.
children any - The content to be rendered inside the component.