Installation
npx kinetic-ui-cli@latest add Usage
This button elevates standard e-commerce interactions. When clicked, it uses `framer-motion` to physically throw a representation of the product directly into the user's cart at the top right of the screen.
import { ThreeDAddToCartButton } from "@/components/creative/3d-add-to-cart-button";
export function ProductPage() {
const handleAdd = () => {
// Fire your cart state update
console.log("Item added!");
};
return (
<div className="w-full flex justify-center py-10">
<ThreeDAddToCartButton onClick={handleAdd} productColor="#3b82f6" />
</div>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | undefined | Additional CSS classes for the button. |
onClick | () => void | undefined | Callback function triggered when the button is clicked. |
productColor | string | '#6366f1' | The hex color of the 3D flying object. |
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { ThreeDAddToCartButton } from "@/components/creative/3d-add-to-cart-button";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { ThreeDAddToCartButton } from "@/components/creative/3d-add-to-cart-button";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<ThreeDAddToCartButton
onClick{/* value */}
productColor="example"
/>
</div>
);
}