Components

Sheet

Sheet on Base UI Dialog: full-height paper panel from any side, 1px inner ink rule, focus trapped.

Install

bash

npx shadcn add @eloquent/sheet

Usage

tsx

import { Button } from "@/components/ui/button";
import {
  Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger,
} from "@/components/ui/sheet";

<Sheet>
  <SheetTrigger render={<Button variant="outline" />}>Filters</SheetTrigger>
  <SheetContent side="right" closeLabel="Close">
    <SheetHeader>
      <SheetTitle>Filters</SheetTitle>
      <SheetDescription>Narrow the story list by desk and author.</SheetDescription>
    </SheetHeader>
    <SheetFooter>
      <SheetClose render={<Button />}>Apply filters</SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

States

State	Treatment
Open	Paper panel with a 1px ink rule on the inner edge; slides in with transform, none under reduced motion; backdrop paper at 85%
Focus	2px ink outline, 2px offset
Close pressed	`tint-1` fill on the 44px ✕; no hover effect

Keyboard

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

Vietnamese

Ink adaptation

Upstream shadcn's shadow, dark overlay and muted description are removed. The panel is paper with a 1px ink rule on its inner edge; the header opens with a heavy rule and the footer with a hairline. Motion is a transform slide only. Built on Base UI Dialog, as upstream builds Sheet on Dialog.