Slide Up Drawer
An animated bottom drawer with spring physics, backdrop blur, and keyboard dismiss support.
npx arupui add slide-up-drawer
Preview
Usage
slide-up-drawer.tsx
import { SlideUpDrawer } from "@/components/blocks/slide-up-drawer"
const [open, setOpen] = useState(false)
<SlideUpDrawer open={open} onOpenChange={setOpen} title="Hello" description="Content here.">
<Button onClick={() => setOpen(false)}>Close</Button>
</SlideUpDrawer>Props
| Prop | Type | Default |
|---|---|---|
open | boolean | false |
onOpenChange | (open: boolean) => void | - |
title | string | undefined |
description | string | undefined |
openType:
booleanDefault: falseonOpenChangeType:
(open: boolean) => voidDefault: -titleType:
stringDefault: undefineddescriptionType:
stringDefault: undefined