de:"ExplicitChatIdProvider" df:I[903690,["$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$5f","$60","$61","$62","$63"],"$de"] e0:I[838238,["$31","$32","$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$5f","$60","$61","$62","$63"],"SWRDataProvider"] e1:T135f4,[V0_FILE]typescriptreact:file="components/ecommerce/product-card.tsx" isMerged="true" "use client" import { useState } from "react" import { Star, Heart, ShoppingCart } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { cn } from "@/lib/utils" interface ProductCardProps { id: string name: string price: number originalPrice?: number rating: number reviewCount: number image: string badge?: string className?: string onAddToCart?: (id: string) => void onToggleFavorite?: (id: string) => void } export function ProductCard({ id, name, price, originalPrice, rating, reviewCount, image, badge, className, onAddToCart, onToggleFavorite, }: ProductCardProps) { const [isFavorite, setIsFavorite] = useState(false) const [isLoading, setIsLoading] = useState(false) const handleAddToCart = async () => { setIsLoading(true) await new Promise((resolve) => setTimeout(resolve, 500)) // Simulate API call onAddToCart?.(id) setIsLoading(false) } const handleToggleFavorite = () => { setIsFavorite(!isFavorite) onToggleFavorite?.(id) } const renderStars = (rating: number) => { return Array.from({ length: 5 }, (_, i) => ( )) } return (

{badge && {badge}}

{name}

{renderStars(rating)} ({reviewCount})

${price.toFixed(2)} {originalPrice && ( ${originalPrice.toFixed(2)} )}

) } [V0_FILE]typescriptreact:file="components/ecommerce/navigation-menu.tsx" isMerged="true" "use client" import { useState } from "react" import { Search, ShoppingCart, User, Menu, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, } from "@/components/ui/navigation-menu" interface NavigationMenuProps { cartItemCount?: number onCartClick?: () => void onProfileClick?: () => void } export function EcommerceNavigationMenu({ cartItemCount = 0, onCartClick, onProfileClick }: NavigationMenuProps) { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) const categories = [ { name: "Men", subcategories: ["Clothing", "Shoes", "Accessories", "Sale"], }, { name: "Women", subcategories: ["Clothing", "Shoes", "Accessories", "Sale"], }, { name: "Kids", subcategories: ["Boys", "Girls", "Baby", "Shoes"], }, { name: "Sale", subcategories: ["Men's Sale", "Women's Sale", "Kids' Sale", "Clearance"], }, ] return (

{/* Logo */}

Store {/* Desktop Navigation */} {categories.map((category) => ( {category.name}

{category.subcategories.map((subcategory) => ( {subcategory} ))}

))}

{/* Right side actions */}

{/* Mobile menu button */}

{/* Mobile Navigation */} {isMobileMenuOpen && (

{categories.map((category) => (

{category.subcategories.map((subcategory) => ( ))}

))}

)}

) } [V0_FILE]typescriptreact:file="components/ecommerce/search-bar.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Search, X, Clock, TrendingUp } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { cn } from "@/lib/utils" interface SearchSuggestion { id: string text: string type: "recent" | "trending" | "product" category?: string } interface SearchBarProps { placeholder?: string suggestions?: SearchSuggestion[] onSearch?: (query: string) => void onSuggestionClick?: (suggestion: SearchSuggestion) => void className?: string } const defaultSuggestions: SearchSuggestion[] = [ { id: "1", text: "wireless headphones", type: "recent" }, { id: "2", text: "running shoes", type: "recent" }, { id: "3", text: "laptop backpack", type: "trending" }, { id: "4", text: "winter jacket", type: "trending" }, { id: "5", text: "smartphone case", type: "product", category: "Electronics" }, { id: "6", text: "yoga mat", type: "product", category: "Sports" }, ] export function SearchBar({ placeholder = "Search products...", suggestions = defaultSuggestions, onSearch, onSuggestionClick, className, }: SearchBarProps) { const [query, setQuery] = useState("") const [isOpen, setIsOpen] = useState(false) const [filteredSuggestions, setFilteredSuggestions] = useState([]) const searchRef = useRef(null) const inputRef = useRef(null) useEffect(() => { if (query.trim()) { const filtered = suggestions.filter((suggestion) => suggestion.text.toLowerCase().includes(query.toLowerCase())) setFilteredSuggestions(filtered) } else { setFilteredSuggestions(suggestions) } }, [query, suggestions]) useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (searchRef.current && !searchRef.current.contains(event.target as Node)) { setIsOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => document.removeEventListener("mousedown", handleClickOutside) }, []) const handleSearch = () => { if (query.trim()) { onSearch?.(query.trim()) setIsOpen(false) } } const handleSuggestionClick = (suggestion: SearchSuggestion) => { setQuery(suggestion.text) onSuggestionClick?.(suggestion) setIsOpen(false) } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter") { handleSearch() } else if (e.key === "Escape") { setIsOpen(false) } } const clearSearch = () => { setQuery("") inputRef.current?.focus() } const getSuggestionIcon = (type: SearchSuggestion["type"]) => { switch (type) { case "recent": return case "trending": return default: return } } return (

setQuery(e.target.value)} onFocus={() => setIsOpen(true)} onKeyDown={handleKeyDown} className="pl-10 pr-10" /> {query && ( )}

