Component pack v1.3 — preview
40 components, fully editable.
Click any card to see the live render plus a copy-paste usage snippet. Use the search to jump to a component, or browse by category in the sidebar.
40 components
Storefront chrome
HeroCarousel
Embla-based looping headline carousel with autorotate and italic-accent markdown in headlines.
Storefront chrome
ProductCard
Storefront product card with image, title, price, badges, and an Add-to-cart callback.
Storefront chrome
TrustBar
Four-up trust row with icon + label, supports a $X threshold token.
Storefront chrome
SocialProofStrip
Four verified-purchase quotes + store-wide average rating.
Storefront chrome
UrgencyBanner
Honest "N bought in the last 7 days" badge — silent under threshold.
Cart + checkout
FreeShippingBar
Cart progress bar that flips to ✓ when the threshold is crossed.
Cart + checkout
StickyAddToCart
Mobile-only bottom bar that watches the in-page Add button via IntersectionObserver.
PDP
BnplBadge
Pay-in-4 marketing badge for PDP. Hides under $35 by default.
PDP
EstimatedDelivery
Concrete delivery window with handling + transit days.
Conversion + capture
NewsletterSignup
Email capture form — POSTs JSON to a configurable endpoint.
Conversion + capture
EmptyState
Generic empty-state placeholder for empty cart / wishlist / filters.
Conversion + capture
CookieConsentBanner
GDPR/CCPA banner with granular opt-in. Persists 12 months.
Conversion + capture
Pagination
Server-component pagination — URL-driven, preserves filter params.
Reviews
RatingHistogram
Five-row star histogram for review summaries.
Reviews
ReviewCard
Single review card with optional helpful-button callback.
Cart + checkout
PromoCodeInput
Coupon-code input that flips to an applied-coupon chip on success.
Storefront chrome
RecentlyViewed
Tracker + renderer pair using localStorage. Shows products the buyer recently saw.
Storefront chrome
RelatedProducts
Three-up product row at the bottom of a PDP. Pure presentational.
Account + library
ReorderButton
Account-page "Reorder" button that re-adds a past order to cart.
Cart + checkout
CartLineItem
Cart drawer / cart page line — image, name, qty stepper, line total, remove.
Cart + checkout
CheckoutSummary
Order total breakdown for the checkout sidebar — items + subtotal + tax + shipping + total.
Cart + checkout
AddressForm
Shipping / billing address form — controlled, with per-field error display.
Account + library
OrderStatusStepper
Visual progress for an order — Placed → Paid → Shipped → Delivered.
Auth + navigation
NavMenu
Main desktop nav — brand, links, cart icon, account icon, mobile hamburger trigger.
Auth + navigation
MobileMenu
Slide-in drawer paired with NavMenu — links, sign-in CTAs, scroll-locked.
Auth + navigation
AuthForm
Sign-in or sign-up form with email/password + OAuth provider slots.
Conversion + capture
AnnouncementBar
Top-of-page promo banner with localStorage-persisted dismissal.
Account + library
OrderListItem
One row of an account's order history — status badge, item count, total.
Account + library
DownloadCard
Card for an owned digital asset in the buyer's library — auto-picked file icon.
Cart + checkout
GiftMessageInput
Toggle + textarea for adding a gift message at checkout. Optional fee hint.
Storefront chrome
ProductGallery
Full PDP image gallery — main + thumbnails + hover-zoom + lightbox + keyboard nav.
Storefront chrome
ProductCarousel
Embla featured-products row with prev/next chevrons and 1/2/3/4 responsive widths.
Storefront chrome
CategoryTile
Browse-by-category card — image overlay + hover lift + arrow reveal.
Storefront chrome
VariantPicker
Size / color / style selector — auto color dots vs text pills.
Auth + navigation
SearchBar
Header search with debounced autocomplete, click-outside-to-close, escape to dismiss.
Conversion + capture
WishlistButton
Heart-icon toggle with optimistic state + revert-on-error.
Filters
PriceRangeSlider
Dual-handle filter slider, snaps to step, won't let handles cross.
Conversion + capture
CountdownTimer
Sale / drop countdown with full or compact mode. Auto-hides at zero.
Account + library
OrderConfirmationCard
Post-purchase success hero with order # + total + next-step list + CTAs.
Errors
NotFoundPage
Branded 404 hero with quick-links + back-home CTA. Drop on app/not-found.tsx.