Shopping Cart

A complete, production-ready Cart component designed for modern e-commerce applications. It comes with built-in item state management (increment, decrement, remove), automatic subtotal calculations, and three distinct structural layouts.

One type prop switches the whole presentation — the cart state, quantity steppers and subtotal math are identical in all three. Leave the first two previews alone for a moment and the bag trigger tilts and rings to invite the click; press it and it squashes, springs back and pushes a ripple out as the panel arrives. Every one of those tweens is skipped under prefers-reduced-motion: reduce.

Drawer

Wait a beat and the bag nudges itself; click it to play the press and the slide-in.

type"drawer": is the default — the panel slides in from the right edge over a blurred overlay.
initialItems: seeds the cart from the parent. The component ships no sample data — without it you get the empty state. Each item is { id, name, price, quantity, size?, color?, gradient }.
color: themes the primary buttons, focus rings, badges and icons. Takes primary, indigo, rose, emerald, zinc or a hex.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Cart

npx shadcn@latest add @algorize-ui/cart

components/custom/blocks/CartBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Cart needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Settype"modal": to centre the same panel and scale it in instead of sliding. Trigger and state are unchanged.

Features

Learn about the Cart component's e-commerce capabilities, including item quantity adjustments, total calculations, and slide-out panels.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Prop	Type	Default	Description
`initialItems`	`CartItem[]`	`[]`	The items the cart starts with, supplied by the parent. The installed component contains no sample data, so a `CartBlock` without this prop renders its empty state. Each item is `id`, `name`, `price`, `quantity`, `gradient`, and optional `size` / `color`. Quantity and removal are then handled internally.
`type`	`"drawer" \| "modal" \| "page"`	`"drawer"`	Determines the structural layout and animation style of the cart.
`color`	`"indigo" \| "rose" \| "emerald" \| "zinc" \| string`	`"primary"`	Applies global color themes to the primary buttons, focus rings, badges, and icons. Accepts preset theme names or valid custom hex codes (e.g. `"#00FF00"`).