{isOpen && (

{filteredSuggestions.length > 0 ? (

{query.trim() === "" && ( <>

Recent Searches

{filteredSuggestions .filter((s) => s.type === "recent") .slice(0, 3) .map((suggestion) => ( ))}

Trending

{filteredSuggestions .filter((s) => s.type === "trending") .slice(0, 3) .map((suggestion) => ( ))} )} {query.trim() !== "" && ( <> {filteredSuggestions.slice(0, 5).map((suggestion) => ( ))} )}

) : (

No suggestions found

)}

) } [V0_FILE]typescriptreact:file="components/ecommerce/product-grid.tsx" isMerged="true" "use client" import { ProductCard } from "./product-card" import { cn } from "@/lib/utils" interface Product { id: string name: string price: number originalPrice?: number rating: number reviewCount: number image: string badge?: string } interface ProductGridProps { products: Product[] className?: string onAddToCart?: (id: string) => void onToggleFavorite?: (id: string) => void } const sampleProducts: Product[] = [ { id: "1", name: "Premium Wireless Headphones", price: 199.99, originalPrice: 249.99, rating: 4.5, reviewCount: 128, image: "/wireless-headphones.png", badge: "Sale", }, { id: "2", name: "Ultra-Comfortable Running Shoes", price: 129.99, rating: 4.8, reviewCount: 256, image: "/running-shoes.jpg", }, { id: "3", name: "Professional Laptop Backpack", price: 89.99, originalPrice: 119.99, rating: 4.3, reviewCount: 89, image: "/laptop-backpack.png", badge: "New", }, { id: "4", name: "Minimalist Watch Collection", price: 299.99, rating: 4.7, reviewCount: 167, image: "/minimalist-watch.png", }, { id: "5", name: "Organic Cotton T-Shirt", price: 29.99, originalPrice: 39.99, rating: 4.2, reviewCount: 94, image: "/cotton-tshirt.png", badge: "Eco", }, { id: "6", name: "Smart Fitness Tracker", price: 149.99, rating: 4.6, reviewCount: 203, image: "/fitness-tracker-lifestyle.png", }, { id: "7", name: "Wireless Charging Pad", price: 49.99, originalPrice: 69.99, rating: 4.1, reviewCount: 76, image: "/wireless-charger.png", badge: "Sale", }, { id: "8", name: "Premium Coffee Beans", price: 24.99, rating: 4.9, reviewCount: 312, image: "/pile-of-coffee-beans.png", }, ] export function ProductGrid({ products = sampleProducts, className, onAddToCart, onToggleFavorite }: ProductGridProps) { return (

{products.map((product) => ( ))}

) } [V0_FILE]typescriptreact:file="components/ecommerce/order-summary.tsx" isMerged="true" "use client" import { Separator } from "@/components/ui/separator" import { Badge } from "@/components/ui/badge" import { cn } from "@/lib/utils" interface OrderItem { id: string name: string price: number quantity: number image: string variant?: string } interface OrderSummaryProps { items: OrderItem[] subtotal?: number shipping?: number tax?: number discount?: number discountCode?: string className?: string } const sampleItems: OrderItem[] = [ { id: "1", name: "Premium Wireless Headphones", price: 199.99, quantity: 1, image: "/wireless-headphones.png", variant: "Black", }, { id: "2", name: "Ultra-Comfortable Running Shoes", price: 129.99, quantity: 2, image: "/running-shoes.jpg", variant: "Size 10, Blue", }, ] export function OrderSummary({ items = sampleItems, subtotal, shipping = 9.99, tax, discount = 0, discountCode, className, }: OrderSummaryProps) { const calculatedSubtotal = subtotal ?? items.reduce((sum, item) => sum + item.price * item.quantity, 0) const calculatedTax = tax ?? calculatedSubtotal * 0.08 const total = calculatedSubtotal + shipping + calculatedTax - discount return (

Order Summary

{/* Items */}

{items.map((item) => (

{item.quantity > 1 && ( {item.quantity} )}

{item.name}

{item.variant &&

{item.variant}

}

Qty: {item.quantity} ${(item.price * item.quantity).toFixed(2)}

))}

{/* Pricing breakdown */}

Subtotal ${calculatedSubtotal.toFixed(2)}

Shipping {shipping === 0 ? "Free" : `$${shipping.toFixed(2)}`}

Tax ${calculatedTax.toFixed(2)}

{discount > 0 && (

Discount {discountCode && `(${discountCode})`} -${discount.toFixed(2)}

)}

Total ${total.toFixed(2)}

) } [V0_FILE]typescriptreact:file="components/ecommerce/checkout-section.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { CreditCard, Truck, Shield, Check } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Checkbox } from "@/components/ui/checkbox" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" import { OrderSummary } from "./order-summary" import { cn } from "@/lib/utils" interface CheckoutSectionProps { className?: string onSubmit?: (data: any) => void } export function CheckoutSection({ className, onSubmit }: CheckoutSectionProps) { const [formData, setFormData] = useState({ email: "", firstName: "", lastName: "", address: "", apartment: "", city: "", state: "", zipCode: "", country: "United States", paymentMethod: "card", cardNumber: "", expiryDate: "", cvv: "", nameOnCard: "", saveInfo: false, newsletter: false, }) const [isProcessing, setIsProcessing] = useState(false) const handleInputChange = (field: string, value: string | boolean) => { setFormData((prev) => ({ ...prev, [field]: value })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsProcessing(true) // Simulate processing await new Promise((resolve) => setTimeout(resolve, 2000)) onSubmit?.(formData) setIsProcessing(false) } return (

{/* Checkout Form */}

Checkout

Complete your purchase below

{/* Contact Information */}

Contact Information

Email address handleInputChange("email", e.target.value)} placeholder="john@example.com" required />

{/* Shipping Address */}

Shipping Address

First name handleInputChange("firstName", e.target.value)} required />

Last name handleInputChange("lastName", e.target.value)} required />

