Component

Dialog

General-purpose modal for forms and rich content (not the same as Alert Dialog).

Preview

Examples

Default

Scroll

Long body content with a scrollable region.

AI Prompt

Ready to copy and paste into any AI model.

10 lines

prompt.txt

Build a shadcn/ui Dialog for the **Clinic Admin** design system.

**Brand tokens:** Same overlay/content treatment as other modals (background, ring, rounded-xl). Font: Nunito Sans.

**Design preview to replicate exactly:**
- Default: Trigger "Open dialog"; DialogContent with DialogHeader (title "Edit details", description contrasting Alert Dialog); body paragraph; DialogFooter with DialogClose "Cancel" (outline) + Button "Save"
- Scroll: Trigger "Open scrollable dialog"; fixed header + scrollable body (max-height) + same footer
- Use Radix Dialog (not AlertDialog) for general content; reserve Alert Dialog for confirmations.

Return React components with TypeScript, cn() + Tailwind CSS.

Copy once, paste anywhere, keep consistent output.