Composable stacked dialogs for shadcn/ui

Stacked dialog component inspired by Radix UI Dialog. Accessible. Customizable. Open Source. Pre-styled for shadcn/ui.

GitHub

87

Installation

npx shadcn@latest add https://dialog-stack.haydenbleasel.com/registry.json

Description

The DialogStack component is a container for a series of dialogs, useful for creating a wizard, nested form or multi-step process. It provides a consistent layout and styling for each dialog, and includes navigation components to move between them.

Usage

<DialogStack>
  
  {/* Trigger */}
  <DialogStackTrigger>Open</DialogStackTrigger>
 
  {/* Overlay */}
  <DialogStackOverlay />
 
  {/* Body */}
  <DialogStackBody>
 
    {/* Dialog #1 */}
    <DialogStackContent>
      <DialogHeader>
        <DialogStackTitle>Title</DialogStackTitle>
        <DialogStackDescription>Description</DialogStackDescription>
      </DialogHeader>
      <p>Content</p>
      <DialogStackFooter>
        <DialogStackNext>Next</DialogStackNext>
      </DialogStackFooter>
    </DialogStackContent>
 
    {/* Dialog #2 */}
    <DialogStackContent>
      <DialogHeader>
        <DialogStackTitle>Title</DialogStackTitle>
        <DialogStackDescription>Description</DialogStackDescription>
      </DialogHeader>
      <p>Content</p>
      <DialogStackFooter>
        <DialogStackPrevious>Previous</DialogStackPrevious>
        <DialogStackNext>Next</DialogStackNext>
      </DialogStackFooter>
    </DialogStackContent>
 
    {/* Dialog #3 */}
    <DialogStackContent>
      <DialogHeader>
        <DialogStackTitle>Title</DialogStackTitle>
        <DialogStackDescription>Description</DialogStackDescription>
      </DialogHeader>
      <p>Content</p>
      <DialogStackFooter>
        <DialogStackPrevious>Previous</DialogStackPrevious>
        <DialogStackNext>Next</DialogStackNext>
      </DialogStackFooter>
    </DialogStackContent>
 
    {/* Dialog #4 */}
    <DialogStackContent>
      <DialogHeader>
        <DialogStackTitle>Title</DialogStackTitle>
        <DialogStackDescription>Description</DialogStackDescription>
      </DialogHeader>
      <p>Content</p>
      <DialogStackFooter>
        <DialogStackPrevious>Previous</DialogStackPrevious>
        <DialogStackNext>Next</DialogStackNext>
      </DialogStackFooter>
    </DialogStackContent>
 
    {/* Dialog #5 */}
    <DialogStackContent>
      <DialogHeader>
        <DialogStackTitle>Title</DialogStackTitle>
        <DialogStackDescription>Description</DialogStackDescription>
      </DialogHeader>
      <p>Content</p>
      <DialogStackFooter>
        <DialogStackPrevious>Previous</DialogStackPrevious>
        <DialogStackNext>Next</DialogStackNext>
      </DialogStackFooter>
    </DialogStackContent>
 
    {/* Dialog #6 */}
    <DialogStackContent>
      <DialogHeader>
        <DialogStackTitle>Title</DialogStackTitle>
        <DialogStackDescription>Description</DialogStackDescription>
      </DialogHeader>
      <p>Content</p>
      <DialogStackFooter>
        <DialogStackPrevious>Previous</DialogStackPrevious>
      </DialogStackFooter>
    </DialogStackContent>
  </DialogStackBody>
</DialogStack>

Props

All components accept the standard attributes relevant to their element and the className prop for custom styling. Below are the custom props for each component.

DialogStack

Prop	Type	Default	Description
clickable	boolean	false	Whether the user can click previous dialogs to navigate
open	boolean	false	Whether the dialog is open
onOpenChange	(open: boolean) => void	undefined	Callback function to be called when the dialog is opened or closed

DialogStackTrigger

Prop	Type	Default	Description
asChild	boolean	false	Whether the component should render the child as a React element

DialogStackContent

Prop	Type	Default	Description
offset	number	10	The offset of the dialog

DialogStackNext

Prop	Type	Default	Description
asChild	boolean	false	Whether the component should render the child as a React element

DialogStackPrevious

Prop	Type	Default	Description
asChild	boolean	false	Whether the component should render the child as a React element