Address handleInputChange("address", e.target.value)} placeholder="123 Main Street" required />

Apartment, suite, etc. (optional) handleInputChange("apartment", e.target.value)} placeholder="Apt 4B" />

City handleInputChange("city", e.target.value)} required />

State handleInputChange("state", e.target.value)} placeholder="CA" required />

ZIP code handleInputChange("zipCode", e.target.value)} placeholder="90210" required />

{/* Payment Method */}

Payment Method handleInputChange("paymentMethod", value)} >

Credit Card

{formData.paymentMethod === "card" && (

Card number handleInputChange("cardNumber", e.target.value)} placeholder="1234 5678 9012 3456" required />

Expiry date handleInputChange("expiryDate", e.target.value)} placeholder="MM/YY" required />

CVV handleInputChange("cvv", e.target.value)} placeholder="123" required />

Name on card handleInputChange("nameOnCard", e.target.value)} placeholder="John Doe" required />

)} {/* Options */}

handleInputChange("saveInfo", checked as boolean)} /> Save this information for next time

{/* Order Summary */}

Free shipping on orders over $100

Secure checkout with SSL encryption

30-day return policy

) } [V0_FILE]typescriptreact:file="components/ecommerce/user-account-dropdown.tsx" isMerged="true" "use client" import { useState } from "react" import { User, Package, Settings, Heart, LogOut, ChevronDown } from "lucide-react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" interface UserAccountDropdownProps { user?: { name: string email: string avatar?: string initials?: string } orderCount?: number onProfileClick?: () => void onOrdersClick?: () => void onWishlistClick?: () => void onSettingsClick?: () => void onLogoutClick?: () => void } export function UserAccountDropdown({ user = { name: "John Doe", email: "john@example.com", initials: "JD", }, orderCount = 3, onProfileClick, onOrdersClick, onWishlistClick, onSettingsClick, onLogoutClick, }: UserAccountDropdownProps) { const [isOpen, setIsOpen] = useState(false) const handleItemClick = (action?: () => void) => { action?.() setIsOpen(false) } return (

{user.initials || user.name .split(" ") .map((n) => n[0]) .join("")}

{user.name} {user.email}

handleItemClick(onProfileClick)} > Profile handleItemClick(onOrdersClick)} >

