COMPONENT LIBRARY
Explore all Fanbace SDK components. Click on any component to see live demos, code examples, and interactive previews.
Ready
ProductCard
Display product information with image, price, and add to cart
Ready
ProductGallery
Grid or list layout for browsing multiple products
Ready
ProductDetail
Full product page with variants, images, and description
Ready
ShoppingCart
Full cart page with item management and totals
Ready
MiniCart
Dropdown cart summary with quick actions
Ready
Checkout
Multi-step checkout with shipping and payment
Ready
OrderHistory
List of past orders with status tracking
Ready
OrderDetail
Individual order details with tracking information
Ready
ProductVariantSelector
Color and size picker for product variants
Ready
PriceDisplay
Formatted price with currency and optional comparison
Ready
ProductReviews
Customer reviews and ratings
Ready
Wishlist
Save favorite products for later
How to Use Components
Each component page includes:
- Live Preview - See the component in action with real mock data
- Code Examples - Copy-paste ready TypeScript code
- Props Documentation - Interactive props table
- Variants - Different states (loading, error, empty, etc.)
- Responsive Preview - Test on mobile, tablet, and desktop