Stack

Layout component for layering elements on top of each other while keeping them in the document flow. Unlike absolute positioning, Stack maintains parent container sizing based on content.

Overview

Why Stack?

Stack allows you to layer multiple elements on top of each other while keeping them in the document flow. This means:

✓ The parent container sizes based on its content (largest child)
✓ No need for absolute positioning or manual size calculations
✓ Items remain accessible in the natural DOM order
✓ Use z-index or DOM order to control layering

Perfect for badges on buttons, image overlays, loading states, and any scenario where you need elements to occupy the same visual space without breaking document flow.

Installation

Import

import { Stack } from '@svelte-atoms/core/stack';

Preset Configuration

Customize the stack appearance using presets

You can customize the default styles for Stack components by defining presets in your configuration:

Examples

Explore different stack layering patterns

Image with Overlay

Layer text over an image while maintaining container size

Overlay Text

Stays in document flow

Code

<Stack.Root class="h-64 w-64 overflow-hidden rounded-lg">
  <Stack.Item>
    <div class="h-64 w-64 bg-gradient-to-br from-blue-500 to-purple-600"></div>
  </Stack.Item>
  <Stack.Item class="flex items-end">
    <div class="w-full bg-black/50 p-4">
      <h3 class="text-lg font-bold text-white">Overlay Text</h3>
      <p class="text-sm text-white/80">Stays in document flow</p>
    </div>
  </Stack.Item>
</Stack.Root>

Button with Badge

Notification badge positioned over a button

Messages

Code

<Stack.Root class="inline-block w-fit flex-0">
  <Stack.Item base={Button} variant="primary">Messages</Stack.Item>
  <Stack.Item class="flex justify-end" style="margin-top: -8px; margin-right: -8px;">
    <span class="bg-destructive text-destructive-foreground flex h-6 w-6 items-center justify-center rounded-full text-xs font-bold">
      5
    </span>
  </Stack.Item>
</Stack.Root>

Loading Overlay

Show loading state over content without breaking layout

Content Card

Your content here that determines the size

Container sizes based on this content

Code

<Stack.Root class="w-64">
  <Stack.Item base={Card.Root} class="rounded-lg border p-8">
    <h3 class="mb-2 text-lg font-bold">Content Card</h3>
    <p class="text-muted-foreground text-sm">Your content here that determines the size</p>
    <p class="text-muted-foreground mt-2 text-sm">Container sizes based on this content</p>
  </Stack.Item>
  <Stack.Item class="flex items-center justify-center">
    <div class="bg-background/90 border-border/50 rounded-lg border p-4 shadow-lg backdrop-blur-sm">
      <div class="text-muted-foreground text-sm">Loading...</div>
    </div>
  </Stack.Item>
</Stack.Root>

API Reference

Stack.Root

Container that creates a grid area for layering child items.

Prop

Type

Default

Description

preset

string

'stack.root'

Preset configuration key

class

string

Additional CSS classes

Stack.Item

Individual item that occupies the same grid area, layering on top of siblings while remaining in document flow. Use flexbox, margins, or z-index for positioning control.

Prop

Type

Default

Description

preset

string

'stack.item'

Preset configuration key

class

string

Additional CSS classes (use flexbox, z-index, or margins for positioning)

style

string

Inline styles for fine-tuned positioning with margins

Accessibility

Built-in Accessibility Features

• Semantic HTML structure
• Uses CSS Grid for proper layering
• Maintains DOM order for screen readers
• Works with absolute positioning and z-index
• Keyboard navigation preserves natural tab order

Sidebar

Tabs