HeroUI Drawer

Component

About

HeroUI v3 Drawer — slide-out panel with placements, backdrop variants, non-dismissable, scrollable content, controlled state, forms and a navigation drawer.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds HeroUI Drawer to your project and fits it to your theme.

Code

How HeroUI Drawer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Button } from "@heroui/react"
import { Drawer } from "@/components/ui/heroui-drawer"

export default function NonDismissable() {
  return (
    <Drawer>
      <Button variant="secondary">Important Action</Button>
      <Drawer.Backdrop isDismissable={false}>
        <Drawer.Content>
          <Drawer.Dialog>
            <Drawer.Header>
              <Drawer.Heading>Confirm Action</Drawer.Heading>
            </Drawer.Header>
            <Drawer.Body>
              <p>
                This drawer cannot be dismissed by clicking outside or dragging. You must use one of
                the buttons below.
              </p>
            </Drawer.Body>
            <Drawer.Footer>
              <Button slot="close" variant="secondary">
                Cancel
              </Button>
              <Button slot="close">Confirm</Button>
            </Drawer.Footer>
          </Drawer.Dialog>
        </Drawer.Content>
      </Drawer.Backdrop>
    </Drawer>
  )
}