Dialog

A flexible dialog component for displaying modal content, overlays, and drawer interfaces. Supports both modal and non-modal modes, drawer positioning, scroll locking, and stacked dialogs with cascade animations.

Default

A centered modal dialog with title, content, and a close button.

AstroReactSvelteVue

PreviewCode

---
import Dialog from "../dialog.astro";
import Button from "@pindoba/astro-button";
import Stamp from "@pindoba/astro-stamp";
import { Info } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column", align: "start" })}>
  <Dialog id="astro-demo-dialog-default" title="Dialog Title">
    <Stamp
      slot="heading-leading"
      size="sm"
      shape="circle"
      feedback="primary"
      emphasis="secondary"
    >
      <Info />
    </Stamp>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex placeat unde natus
    ut ea voluptatum vel officiis commodi optio a totam repellendus, fuga, laborum
    voluptatibus recusandae eos. Voluptate, vel non!
  </Dialog>

  <Button id="astro-demo-dialog-trigger">Open Dialog</Button>
</div>

<script>
  document
    .getElementById("astro-demo-dialog-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-demo-dialog-default");
    });
</script>

import React, { useState, type JSX } from "react";
import { Dialog } from "../Dialog";
import { Button } from "@pindoba/react-button";
import { Stamp } from "@pindoba/react-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { InfoIcon } from "./_icons";

export default function Default(): JSX.Element {
  const [open, setOpen] = useState(false);
  return (
    <div className={stack({ gap: "md", direction: "column", align: "start" })}>
      <Dialog
        id="demo-dialog-default"
        title="Dialog Title"
        open={open}
        onOpenChange={setOpen}
        headingLeading={
          <Stamp
            size="sm"
            shape="circle"
            feedback="primary"
            emphasis="secondary"
          >
            <InfoIcon size={12} />
          </Stamp>
        }
      >
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex placeat unde
        natus ut ea voluptatum vel officiis commodi optio a totam repellendus,
        fuga, laborum voluptatibus recusandae eos. Voluptate, vel non!
      </Dialog>

      <Button onClick={() => setOpen(true)}>Open Dialog</Button>
    </div>
  );
}

<script lang="ts">
  import Dialog from "../dialog.svelte";
  import Button from "@pindoba/svelte-button";
  import Stamp from "@pindoba/svelte-stamp";
  import LucideInfo from "@lucide/svelte/icons/info";
  import { stack } from "@pindoba/styled-system/patterns";

  let open = $state(false);
</script>

<div class={stack({ gap: "md", direction: "column", align: "start" })}>
  <Dialog id="demo-dialog-default" title="Dialog Title" bind:open>
    {#snippet headingLeading()}
      <Stamp size="sm" shape="circle" feedback="primary" emphasis="secondary">
        <LucideInfo size={12} />
      </Stamp>
    {/snippet}
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex placeat unde natus
    ut ea voluptatum vel officiis commodi optio a totam repellendus, fuga, laborum
    voluptatibus recusandae eos. Voluptate, vel non!
  </Dialog>

  <Button onclick={() => (open = true)}>Open Dialog</Button>
</div>

<script setup lang="ts">
import { ref } from "vue";
import { Dialog } from "@pindoba/vue-dialog";
import { Button } from "@pindoba/vue-button";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
import { Info } from "./_icons";

const open = ref(false);
const glyph12 = css({ "& svg": { width: "12px", height: "12px" } });
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', align: 'start' })">
    <Dialog
      id="vue-demo-dialog-default"
      title="Dialog Title"
      :open="open"
      :onOpenChange="(o: boolean) => (open = o)"
    >
      <template #headingLeading>
        <Stamp size="sm" shape="circle" feedback="primary" emphasis="secondary">
          <span :class="glyph12"><Info /></span>
        </Stamp>
      </template>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex placeat unde
      natus ut ea voluptatum vel officiis commodi optio a totam repellendus,
      fuga, laborum voluptatibus recusandae eos. Voluptate, vel non!
    </Dialog>

    <Button :onClick="() => (open = true)">Open Dialog</Button>
  </div>
</template>

The dialog header renders a Banner internally, so every Banner slot is available directly on Dialog. Use headingLeading / headingTrailing (inline with the title), subheadingLeading / subheadingTrailing (inline with the subtitle), and Banner’s outer leading / trailing slots for content that sits beside the whole heading group — the latter is the right place for header actions now that Dialog no longer defines its own headerActions slot.

AstroReactSvelteVue

PreviewCode

---
import Dialog from "../dialog.astro";
import Button from "@pindoba/astro-button";
import Badge from "@pindoba/astro-badge";
import Stamp from "@pindoba/astro-stamp";
import { Bell, Folder, Funnel, User } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "row", flexWrap: "wrap" })}>
  <!-- Subtitle only -->
  <Dialog
    id="astro-demo-dialog-header-notice"
    title="Scheduled Maintenance"
    subtitle="System will be unavailable on March 15, 2026"
  >
    All services will be offline from 02:00 to 04:00 UTC. No action is required
    — your data will remain intact throughout the maintenance window.
  </Dialog>

  <Button id="astro-demo-dialog-header-notice-trigger">With Subtitle</Button>

  <!-- Stamp leading + Badge trailing -->
  <Dialog
    id="astro-demo-dialog-header-files"
    title="File Manager"
    subtitle="Browse and manage your project files"
  >
    <Stamp
      slot="heading-leading"
      shape="square"
      background="surface.ground"
      size="sm"
    >
      <Folder />
    </Stamp>
    <Badge slot="heading-trailing" size="sm">12 files</Badge>
    Select a file to preview, rename, move, or remove it from your project workspace.
  </Dialog>

  <Button id="astro-demo-dialog-header-files-trigger">Stamp + Badge</Button>

  <!-- Stamp in heading + subheading leading, Badge in subheading trailing -->
  <Dialog
    id="astro-demo-dialog-header-account"
    title="Account Settings"
    subtitle="Manage your preferences and security"
  >
    <Stamp
      slot="heading-leading"
      feedback="primary"
      emphasis="secondary"
      shape="circle"
      size="sm"
    >
      <User />
    </Stamp>
    <Badge slot="subheading-trailing" size="sm" feedback="success"
      >Verified</Badge
    >
    Update your display name, email address, and two-factor authentication settings
    from this panel.
  </Dialog>

  <Button id="astro-demo-dialog-header-account-trigger">Subheading Slots</Button
  >

  <!-- Banner trailing slot as a header action (no dedicated dialog slot) -->
  <Dialog
    id="astro-demo-dialog-header-notifications"
    title="Notifications"
    subtitle="3 unread messages"
  >
    <Stamp
      slot="heading-leading"
      feedback="warning"
      emphasis="secondary"
      shape="circle"
      size="sm"
    >
      <Bell />
    </Stamp>
    <Badge slot="heading-trailing" size="sm" feedback="warning">3</Badge>
    <Button slot="trailing" size="sm" emphasis="ghost">Mark all read</Button>
    You have new notifications about team activity, mentions, and system updates.
    Review them here or mark everything as read.
  </Dialog>

  <Button id="astro-demo-dialog-header-notifications-trigger"
    >Trailing Action</Button
  >

  <!-- Stamp + actions, no subtitle -->
  <Dialog id="astro-demo-dialog-header-filters" title="Filters">
    <Stamp
      slot="heading-leading"
      feedback="primary"
      emphasis="secondary"
      shape="square"
      size="sm"
    >
      <Funnel />
    </Stamp>
    <div slot="trailing" class={stack({ direction: "row", gap: "2xs" })}>
      <Button size="sm" emphasis="ghost">Reset</Button>
      <Button size="sm" emphasis="secondary">Apply</Button>
    </div>
    Choose the filters you want to apply to the current view. Changes take effect
    immediately once applied.
  </Dialog>

  <Button id="astro-demo-dialog-header-filters-trigger"
    >Actions, No Subtitle</Button
  >
