Dialog Stack

Composable stacked 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.

Installation

npx love-ui@latest add dialog-stack

Usage

import { DialogStack, DialogStackTrigger, DialogStackOverlay, DialogStackBody, DialogStackContent, DialogStackTitle, DialogStackDescription, DialogStackHeader, DialogStackFooter, DialogStackNext, DialogStackPrevious } from "@/components/dialog-stack"

<DialogStack>
  <DialogStackTrigger>Open Dialog</DialogStackTrigger>
  <DialogStackOverlay />
  <DialogStackBody>
    <DialogStackContent index={0}>
      <DialogStackHeader>
        <DialogStackTitle>Step 1</DialogStackTitle>
        <DialogStackDescription>Complete the first step</DialogStackDescription>
      </DialogStackHeader>
      <DialogStackFooter>
        <DialogStackNext>Next</DialogStackNext>
      </DialogStackFooter>
    </DialogStackContent>
    <DialogStackContent index={1}>
      <DialogStackHeader>
        <DialogStackTitle>Step 2</DialogStackTitle>
        <DialogStackDescription>Complete the second step</DialogStackDescription>
      </DialogStackHeader>
      <DialogStackFooter>
        <DialogStackPrevious>Previous</DialogStackPrevious>
        <DialogStackNext>Finish</DialogStackNext>
      </DialogStackFooter>
    </DialogStackContent>
  </DialogStackBody>
</DialogStack>

Features

Allows for dialogs to be stacked on top of each other
Provides a consistent layout and styling for each dialog
Includes navigation components to move between them

Examples

With six dialogs

"use client";

import {
  DialogStack,
  DialogStackBody,
  DialogStackContent,
  DialogStackDescription,
  DialogStackFooter,
  DialogStackHeader,
  DialogStackNext,
  DialogStackOverlay,
  DialogStackPrevious,
  DialogStackTitle,
  DialogStackTrigger,
} from "../../../../../packages/dialog-stack";
import { Button } from "../../../../../packages/ui/src/ui/button";

const Example = () => (
  <DialogStack>
    <DialogStackTrigger asChild>
      <Button variant="outline">Show me</Button>
    </DialogStackTrigger>
    <DialogStackOverlay />

    <DialogStackBody>
      <DialogStackContent>
        <DialogStackHeader>
          <DialogStackTitle>I'm the first dialog</DialogStackTitle>
          <DialogStackDescription>
            With a fancy description
          </DialogStackDescription>
        </DialogStackHeader>
        <DialogStackFooter className="justify-end">
          <DialogStackNext asChild>
            <Button variant="outline">Next</Button>
          </DialogStackNext>
        </DialogStackFooter>
      </DialogStackContent>

      <DialogStackContent>
        <DialogStackHeader>
          <DialogStackTitle>I'm the second dialog</DialogStackTitle>
          <DialogStackDescription>
            With a fancy description
          </DialogStackDescription>
        </DialogStackHeader>
        <DialogStackFooter className="justify-between">
          <DialogStackPrevious asChild>
            <Button variant="outline">Previous</Button>
          </DialogStackPrevious>
          <DialogStackNext asChild>
            <Button variant="outline">Next</Button>
          </DialogStackNext>
        </DialogStackFooter>
      </DialogStackContent>

      <DialogStackContent>
        <DialogStackHeader>
          <DialogStackTitle>I'm the third dialog</DialogStackTitle>
          <DialogStackDescription>
            With a fancy description
          </DialogStackDescription>
        </DialogStackHeader>
        <DialogStackFooter className="justify-between">
          <DialogStackPrevious asChild>
            <Button variant="outline">Previous</Button>
          </DialogStackPrevious>
          <DialogStackNext asChild>
            <Button variant="outline">Next</Button>
          </DialogStackNext>
        </DialogStackFooter>
      </DialogStackContent>

      <DialogStackContent>
        <DialogStackHeader>
          <DialogStackTitle>I'm the fourth dialog</DialogStackTitle>
          <DialogStackDescription>
            With a fancy description
          </DialogStackDescription>
        </DialogStackHeader>
        <DialogStackFooter className="justify-between">
          <DialogStackPrevious asChild>
            <Button variant="outline">Previous</Button>
          </DialogStackPrevious>
          <DialogStackNext asChild>
            <Button variant="outline">Next</Button>
          </DialogStackNext>
        </DialogStackFooter>
      </DialogStackContent>

      <DialogStackContent>
        <DialogStackHeader>
          <DialogStackTitle>I'm the fifth dialog</DialogStackTitle>
          <DialogStackDescription>
            With a fancy description
          </DialogStackDescription>
        </DialogStackHeader>
        <DialogStackFooter className="justify-between">
          <DialogStackPrevious asChild>
            <Button variant="outline">Previous</Button>
          </DialogStackPrevious>
          <DialogStackNext asChild>
            <Button variant="outline">Next</Button>
          </DialogStackNext>
        </DialogStackFooter>
      </DialogStackContent>

      <DialogStackContent>
        <DialogStackHeader>
          <DialogStackTitle>I'm the sixth dialog</DialogStackTitle>
          <DialogStackDescription>
            With a fancy description
          </DialogStackDescription>
        </DialogStackHeader>
        <DialogStackFooter className="justify-start">
          <DialogStackPrevious asChild>
            <Button variant="outline">Previous</Button>
          </DialogStackPrevious>
        </DialogStackFooter>
      </DialogStackContent>
    </DialogStackBody>
  </DialogStack>
);

