Components
Sheet
A panel that slides in from a screen edge.
Sheet is built on the Base UI Dialog primitive. It renders a panel that slides in from a screen edge, useful for navigation and forms.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/sheet.jsonUsage
"use client";
import { Button } from "@/components/ui/button";
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
export default function Example() {
return (
<Sheet>
<SheetTrigger render={<Button variant="outline">Open sheet</Button>} />
<SheetContent>
<SheetHeader>
<SheetTitle>Title</SheetTitle>
<SheetDescription>Description</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>
);
}Examples
Default
Left side
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
Sheetdata-slot="sheet" | Dialog.RootBase UI | — |
SheetTriggerdata-slot="sheet-trigger" | Dialog.TriggerBase UI | — |
SheetClosedata-slot="sheet-close" | Dialog.CloseBase UI | — |
SheetContentdata-slot="sheet-content" | Dialog.PopupBase UI |
|
SheetHeaderdata-slot="sheet-header" | <div>HTML | — |
SheetFooterdata-slot="sheet-footer" | <div>HTML | — |
SheetTitledata-slot="sheet-title" | Dialog.TitleBase UI | — |
SheetDescriptiondata-slot="sheet-description" | Dialog.DescriptionBase UI | — |
Changelog
- v0.3.0Transitions using transition-control now animate, Drawer and Sheet use the drawer curve, the Sidebar collapse eases instead of moving linearly, and MessageScroller exits faster than it enters.patch
- v0.3.0Sheet, Drawer and Sidebar keep the border and the slide direction on the side named by side, which were reversed in right-to-left layouts.patch
Last updated on