Installation
Install the dependencies:
npm install @base-ui/reactCopy the source into components/ui/sheet.tsx. Registry items that depend on it install it automatically.
Usage
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
export function Example() {
return (
<Sheet>
<SheetTrigger render={<Button variant="outline">Open threads</Button>} />
<SheetContent side="right">
<SheetHeader>
<SheetTitle>Threads</SheetTitle>
<SheetDescription>Recent conversations.</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>
);
}Examples
Sides
The mobile thread list in the assistant-ui examples is a left sheet.
API Reference
The parts wrap Base UI's Dialog primitives and accept their props.
SheetContent
SheetContentPropsside: "top" | "right" | "bottom" | "left"= "right"The edge the panel enters from.
showCloseButton: boolean= trueRenders the corner close control.