Components
Loading preview...
A customizable drawer component built on top of Vaul with smooth animations and flexible positioning.
npx shadcn@latest add https://21st.dev/r/preetsuthar17/drawerimport {
Drawer,
DrawerContent,
DrawerHeader,
DrawerTitle,
DrawerDescription,
DrawerFooter,
DrawerTrigger,
DrawerClose,
DrawerCloseButton
} from "@/components/ui/drawer";
import { Button } from "@/components/ui/button"
export default function DemoOne() {
return(
<>
<Drawer>
<DrawerTrigger asChild>
<Button variant="outline">Open Drawer</Button>
</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Basic Drawer</DrawerTitle>
<DrawerDescription>
This is a basic drawer component.
</DrawerDescription>
</DrawerHeader>
<DrawerFooter>
<Button>Submit</Button>
<DrawerClose asChild>
<Button variant="outline">Cancel</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>
</>
);
}