Search
Copy Code
Previous: Dialog
Next: Drawer
Close Terminal
Light Mode
sheet-demo.tsx
sheet.tsx
Collapse
Reset
Copy Code
Download
Run
1
"use client"
2
3
import {
4
Sheet,
5
SheetContent,
6
SheetDescription,
7
SheetHeader,
8
SheetTitle,
9
SheetTrigger,
10
} from "@/components/ui/sheet"
11
12
export default function SheetDemo() {
13
return (
14
<div className="w-full min-h-[400px] flex items-center justify-center p-8">
15
<Sheet>
16
<SheetTrigger className="inline-flex h-8 items-center justify-center rounded-full border border-black/10 bg-transparent px-4 text-xs font-medium transition-colors hover:bg-black/5 dark:border-white/10 dark:text-zinc-50 dark:hover:bg-white/5">
17
Open sheet
18
</SheetTrigger>
19
<SheetContent>
20
<SheetHeader>
21
<SheetTitle>Sheet</SheetTitle>
22
<SheetDescription>
23
A side panel for secondary content.
24
</SheetDescription>
25
</SheetHeader>
26
</SheetContent>
27
</Sheet>
28
</div>
29
)
30
}