Components
Sheet
Panel that slides in from an edge of the screen.
The Sheet primitive wraps Radix Dialog as an edge-anchored panel — it slides
in from the top, right, bottom, or left (side on SheetContent, default
"right") with a backdrop, focus trap, and Esc/overlay dismissal. It backs
the mobile nav drawer in the sidebar shell.
Preview
import { Button } from '@web/components/ui/button';import { Input } from '@web/components/ui/input';import { Label } from '@web/components/ui/label';import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger,} from '@web/components/ui/sheet';export default function SheetDemo() { return ( <Sheet> <SheetTrigger asChild> <Button variant="outline">Edit profile</Button> </SheetTrigger> <SheetContent> <SheetHeader> <SheetTitle>Edit profile</SheetTitle> <SheetDescription> Make changes to your profile here. Click save when you're done. </SheetDescription> </SheetHeader> <div className="grid gap-4 px-4"> <div className="grid gap-2"> <Label htmlFor="sheet-demo-name">Name</Label> <Input id="sheet-demo-name" defaultValue="Ada Lovelace" /> </div> <div className="grid gap-2"> <Label htmlFor="sheet-demo-username">Username</Label> <Input id="sheet-demo-username" defaultValue="@ada" /> </div> </div> <SheetFooter> <SheetClose asChild> <Button>Save changes</Button> </SheetClose> </SheetFooter> </SheetContent> </Sheet> );}Import
import {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";Props
SheetContent accepts every Radix Dialog.Content prop plus side
("top" | "right" | "bottom" | "left") to choose the edge it slides from. The
remaining parts (SheetHeader, SheetFooter, SheetTitle,
SheetDescription) are styled div/heading wrappers that take className and
native props.