Cargo
Basket. Lines, quantities, removing, delivery and totals, as a panel or a drawer.
- Component
- Basket
- Pattern
- Native dialog + live totals
- Outputs
- React + Tailwind, HTML/CSS/JS
- Status
- In stock, tested
Test bench
Runs the exported code, not a mock-up.
Cargo · React + TailwindFull width
| Keys | What happens |
|---|---|
| TaborShift + Tab | Move through each line: quantity, remove, then on to the totals and checkout. |
| EnterorSpace | Press the focused button: minus, plus, remove or checkout. |
| Esc | Close the drawer, if you are using the drawer layout. |
Take it home
React + Tailwind CSS v4: install with one command, or copy the file. Your options are already in it.
npx shadcn@latest add "/r/cart.json"Run it in your project root. It writes components/cart.tsx with the options you set here. Needs Tailwind CSS v4 and a project set up for the shadcn CLI (npx shadcn@latest init).