Components
Add to cart
An add-to-cart button that throws the product in an arc into your cart icon, which bumps when it lands — then the button turns into a check. CartButton and flyToCart() come with it.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { AddToCartButton, CartButton } from '@vizzele/react';
const cart = useRef(null);
<CartButton ref={cart} count={count} />
<AddToCartButton
target={cart} // a ref or a CSS selector
image={product.thumbnail} // what flies (optional)
onAdd={() => addToCart(product)}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
target | RefObject | string | — | The cart to throw into. |
onAdd | () => void | Promise | — | Return a promise to wait before throwing. |
image | string | — | Thumbnail URL that flies; a coloured drop by default. |
addedLabel | ReactNode | 'Added' | Shown with the check. |
CartButton count / label | number / string | — | The badge pops whenever the count goes up. |
flyToCart(from, to, { image }) | Promise | — | The throw on its own, for your own buttons. |
Accessibility
- The cart button is named with its count ("Cart, 3 items").
- The flying thumbnail is decorative and ignores the pointer.
- With reduced motion nothing flies; the cart just bumps.