Design System Builder

Dialog

Dialog is a compound component that provides dialog functionality.

Active

Examples

size

Different size options for the Dialog component.

sm

md

lg

xl

Installation

npm install @your-design-system/dialog
import { Dialog } from "@/components/ui/dialog"

export function DialogDemo() {
  return (
    <Dialog size="md">
      {/* Content */}
    </Dialog>
  )
}

API Reference

PropTypeDefaultDescription
openboolean-

The open prop for the component.

titlestring-

The title prop for the component.

descriptionstring-

The description prop for the component.

Styling

The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.

Base Classes

fixedleft-[50%]top-[50%]z-50gridw-fulltranslate-x-[-50%]translate-y-[-50%]gap-4borderbg-backgroundp-6shadow-lgduration-200sm:rounded-lg

size Variants

sm

max-w-sm

md

max-w-lg

lg

max-w-2xl

xl

max-w-4xl

Design System Compliance

This component is validated against atomic design principles and foundation token usage.