Sheet

Stablev1.0.0

화면 가장자리에서 슬라이드되는 패널 (모달의 가로 버전).

Loading preview…
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

<Sheet>
  <SheetTrigger render={<Button variant="outline" />}>
    Open sheet
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>...</SheetDescription>
    </SheetHeader>
    ...
    <SheetFooter>
      <Button type="submit">Save changes</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

Installation

pnpm dlx shadcn@latest add https://groudit.com/r/sheet.json

Composition

Sheet
├── SheetTrigger
└── SheetContent
    ├── SheetHeader
    │   ├── SheetTitle
    │   └── SheetDescription
    └── SheetFooter

Accessibility

이 컴포넌트는 WAI-ARIA dialog 패턴을 따릅니다.

Keyboard interactions

KeyDescription
EnterSpace
트리거에서 시트 열기.
Tab
시트 내부에서만 순환 (focus trap).
Esc
시트 닫기 + 트리거로 포커스 복귀.

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

Notes

  • SheetTitle 필수.