Storefront Page React template for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Storefront Page is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import StorefrontPage from @/components/templates/storefront-page.

// app/page.tsx
"use client"

import Link from "next/link"
import { StorefrontPage, type StorefrontAddToCart } from "@/components/templates/storefront-page"
import type { CartItem } from "@/components/ui/cart-drawer"

async function addToCart(item: StorefrontAddToCart) {
  await fetch("/api/cart", { method: "POST", body: JSON.stringify({ line: item.lineId, quantity: item.quantity }) })
}

async function checkout(items: CartItem[]) {
  const response = await fetch("/api/checkout", { method: "POST", body: JSON.stringify(items) })
  const { url } = await response.json()
  window.location.assign(url)
}

export default function HomeRoute() {
  return <StorefrontPage linkComponent={Link} freeShippingThreshold={50} onAddToCart={addToCart} onCheckout={checkout} />
}

Props

• productsdefault "STOREFRONT_PRODUCTS"
  StorefrontProduct[]

  { id, title, collection, price, compareAtPrice?, colors: { name, value }[], kind, images?, sizes?, rating?, reviewCount?, badge?, addedAt?, rank?, description?, maxQuantity?, soldOut?, href?, favorite? }. kind picks the drawn photo (notebook, pocket, planner, pen, mug, pouch) in the chosen color; images (one per color) replace it. Quick add uses the first size.

• collectionsdefault "STOREFRONT_COLLECTIONS"
  StorefrontCollection[]

  { id, title, description?, kind, color, image?, href? } tiles and grid chips; a product joins one by its collection id. An empty array hides the tiles.

• featureddefault "STOREFRONT_FEATURED"
  StorefrontFeatured | null

  A product (the StorefrontProduct shape) plus eyebrow and highlights, shown in the band with the gallery, swatches, size select and Add to cart. null hides it.

• perksdefault "STOREFRONT_PERKS"
  StorefrontPerk[]

  { icon?, title, description } tiles: shipping, returns, guarantee. An empty array hides them.

• reviewsdefault "STOREFRONT_REVIEWS"
  ReviewData[]

  The reviews of the featured product, in the Reviews shape. An empty array hides the section.

• reviewsSummarydefault "STOREFRONT_REVIEWS_SUMMARY"
  ReviewsSummaryData

  { average, count, distribution, aspects? } when reviews is one page of many.

• priceRangesdefault "STOREFRONT_PRICE_RANGES"
  StorefrontPriceRange[]

  The price filter choices as [min, max) pairs in major units; null is an open end. Any price is always first.

• labels
  Partial<StorefrontPageLabels>

  Every string on the page: brand, announcement, hero, section headings, filters, card and cart copy, newsletter, footer. Some are functions (announcement, productCount, quickAddLabel, featuredNote, photo).

• currencydefault "USD"
  string

  ISO currency of every price, the threshold and the cart.

• localedefault ""
  string

  Intl locale for prices and counts; empty uses the UIProvider's, else en-US.

• freeShippingThresholddefault 50
  number

  The order total for free shipping: the announcement strip, the note under Add to cart and the cart's progress bar. 0 hides all three.

• shippingdefault 6
  number | null

  The flat delivery price under the threshold, in the note under Add to cart and the cart summary; null prints Calculated at checkout.

• defaultCollectiondefault ""
  string

  The collection id the grid starts on; empty is All.

• defaultSortdefault "featured"
  "featured" | "newest" | "price-asc" | "price-desc" | "rating"

  The grid's starting order. featured follows rank with sold out items last.

• cartItems
  CartItem[]

  The cart, controlled. Quick add and Add to cart append or bump a line (id product:color:size).

• defaultCartItems
  CartItem[]

  The starting cart when it is not controlled; empty by default.

• onCartItemsChange
  (items: CartItem[]) => void

  Every cart change: adds, quantity steps and removals.

• cartOpen
  boolean

  The cart drawer, controlled.

• defaultCartOpendefault false
  boolean

  Starts with the cart drawer open.

• onCartOpenChange
  (open: boolean) => void

  The drawer opened or closed.

• onAddToCart
  (item: StorefrontAddToCart) => void | Promise<unknown>

  { product, color?, size?, quantity, lineId }. A returned promise keeps the button loading; a rejection adds nothing and announces labels.addFailed.

