Thành phần

Popover

Popover on Base UI: ink on paper, 1px ink rule, no shadow, radius or arrow.

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/popover

Usage

tsx

import { Button } from "@/components/ui/button";
import {
  Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger,
} from "@/components/ui/popover";

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>Image size</PopoverTrigger>
  <PopoverContent align="start">
    <PopoverHeader>
      <PopoverTitle>Dimensions</PopoverTitle>
      <PopoverDescription>Set the size of the lead image.</PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>

Use render to make another component the trigger (Base UI's form of upstream's asChild).

States

Side: right

With close

Disabled trigger

State	Treatment
Open	Paper popup, 1px ink rule, opacity fade (none under reduced motion)
Focus	2px ink outline, 2px offset
Disabled trigger	The trigger's own disabled treatment; it does not open

Keyboard

Key	Action
Tab / Shift+Tab	Move focus to the trigger; inside the open popup, move between its controls
Enter / Space	Open or close the popover from the trigger
Esc	Close; focus returns to the trigger

Vietnamese

Ink adaptation

Upstream shadcn's shadow, radius and arrow are removed. The popup is ink on paper with a 1px ink rule and no other decoration; the title is Playfair 900 and the description Source Serif. Fades use opacity only. Built on Base UI Popover.