Components
Loading preview...
HeroUI v3 Drawer — slide-out panel with placements, backdrop variants, non-dismissable, scrollable content, controlled state, forms and a navigation drawer.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-drawerimport { Button } from "@heroui/react"
import { Drawer } from "@/components/ui/heroui-drawer"
export default function BackdropVariants() {
const variants = ["opaque", "blur", "transparent"] as const
return (
<div className="flex flex-wrap gap-4">
{variants.map((variant) => (
<Drawer key={variant}>
<Button variant="secondary">{variant.charAt(0).toUpperCase() + variant.slice(1)}</Button>
<Drawer.Backdrop variant={variant}>
<Drawer.Content>
<Drawer.Dialog>
<Drawer.Handle />
<Drawer.CloseTrigger />
<Drawer.Header>
<Drawer.Heading>
Backdrop: {variant.charAt(0).toUpperCase() + variant.slice(1)}
</Drawer.Heading>
</Drawer.Header>
<Drawer.Body>
<p>
This drawer uses the <code>{variant}</code> backdrop variant.
</p>
</Drawer.Body>
<Drawer.Footer>
<Button className="w-full" slot="close">
Close
</Button>
</Drawer.Footer>
</Drawer.Dialog>
</Drawer.Content>
</Drawer.Backdrop>
</Drawer>
))}
</div>
)
}