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.jsonComposition
Sheet
├── SheetTrigger
└── SheetContent
├── SheetHeader
│ ├── SheetTitle
│ └── SheetDescription
└── SheetFooterAccessibility
이 컴포넌트는 WAI-ARIA dialog 패턴을 따릅니다.
Keyboard interactions
| Key | Description |
|---|---|
EnterSpace | 트리거에서 시트 열기. |
Tab | 시트 내부에서만 순환 (focus trap). |
Esc | 시트 닫기 + 트리거로 포커스 복귀. |
Notes
- •SheetTitle 필수.