Select UI framework
Get Started
React Aria
AlertApp Store ButtonAspect RatioBadgeBannerBreadcrumbButton GroupButtonCheckboxCommand MenuCompactButtonDialogDrawerEmptyFancy ButtonFile UploadHintInput OTPInputItemKbdLabelLinkButtonLoaderPopoverProgress BarProgress CircleRadio GroupRatingSelectSeparatorSkeletonSliderSocial ButtonSwitchTagTextareaToggle GroupToggleTooltip
Component drawer-demo not found in registry.
Installation
pnpm dlx shadcn-ui@latest add drawer
Usage
import * as Button from "@/components/ui/button"
import * as Drawer from "@/components/ui/drawer"
export default function DrawerDemo() {
return (
<Drawer.Trigger>
<Button.Root variant="primary" appearance="filled">
Open Drawer
</Button.Root>
<Drawer.Overlay side="right">
<Drawer.Content side="right">
<Drawer.Header title="Settings" description="Manage your settings." />
<Drawer.Body>
<p>Your drawer content goes here.</p>
</Drawer.Body>
<Drawer.Footer>
<Button.Root variant="primary" appearance="filled" slot="close">
Save
</Button.Root>
</Drawer.Footer>
</Drawer.Content>
</Drawer.Overlay>
</Drawer.Trigger>
)
}Examples
Left Side Drawer
Component drawer-left not found in registry.
Without Header
Component drawer-without-header not found in registry.