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