Orders {orderCount > 0 && ( {orderCount} )}

handleItemClick(onWishlistClick)} > Wishlist handleItemClick(onSettingsClick)} > Settings handleItemClick(onLogoutClick)} > Logout ) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]jpg:file="public/running-shoes.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/running-shoes-ZWfh8tSMCTpwFSxxqVqGUSogXT8pSA.jpg" isMerged="true" [V0_FILE]png:file="public/laptop-backpack.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/laptop-backpack-W5CGUTjh2bKLZ5rJHGOKus3sAJdmjg.png" isMerged="true" [V0_FILE]png:file="public/minimalist-watch.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/minimalist-watch-AgBPUaCuUnsQ04IYec07k6L4cUPmyr.png" isMerged="true" [V0_FILE]png:file="public/cotton-tshirt.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cotton-tshirt-9Ka9XpjhJZM2pyTzpOJYKxqG2UE5s0.png" isMerged="true" [V0_FILE]png:file="public/fitness-tracker-lifestyle.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/fitness-tracker-lifestyle-SFFUupxhLZc7mfPdv41muPgX9sArER.png" isMerged="true" [V0_FILE]png:file="public/wireless-charger.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wireless-charger-YzAtB1UnSfsyOAmhSCiCaxZU4aYqh3.png" isMerged="true" [V0_FILE]png:file="public/pile-of-coffee-beans.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/pile-of-coffee-beans-OppjYyYwJdHipG82zZvcFjHKL1Kakw.png" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/showcase/code-preview.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Check, Copy } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" interface CodePreviewProps { title: string description: string preview: React.ReactNode code: string className?: string } export function CodePreview({ title, description, preview, code, className }: CodePreviewProps) { const [copied, setCopied] = useState(false) const copyToClipboard = async () => { await navigator.clipboard.writeText(code) setCopied(true) setTimeout(() => setCopied(false), 2000) } return (

{title}

{description}

Preview Code

