Platform UI
ComponentFeatured

Dialog Stack

A component for stacking dialogs on top of each other with elegant transitions.

Installation

1pnpm dlx shadcn@latest add "https://platform-ui.southguild.tech/r/dialog-stack"

Components will be installed to components/platform-ui/

Usage

1import {
2  DialogStack,
3  DialogStackBody,
4  DialogStackContent,
5  DialogStackFooter,
6  DialogStackHeader,
7  DialogStackNext,
8  DialogStackOverlay,
9  DialogStackPrevious,
10  DialogStackTitle,
11} from "@/components/platform-ui/dialog-stack";
1<DialogStack>
2  <DialogStackOverlay />
3  <DialogStackBody>
4    <DialogStackContent>
5      <DialogStackHeader>
6        <DialogStackTitle>Step 1: Select Plan</DialogStackTitle>
7      </DialogStackHeader>
8      <div className="py-4">Content for first dialog</div>
9      <DialogStackFooter>
10        <DialogStackNext>Continue</DialogStackNext>
11      </DialogStackFooter>
12    </DialogStackContent>
13    <DialogStackContent>
14      <DialogStackHeader>
15        <DialogStackTitle>Step 2: Payment Details</DialogStackTitle>
16      </DialogStackHeader>
17      <div className="py-4">Content for second dialog</div>
18      <DialogStackFooter>
19        <DialogStackPrevious>Back</DialogStackPrevious>
20        <DialogStackNext>Continue</DialogStackNext>
21      </DialogStackFooter>
22    </DialogStackContent>
23  </DialogStackBody>
24</DialogStack>

Examples

Basic Stack

Multi-step Form

Clickable Stack

You can click on visible previous dialogs to navigate back

API Reference

DialogStack

The main container component for the dialog stack.

PropTypeDefaultDescription
openboolean

Controls whether the dialog stack is open or closed.

false
defaultOpenboolean

The default open state when the component is initially rendered.

false
onOpenChange(open: boolean) => void

Event handler called when the open state changes.

clickableboolean

Whether the dialogs in the stack are clickable to navigate back.

false

DialogStackOverlay

The overlay that covers the screen behind the dialog stack.

DialogStackBody

Container for the dialog stack content components.

DialogStackContent

Each individual dialog in the stack.

PropTypeDefaultDescription
indexnumber

The index of this dialog in the stack. Automatically assigned when used within DialogStackBody.

0
offsetnumber

The offset in pixels for each stacked dialog.

10

DialogStackHeader

Container for the dialog header content.

DialogStackTitle

The title of a dialog in the stack.

DialogStackFooter

Container for the dialog footer content.

DialogStackNext

Button to navigate to the next dialog in the stack.

DialogStackPrevious

Button to navigate to the previous dialog in the stack.

Accessibility

The Dialog Stack component is designed with accessibility in mind:

  • Uses proper ARIA attributes
  • Keyboard navigation support
  • Focus management
  • Screen reader announcements for transitions