</div>

<script>
  const ids = [
    "astro-demo-dialog-header-notice",
    "astro-demo-dialog-header-files",
    "astro-demo-dialog-header-account",
    "astro-demo-dialog-header-notifications",
    "astro-demo-dialog-header-filters",
  ];
  ids.forEach((id) => {
    document.getElementById(`${id}-trigger`)?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open(id);
    });
  });
</script>

import React, { useState, type JSX } from "react";
import { Dialog } from "../Dialog";
import { Button } from "@pindoba/react-button";
import { Badge } from "@pindoba/react-badge";
import { Stamp } from "@pindoba/react-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { FolderIcon, UserIcon, BellIcon, FilterIcon } from "./_icons";

export default function Header(): JSX.Element {
  const [openNotice, setOpenNotice] = useState(false);
  const [openFiles, setOpenFiles] = useState(false);
  const [openAccount, setOpenAccount] = useState(false);
  const [openNotifications, setOpenNotifications] = useState(false);
  const [openFilters, setOpenFilters] = useState(false);

  return (
    <div className={stack({ gap: "md", direction: "row", flexWrap: "wrap" })}>
      {/* Subtitle only */}
      <Dialog
        id="demo-dialog-header-notice"
        title="Scheduled Maintenance"
        subtitle="System will be unavailable on March 15, 2026"
        open={openNotice}
        onOpenChange={setOpenNotice}
      >
        All services will be offline from 02:00 to 04:00 UTC. No action is
        required — your data will remain intact throughout the maintenance
        window.
      </Dialog>
      <Button onClick={() => setOpenNotice(true)}>With Subtitle</Button>

      {/* Stamp leading + Badge trailing */}
      <Dialog
        id="demo-dialog-header-files"
        title="File Manager"
        subtitle="Browse and manage your project files"
        open={openFiles}
        onOpenChange={setOpenFiles}
        headingLeading={
          <Stamp shape="square" background="surface.ground" size="sm">
            <FolderIcon size={14} />
          </Stamp>
        }
        headingTrailing={<Badge size="sm">12 files</Badge>}
      >
        Select a file to preview, rename, move, or remove it from your project
        workspace.
      </Dialog>
      <Button onClick={() => setOpenFiles(true)}>Stamp + Badge</Button>

      {/* Stamp in heading + Badge in subheading trailing */}
      <Dialog
        id="demo-dialog-header-account"
        title="Account Settings"
        subtitle="Manage your preferences and security"
        open={openAccount}
        onOpenChange={setOpenAccount}
        headingLeading={
          <Stamp
            feedback="primary"
            emphasis="secondary"
            shape="circle"
            size="sm"
          >
            <UserIcon size={14} />
          </Stamp>
        }
        subheadingTrailing={
          <Badge size="sm" feedback="success">
            Verified
          </Badge>
        }
      >
        Update your display name, email address, and two-factor authentication
        settings from this panel.
      </Dialog>
      <Button onClick={() => setOpenAccount(true)}>Subheading Slots</Button>

      {/* Banner `trailing` slot used for a header action */}
      <Dialog
        id="demo-dialog-header-notifications"
        title="Notifications"
        subtitle="3 unread messages"
        open={openNotifications}
        onOpenChange={setOpenNotifications}
        headingLeading={
          <Stamp
            feedback="warning"
            emphasis="secondary"
            shape="circle"
            size="sm"
          >
            <BellIcon size={14} />
          </Stamp>
        }
        headingTrailing={
          <Badge size="sm" feedback="warning">
            3
          </Badge>
        }
        trailing={
          <Button size="sm" emphasis="ghost">
            Mark all read
          </Button>
        }
      >
        You have new notifications about team activity, mentions, and system
        updates. Review them here or mark everything as read.
      </Dialog>
      <Button onClick={() => setOpenNotifications(true)}>
        Trailing Action
      </Button>

      {/* Stamp + actions, no subtitle */}
      <Dialog
        id="demo-dialog-header-filters"
        title="Filters"
        open={openFilters}
        onOpenChange={setOpenFilters}
        headingLeading={
          <Stamp
            feedback="primary"
            emphasis="secondary"
            shape="square"
            size="sm"
          >
            <FilterIcon size={14} />
          </Stamp>
        }
        trailing={
          <div className={stack({ direction: "row", gap: "2xs" })}>
            <Button size="sm" emphasis="ghost">
              Reset
            </Button>
            <Button size="sm" emphasis="secondary">
              Apply
            </Button>
          </div>
        }
      >
        Choose the filters you want to apply to the current view. Changes take
        effect immediately once applied.
      </Dialog>
      <Button onClick={() => setOpenFilters(true)}>Actions, No Subtitle</Button>
    </div>
  );
}

<script lang="ts">
  import Dialog from "../dialog.svelte";
  import Button from "@pindoba/svelte-button";
  import Badge from "@pindoba/svelte-badge";
  import Stamp from "@pindoba/svelte-stamp";
  import LucideFolder from "@lucide/svelte/icons/folder";
  import LucideUser from "@lucide/svelte/icons/user";
  import LucideBell from "@lucide/svelte/icons/bell";
  import LucideFilter from "@lucide/svelte/icons/filter";
  import { stack } from "@pindoba/styled-system/patterns";

  let openNotice = $state(false);
  let openFiles = $state(false);
  let openAccount = $state(false);
  let openNotifications = $state(false);
  let openFilters = $state(false);
</script>

