About
A cart drawer that keeps the total on screen: quantity changes inline, the sum recalculates at once, and the footer does not scroll away. From VibeUI — 1,600+ components with agent-ready install briefs at vibeui.club.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Cart Drawer to your project and fits it to your theme.
Code
How Cart Drawer is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Drawer005 } from "@/components/ui/vibeui-drawer-005"
export default function Demo() {
return <Drawer005 {...{"triggerLabel":"Cart","title":"Cart","closeLabel":"Close cart","locale":"en-US","currency":"€","countTemplate":"items: {count}","decreaseTemplate":"Remove one: {title}","increaseTemplate":"Add one: {title}","checkoutTemplate":"Checkout · {total}","totalsText":{"goods":"Items","delivery":"Delivery","total":"Total"},"lines":[{"title":"Icon set","note":"240 outlines, SVG","price":2400,"quantity":1},{"title":"Grotesk typeface","note":"Licence for three sites","price":4900,"quantity":1},{"title":"Palette presets","note":"12 sets","price":1200,"quantity":2}]}} />
}