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 type { ComponentType, SVGProps } from "react"
import { Bell, Home, Mail, Menu, Search, Settings, User } from "lucide-react"
import { Button } from "@heroui/react"
import { Drawer } from "@/components/ui/heroui-drawer"
export default function Navigation() {
const navItems: { icon: ComponentType<SVGProps<SVGSVGElement>>; label: string }[] = [
{ icon: Home, label: "Home" },
{ icon: Search, label: "Search" },
{ icon: Bell, label: "Notifications" },
{ icon: Mail, label: "Messages" },
{ icon: User, label: "Profile" },
{ icon: Settings, label: "Settings" },
]
return (
<Drawer>
<Button variant="secondary">
<Menu />
Menu
</Button>
<Drawer.Backdrop>
<Drawer.Content placement="left">
<Drawer.Dialog>
<Drawer.CloseTrigger />
<Drawer.Header>
<Drawer.Heading>Navigation</Drawer.Heading>
</Drawer.Header>
<Drawer.Body>
<nav className="flex flex-col gap-1">
{navItems.map((item) => (
<button
key={item.label}
className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-foreground transition-colors hover:bg-default"
type="button"
>
<item.icon className="size-5 text-muted-foreground" />
{item.label}
</button>
))}
</nav>
</Drawer.Body>
</Drawer.Dialog>
</Drawer.Content>
</Drawer.Backdrop>
</Drawer>
)
}