Documentation
E-Commerce

E-Commerce Components

Stunning animated components for online stores, shopping carts, and product displays.

ProductCard

Stunning 3D product card with mouse-tracking tilt effects, quick view overlay, and animated add to cart.

import { ProductCard } from 'archyra';

<ProductCard
  image="https://example.com/product.jpg"
  name="Premium Wireless Headphones"
  price={299.99}
  originalPrice={399.99}
  rating={4.8}
  reviews={256}
  badge="Best Seller"
  onAddToCart={() => handleAddToCart()}
  onWishlist={() => handleWishlist()}
/>

AddToCartButton

Multi-state button with particle burst, loading animation, and success state transformation.

import { AddToCartButton } from 'archyra';

// Basic usage
<AddToCartButton onClick={() => addToCart(product)} />

// With price display
<AddToCartButton
  text="Add to Cart"
  price={99.99}
  variant="violet"
  onClick={async () => {
    await api.addToCart(productId);
  }}
/>

// Different variants
<AddToCartButton variant="emerald" />
<AddToCartButton variant="rose" size="lg" />

WishlistHeart

Animated heart button with expanding rings, particle burst effects, and multiple size variants.

import { WishlistHeart } from 'archyra';

// Basic usage
<WishlistHeart onToggle={(active) => toggleWishlist(active)} />

// Controlled state
<WishlistHeart
  isActive={isWishlisted}
  onToggle={(active) => setIsWishlisted(active)}
  size="lg"
/>

// Custom color
<WishlistHeart activeColor="#8B5CF6" />

FlashSaleTimer

Eye-catching countdown timer with flip transitions, urgency animations, and pulsing effects.

import { FlashSaleTimer } from 'archyra';

// Basic usage - 2 hours from now
<FlashSaleTimer
  endTime={Date.now() + 2 * 60 * 60 * 1000}
  onEnd={() => console.log('Sale ended!')}
/>

// Custom title and discount
<FlashSaleTimer
  endTime={new Date('2024-12-31T23:59:59')}
  title="Holiday Sale Ends In"
  discount={70}
/>

CartNotification

Animated notification showing product flying to cart with success animations and progress bar.

import { CartNotification } from 'archyra';

const [showNotification, setShowNotification] = useState(false);
const [cartCount, setCartCount] = useState(0);

const handleAddToCart = () => {
  setCartCount(c => c + 1);
  setShowNotification(true);
};

<CartNotification
  isVisible={showNotification}
  productImage="https://example.com/product.jpg"
  productName="Premium Headphones"
  productPrice={299.99}
  cartCount={cartCount}
  onDismiss={() => setShowNotification(false)}
  onViewCart={() => router.push('/cart')}
/>