Binhlaig UI Component

Dialog

A modal window for focused tasks, forms and important content.

Installation

Initialize Binhlaig UI and install Dialog with your preferred installer.

Initialize first

npx binhlaig-ui@latest init

Terminal

npx binhlaig-ui@latest add dialog --installer native

Import

Import Dialog primitives from your UI directory.

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

Usage

Open a modal dialog from a composed Button trigger.

Sizes

Customize the dialog width with className.

Scrollable Content

Use a constrained body area for long content.

Controlled State

Manage the dialog open state from React.

Update or Overwrite

Replace an older Dialog source with the latest registry version.

npx binhlaig-ui@latest add dialog --installer native --overwrite

API Reference

Main components available in Binhlaig UI Dialog.

Component	Purpose
`Dialog`	Controls open state and modal behavior.
`DialogTrigger`	Opens the dialog.
`DialogContent`	Renders the modal content.
`DialogHeader`	Groups title and description.
`DialogTitle`	Accessible dialog title.
`DialogDescription`	Accessible supporting text.
`DialogBody`	Contains primary dialog content.
`DialogFooter`	Aligns dialog actions.
`DialogClose`	Closes the dialog.

Previous component

Drawer

All components