# Add to Cart — Skecher UI

An interactive product grid with curved add-to-cart flights, a responsive cart stack, and an animated currency total.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/add-to-cart
```

## Dependencies

- motion
- @number-flow/react

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import {
  AddToCart,
  type AddToCartImage,
  type AddToCartItem,
} from "@/components/ui/add-to-cart";

const items = [
  { id: 1, image: "/products/one.jpg", price: 150, alt: "Product one" },
  { id: 2, image: "/products/two.jpg", price: 360, alt: "Product two" },
] satisfies readonly AddToCartItem[];

const images = [
  { src: "/campaign/one.jpg", alt: "Limited edition product one" },
  "/campaign/two.jpg",
] satisfies readonly AddToCartImage[];

export default function AddToCartExample() {
  return (
    <AddToCart
      items={items}
      images={images}
      currency="USD"
      locale="en-US"
      initialItems={[2]}
      layout={{ columns: 2, gap: "roomy", stackLimit: 4 }}
      motion={{ duration: 0.58, strength: 0.32, peak: 0.42 }}
      onCartChange={(cartItems, total) => {
        console.log({ cartItems, total });
      }}
      className="mx-auto"
    />
  );
}
```

## Source files

- components/ui-components/add-to-cart.tsx — Interactive Add to Cart component

## Required assets

- public/images/add-to-cart/image1.png through image8.png — Default demo artwork; optional when custom images or item image paths are used

## Canonical resources

- Documentation: https://skecher-ui.com/docs/add-to-cart
- Registry item with complete source: https://skecher-ui.com/r/add-to-cart.json
- Component AI context: https://skecher-ui.com/llms/add-to-cart