Add to Cart
Pick a colorway and size, hit Add — the product flies in an arc into the cart, which bounces.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Colorways re-tint the product and backdrop, size selection is required (the grid nudges if you forget), and the thumbnail flies with separate X/Y easings for a true arc.
Installation
$ npx shadcn@latest add https://guetix.com/r/add-to-cart.json
Uses the shadcn CLI. It creates components/guetix/add-to-cart.tsx and installs nothing else.
Usage
example.tsx
import { AddToCart } from "@/components/guetix/add-to-cart";
export default function Example() {
return <AddToCart />;
}
Product pagesQuick-buy cardsDrops
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01The arc is two nested animations: linear-ish X and ease-in Y.
- 02Flight distance is measured at click time, so it works in any layout.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name / price / currency | string | number | — | Product info. |
| colorways | { name; color }[] | — | Variants. |
| sizes | string[] | — | Sizes. |
| onAdd | ({ color, size }) => void | — | Add handler. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Radio groups for color and size; cart count announced.