<div class={stack({ gap: "md", direction: "row", flexWrap: "wrap" })}>
  <!-- Subtitle only -->
  <Dialog
    id="demo-dialog-header-notice"
    title="Scheduled Maintenance"
    subtitle="System will be unavailable on March 15, 2026"
    bind:open={openNotice}
  >
    All services will be offline from 02:00 to 04:00 UTC. No action is required
    — your data will remain intact throughout the maintenance window.
  </Dialog>

  <Button onclick={() => (openNotice = true)}>With Subtitle</Button>

  <!-- Stamp leading + Badge trailing -->
  <Dialog
    id="demo-dialog-header-files"
    title="File Manager"
    subtitle="Browse and manage your project files"
    bind:open={openFiles}
  >
    {#snippet headingLeading()}
      <Stamp shape="square" background="surface.ground" size="sm">
        <LucideFolder size={14} />
      </Stamp>
    {/snippet}
    {#snippet headingTrailing()}
      <Badge size="sm">12 files</Badge>
    {/snippet}
    Select a file to preview, rename, move, or remove it from your project workspace.
  </Dialog>

  <Button onclick={() => (openFiles = true)}>Stamp + Badge</Button>

  <!-- Stamp in heading + subheading leading, Badge in subheading trailing -->
  <Dialog
    id="demo-dialog-header-account"
    title="Account Settings"
    subtitle="Manage your preferences and security"
    bind:open={openAccount}
  >
    {#snippet headingLeading()}
      <Stamp feedback="primary" emphasis="secondary" shape="circle" size="sm">
        <LucideUser size={14} />
      </Stamp>
    {/snippet}
    {#snippet subheadingTrailing()}
      <Badge size="sm" feedback="success">Verified</Badge>
    {/snippet}
    Update your display name, email address, and two-factor authentication settings
    from this panel.
  </Dialog>

  <Button onclick={() => (openAccount = true)}>Subheading Slots</Button>

  <!-- Banner `trailing` slot used for a header action (no dedicated dialog slot) -->
  <Dialog
    id="demo-dialog-header-notifications"
    title="Notifications"
    subtitle="3 unread messages"
    bind:open={openNotifications}
  >
    {#snippet headingLeading()}
      <Stamp feedback="warning" emphasis="secondary" shape="circle" size="sm">
        <LucideBell size={14} />
      </Stamp>
    {/snippet}
    {#snippet headingTrailing()}
      <Badge size="sm" feedback="warning">3</Badge>
    {/snippet}
    {#snippet trailing()}
      <Button size="sm" emphasis="ghost">Mark all read</Button>
    {/snippet}
    You have new notifications about team activity, mentions, and system updates.
    Review them here or mark everything as read.
  </Dialog>

  <Button onclick={() => (openNotifications = true)}>Trailing Action</Button>

  <!-- Stamp + actions, no subtitle -->
  <Dialog
    id="demo-dialog-header-filters"
    title="Filters"
    bind:open={openFilters}
  >
    {#snippet headingLeading()}
      <Stamp feedback="primary" emphasis="secondary" shape="square" size="sm">
        <LucideFilter size={14} />
      </Stamp>
    {/snippet}
    {#snippet trailing()}
      <div class={stack({ direction: "row", gap: "2xs" })}>
        <Button size="sm" emphasis="ghost">Reset</Button>
        <Button size="sm" emphasis="secondary">Apply</Button>
      </div>
    {/snippet}
    Choose the filters you want to apply to the current view. Changes take effect
    immediately once applied.
  </Dialog>

  <Button onclick={() => (openFilters = true)}>Actions, No Subtitle</Button>
</div>

<script setup lang="ts">
import { ref } from "vue";
import { Dialog } from "@pindoba/vue-dialog";
import { Button } from "@pindoba/vue-button";
import { Badge } from "@pindoba/vue-badge";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
import { Folder, User, Bell, Filter } from "./_icons";

const openNotice = ref(false);
const openFiles = ref(false);
const openAccount = ref(false);
const openNotifications = ref(false);
const openFilters = ref(false);

const glyph14 = css({ "& svg": { width: "14px", height: "14px" } });
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'row', flexWrap: 'wrap' })">
    <!-- Subtitle only -->
    <Dialog
      id="vue-demo-dialog-header-notice"
      title="Scheduled Maintenance"
      subtitle="System will be unavailable on March 15, 2026"
      :open="openNotice"
      :onOpenChange="(o: boolean) => (openNotice = o)"
    >
      All services will be offline from 02:00 to 04:00 UTC. No action is
      required — your data will remain intact throughout the maintenance window.
    </Dialog>

    <Button :onClick="() => (openNotice = true)">With Subtitle</Button>

    <!-- Stamp leading + Badge trailing -->
    <Dialog
      id="vue-demo-dialog-header-files"
      title="File Manager"
      subtitle="Browse and manage your project files"
      :open="openFiles"
      :onOpenChange="(o: boolean) => (openFiles = o)"
    >
      <template #headingLeading>
        <Stamp shape="square" background="surface.ground" size="sm">
          <span :class="glyph14"><Folder /></span>
        </Stamp>
      </template>
      <template #headingTrailing>
        <Badge size="sm">12 files</Badge>
      </template>
      Select a file to preview, rename, move, or remove it from your project
      workspace.
    </Dialog>

    <Button :onClick="() => (openFiles = true)">Stamp + Badge</Button>

    <!-- Stamp in heading, Badge in subheading trailing -->
    <Dialog
      id="vue-demo-dialog-header-account"
      title="Account Settings"
      subtitle="Manage your preferences and security"
      :open="openAccount"
      :onOpenChange="(o: boolean) => (openAccount = o)"
    >
      <template #headingLeading>
        <Stamp feedback="primary" emphasis="secondary" shape="circle" size="sm">
          <span :class="glyph14"><User /></span>
        </Stamp>
      </template>
      <template #subheadingTrailing>
        <Badge size="sm" feedback="success">Verified</Badge>
      </template>
      Update your display name, email address, and two-factor authentication
      settings from this panel.
    </Dialog>

    <Button :onClick="() => (openAccount = true)">Subheading Slots</Button>

    <!-- Banner `trailing` slot used for a header action -->
    <Dialog
      id="vue-demo-dialog-header-notifications"
      title="Notifications"
      subtitle="3 unread messages"
      :open="openNotifications"
      :onOpenChange="(o: boolean) => (openNotifications = o)"
    >
      <template #headingLeading>
        <Stamp feedback="warning" emphasis="secondary" shape="circle" size="sm">
          <span :class="glyph14"><Bell /></span>
        </Stamp>
      </template>
      <template #headingTrailing>
        <Badge size="sm" feedback="warning">3</Badge>
      </template>
      <template #trailing>
        <Button size="sm" emphasis="ghost">Mark all read</Button>
      </template>
      You have new notifications about team activity, mentions, and system
      updates. Review them here or mark everything as read.
    </Dialog>

    <Button :onClick="() => (openNotifications = true)">Trailing Action</Button>

    <!-- Stamp + actions, no subtitle -->
    <Dialog
      id="vue-demo-dialog-header-filters"
      title="Filters"
      :open="openFilters"
      :onOpenChange="(o: boolean) => (openFilters = o)"
    >
      <template #headingLeading>
        <Stamp feedback="primary" emphasis="secondary" shape="square" size="sm">
          <span :class="glyph14"><Filter /></span>
        </Stamp>
      </template>
      <template #trailing>
        <div :class="stack({ direction: 'row', gap: '2xs' })">
          <Button size="sm" emphasis="ghost">Reset</Button>
          <Button size="sm" emphasis="secondary">Apply</Button>
        </div>
      </template>
      Choose the filters you want to apply to the current view. Changes take
      effect immediately once applied.
    </Dialog>

    <Button :onClick="() => (openFilters = true)">Actions, No Subtitle</Button>
  </div>
</template>

Custom header

For headers that aren’t a title/subtitle — a search field, a segmented control, a stepper — the header snippet (Astro: header slot) replaces the Banner with your own content while keeping the header row’s styling and the close button. It renders even when no title/subtitle is set, which makes it the foundation for command-palette-style dialogs.

AstroReactSvelteVue

PreviewCode

---
import Dialog from "../dialog.astro";
import Button from "@pindoba/astro-button";
import { InputRoot, InputField } from "@pindoba/astro-input";
import Affix from "@pindoba/astro-affix";
import Stamp from "@pindoba/astro-stamp";
import { Search } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";

const commands = [
  "Open file…",
  "Go to line",
  "Toggle terminal",
  "Format document",
  "Rename symbol",
  "Find in files",
];
---

<div class={stack({ gap: "md", direction: "row", flexWrap: "wrap" })}>
  {
    /* `header` slot replaces the Banner with a search input (command-palette preview) */
  }
  <Dialog
    id="astro-demo-dialog-header-input"
    showCloseButton={false}
    passThrough={{ header: { style: { p: "xs" } } }}
  >
    <InputRoot slot="header" fullWidth>
      <Affix decorative><Stamp emphasis="ghost"><Search /></Stamp></Affix>
      <InputField type="search" placeholder="Type a command…" />
    </InputRoot>

    <div class={stack({ gap: "3xs", p: "xs" })}>
      {
        commands.map((command) => (
          <Button
            emphasis="ghost"
            passThrough={{
              root: { style: { width: "100%", justifyContent: "flex-start" } },
            }}
          >
            {command}
          </Button>
        ))
      }
    </div>
  </Dialog>

  <Button id="astro-demo-dialog-header-input-trigger">Command Palette</Button>
</div>

<script>
  document
    .getElementById("astro-demo-dialog-header-input-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-demo-dialog-header-input");
    });
</script>

import React, { useMemo, useState, type JSX } from "react";
import { Dialog } from "../Dialog";
import { Button } from "@pindoba/react-button";
import { InputRoot, InputField } from "@pindoba/react-input";
import { Affix } from "@pindoba/react-affix";
import Stamp from "@pindoba/react-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { SearchIcon } from "./_icons";

const commands = [
  "Open file…",
  "Go to line",
  "Toggle terminal",
  "Format document",
  "Rename symbol",
  "Find in files",
];

export default function HeaderInput(): JSX.Element {
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");

  const results = useMemo(
    () => commands.filter((c) => c.toLowerCase().includes(query.toLowerCase())),
    [query],
  );

  return (
    <div className={stack({ gap: "md", direction: "row", flexWrap: "wrap" })}>
      {/* `header` replaces the Banner with a search input (command-palette preview) */}
      <Dialog
        id="demo-dialog-header-input"
        open={open}
        onOpenChange={setOpen}
        showCloseButton={false}
        passThrough={{ header: { style: { p: "xs" } } }}
        header={
          <InputRoot fullWidth>
            <Affix decorative>
              <Stamp emphasis="ghost">
                <SearchIcon size={16} />
              </Stamp>
            </Affix>
            <InputField
              type="search"
              placeholder="Type a command…"
              value={query}
              onChange={(e) => setQuery(e.currentTarget.value)}
            />
          </InputRoot>
        }
      >
        <div className={stack({ gap: "3xs", p: "xs" })}>
          {results.map((result) => (
            <Button
              key={result}
              emphasis="ghost"
              passThrough={{
                root: {
                  style: { width: "100%", justifyContent: "flex-start" },
                },
              }}
            >
              {result}
            </Button>
          ))}
          {results.length === 0 && <span>No commands match “{query}”.</span>}
        </div>
      </Dialog>

      <Button onClick={() => setOpen(true)}>Command Palette</Button>
    </div>
  );
}

<script lang="ts">
  import Dialog from "../dialog.svelte";
  import Button from "@pindoba/svelte-button";
  import { InputRoot, InputField } from "@pindoba/svelte-input";
  import Affix from "@pindoba/svelte-affix";
  import Stamp from "@pindoba/svelte-stamp";
  import LucideSearch from "@lucide/svelte/icons/search";
  import { stack } from "@pindoba/styled-system/patterns";

  let open = $state(false);
  let query = $state("");

  const commands = [
    "Open file…",
    "Go to line",
    "Toggle terminal",
    "Format document",
    "Rename symbol",
    "Find in files",
  ];

  const results = $derived(
    commands.filter((c) => c.toLowerCase().includes(query.toLowerCase())),
  );
</script>

<div class={stack({ gap: "md", direction: "row", flexWrap: "wrap" })}>
  <!-- `header` snippet replaces the Banner with a search input (command-palette preview) -->
  <Dialog
    id="demo-dialog-header-input"
    bind:open
    showCloseButton={false}
    passThrough={{ header: { style: { p: "xs" } } }}
  >
    {#snippet header()}
      <InputRoot fullWidth>
        <Affix decorative
          ><Stamp emphasis="ghost"><LucideSearch size={16} /></Stamp></Affix
        >
        <InputField
          type="search"
          placeholder="Type a command…"
          bind:value={query}
        />
      </InputRoot>
    {/snippet}

    <div class={stack({ gap: "3xs", p: "xs" })}>
      {#each results as result (result)}
        <Button
          emphasis="ghost"
          passThrough={{
            root: { style: { width: "100%", justifyContent: "flex-start" } },
          }}
        >
          {result}
        </Button>
      {/each}
      {#if results.length === 0}
        <span>No commands match “{query}”.</span>
      {/if}
    </div>
  </Dialog>

  <Button onclick={() => (open = true)}>Command Palette</Button>
</div>

<script setup lang="ts">
import { computed, ref } from "vue";
import { Dialog } from "@pindoba/vue-dialog";
import { Button } from "@pindoba/vue-button";
import { InputRoot, InputField } from "@pindoba/vue-input";
import { Affix } from "@pindoba/vue-affix";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
import { Search } from "./_icons";

const open = ref(false);
const query = ref("");

const commands = [
  "Open file…",
  "Go to line",
  "Toggle terminal",
  "Format document",
  "Rename symbol",
  "Find in files",
];

const results = computed(() =>
  commands.filter((c) => c.toLowerCase().includes(query.value.toLowerCase())),
);

const glyph16 = css({ "& svg": { width: "16px", height: "16px" } });
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'row', flexWrap: 'wrap' })">
    <!-- `header` slot replaces the Banner with a search input (command-palette preview) -->
    <Dialog
      id="vue-demo-dialog-header-input"
      :open="open"
      :onOpenChange="(o: boolean) => (open = o)"
      :showCloseButton="false"
      :passThrough="{ header: { style: { p: 'xs' } } }"
    >
      <template #header>
        <InputRoot fullWidth>
          <Affix decorative>
            <Stamp emphasis="ghost">
              <span :class="glyph16"><Search /></span>
            </Stamp>
          </Affix>
          <InputField
            type="search"
            placeholder="Type a command…"
            :value="query"
            @input="
              (e: Event) => (query = (e.target as HTMLInputElement).value)
            "
          />
        </InputRoot>
      </template>

      <div :class="stack({ gap: '3xs', p: 'xs' })">
        <Button
          v-for="result in results"
          :key="result"
          emphasis="ghost"
          :passThrough="{
            root: { style: { width: '100%', justifyContent: 'flex-start' } },
          }"
        >
          {{ result }}
        </Button>
        <span v-if="results.length === 0"
          >No commands match “{{ query }}”.</span
        >
      </div>
    </Dialog>

    <Button :onClick="() => (open = true)">Command Palette</Button>
  </div>
</template>

Drawer

The drawer prop positions the dialog along an edge of the screen. Drawers animate in from their respective side and default to removing the border radius on the attached edge.

AstroReactSvelteVue

PreviewCode

---
import Dialog from "../dialog.astro";
import Button from "@pindoba/astro-button";
import Badge from "@pindoba/astro-badge";
import Stamp from "@pindoba/astro-stamp";
import { PanelBottom, PanelLeft, PanelRight, PanelTop } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
  <Dialog id="astro-demo-drawer-right" title="Right Drawer" drawer="right">
    <Stamp
      slot="heading-leading"
      shape="square"
      size="sm"
      feedback="primary"
      emphasis="secondary"
    >
      <PanelRight />
    </Stamp>
    <Badge slot="heading-trailing" size="sm">right</Badge>
    This drawer slides in from the right edge of the screen.
  </Dialog>

  <Dialog id="astro-demo-drawer-left" title="Left Drawer" drawer="left">
    <Stamp
      slot="heading-leading"
      shape="square"
      size="sm"
      feedback="primary"
      emphasis="secondary"
    >
      <PanelLeft />
    </Stamp>
    <Badge slot="heading-trailing" size="sm">left</Badge>
    This drawer slides in from the left edge of the screen.
  </Dialog>

  <Dialog id="astro-demo-drawer-top" title="Top Drawer" drawer="top">
    <Stamp
      slot="heading-leading"
      shape="square"
      size="sm"
      feedback="primary"
      emphasis="secondary"
    >
      <PanelTop />
    </Stamp>
    <Badge slot="heading-trailing" size="sm">top</Badge>
    This drawer slides in from the top edge of the screen.
  </Dialog>

  <Dialog id="astro-demo-drawer-bottom" title="Bottom Drawer" drawer="bottom">
    <Stamp
      slot="heading-leading"
      shape="square"
      size="sm"
      feedback="primary"
      emphasis="secondary"
    >
      <PanelBottom />
    </Stamp>
    <Badge slot="heading-trailing" size="sm">bottom</Badge>
    This drawer slides in from the bottom edge of the screen.
  </Dialog>

  <Button id="astro-demo-drawer-right-trigger" emphasis="secondary"
    >Right</Button
  >
  <Button id="astro-demo-drawer-left-trigger" emphasis="secondary">Left</Button>
  <Button id="astro-demo-drawer-top-trigger" emphasis="secondary">Top</Button>
  <Button id="astro-demo-drawer-bottom-trigger" emphasis="secondary"
    >Bottom</Button
  >
</div>

<script>
  const triggers: [string, string][] = [
    ["astro-demo-drawer-right-trigger", "astro-demo-drawer-right"],
    ["astro-demo-drawer-left-trigger", "astro-demo-drawer-left"],
    ["astro-demo-drawer-top-trigger", "astro-demo-drawer-top"],
    ["astro-demo-drawer-bottom-trigger", "astro-demo-drawer-bottom"],
  ];

  triggers.forEach(([triggerId, dialogId]) => {
    document.getElementById(triggerId)?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open(dialogId);
    });
  });
</script>

import React, { useState, type JSX } from "react";
import { Dialog } from "../Dialog";
import { Button } from "@pindoba/react-button";
import { Badge } from "@pindoba/react-badge";
import { Stamp } from "@pindoba/react-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { PanelIcon } from "./_icons";

export default function Drawer(): JSX.Element {
  const [openRight, setOpenRight] = useState(false);
  const [openLeft, setOpenLeft] = useState(false);
  const [openTop, setOpenTop] = useState(false);
  const [openBottom, setOpenBottom] = useState(false);

  return (
    <div className={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
      <Dialog
        id="demo-drawer-right"
        title="Right Drawer"
        open={openRight}
        onOpenChange={setOpenRight}
        drawer="right"
        headingLeading={
          <Stamp
            shape="square"
            size="sm"
            feedback="primary"
            emphasis="secondary"
          >
            <PanelIcon side="right" size={14} />
          </Stamp>
        }
        headingTrailing={<Badge size="sm">right</Badge>}
      >
        This drawer slides in from the right edge of the screen.
      </Dialog>

      <Dialog
        id="demo-drawer-left"
        title="Left Drawer"
        open={openLeft}
        onOpenChange={setOpenLeft}
        drawer="left"
        headingLeading={
          <Stamp
            shape="square"
            size="sm"
            feedback="primary"
            emphasis="secondary"
          >
            <PanelIcon side="left" size={14} />
          </Stamp>
        }
        headingTrailing={<Badge size="sm">left</Badge>}
      >
        This drawer slides in from the left edge of the screen.
      </Dialog>

      <Dialog
        id="demo-drawer-top"
        title="Top Drawer"
        open={openTop}
        onOpenChange={setOpenTop}
        drawer="top"
        headingLeading={
          <Stamp
            shape="square"
            size="sm"
            feedback="primary"
            emphasis="secondary"
          >
            <PanelIcon side="top" size={14} />
          </Stamp>
        }
        headingTrailing={<Badge size="sm">top</Badge>}
      >
        This drawer slides in from the top edge of the screen.
      </Dialog>

      <Dialog
        id="demo-drawer-bottom"
        title="Bottom Drawer"
        open={openBottom}
        onOpenChange={setOpenBottom}
        drawer="bottom"
        headingLeading={
          <Stamp
            shape="square"
            size="sm"
            feedback="primary"
            emphasis="secondary"
          >
            <PanelIcon side="bottom" size={14} />
          </Stamp>
        }
        headingTrailing={<Badge size="sm">bottom</Badge>}
      >
        This drawer slides in from the bottom edge of the screen.
      </Dialog>

      <Button onClick={() => setOpenRight(true)} emphasis="secondary">
        Right
      </Button>
      <Button onClick={() => setOpenLeft(true)} emphasis="secondary">
        Left
      </Button>
      <Button onClick={() => setOpenTop(true)} emphasis="secondary">
        Top
      </Button>
      <Button onClick={() => setOpenBottom(true)} emphasis="secondary">
        Bottom
      </Button>
    </div>
  );
}

<script lang="ts">
  import Dialog from "../dialog.svelte";
  import Button from "@pindoba/svelte-button";
  import Badge from "@pindoba/svelte-badge";
  import Stamp from "@pindoba/svelte-stamp";
  import LucidePanelLeft from "@lucide/svelte/icons/panel-left";
  import LucidePanelRight from "@lucide/svelte/icons/panel-right";
  import LucidePanelTop from "@lucide/svelte/icons/panel-top";
  import LucidePanelBottom from "@lucide/svelte/icons/panel-bottom";
  import { stack } from "@pindoba/styled-system/patterns";

  let openRight = $state(false);
  let openLeft = $state(false);
  let openTop = $state(false);
  let openBottom = $state(false);
</script>

<div class={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
  <Dialog
    id="demo-drawer-right"
    title="Right Drawer"
    bind:open={openRight}
    drawer="right"
  >
    {#snippet headingLeading()}
      <Stamp shape="square" size="sm" feedback="primary" emphasis="secondary">
        <LucidePanelRight size={14} />
      </Stamp>
    {/snippet}
    {#snippet headingTrailing()}
      <Badge size="sm">right</Badge>
    {/snippet}
    This drawer slides in from the right edge of the screen.
  </Dialog>

  <Dialog
    id="demo-drawer-left"
    title="Left Drawer"
    bind:open={openLeft}
    drawer="left"
  >
    {#snippet headingLeading()}
      <Stamp shape="square" size="sm" feedback="primary" emphasis="secondary">
        <LucidePanelLeft size={14} />
      </Stamp>
    {/snippet}
    {#snippet headingTrailing()}
      <Badge size="sm">left</Badge>
    {/snippet}
    This drawer slides in from the left edge of the screen.
  </Dialog>

  <Dialog
    id="demo-drawer-top"
    title="Top Drawer"
    bind:open={openTop}
    drawer="top"
  >
    {#snippet headingLeading()}
      <Stamp shape="square" size="sm" feedback="primary" emphasis="secondary">
        <LucidePanelTop size={14} />
      </Stamp>
    {/snippet}
    {#snippet headingTrailing()}
      <Badge size="sm">top</Badge>
    {/snippet}
    This drawer slides in from the top edge of the screen.
  </Dialog>

  <Dialog
    id="demo-drawer-bottom"
    title="Bottom Drawer"
    bind:open={openBottom}
    drawer="bottom"
  >
    {#snippet headingLeading()}
      <Stamp shape="square" size="sm" feedback="primary" emphasis="secondary">
        <LucidePanelBottom size={14} />
      </Stamp>
    {/snippet}
    {#snippet headingTrailing()}
      <Badge size="sm">bottom</Badge>
    {/snippet}
    This drawer slides in from the bottom edge of the screen.
  </Dialog>

  <Button onclick={() => (openRight = true)} emphasis="secondary">Right</Button>
  <Button onclick={() => (openLeft = true)} emphasis="secondary">Left</Button>
  <Button onclick={() => (openTop = true)} emphasis="secondary">Top</Button>
  <Button onclick={() => (openBottom = true)} emphasis="secondary"
    >Bottom</Button
  >
</div>

<script setup lang="ts">
import { ref } from "vue";
import { Dialog } from "@pindoba/vue-dialog";
import { Button } from "@pindoba/vue-button";
import { Badge } from "@pindoba/vue-badge";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
import { PanelLeft, PanelRight, PanelTop, PanelBottom } from "./_icons";

const openRight = ref(false);
const openLeft = ref(false);
const openTop = ref(false);
const openBottom = ref(false);

const glyph14 = css({ "& svg": { width: "14px", height: "14px" } });
</script>

<template>
  <div :class="stack({ gap: 'sm', direction: 'row', flexWrap: 'wrap' })">
    <Dialog
      id="vue-demo-drawer-right"
      title="Right Drawer"
      :open="openRight"
      :onOpenChange="(o: boolean) => (openRight = o)"
      drawer="right"
    >
      <template #headingLeading>
        <Stamp shape="square" size="sm" feedback="primary" emphasis="secondary">
          <span :class="glyph14"><PanelRight /></span>
        </Stamp>
      </template>
      <template #headingTrailing>
        <Badge size="sm">right</Badge>
      </template>
      This drawer slides in from the right edge of the screen.
    </Dialog>

    <Dialog
      id="vue-demo-drawer-left"
      title="Left Drawer"
      :open="openLeft"
      :onOpenChange="(o: boolean) => (openLeft = o)"
      drawer="left"
    >
      <template #headingLeading>
        <Stamp shape="square" size="sm" feedback="primary" emphasis="secondary">
          <span :class="glyph14"><PanelLeft /></span>
        </Stamp>
      </template>
      <template #headingTrailing>
        <Badge size="sm">left</Badge>
      </template>
      This drawer slides in from the left edge of the screen.
    </Dialog>

    <Dialog
      id="vue-demo-drawer-top"
      title="Top Drawer"
      :open="openTop"
      :onOpenChange="(o: boolean) => (openTop = o)"
      drawer="top"
    >
      <template #headingLeading>
        <Stamp shape="square" size="sm" feedback="primary" emphasis="secondary">
          <span :class="glyph14"><PanelTop /></span>
        </Stamp>
      </template>
      <template #headingTrailing>
        <Badge size="sm">top</Badge>
      </template>
      This drawer slides in from the top edge of the screen.
    </Dialog>

    <Dialog
      id="vue-demo-drawer-bottom"
      title="Bottom Drawer"
      :open="openBottom"
      :onOpenChange="(o: boolean) => (openBottom = o)"
      drawer="bottom"
    >
      <template #headingLeading>
        <Stamp shape="square" size="sm" feedback="primary" emphasis="secondary">
          <span :class="glyph14"><PanelBottom /></span>
        </Stamp>
      </template>
      <template #headingTrailing>
        <Badge size="sm">bottom</Badge>
      </template>
      This drawer slides in from the bottom edge of the screen.
    </Dialog>

    <Button :onClick="() => (openRight = true)" emphasis="secondary">
      Right
    </Button>
    <Button :onClick="() => (openLeft = true)" emphasis="secondary">
      Left
    </Button>
    <Button :onClick="() => (openTop = true)" emphasis="secondary">Top</Button>
    <Button :onClick="() => (openBottom = true)" emphasis="secondary">
      Bottom
    </Button>
  </div>
</template>

Nested Drawers

Multiple dialogs can be stacked. Lower dialogs scale back and dim when a new one opens on top, creating a cascade effect. Each dialog is independently closable.

AstroReactSvelteVue

PreviewCode

Open multiple drawers to see the cascade effect. Each drawer slides inward and dims when another opens on top.

---
import Dialog from "../dialog.astro";
import Button from "@pindoba/astro-button";
import Badge from "@pindoba/astro-badge";
import Stamp from "@pindoba/astro-stamp";
import { CircleCheckBig, Settings, User } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
---

<div class={stack({ gap: "md", direction: "column", align: "start" })}>
  <p class={css({ color: "neutral.text.subtle", fontSize: "sm" })}>
    Open multiple drawers to see the cascade effect. Each drawer slides inward
    and dims when another opens on top.
  </p>

  <Dialog id="astro-demo-nested-drawer-1" title="Settings" drawer="right">
    <Stamp slot="heading-leading" shape="circle" size="sm" emphasis="secondary">
      <Settings />
    </Stamp>
    <Badge slot="heading-trailing" size="sm">1</Badge>
    <div class={stack({ gap: "md" })}>
      <p>
        This is the first level drawer. Click below to open another drawer on
        top.
      </p>
      <Button id="astro-demo-nested-drawer-2-trigger" emphasis="secondary">
        Open Second Drawer
      </Button>
      {
        Array.from({ length: 8 }, (_, i) => (
          <p class={css({ color: "neutral.text.subtle" })}>
            Item {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing
            elit.
          </p>
        ))
      }
    </div>
  </Dialog>

  <Dialog id="astro-demo-nested-drawer-2" title="Edit Profile" drawer="right">
    <Stamp
      slot="heading-leading"
      shape="circle"
      size="sm"
      feedback="primary"
      emphasis="secondary"
    >
      <User />
    </Stamp>
    <Badge slot="heading-trailing" size="sm" feedback="primary">2</Badge>
    <div class={stack({ gap: "md" })}>
      <p>
        This is the second level. Notice how the first drawer moved back and
        dimmed.
      </p>
      <div class={stack({ gap: "sm" })}>
        <Button id="astro-demo-nested-drawer-3-trigger" emphasis="secondary">
          Open Third Drawer
        </Button>
        <Button id="astro-demo-nested-drawer-2-close" emphasis="ghost">
          Close This Drawer
        </Button>
      </div>
      {
        Array.from({ length: 6 }, (_, i) => (
          <p class={css({ color: "neutral.text.subtle" })}>
            Profile field {i + 1}: Some value here.
          </p>
        ))
      }
    </div>
  </Dialog>

  <Dialog id="astro-demo-nested-drawer-3" title="Confirmation" drawer="right">
    <Stamp
      slot="heading-leading"
      shape="circle"
      size="sm"
      feedback="success"
      emphasis="secondary"
    >
      <CircleCheckBig />
    </Stamp>
    <Badge slot="heading-trailing" size="sm" feedback="success">3</Badge>
    <div class={stack({ gap: "md" })}>
      <p>This is the third level. All previous drawers are stacked behind.</p>
      <div class={stack({ gap: "sm" })}>
        <Button id="astro-demo-nested-drawer-3-confirm" emphasis="primary"
          >Confirm</Button
        >
        <Button id="astro-demo-nested-drawer-3-cancel" emphasis="ghost"
          >Cancel</Button
        >
      </div>
    </div>
  </Dialog>

  <Button id="astro-demo-nested-drawer-1-trigger">Open First Drawer</Button>
</div>

<script>
  const triggers: [string, string, "open" | "close"][] = [
    [
      "astro-demo-nested-drawer-1-trigger",
      "astro-demo-nested-drawer-1",
      "open",
    ],
    [
      "astro-demo-nested-drawer-2-trigger",
      "astro-demo-nested-drawer-2",
      "open",
    ],
    [
      "astro-demo-nested-drawer-3-trigger",
      "astro-demo-nested-drawer-3",
      "open",
    ],
    ["astro-demo-nested-drawer-2-close", "astro-demo-nested-drawer-2", "close"],
    [
      "astro-demo-nested-drawer-3-confirm",
      "astro-demo-nested-drawer-3",
      "close",
    ],
    [
      "astro-demo-nested-drawer-3-cancel",
      "astro-demo-nested-drawer-3",
      "close",
    ],
  ];

  triggers.forEach(([triggerId, dialogId, action]) => {
    document.getElementById(triggerId)?.addEventListener("click", () => {
      window.__PindobaDialogManager?.[action](dialogId);
    });
  });
</script>

Open multiple drawers to see the cascade effect. Each drawer slides inward and dims when another opens on top.

import React, { useState, type JSX } from "react";
import { Dialog } from "../Dialog";
import { Button } from "@pindoba/react-button";
import { Badge } from "@pindoba/react-badge";
import { Stamp } from "@pindoba/react-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
import { SettingsIcon, UserIcon, CheckCircleIcon } from "./_icons";

export default function Nested(): JSX.Element {
  const [showDrawer1, setShowDrawer1] = useState(false);
  const [showDrawer2, setShowDrawer2] = useState(false);
  const [showDrawer3, setShowDrawer3] = useState(false);

  return (
    <div className={stack({ gap: "md", direction: "column", align: "start" })}>
      <p className={css({ color: "neutral.text.subtle", fontSize: "sm" })}>
        Open multiple drawers to see the cascade effect. Each drawer slides
        inward and dims when another opens on top.
      </p>

      <Button onClick={() => setShowDrawer1(true)}>Open First Drawer</Button>

      <Dialog
        id="demo-nested-drawer-1"
        title="Settings"
        open={showDrawer1}
        onOpenChange={setShowDrawer1}
        drawer="right"
        headingLeading={
          <Stamp shape="circle" size="sm" emphasis="secondary">
            <SettingsIcon size={14} />
          </Stamp>
        }
        headingTrailing={<Badge size="sm">1</Badge>}
      >
        <div className={stack({ gap: "md" })}>
          <p>
            This is the first level drawer. Click below to open another drawer
            on top.
          </p>
          <Button onClick={() => setShowDrawer2(true)} emphasis="secondary">
            Open Second Drawer
          </Button>
          {Array.from({ length: 8 }, (_, i) => (
            <p key={i} className={css({ color: "neutral.text.subtle" })}>
              Item {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing
              elit.
            </p>
          ))}
        </div>
      </Dialog>

      <Dialog
        id="demo-nested-drawer-2"
        title="Edit Profile"
        open={showDrawer2}
        onOpenChange={setShowDrawer2}
        drawer="right"
        headingLeading={
          <Stamp
            shape="circle"
            size="sm"
            feedback="primary"
            emphasis="secondary"
          >
            <UserIcon size={14} />
          </Stamp>
        }
        headingTrailing={
          <Badge size="sm" feedback="primary">
            2
          </Badge>
        }
      >
        <div className={stack({ gap: "md" })}>
          <p>
            This is the second level. Notice how the first drawer moved back and
            dimmed.
          </p>
          <div className={stack({ gap: "sm" })}>
            <Button onClick={() => setShowDrawer3(true)} emphasis="secondary">
              Open Third Drawer
            </Button>
            <Button onClick={() => setShowDrawer2(false)} emphasis="ghost">
              Close This Drawer
            </Button>
          </div>
          {Array.from({ length: 6 }, (_, i) => (
            <p key={i} className={css({ color: "neutral.text.subtle" })}>
              Profile field {i + 1}: Some value here.
            </p>
          ))}
        </div>
      </Dialog>

      <Dialog
        id="demo-nested-drawer-3"
        title="Confirmation"
        open={showDrawer3}
        onOpenChange={setShowDrawer3}
        drawer="right"
        headingLeading={
          <Stamp
            shape="circle"
            size="sm"
            feedback="success"
            emphasis="secondary"
          >
            <CheckCircleIcon size={14} />
          </Stamp>
        }
        headingTrailing={
          <Badge size="sm" feedback="success">
            3
          </Badge>
        }
      >
        <div className={stack({ gap: "md" })}>
          <p>
            This is the third level. All previous drawers are stacked behind.
          </p>
          <div className={stack({ gap: "sm" })}>
            <Button onClick={() => setShowDrawer3(false)} emphasis="primary">
              Confirm
            </Button>
            <Button onClick={() => setShowDrawer3(false)} emphasis="ghost">
              Cancel
            </Button>
          </div>
        </div>
      </Dialog>
    </div>
  );
}

Open multiple drawers to see the cascade effect. Each drawer slides inward and dims when another opens on top.

<script lang="ts">
  import Dialog from "../dialog.svelte";
  import Button from "@pindoba/svelte-button";
  import Badge from "@pindoba/svelte-badge";
  import Stamp from "@pindoba/svelte-stamp";
  import LucideSettings from "@lucide/svelte/icons/settings";
  import LucideUser from "@lucide/svelte/icons/user";
  import LucideCheckCircle2 from "@lucide/svelte/icons/check-circle-2";
  import { stack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  let showDrawer1 = $state(false);
  let showDrawer2 = $state(false);
  let showDrawer3 = $state(false);
</script>

<div class={stack({ gap: "md", direction: "column", align: "start" })}>
  <p class={css({ color: "neutral.text.subtle", fontSize: "sm" })}>
    Open multiple drawers to see the cascade effect. Each drawer slides inward
    and dims when another opens on top.
  </p>

  <Button onclick={() => (showDrawer1 = true)}>Open First Drawer</Button>

  <Dialog
    id="demo-nested-drawer-1"
    title="Settings"
    bind:open={showDrawer1}
    drawer="right"
  >
    {#snippet headingLeading()}
      <Stamp shape="circle" size="sm" emphasis="secondary">
        <LucideSettings size={14} />
      </Stamp>
    {/snippet}
    {#snippet headingTrailing()}
      <Badge size="sm">1</Badge>
    {/snippet}
    <div class={stack({ gap: "md" })}>
      <p>
        This is the first level drawer. Click below to open another drawer on
        top.
      </p>
      <Button onclick={() => (showDrawer2 = true)} emphasis="secondary">
        Open Second Drawer
      </Button>
      {#each Array(8) as _, i (i)}
        <p class={css({ color: "neutral.text.subtle" })}>
          Item {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      {/each}
    </div>
  </Dialog>

  <Dialog
    id="demo-nested-drawer-2"
    title="Edit Profile"
    bind:open={showDrawer2}
    drawer="right"
  >
    {#snippet headingLeading()}
      <Stamp shape="circle" size="sm" feedback="primary" emphasis="secondary">
        <LucideUser size={14} />
      </Stamp>
    {/snippet}
    {#snippet headingTrailing()}
      <Badge size="sm" feedback="primary">2</Badge>
    {/snippet}
    <div class={stack({ gap: "md" })}>
      <p>
        This is the second level. Notice how the first drawer moved back and
        dimmed.
      </p>
      <div class={stack({ gap: "sm" })}>
        <Button onclick={() => (showDrawer3 = true)} emphasis="secondary">
          Open Third Drawer
        </Button>
        <Button onclick={() => (showDrawer2 = false)} emphasis="ghost">
          Close This Drawer
        </Button>
      </div>
      {#each Array(6) as _, i (i)}
        <p class={css({ color: "neutral.text.subtle" })}>
          Profile field {i + 1}: Some value here.
        </p>
      {/each}
    </div>
  </Dialog>

  <Dialog
    id="demo-nested-drawer-3"
    title="Confirmation"
    bind:open={showDrawer3}
    drawer="right"
  >
    {#snippet headingLeading()}
      <Stamp shape="circle" size="sm" feedback="success" emphasis="secondary">
        <LucideCheckCircle2 size={14} />
      </Stamp>
    {/snippet}
    {#snippet headingTrailing()}
      <Badge size="sm" feedback="success">3</Badge>
    {/snippet}
    <div class={stack({ gap: "md" })}>
      <p>This is the third level. All previous drawers are stacked behind.</p>
      <div class={stack({ gap: "sm" })}>
        <Button onclick={() => (showDrawer3 = false)} emphasis="primary"
          >Confirm</Button
        >
        <Button onclick={() => (showDrawer3 = false)} emphasis="ghost"
          >Cancel</Button
        >
      </div>
    </div>
  </Dialog>
</div>

Open multiple drawers to see the cascade effect. Each drawer slides inward and dims when another opens on top.

<script setup lang="ts">
import { ref } from "vue";
import { Dialog } from "@pindoba/vue-dialog";
import { Button } from "@pindoba/vue-button";
import { Badge } from "@pindoba/vue-badge";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
import { Settings, User, CheckCircle2 } from "./_icons";

const showDrawer1 = ref(false);
const showDrawer2 = ref(false);
const showDrawer3 = ref(false);

const glyph14 = css({ "& svg": { width: "14px", height: "14px" } });
const subtle = css({ color: "neutral.text.subtle" });
const subtleSm = css({ color: "neutral.text.subtle", fontSize: "sm" });

const range = (n: number) => Array.from({ length: n }, (_, i) => i);
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', align: 'start' })">
    <p :class="subtleSm">
      Open multiple drawers to see the cascade effect. Each drawer slides inward
      and dims when another opens on top.
    </p>

    <Button :onClick="() => (showDrawer1 = true)">Open First Drawer</Button>

    <Dialog
      id="vue-demo-nested-drawer-1"
      title="Settings"
      :open="showDrawer1"
      :onOpenChange="(o: boolean) => (showDrawer1 = o)"
      drawer="right"
    >
      <template #headingLeading>
        <Stamp shape="circle" size="sm" emphasis="secondary">
          <span :class="glyph14"><Settings /></span>
        </Stamp>
      </template>
      <template #headingTrailing>
        <Badge size="sm">1</Badge>
      </template>
      <div :class="stack({ gap: 'md' })">
        <p>
          This is the first level drawer. Click below to open another drawer on
          top.
        </p>
        <Button :onClick="() => (showDrawer2 = true)" emphasis="secondary">
          Open Second Drawer
        </Button>
        <p v-for="i in range(8)" :key="i" :class="subtle">
          Item {{ i + 1 }}: Lorem ipsum dolor sit amet, consectetur adipiscing
          elit.
        </p>
      </div>
    </Dialog>

    <Dialog
      id="vue-demo-nested-drawer-2"
      title="Edit Profile"
      :open="showDrawer2"
      :onOpenChange="(o: boolean) => (showDrawer2 = o)"
      drawer="right"
    >
      <template #headingLeading>
        <Stamp shape="circle" size="sm" feedback="primary" emphasis="secondary">
          <span :class="glyph14"><User /></span>
        </Stamp>
      </template>
      <template #headingTrailing>
        <Badge size="sm" feedback="primary">2</Badge>
      </template>
      <div :class="stack({ gap: 'md' })">
        <p>
          This is the second level. Notice how the first drawer moved back and
          dimmed.
        </p>
        <div :class="stack({ gap: 'sm' })">
          <Button :onClick="() => (showDrawer3 = true)" emphasis="secondary">
            Open Third Drawer
          </Button>
          <Button :onClick="() => (showDrawer2 = false)" emphasis="ghost">
            Close This Drawer
          </Button>
        </div>
        <p v-for="i in range(6)" :key="i" :class="subtle">
          Profile field {{ i + 1 }}: Some value here.
        </p>
      </div>
    </Dialog>

    <Dialog
      id="vue-demo-nested-drawer-3"
      title="Confirmation"
      :open="showDrawer3"
      :onOpenChange="(o: boolean) => (showDrawer3 = o)"
      drawer="right"
    >
      <template #headingLeading>
        <Stamp shape="circle" size="sm" feedback="success" emphasis="secondary">
          <span :class="glyph14"><CheckCircle2 /></span>
        </Stamp>
      </template>
      <template #headingTrailing>
        <Badge size="sm" feedback="success">3</Badge>
      </template>
      <div :class="stack({ gap: 'md' })">
        <p>This is the third level. All previous drawers are stacked behind.</p>
        <div :class="stack({ gap: 'sm' })">
          <Button :onClick="() => (showDrawer3 = false)" emphasis="primary">
            Confirm
          </Button>
          <Button :onClick="() => (showDrawer3 = false)" emphasis="ghost">
            Cancel
          </Button>
        </div>
      </div>
    </Dialog>
  </div>
</template>

Custom Styling

The passThrough prop provides escape hatches for advanced customization: style applies Panda CSS SystemStyleObject to any slot, and props forwards arbitrary HTML attributes.

AstroReactSvelteVue

PreviewCode

---
import Dialog from "../dialog.astro";
import Button from "@pindoba/astro-button";
import Stamp from "@pindoba/astro-stamp";
import { Sparkles } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column", align: "start" })}>
  <Dialog
    id="astro-demo-dialog-custom"
    title="Custom Styled Dialog"
    passThrough={{
      wrapper: { style: { maxWidth: "360px" } },
      header: {
        style: {
          borderBottom: "1px solid",
          borderColor: "primary.border",
        },
      },
      content: { style: { gap: "md" } },
    }}
    bannerPassThrough={{
      heading: { style: { fontWeight: "bold", fontSize: "lg" } },
    }}
  >
    <Stamp
      slot="heading-leading"
      shape="square"
      size="sm"
      translucent
      border="bold"
    >
      <Sparkles />
    </Stamp>
    This dialog uses <code>passThrough</code> for dialog-level slots and
    <code>bannerPassThrough</code> to reach Banner internals: a narrower max-width,
    a colored header border, and a bolder heading.
  </Dialog>

  <Button id="astro-demo-dialog-custom-trigger">Open Custom Dialog</Button>
</div>

<script>
  document
    .getElementById("astro-demo-dialog-custom-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-demo-dialog-custom");
    });
</script>

import React, { useState, type JSX } from "react";
import { Dialog } from "../Dialog";
import { Button } from "@pindoba/react-button";
import { Stamp } from "@pindoba/react-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { SparklesIcon } from "./_icons";

export default function Custom(): JSX.Element {
  const [open, setOpen] = useState(false);
  return (
    <div className={stack({ gap: "md", direction: "column", align: "start" })}>
      <Dialog
        id="demo-dialog-custom"
        title="Custom Styled Dialog"
        open={open}
        onOpenChange={setOpen}
        passThrough={{
          wrapper: { style: { maxWidth: "360px" } },
          header: {
            style: {
              borderBottom: "1px solid",
              borderColor: "primary.border",
            },
          },
          content: { style: { gap: "md" } },
        }}
        bannerPassThrough={{
          heading: { style: { fontWeight: "bold", fontSize: "lg" } },
        }}
        headingLeading={
          <Stamp shape="square" size="sm" translucent border="bold">
            <SparklesIcon size={14} />
          </Stamp>
        }
      >
        This dialog uses <code>passThrough</code> for dialog-level slots and{" "}
        <code>bannerPassThrough</code> to reach Banner internals: a narrower
        max-width, a colored header border, and a bolder heading.
      </Dialog>

      <Button onClick={() => setOpen(true)}>Open Custom Dialog</Button>
    </div>
  );
}

<script lang="ts">
  import Dialog from "../dialog.svelte";
  import Button from "@pindoba/svelte-button";
  import Stamp from "@pindoba/svelte-stamp";
  import LucideSparkles from "@lucide/svelte/icons/sparkles";
  import { stack } from "@pindoba/styled-system/patterns";

  let open = $state(false);
</script>

<div class={stack({ gap: "md", direction: "column", align: "start" })}>
  <Dialog
    id="demo-dialog-custom"
    title="Custom Styled Dialog"
    bind:open
    passThrough={{
      wrapper: { style: { maxWidth: "360px" } },
      header: {
        style: {
          borderBottom: "1px solid",
          borderColor: "primary.border",
        },
      },
      content: { style: { gap: "md" } },
    }}
    bannerPassThrough={{
      heading: { style: { fontWeight: "bold", fontSize: "lg" } },
    }}
  >
    {#snippet headingLeading()}
      <Stamp shape="square" size="sm" translucent border="bold">
        <LucideSparkles size={14} />
      </Stamp>
    {/snippet}
    This dialog uses <code>passThrough</code> for dialog-level slots and
    <code>bannerPassThrough</code> to reach Banner internals: a narrower max-width,
    a colored header border, and a bolder heading.
  </Dialog>

  <Button onclick={() => (open = true)}>Open Custom Dialog</Button>
</div>

<script setup lang="ts">
import { ref } from "vue";
import { Dialog } from "@pindoba/vue-dialog";
import { Button } from "@pindoba/vue-button";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
import { Sparkles } from "./_icons";

const open = ref(false);
const glyph14 = css({ "& svg": { width: "14px", height: "14px" } });
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', align: 'start' })">
    <Dialog
      id="vue-demo-dialog-custom"
      title="Custom Styled Dialog"
      :open="open"
      :onOpenChange="(o: boolean) => (open = o)"
      :passThrough="{
        wrapper: { style: { maxWidth: '360px' } },
        header: {
          style: {
            borderBottom: '1px solid',
            borderColor: 'primary.border',
          },
        },
        content: { style: { gap: 'md' } },
      }"
      :bannerPassThrough="{
        heading: { style: { fontWeight: 'bold', fontSize: 'lg' } },
      }"
    >
      <template #headingLeading>
        <Stamp shape="square" size="sm" translucent border="bold">
          <span :class="glyph14"><Sparkles /></span>
        </Stamp>
      </template>
      This dialog uses <code>passThrough</code> for dialog-level slots and
      <code>bannerPassThrough</code> to reach Banner internals: a narrower
      max-width, a colored header border, and a bolder heading.
    </Dialog>

    <Button :onClick="() => (open = true)">Open Custom Dialog</Button>
  </div>
</template>

#Default

#Header

#Custom header

#Drawer

#Nested Drawers

#Custom Styling

Default

Header

Custom header

Drawer

Nested Drawers

Custom Styling