• onCheckout
  (items: CartItem[]) => void | Promise<unknown>

  The cart's checkout button; a promise keeps it loading. Without it the button links to cartProps.checkoutHref (default /checkout).

• onFavoriteChange
  (product: StorefrontProduct, favorite: boolean) => void | Promise<unknown>

  A heart was toggled; a rejection rolls it back.

• onSubscribe
  (email: string) => void | Promise<unknown>

  The newsletter form; without it a 900 ms pretend, then the success line.

• columnsdefault 4
  3 | 4

  Products per row from 1024px; three from 768px, two on phones.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Accents: the rating stars, the review bars and filters.

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Shop the collection, Add to cart, the sticky bar, checkout and the newsletter button.

• favoriteTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The heart on a saved product; neutral is white on the photo.

• saleTonedefault "danger"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Sale prices, the discount chip and the Sale tag on the photo (a markdown is a status).

• radiusdefault "lg"
  "none" | "sm" | "md" | "lg"

  Corners of the product, collection, buy box and perk cards: 0 / 12 / 16 / 24px; photos inside follow.

• backgrounddefault "soft"
  "plain" | "soft" | "glow" | "aurora" | "grid" | "dots"

  The main background: plain is the bare page color; the others tint the page and add a wash, a glow, an aurora, a grid or dots over the first screen.

• backgroundColordefault "oklch(0.72 0.07 70)"
  string

  The tint of the main background, a warm sand by default.

• bandBackgrounddefault "muted"
  "muted" | "tinted" | "gradient" | "dots"

  The secondary background of every second section (collections, the featured product, perks). Cards inside are lifted above it.

• bandColordefault "oklch(0.72 0.07 70)"
  string

  The tint of tinted and gradient bands; left equal to backgroundColor it follows it.

• showAnnouncementdefault true
  boolean

  The free shipping strip above the header (needs freeShippingThreshold above 0).

• showCollectionsdefault true
  boolean

  The collection tiles.

• showFeatureddefault true
  boolean

  The featured product band.

• showReviewsdefault true
  boolean

  The reviews with the rating summary.

• showPerksdefault true
  boolean

  The shipping, returns and guarantee tiles.

• showNewsletterdefault true
  boolean

  The newsletter signup.

• stickyAddToCartdefault true
  boolean

  Below 768px, a bar with Add to cart slides up while the featured product is on screen and its own button is not.

• headerdefault true
  boolean

  The sticky header with the brand, section links, account and the cart button. Off, the cart button moves to the grid's toolbar.

• footerdefault true
  boolean

  The footer with Shop, Help and Company links.

• headerProps
  Partial<MarketingHeaderProps>

  Anything for MarketingHeader (layout, variant, items...); wins over the page's own values.

• footerProps
  Partial<MarketingFooterProps>

  Anything for MarketingFooter (variant, columns, socials, newsletter...).

• bannerProps
  Partial<BannerProps>

  Anything for the announcement Banner (tone, variant, persistKey, action...).

• galleryProps
  Partial<ProductGalleryProps>

  Anything for the featured ProductGallery (thumbnails, zoom, aspect...).

• reviewsProps
  Partial<ReviewsProps>

  Anything for Reviews (layout, onWriteReview, hasMore, onLoadMore...).

• newsletterProps
  Partial<NewsletterSectionProps>

  Anything for the NewsletterSection (layout, bullets, subscribers...).

• cartProps
  Partial<CartDrawerProps>

  Anything for the CartDrawer (showCoupon, couponProps, taxRate, note, size, checkoutHref...); items and open stay with the page, and onCheckout wins over checkoutHref.

• animateIndefault true
  boolean

  The hero rises in once when the page mounts on the client; never during hydration, under reduced motion or in thumbnails.

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link for the product, header and footer links (next/link in an app).

• className
  string

  Classes for the root.

• classNames
  Partial<Record<StorefrontPageSlot, string>>

  Classes for announcement, header, hero, collections, collection, shop, toolbar, filters, grid, product, photo, featured, gallery, buyBox, stickyBar, reviews, perks, newsletter, cart and footer.

Parts

FAQ