E-commerce
Product cards, shopping cart, and checkout form components.
Product Card
Product card grid with image, title, price, rating, and add-to-cart action.
Preview
No image
Sale
-33%
Wireless Headphones
(128)
$99.99$149.99
No image
New
Smart Watch
(89)
$299.99
No image
Bluetooth Speaker
(54)
$59.99
Product Card.tsx
import { ProductCardGrid } from "@launchapp/design-system/blocks/ecommerce";const products = [ { id: "1", name: "Wireless Headphones", price: 99.99, originalPrice: 149.99, rating: 4.5, reviewCount: 128, badge: "Sale", imageSrc: "/products/headphones.jpg", imageAlt: "Wireless Headphones", }, { id: "2", name: "Smart Watch", price: 299.99, rating: 4.8, reviewCount: 89, badge: "New", imageSrc: "/products/watch.jpg", imageAlt: "Smart Watch", },];export default function Page() { return ( <ProductCardGrid products={products} onAddToCart={(id) => console.log("add to cart", id)} /> );}Shopping Cart
Shopping cart with item list, quantity controls, and order summary.
Preview
Shopping Cart
3 items
You qualify for free shipping!
IMG
Wireless Headphones
1
$99.99IMG
Smart Watch
2
$599.98Subtotal$699.97
Tax (8%)$56.00
ShippingFree
Total$755.97
Shopping Cart.tsx
import { ShoppingCart } from "@launchapp/design-system/blocks/ecommerce";const items = [ { id: "1", name: "Wireless Headphones", price: 99.99, quantity: 1, imageSrc: "/products/headphones.jpg", imageAlt: "Wireless Headphones", }, { id: "2", name: "Smart Watch", price: 299.99, quantity: 2, imageSrc: "/products/watch.jpg", imageAlt: "Smart Watch", },];export default function Page() { return ( <ShoppingCart items={items} taxRate={0.08} shippingCost={9.99} freeShippingThreshold={100} onCheckout={() => console.log("checkout")} /> );}Checkout Form
Multi-step checkout form with shipping address and payment information.
Preview
Checkout Form.tsx
import { CheckoutForm } from "@launchapp/design-system/blocks/ecommerce";const orderSummary = [ { name: "Wireless Headphones", quantity: 1, price: 99.99 }, { name: "Smart Watch", quantity: 2, price: 299.99 },];export default function Page() { return ( <CheckoutForm orderSummary={orderSummary} onSubmit={async (values) => { console.log(values); }} /> );}Order Summary
Order summary sidebar with line items, discounts, taxes, and total.
Preview
No preview available
See the code snippet below for usage.
Order Summary.tsx
import { OrderSummary } from "@launchapp/design-system/blocks/ecommerce";const items = [ { id: "1", name: "Premium Plan", description: "Annual subscription", price: 290, quantity: 1 },];export default function Page() { return ( <OrderSummary items={items} subtotal={290} tax={29} total={319} onApplyDiscount={(code) => console.log("apply", code)} /> );}Cart Drawer
Slide-in shopping cart drawer with item management and checkout CTA.
Preview
No preview available
See the code snippet below for usage.
Cart Drawer.tsx
import { CartDrawer } from "@launchapp/design-system/blocks/ecommerce";const items = [ { id: "1", name: "Wireless Headphones", price: 99, quantity: 1, imageUrl: "" },];export default function Page() { return ( <CartDrawer items={items} total={99} onUpdateQuantity={(id, qty) => console.log("update", id, qty)} onRemove={(id) => console.log("remove", id)} onCheckout={() => console.log("checkout")} /> );}Product Grid
Responsive product grid with sorting, filtering, and pagination.
Preview
No preview available
See the code snippet below for usage.
Product Grid.tsx
import { ProductGrid } from "@launchapp/design-system/blocks/ecommerce";const products = [ { id: "1", name: "Wireless Headphones", price: 99, rating: 4.5, imageUrl: "", badge: "New" }, { id: "2", name: "Running Shoes", price: 75, rating: 4.2, imageUrl: "" }, { id: "3", name: "Smart Watch", price: 199, rating: 4.8, imageUrl: "", badge: "Popular" },];export default function Page() { return ( <ProductGrid products={products} onAddToCart={(id) => console.log("add to cart", id)} /> );}