E-Commerce

Primary CTA with loading, success checkmark and error states around an async add-to-cart handler.

React

Frequently-bought-together block: a main product plus checkbox add-ons, a live combined total and one Add-bundle button.

React

Right-docked cart drawer on desktop and a three-snap-point bottom sheet on mobile, with no backdrop-blur scrim, focus trap and Escape to close.

React

Single cart row with thumbnail, variant text, quantity stepper, line total and a fade-out remove action.

React

Order totals block listing subtotal, shipping, tax and discount rows that only render when passed, plus a grand total.

Astro

Responsive image-and-label tile grid linking into catalogue categories, with an optional item count.

Astro

Two-column shipping and payment form with native HTML5 validation and a submit button with a loading state.

React

Full checkout-page order summary with line items, a promo code field and the totals breakdown — the richer sidebar companion to a totals-only cart summary.

Astro

Postcode-based delivery estimate for a product page: enter a postcode, get selectable shipping methods with ETA and price.

React

Centred placeholder for an empty cart with icon, copy and a continue-shopping CTA.

Astro

Animated fill bar showing amount remaining to a free-shipping threshold, swapping to a success message once met.

React

Post-checkout success panel with order number, delivery estimate, line items and total paid.

Astro

Horizontal (vertical on mobile) step tracker for order lifecycle stages, with a dedicated cancelled-order state.

Astro

Formatted price with optional struck-through compare-at price and a percentage-off badge, in three sizes.

Astro

Catalogue grid tile with image, title, rating, price with compare-at discount badge, and an out-of-stock overlay.

Astro

Horizontal row card for search results or dense catalogue lists, with an action slot for cart/wishlist buttons.

Astro

Grid product card with an inline quantity stepper and add-to-cart control that shows a loading then success state.

React

Side-by-side comparison of two to four real products with images, price, stock state, spec rows and a per-column Add to cart.

Astro

PDP summary block bundling title, price, colour/size variant pickers, quantity stepper and an add-to-cart button with success state.

React

Main image with thumbnail rail, hover magnifier lens, and a fullscreen zoom view with keyboard navigation.

React

Sticky filter/sort bar with active filter chips, result count, and sort select that wraps a product grid via children.

React

Numeric stepper with min/max clamping, direct type-in and a disabled state, used across cart and PDP.

React

QuoteListDrawer — header badge + slide-in panel for a B2B request-a-quote flow, the quote-list equivalent of `CartDrawer`.

React

QuoteRequestButton — "Add to quote" for a B2B request-a-quote flow, as distinct from `AddToCartButton` (which assumes an immediate-checkout cart).

React

QuoteRequestForm — full-page line-items + contact-details panel for a B2B request-a-quote flow.

React

Horizontally scrolling rail of small product tiles using native scroll-snap, no carousel library.

Astro

Customer review card with avatar/initials, verified badge, star rating, photos row and a progressively-enhanced helpful-vote button.

Astro

Average rating, star row and review count beside a 5-to-1 star horizontal bar breakdown with counts.

Astro

Product-page bottom bar with thumbnail, name, price and Add to cart, sliding in once the buy box scrolls out of view. Self-contained and product-aware.

React

Dot-and-label status line that derives in-stock/low-stock/out-of-stock from a quantity and threshold, or accepts an explicit status.

Astro

Accessible plan selection for an existing subscription, showing the current plan and collecting explicit confirmation. Billing and proration remain in the host app.

React

Colour swatch and size button picker with per-combination availability so unavailable sizes show struck-through instead of disappearing.

React

Heart toggle with a pop animation on save, in an icon-only or labelled-pill variant.

React

Interactive star-rating picker with title and body fields, native validation, and a success confirmation state.

React