Thành phần

Dialog

Dialog on Base UI: paper popup, 1px ink rule and heavy top rule, 85% paper backdrop, focus trapped.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Install

bash

npx shadcn add @eloquent/dialog

Usage

tsx

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

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>Edit byline</DialogTrigger>
  <DialogContent closeLabel="Close">
    <DialogHeader>
      <DialogTitle>Edit byline</DialogTitle>
      <DialogDescription>Change how your name appears above your stories.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose render={<Button variant="outline" />}>Cancel</DialogClose>
      <DialogClose render={<Button />}>Save changes</DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

The corner ✕ renders only when you pass closeLabel, so its name is always in the reader's language.

States

No corner close

Long content scrolls

State	Treatment
Open	Paper popup, 1px ink rule, 3px top rule; backdrop paper at 85%, no blur
Focus	2px ink outline, 2px offset
Close pressed	`tint-1` fill on the 44px ✕; no hover effect
Long content	The popup scrolls inside the viewport

Keyboard

Key	Action
Tab / Shift+Tab	From the page, reach the trigger. While open, move between the dialog's controls; focus wraps and never leaves the dialog
Enter / Space	Open from the trigger; activate a control
Esc	Close; focus returns to the trigger

Vietnamese

Ink adaptation

Upstream shadcn's shadow, radius, dark overlay and zoom are removed. The popup is paper with a 1px ink rule and a 3px top rule; the backdrop is paper at 85% with no blur; the title is Playfair 900 and the body Source Serif; the footer opens with a hairline. Built on Base UI Dialog.