Components
Drawer
A swipeable sheet that slides in from a screen edge.
Drawer is built on Vaul. It renders a sheet that can be dragged open or closed, ideal for mobile interactions.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/drawer.jsonUsage
"use client";
import { Button } from "@/components/ui/button";
import {
Drawer,
DrawerContent,
DrawerDescription,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer";
export default function Example() {
return (
<Drawer>
<DrawerTrigger render={<Button variant="outline">Open drawer</Button>} />
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Title</DrawerTitle>
<DrawerDescription>Description</DrawerDescription>
</DrawerHeader>
</DrawerContent>
</Drawer>
);
}Examples
Default
With swipe handle
Pass showSwipeHandle to the Drawer root to render a drag indicator at the top of the content.
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 |
|---|---|---|
Drawerdata-slot="drawer" | Drawer.RootBase UI |
|
DrawerTriggerdata-slot="drawer-trigger" | Drawer.TriggerBase UI | — |
DrawerPortaldata-slot="drawer-portal" | Drawer.PortalBase UI | — |
DrawerClosedata-slot="drawer-close" | Drawer.CloseBase UI | — |
DrawerOverlaydata-slot="drawer-overlay" | Drawer.BackdropBase UI | — |
DrawerSwipeHandledata-slot="drawer-swipe-handle" | <div>HTML | — |
DrawerContentdata-slot="drawer-popup" | Drawer.PopupBase UI | — |
DrawerHeaderdata-slot="drawer-header" | <div>HTML | — |
DrawerFooterdata-slot="drawer-footer" | <div>HTML | — |
DrawerTitledata-slot="drawer-title" | Drawer.TitleBase UI | — |
DrawerDescriptiondata-slot="drawer-description" | Drawer.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