{preview}

                {code}

) } [V0_FILE]png:file="public/wireless-headphones.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wireless-headphones-LqpBeruF3f0RCUBwcARZlX0cQuiOyO.png" isMerged="true" [V0_FILE]png:file="public/diverse-people-listening-headphones.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-people-listening-headphones-wfGHtWXquEPgVCtRszFVmrwyABNQwp.png" isMerged="true" [V0_FILE]png:file="public/colorful-phone-case-display.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/colorful-phone-case-display-oKtUFW6QDlh1PYoDIxUD3vkRRK9Nl1.png" isMerged="true" [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated theme to match dark navy aesthetic from design inspiration */ --background: oklch(0.08 0.02 240); --foreground: oklch(0.95 0.01 240); --card: oklch(0.12 0.02 240); --card-foreground: oklch(0.95 0.01 240); --popover: oklch(0.12 0.02 240); --popover-foreground: oklch(0.95 0.01 240); --primary: oklch(0.55 0.15 220); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.18 0.02 240); --secondary-foreground: oklch(0.95 0.01 240); --muted: oklch(0.18 0.02 240); --muted-foreground: oklch(0.65 0.01 240); --accent: oklch(0.25 0.02 240); --accent-foreground: oklch(0.95 0.01 240); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.25 0.02 240); --input: oklch(0.25 0.02 240); --ring: oklch(0.55 0.15 220); --success: oklch(0.55 0.15 140); --success-foreground: oklch(1 0 0); --warning: oklch(0.65 0.15 60); --warning-foreground: oklch(0.15 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.5rem; --sidebar: oklch(0.15 0.02 240); --sidebar-foreground: oklch(0.95 0.01 240); --sidebar-primary: oklch(0.55 0.15 220); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.25 0.02 240); --sidebar-accent-foreground: oklch(0.95 0.01 240); --sidebar-border: oklch(0.25 0.02 240); --sidebar-ring: oklch(0.55 0.15 220); } .dark { /* Dark mode now uses the same navy theme for consistency */ --background: oklch(0.08 0.02 240); --foreground: oklch(0.95 0.01 240); --card: oklch(0.12 0.02 240); --card-foreground: oklch(0.95 0.01 240); --popover: oklch(0.12 0.02 240); --popover-foreground: oklch(0.95 0.01 240); --primary: oklch(0.55 0.15 220); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.18 0.02 240); --secondary-foreground: oklch(0.95 0.01 240); --muted: oklch(0.18 0.02 240); --muted-foreground: oklch(0.65 0.01 240); --accent: oklch(0.25 0.02 240); --accent-foreground: oklch(0.95 0.01 240); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.25 0.02 240); --input: oklch(0.25 0.02 240); --ring: oklch(0.55 0.15 220); --success: oklch(0.55 0.15 140); --success-foreground: oklch(1 0 0); --warning: oklch(0.65 0.15 60); --warning-foreground: oklch(0.15 0 0); --sidebar: oklch(0.15 0.02 240); --sidebar-foreground: oklch(0.95 0.01 240); --sidebar-primary: oklch(0.55 0.15 220); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.25 0.02 240); --sidebar-accent-foreground: oklch(0.95 0.01 240); --sidebar-border: oklch(0.25 0.02 240); --sidebar-ring: oklch(0.55 0.15 220); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState } from "react" import { CodePreview } from "@/components/showcase/code-preview" import { ProductCard } from "@/components/ecommerce/product-card" import { EcommerceNavigationMenu } from "@/components/ecommerce/navigation-menu" import { SearchBar } from "@/components/ecommerce/search-bar" import { ProductGrid } from "@/components/ecommerce/product-grid" import { OrderSummary } from "@/components/ecommerce/order-summary" import { CheckoutSection } from "@/components/ecommerce/checkout-section" import { UserAccountDropdown } from "@/components/ecommerce/user-account-dropdown" import { Button } from "@/components/ui/button" import { ArrowRight, Code, Palette, Zap } from "lucide-react" export default function ComponentShowcase() { const [cartItemCount, setCartItemCount] = useState(3) const handleAddToCart = (productId: string) => { setCartItemCount((prev) => prev + 1) console.log("Added to cart:", productId) } const handleToggleFavorite = (productId: string) => { console.log("Toggled favorite:", productId) } const handleSearch = (query: string) => { console.log("Search query:", query) } const handleProfileAction = (action: string) => { console.log("Profile action:", action) } // Sample data for components const sampleProduct = { id: "1", name: "Premium Wireless Headphones", price: 299.99, originalPrice: 399.99, rating: 4.5, reviewCount: 128, image: "/wireless-headphones.png", badge: "Sale", } const sampleOrderItems = [ { id: "1", name: "Premium Wireless Headphones", price: 299.99, quantity: 1, image: "/diverse-people-listening-headphones.png", }, { id: "2", name: "Smartphone Case", price: 29.99, quantity: 2, image: "/colorful-phone-case-display.png" }, ] return (

{/* Background Pattern */}

{/* Navigation */}

EcommerceUI

{/* Hero Section */}

Modern E-commerce Components

The React Component Library for Modern E-commerce

Build beautiful, accessible e-commerce experiences with our collection of{" "} production-ready components crafted with React, TypeScript, and Tailwind CSS.



              {/* Feature Grid */}
              
                
                  
                    
                  

                  Production Ready
                  
                    Copy-paste components that work out of the box with proper TypeScript support and accessibility.
                  
                


                
                  
                    
                  
                  Fully Customizable
                  
                    Built with Tailwind CSS and design tokens for easy theming and brand customization.
                  
                

                
                  
                    
                  
                  Mobile First
                  
                    Responsive design that works perfectly on all devices with touch-friendly interactions.



      
        
          {/* Navigation Menu */}
          
                 console.log("Cart clicked")}
                  onProfileClick={() => console.log("Profile clicked")}
                />
              
            }
            code={`"use client"

import { useState } from "react"
import { Search, ShoppingCart, User, Menu, X } from 'lucide-react'
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"

export function EcommerceNavigationMenu({ cartItemCount = 0, onCartClick, onProfileClick }) {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)

  return (
    
      
        
          
            
              
                S
              
              Store
            
          

          
            
            
          
        
      
    
  )
}`}
          />

          {/* Search Bar */}


            }
            code={`"use client"

import { useState, useRef, useEffect } from "react"
import { Search, X } from 'lucide-react'
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export function SearchBar({ placeholder = "Search products...", onSearch }) {
  const [query, setQuery] = useState("")
  const [isOpen, setIsOpen] = useState(false)
  const inputRef = useRef(null)

  const handleSearch = () => {
    if (query.trim()) {
      onSearch?.(query.trim())
      setIsOpen(false)
    }
  }

  const clearSearch = () => {
    setQuery("")
    inputRef.current?.focus()
  }

  return (
    
      
        
         setQuery(e.target.value)}
          onFocus={() => setIsOpen(true)}
          onKeyDown={(e) => e.key === "Enter" && handleSearch()}
          className="pl-10 pr-10"
        />
        {query && (
          
        )}
      
    
  )
}`}
          />

          {/* Product Card */}


            }
            code={`"use client"

import { useState } from "react"
import { Star, Heart, ShoppingCart } from 'lucide-react'
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

export function ProductCard({ id, name, price, originalPrice, rating, reviewCount, image, badge, onAddToCart, onToggleFavorite }) {
  const [isFavorite, setIsFavorite] = useState(false)
  const [isLoading, setIsLoading] = useState(false)

  const handleAddToCart = async () => {
    setIsLoading(true)
    await new Promise((resolve) => setTimeout(resolve, 500))
    onAddToCart?.(id)
    setIsLoading(false)
  }

  const renderStars = (rating) => {
    return Array.from({ length: 5 }, (_, i) => (
      
    ))
  }

  return (
    
      
        
          
          {badge && {badge}}
          
        

        
          {name}
          
            {renderStars(rating)}
            ({reviewCount})
          
          
            
              \${price.toFixed(2)}
              {originalPrice && \${originalPrice.toFixed(2)}}
            
            
          
        
      
    
  )
}`}
          />

          {/* Product Grid */}


            }
            code={`"use client"

import { ProductCard } from "./product-card"

const sampleProducts = [
  { id: "1", name: "Premium Wireless Headphones", price: 199.99, originalPrice: 249.99, rating: 4.5, reviewCount: 128, image: "/headphones.jpg", badge: "Sale" },
  { id: "2", name: "Running Shoes", price: 129.99, rating: 4.8, reviewCount: 256, image: "/shoes.jpg" },
  // ... more products
]

export function ProductGrid({ products = sampleProducts, onAddToCart, onToggleFavorite }) {
  return (
    
      {products.map((product) => (
        
      ))}
    
  )
}`}
          />

          {/* Order Summary */}
          
                
              
            }
            code={`"use client"

import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"

export function OrderSummary({ items, subtotal, shipping = 9.99, tax, discount = 0 }) {
  const calculatedSubtotal = subtotal ?? items.reduce((sum, item) => sum + item.price * item.quantity, 0)
  const calculatedTax = tax ?? calculatedSubtotal * 0.08
  const total = calculatedSubtotal + shipping + calculatedTax - discount

  return (
    
      Order Summary

      
        {items.map((item) => (
          
            
              
              {item.quantity > 1 && (
                
                  {item.quantity}
                
              )}
            
            
              {item.name}
              
                Qty: {item.quantity}
                \${(item.price * item.quantity).toFixed(2)}
              
            
          
        ))}
      

      

      
        
          Subtotal
          \${calculatedSubtotal.toFixed(2)}
        
        
          Shipping
          \${shipping.toFixed(2)}
        
        
          Tax
          \${calculatedTax.toFixed(2)}
        
      

      

      
        Total
        \${total.toFixed(2)}
      
    
  )
}`}
          />

          {/* User Account Dropdown */}
          
                 handleProfileAction("profile")}
                  onOrdersClick={() => handleProfileAction("orders")}
                  onWishlistClick={() => handleProfileAction("wishlist")}
                  onSettingsClick={() => handleProfileAction("settings")}
                  onLogoutClick={() => handleProfileAction("logout")}
                />
              
            }
            code={`"use client"

import { useState } from "react"
import { User, Package, Settings, Heart, LogOut, ChevronDown } from 'lucide-react'
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"

export function UserAccountDropdown({ user = { name: "John Doe", email: "john@example.com", initials: "JD" }, orderCount = 3, onProfileClick, onOrdersClick, onWishlistClick, onSettingsClick, onLogoutClick }) {
  const [isOpen, setIsOpen] = useState(false)

  const handleItemClick = (action) => {
    action?.()
    setIsOpen(false)
  }

  return (
    
      
        
      

      
        
          
            
              
              {user.initials}
            
            
              {user.name}
              {user.email}
            
          
        

        

         handleItemClick(onProfileClick)}>
          
          Profile
        

         handleItemClick(onOrdersClick)}>
          
          
            Orders
            {orderCount > 0 && {orderCount}}
          
        

         handleItemClick(onWishlistClick)}>
          
          Wishlist
        

         handleItemClick(onSettingsClick)}>
          
          Settings
        

        

         handleItemClick(onLogoutClick)}>
          
          Logout
        
      
    
  )
}`}
          />

          {/* Checkout Section */}
          
                 {
                    console.log("Checkout data:", data)
                    alert("Order submitted successfully!")
                  }}
                />
              
            }
            code={`"use client"

import { useState } from "react"
import { CreditCard, Shield } from 'lucide-react'
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { OrderSummary } from "./order-summary"

export function CheckoutSection({ onSubmit }) {
  const [formData, setFormData] = useState({
    email: "",
    firstName: "",
    lastName: "",
    address: "",
    cardNumber: "",
    expiryDate: "",
    cvv: ""
  })

  const [isProcessing, setIsProcessing] = useState(false)

  const handleInputChange = (field, value) => {
    setFormData(prev => ({ ...prev, [field]: value }))
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    setIsProcessing(true)
    await new Promise(resolve => setTimeout(resolve, 2000))
    onSubmit?.(formData)
    setIsProcessing(false)
  }

  return (
    
      
        
          
            Checkout
            Complete your purchase below
          

          
            
              
                Contact Information
              
              
                
                  Email address
                   handleInputChange("email", e.target.value)} required />
                
              
            

            
              
                Shipping Address
              
              
                
                  
                    First name
                     handleInputChange("firstName", e.target.value)} required />
                  
                  
                    Last name
                     handleInputChange("lastName", e.target.value)} required />
                  
                
                
                  Address
                   handleInputChange("address", e.target.value)} required />
                
              
            

            
              
                
                  
                  Payment Method
                
              
              
                
                  Card number
                   handleInputChange("cardNumber", e.target.value)} placeholder="1234 5678 9012 3456" required />
                
                
                  
                    Expiry date
                     handleInputChange("expiryDate", e.target.value)} placeholder="MM/YY" required />
                  
                  
                    CVV
                     handleInputChange("cvv", e.target.value)} placeholder="123" required />
                  
                
              
            

            
          
        

        
          
            
              
            
          
        
      
    
  )
}`}
          />
        

        {/* Footer */}
        
          
            Built with React, TypeScript, and Tailwind CSS. All components are fully responsive and accessible.
          
        
      
    
  )
}d8:["$","$Ldf",null,{"chatId":"jJfq6FReFzG","children":["$","$Le0",null,{"data":{"@\"active-block\",\"jJfq6FReFzG\",":{"id":"b_rIdmGAyjFjp","messageId":"4lem2dpyD6PuHvbWIH5uC1rQ6EQlubmE","source":"$e1","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"ecommerce-components","type":"code-project","project":"ecommerce-components","taskNameActive":"Creating beautiful hero section","taskNameComplete":"Created beautiful hero section"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"jJfq6FReFzG\",":false},"children":"$Le2"}]}]

About

Tags

Share

About

Tags

Share

More Templates Like This

More Templates Like This