export default Example;

"use client";

import {
  DialogStack,
  DialogStackBody,
  DialogStackContent,
  DialogStackDescription,
  DialogStackFooter,
  DialogStackHeader,
  DialogStackNext,
  DialogStackOverlay,
  DialogStackPrevious,
  DialogStackTitle,
  DialogStackTrigger,
} from "../../../../../packages/dialog-stack";
import { Button } from "../../../../../packages/ui/src/ui/button";

const Example = () => (
  <DialogStack clickable>
    <DialogStackTrigger asChild>
      <Button variant="outline">Show me</Button>
    </DialogStackTrigger>
    <DialogStackOverlay />

    <DialogStackBody>
      <DialogStackContent>
        <DialogStackHeader>
          <DialogStackTitle>I'm the first dialog</DialogStackTitle>
          <DialogStackDescription>
            With a fancy description
          </DialogStackDescription>
        </DialogStackHeader>
        <DialogStackFooter className="justify-end">
          <DialogStackNext asChild>
            <Button variant="outline">Next</Button>
          </DialogStackNext>
        </DialogStackFooter>
      </DialogStackContent>

      <DialogStackContent>
        <DialogStackHeader>
          <DialogStackTitle>I'm the second dialog</DialogStackTitle>
          <DialogStackDescription>
            With a fancy description
          </DialogStackDescription>
        </DialogStackHeader>
        <DialogStackFooter className="justify-between">
          <DialogStackPrevious asChild>
            <Button variant="outline">Previous</Button>
          </DialogStackPrevious>
          <DialogStackNext asChild>
            <Button variant="outline">Next</Button>
          </DialogStackNext>
        </DialogStackFooter>
      </DialogStackContent>

      <DialogStackContent>
        <DialogStackHeader>
          <DialogStackTitle>I'm the third dialog</DialogStackTitle>
          <DialogStackDescription>
            With a fancy description
          </DialogStackDescription>
        </DialogStackHeader>
        <DialogStackFooter className="justify-between">
          <DialogStackPrevious asChild>
            <Button variant="outline">Previous</Button>
          </DialogStackPrevious>
        </DialogStackFooter>
      </DialogStackContent>
    </DialogStackBody>
  </DialogStack>
);

export default Example;

Controlled

"use client";

import {
  DialogStack,
  DialogStackBody,
  DialogStackContent,
  DialogStackDescription,
  DialogStackFooter,
  DialogStackHeader,
  DialogStackNext,
  DialogStackOverlay,
  DialogStackPrevious,
  DialogStackTitle,
} from "../../../../../packages/dialog-stack";
import { Button } from "../../../../../packages/ui/src/ui/button";
import { useState } from "react";

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(!open)} variant="outline">
        Toggle Dialog
      </Button>

      <DialogStack onOpenChange={setOpen} open={open}>
        <DialogStackOverlay />
        <DialogStackBody>
          <DialogStackContent>
            <DialogStackHeader>
              <DialogStackTitle>I'm the first dialog</DialogStackTitle>
              <DialogStackDescription>
                With a fancy description
              </DialogStackDescription>
            </DialogStackHeader>
            <DialogStackFooter className="justify-end">
              <DialogStackNext asChild>
                <Button variant="outline">Next</Button>
              </DialogStackNext>
            </DialogStackFooter>
          </DialogStackContent>

          <DialogStackContent>
            <DialogStackHeader>
              <DialogStackTitle>I'm the second dialog</DialogStackTitle>
              <DialogStackDescription>
                With a fancy description
              </DialogStackDescription>
            </DialogStackHeader>
            <DialogStackFooter className="justify-between">
              <DialogStackPrevious asChild>
                <Button variant="outline">Previous</Button>
              </DialogStackPrevious>
              <DialogStackNext asChild>
                <Button variant="outline">Next</Button>
              </DialogStackNext>
            </DialogStackFooter>
          </DialogStackContent>

          <DialogStackContent>
            <DialogStackHeader>
              <DialogStackTitle>I'm the third dialog</DialogStackTitle>
              <DialogStackDescription>
                With a fancy description
              </DialogStackDescription>
            </DialogStackHeader>
            <DialogStackFooter className="justify-between">
              <DialogStackPrevious asChild>
                <Button variant="outline">Previous</Button>
              </DialogStackPrevious>
            </DialogStackFooter>
          </DialogStackContent>
        </DialogStackBody>
      </DialogStack>
    </>
  );
};

export default Example;

Banner Marquee