Docs/Drawer

Drawer

Bottom sheet panel (mobile-friendly). Uses native dialog.

Usage

tsx

1'use client'
2import { useRef } from 'react'
3import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter, DrawerClose, Button } from '@storm-ds/ui'
4
5function MyDrawer() {
6  const ref = useRef<HTMLDialogElement>(null)
7  return (
8    <>
9      <Button onClick={() => ref.current?.showModal()}>Open Drawer</Button>
10      <Drawer ref={ref}>
11        <DrawerContent>
12          <DrawerHeader>
13            <DrawerTitle>Drawer Title</DrawerTitle>
14          </DrawerHeader>
15          <p>Content here</p>
16          <DrawerFooter>
17            <DrawerClose onClick={() => ref.current?.close()}>Close</DrawerClose>
18          </DrawerFooter>
19        </DrawerContent>
20      </Drawer>
21    </>
22  )
23}

Default

With Form

Confirmation

Note

Bottom sheet modal using native dialog. Call ref.current?.showModal() to open, ref.current?.close() to close.

Props

Prop	Type	Default	Description
ref	Ref<HTMLDialogElement>	-	Ref to control open/close via showModal()/close()
className	string	-	Custom classes on Drawer wrapper

Use with AI

Create a Next.js client component using Storm UI's Drawer. Import: `import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter, DrawerClose, Button } from '@storm-ds/ui'`. Use 'use client' and useRef to native <dialog>. Drawer slides up from bottom (mobile-friendly). Open with ref.current?.showModal(), close with ref.current?.close(). Use DrawerHeader for title/description, DrawerFooter for actions, DrawerClose for the close button. Example: `const ref = useRef(null); <Button onClick={() => ref.current?.showModal()}>Open</Button><Drawer ref={ref}><DrawerContent><DrawerHeader><DrawerTitle>Title</DrawerTitle><DrawerDescription>Desc</DrawerDescription></DrawerHeader><p>Content</p><DrawerFooter><DrawerClose onClick={() => ref.current?.close()}>Close</DrawerClose></DrawerFooter></DrawerContent></Drawer>`

Sheet

Popover