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, Input, Label, TextField } from "@heroui/react"
import { Drawer } from "@/components/ui/heroui-drawer"
export default function WithForm() {
return (
<Drawer>
<Button variant="secondary">Edit Profile</Button>
<Drawer.Backdrop>
<Drawer.Content placement="right">
<Drawer.Dialog>
<Drawer.CloseTrigger />
<Drawer.Header>
<Drawer.Heading>Edit Profile</Drawer.Heading>
</Drawer.Header>
<Drawer.Body>
<form className="flex flex-col gap-4">
<TextField className="w-full" name="name" type="text">
<Label>Name</Label>
<Input placeholder="Enter your name" variant="secondary" />
</TextField>
<TextField className="w-full" name="email" type="email">
<Label>Email</Label>
<Input placeholder="Enter your email" variant="secondary" />
</TextField>
<TextField className="w-full" name="bio">
<Label>Bio</Label>
<Input placeholder="Tell us about yourself" variant="secondary" />
</TextField>
</form>
</Drawer.Body>
<Drawer.Footer>
<Button slot="close" variant="secondary">
Cancel
</Button>
<Button slot="close">Save Changes</Button>
</Drawer.Footer>
</Drawer.Dialog>
</Drawer.Content>
</Drawer.Backdrop>
</Drawer>
)
}