Drawer Buttons

Two buttons that open side drawers with a 3D fold. Payment comes from the right, cart from the left, and the fields stagger in.

Library

uselayouts

Framework

React

Type

component

License

MIT

Dependencies

clsx, lucide-react, motion, tailwind-merge, vaul

Install

npx shadcn@latest add https://uselayouts.com/r/drawer-buttons

Files

• registry/default/example/drawer-buttons.tsx
• registry/default/example/drawer-buttons-field.tsx
• lib/utils.ts
• components/ui/button.tsx
• registry/default/example/drawer-buttons-drawer.tsx
• components/ui/field.tsx
• components/ui/input.tsx
• components/ui/select.tsx

Source

https://github.com/iurvish/uselayouts

Categories

• Cart Components
• Animated Cart Components
• Checkout Form Components
• Commerce Components
• React Commerce Components
• Tailwind CSS Commerce Components
• Animated Commerce Components
• shadcn/ui Commerce Components
• Drawer Components
• React Drawer Components
• Tailwind CSS Drawer Components
• Animated Drawer Components

More from uselayouts

• Curve Drawer
• Multi Step Form
• 3D Book
• Accessible Action
• AccordionOS
• Analog Stick
• Animated Collection
• Bento Card
• Bookshelf
• Bottom Menu
• Bucket
• Card Folder