Dialog - shadcn/ui

Visit shadcn/ui

Overview

• Source: shadcn/ui
• Documentation, Components, Blocks, Charts, Themes, Examples, Colors available.
• Social Links: GitHub, Twitter

Getting Started

• Introduction
• Installation Guide
• components.json
• Theming
• Dark Mode
• CLI
• Typography
• Open in v0
• Figma
• Changelog

Installation

• Installation guides for various platforms:
  • Next.js
  • Vite
  • Remix
  • Astro
  • Laravel
  • Gatsby
  • Manual Installation

Components

• Various components available, including:
  • SidebarNew
  • Accordion
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Calendar
  • Card
  • Additional components include Carousel, Chart, Checkbox, Collapsible, etc.

Dialog Component

• A window that overlays content, rendering it inert beneath.
• Documentation
• API Reference

Installation

• Use CLI or Manual installation: npx shadcn@latest add dialog

Usage

• Import components from @/components/ui/dialog:

  import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"

• Example usage:

  <Dialog> <DialogTrigger>Open</DialogTrigger> <DialogContent> <DialogHeader> <DialogTitle>Are you absolutely sure?</DialogTitle> <DialogDescription> This action cannot be undone. This will permanently delete your account and remove your data from our servers. </DialogDescription> </DialogHeader> </DialogContent> </Dialog>

Examples

• Custom close button example available.

Notes

• To use Dialog within a Context Menu or Dropdown Menu, wrap the menu in Dialog.
• Example provided for a contextual menu within a dialog.

Additional Information

• Deployment on Vercel supported.
• Trusted by companies like OpenAI, Sonos, Chick-fil-A.
• Developed by shadcn. Source code on GitHub.

Key Links

• Deploy to Vercel