Vibe Code
RegistryNested Dialog

Nested Dialog

Dialogs within dialogs. Because one layer of complexity wasn't enough.

Built with Motion animations so smooth you'll forget you're debugging nested state management.

npx shadcn@latest add @vcode/nested-dialog

Live Demo

Click the buttons below to see the nested dialogs in action. Try them. Break them. We won't judge.

Basic Nested

Parent dialog scales down when child appears.

Drag to Dismiss

Swipe down on mobile. Or desktop. Whatever.

Position Variants

Try all 5 animation directions.

Features

Nested State

Context-based state management. Parent dialog scales down when child appears. It's like React Context but you can actually see it working.

Drag to Dismiss

Swipe down to close. Mobile UX that doesn't make you cry. Uses Motion's elastic physics because we're fancy like that.

Position Variants

Bottom, top, left, right, or default. Each with custom animations. Because entrance matters, even for dialogs.

Installation

The Easy Way

Let the CLI do the work. It'll handle dependencies and everything.

npx shadcn@latest add @vcode/nested-dialog

The Hard Way

For those who enjoy suffering. First configure the @vcode registry in your components.json:

{
  "registries": {
    "@vcode": "https://ui.vcode.sh/r/{name}.json"
  }
}

Then install dependencies:

bun add @radix-ui/react-dialog motion lucide-react

Then install the component:

npx shadcn@latest add @vcode/nested-dialog

Or view the raw component code at the registry. Good luck.

Usage

Basic Nested Dialog

The simplest case. One dialog opens another. Groundbreaking stuff.

import {
  Dialog,
  DialogContent,
  DialogTrigger,
  InnerDialog,
  InnerDialogContent,
  InnerDialogTrigger,
} from "@/components/ui/nested-dialog";

export function Example() {
  return (
    <Dialog>
      <DialogTrigger>Open Dialog</DialogTrigger>
      <DialogContent>
        <InnerDialog>
          <InnerDialogTrigger>Open Nested</InnerDialogTrigger>
          <InnerDialogContent>
            Nested content here
          </InnerDialogContent>
        </InnerDialog>
      </DialogContent>
    </Dialog>
  );
}

Draggable Dialog

Add draggable prop. Watch users drag things for no reason.

<InnerDialogContent draggable position="bottom">
  Drag me down to dismiss
</InnerDialogContent>

Position Variants

Animate from different directions: default, bottom, top, left, right

<InnerDialogContent position="bottom">
  Slides up from bottom
</InnerDialogContent>

<InnerDialogContent position="left">
  Slides in from left
</InnerDialogContent>

API Reference

InnerDialogContent Props

PropTypeDefaultDescription
position"default" | "bottom" | "top" | "left" | "right""default"Animation direction
draggablebooleanfalseEnable drag-to-dismiss

Components

Dialog

Root container

DialogTrigger

Opens main dialog

DialogContent

Main dialog container

InnerDialog

Nested dialog root

InnerDialogTrigger

Opens nested dialog

InnerDialogContent

Nested dialog container

Ready to nest some dialogs?

Probably a terrible idea, but you're here anyway.

Back to RegistryView Source