# StoreKit > Open-source ecommerce component library for shadcn. Storefront sections (announcement bar, nav, hero, product cards, collection, PDP, cart, checkout, upsell, reviews, marketing, compliance, footer) that read one CSS token contract (sk-*), so one tokens.css reskins a whole store. Install any item: npx shadcn@latest add @storekit/ (or the URL form: npx shadcn@latest add https://storekit-eight.vercel.app/r/.json) Registry index: https://storekit-eight.vercel.app/r/registry.json Docs: https://storekit-eight.vercel.app/docs ## Token contract Colors are RGB triplets: --sk-accent, --sk-accent-ink, --sk-ink, --sk-muted, --sk-paper, --sk-card, --sk-surface, --sk-line, --sk-price, --sk-savings, --sk-sale, --sk-bar, --sk-bar-ink. Radii: --sk-radius-card, --sk-radius-btn, --sk-radius-chip. Fonts: --sk-font-display, --sk-font-body, --sk-font-mono. ## Announcement bar Promo strips, shipping cutoffs, countdowns. - [Marquee announcement bar](https://storekit-eight.vercel.app/components/announcement-marquee): Infinite scrolling strip of short messages that pauses on hover. (add @storekit/announcement-marquee; commerce: promo) - [Dispatch cutoff countdown](https://storekit-eight.vercel.app/components/announcement-countdown): Live countdown to a same-day dispatch cutoff with flipping digits. (add @storekit/announcement-countdown; commerce: shipping, urgency) - [Dismissible promo bar](https://storekit-eight.vercel.app/components/announcement-promo): Promo strip with a copyable code chip and a remembered dismiss. (add @storekit/announcement-promo; commerce: promo, discount) ## Navigation Headers, mega menus, mobile drawers, search. - [Minimal sticky header](https://storekit-eight.vercel.app/components/nav-minimal): Wordmark, centered links, and a cart badge that springs on change. Hairline appears on scroll. (add @storekit/nav-minimal; commerce: cart-count, search) - [Mega menu header](https://storekit-eight.vercel.app/components/nav-mega): Shop panel with categories, a featured product, and a promo tile. Hover, click, or keyboard. (add @storekit/nav-mega; commerce: merchandising, promo) - [Mobile drawer nav](https://storekit-eight.vercel.app/components/nav-drawer): Hamburger header with a focus-trapped left drawer, nested categories, search, and account rows. (add @storekit/nav-drawer; commerce: search, cart-count) ## Hero Editorial, split product, spec sheet, video. - [Split product hero](https://storekit-eight.vercel.app/components/hero-split): Headline and CTAs beside a product render, with a four-cell mono spec ledger. (add @storekit/hero-split; commerce: cta) - [Editorial scene hero](https://storekit-eight.vercel.app/components/hero-editorial): Full-bleed scene photograph with a directional scrim, bottom-left headline, CTA pair and a trust chip. (add @storekit/hero-editorial; commerce: cta) - [Fanned trio hero](https://storekit-eight.vercel.app/components/hero-trio): Centered headline with a drawn underline over three fanned, gently floating product renders. (add @storekit/hero-trio; commerce: cta) - [Spec sheet hero](https://storekit-eight.vercel.app/components/hero-spec-sheet): Data sheet composition: giant mono figure, wide product banner on graph hairlines and a ledger with a lab results chip. (add @storekit/hero-spec-sheet; commerce: cta) - [Cinemagraph hero](https://storekit-eight.vercel.app/components/hero-video): Poster-first muted loop with a centered headline, rotating proof chips and a fade into the page. (add @storekit/hero-video; commerce: cta) - [Color field hero](https://storekit-eight.vercel.app/components/hero-color-field): Packshot in a framed tile on a full accent color field, with an inverted CTA, fact row and a pinned price tag. (add @storekit/hero-color-field; commerce: cta) - [Macro detail hero](https://storekit-eight.vercel.app/components/hero-macro): Hard crop into one texture or ingredient with a zoom and focal point, a corner copy card and a mono caption. (add @storekit/hero-macro; commerce: cta) - [Before and after hero](https://storekit-eight.vercel.app/components/hero-before-after): Draggable comparison slider beside the copy, keyboard operable, with fixed-contrast labels and a results disclaimer. (add @storekit/hero-before-after; commerce: cta) - [Video card hero](https://storekit-eight.vercel.app/components/hero-video-card): Product demo clip contained in a card beside the copy, poster first, with one play and pause control and a caption with run time. (add @storekit/hero-video-card; commerce: cta) - [Cinemagraph micro-motion hero](https://storekit-eight.vercel.app/components/hero-cinemagraph): One still photo with a single living region (sway, breathe or glint) isolated by a soft mask, no video file, with a pause control. (add @storekit/hero-cinemagraph; commerce: cta) - [UGC customer hero](https://storekit-eight.vercel.app/components/hero-ugc): Customer photos or vertical clips lead: a tall featured post and two supporting posts with handle, verified mark, quote and shop link. (add @storekit/hero-ugc; commerce: cta) - [Founder or creator endorsement hero](https://storekit-eight.vercel.app/components/hero-endorsement): Portrait card with a product chip beside a large pull quote, name, role, credentials and an FTC disclosure line for paid partners. (add @storekit/hero-endorsement; commerce: cta) - [Multi-panel campaign hero](https://storekit-eight.vercel.app/components/hero-multi-panel): Two to four static campaign tiles at once instead of a rotating slider, lead tile carries the h1, each tile is one link. (add @storekit/hero-multi-panel; commerce: cta) - [Manual carousel hero](https://storekit-eight.vercel.app/components/hero-carousel): Split slides that change only on arrows, numbered tabs, Arrow keys or swipe. No autoplay, with carousel ARIA and a polite slide announcement. (add @storekit/hero-carousel; commerce: cta) - [Offer-led hero](https://storekit-eight.vercel.app/components/hero-offer): The discount is the headline: oversized offer figure, tap-to-copy promo code, eligibility line and a tagged packshot. (add @storekit/hero-offer; commerce: cta, promo) - [Countdown hero](https://storekit-eight.vercel.app/components/hero-countdown): Live timer tied to a required real deadline, flip digits, minute-level polite announcements and an expired state. (add @storekit/hero-countdown; commerce: cta, urgency) - [Shoppable hotspots hero](https://storekit-eight.vercel.app/components/hero-hotspots): Lifestyle or flat-lay scene with a dot on each product; dots open a card with price and add to cart, and drive a product rail on mobile. (add @storekit/hero-hotspots; commerce: atc) - [Quiz entry hero](https://storekit-eight.vercel.app/components/hero-quiz): The finder's first question lives in the hero as a card radio group; the start button carries the chosen goal into the quiz. (add @storekit/hero-quiz; commerce: cta, quiz) - [Category tiles hero](https://storekit-eight.vercel.app/components/hero-category-tiles): Compact headline over three to six category, goal or audience tiles with counts; an optional feature tile spans two columns. (add @storekit/hero-category-tiles; commerce: navigation) - [Best-seller shelf hero](https://storekit-eight.vercel.app/components/hero-bestseller-shelf): Store rating headline over the top products with rank badges, stars, price and quick add; scrolls sideways with a peek on mobile. (add @storekit/hero-bestseller-shelf; commerce: atc) - [Editorial magazine hero](https://storekit-eight.vercel.app/components/hero-magazine): Issue-style masthead, cover story with image and headline, and a numbered contents column of linked stories. (add @storekit/hero-magazine; commerce: content) - [Kinetic type hero](https://storekit-eight.vercel.app/components/hero-type): Oversized display type is the visual: a spring-swapped kinetic word in a fixed slot and inline product pills, with a pause control. (add @storekit/hero-type; commerce: cta) - [Seasonal collection hero](https://storekit-eight.vercel.app/components/hero-seasonal): One `preset` (spring, summer, autumn, holiday, new year, valentines, back to school, gifting) swaps copy, motif and band tone over a seasonal edit. (add @storekit/hero-seasonal; commerce: cta) - [Drop launch hero](https://storekit-eight.vercel.app/components/hero-drop): Coming soon teaser with the real release date, compact countdown and notify-me email form that flips to available now after release. (add @storekit/hero-drop; commerce: cta, capture) - [Trust strip hero](https://storekit-eight.vercel.app/components/hero-trust-strip): Split product hero with a welded strip of three to five reassurances (shipping, returns, testing, rating) above or below it. (add @storekit/hero-trust-strip; commerce: cta, trust) - [Proof-led hero](https://storekit-eight.vercel.app/components/hero-proof): Oversized average rating and review count lead, with a pinned featured review, award chips and press quotes as text wordmarks. (add @storekit/hero-proof; commerce: cta, trust) ## Trust and proof Guarantees, lab results, press, stats. - [Stats strip](https://storekit-eight.vercel.app/components/trust-stats): Four big numbers that count up once in view, with mono labels and hairline dividers. (add @storekit/trust-stats) - [Lab results proof](https://storekit-eight.vercel.app/components/trust-coa-proof): Lab results lookup with a typewriter placeholder beside a third-party test card with a sequenced 44-segment score bar. (add @storekit/trust-coa-proof; commerce: search) - [Guarantee cards](https://storekit-eight.vercel.app/components/trust-guarantees): Three guarantee cards with tinted icons, a title and one line each. (add @storekit/trust-guarantees) - [Lab and press marquee](https://storekit-eight.vercel.app/components/trust-logos): Mono wordmark marquee with masked edges that pauses on hover and stays static for reduced motion. (add @storekit/trust-logos) ## Product card Tiles with quick add, variants, swatches. - [Minimal product card](https://storekit-eight.vercel.app/components/product-card-minimal): One-link tile with synchronized hover zoom, category eyebrow, a two-line title, price and an always-visible Add on the image with loading and Added states. (add @storekit/product-card-minimal; commerce: atc) - [Quick-add product card](https://storekit-eight.vercel.app/components/product-card-quickadd): Size chips over the image swap the price with a crossfade; stepper and Add in the footer; stock badge. (add @storekit/product-card-quickadd; commerce: atc, variants, quantity, stock) - [Variant select product card](https://storekit-eight.vercel.app/components/product-card-variant): In-card option select that swaps price and crossfades the image, a spring-pop wishlist heart and a rating row. (add @storekit/product-card-variant; commerce: atc, variants, wishlist) - [Editorial product card](https://storekit-eight.vercel.app/components/product-card-editorial): Portrait tile that swaps to a second image on hover, display title, price and a benefit line. The whole card is one link. (add @storekit/product-card-editorial; commerce: link) ## Collection Grids, rails, filters, category tiles. - [Filterable collection grid](https://storekit-eight.vercel.app/components/collection-grid): Responsive product grid with result count, sort select and form filter chips; tiles reflow with a layout animation. (add @storekit/collection-grid; commerce: atc, filters, sort) - [Product rail](https://storekit-eight.vercel.app/components/collection-rail): Scroll-snap product rail with prev and next buttons, a scroll progress bar and a View all link. No carousel library. (add @storekit/collection-rail; commerce: atc) - [Category tiles](https://storekit-eight.vercel.app/components/collection-categories): Three category link tiles with a zooming render, mono count and an arrow that nudges on hover. (add @storekit/collection-categories; commerce: navigation) - [Shop by goal](https://storekit-eight.vercel.app/components/collection-benefits): Six goal tiles with an icon and a product count; the border turns accent on hover. (add @storekit/collection-benefits; commerce: navigation) ## Product page Gallery, buy box, variants, sticky add to cart. - [Product gallery](https://storekit-eight.vercel.app/components/pdp-gallery): Crossfading main image, thumbnail strip, 2x hover lens and arrow key navigation. (add @storekit/pdp-gallery; commerce: media) - [Buy box](https://storekit-eight.vercel.app/components/pdp-buybox): Rating, title, live price, variant pills with sold out state, subscribe and save, quantity, add to cart, trust row and accordion. (add @storekit/pdp-buybox; commerce: variants, atc, subscribe, quantity) - [Variant cards](https://storekit-eight.vercel.app/components/pdp-variant-cards): Variant selector as image cards with per-serving pricing and a best value badge. Arrow key radiogroup. (add @storekit/pdp-variant-cards; commerce: variants) - [Sticky add to cart](https://storekit-eight.vercel.app/components/pdp-sticky-atc): Bottom bar that slides up once the buy button scrolls away, with thumb, variant, price and add. (add @storekit/pdp-sticky-atc; commerce: atc) - [Spec tabs](https://storekit-eight.vercel.app/components/pdp-specs): Overview, details, ingredients and shipping tabs with a sliding underline and a mono spec ledger. (add @storekit/pdp-specs) - [Lab results band](https://storekit-eight.vercel.app/components/pdp-coa-band): Full width lab results band: a third-party test report as letterhead beside the case for testing every batch. (add @storekit/pdp-coa-band; commerce: trust) - [Bundle tiers](https://storekit-eight.vercel.app/components/pdp-bundle-tiers): Buy 1, 3 or 5 tiles with per unit price, total and savings. The selection frame glides between tiles. (add @storekit/pdp-bundle-tiers; commerce: bundle, quantity) - [Usage note](https://storekit-eight.vercel.app/components/pdp-usage-note): Calm bordered note with numbered how-to-use steps and a fine-print line. (add @storekit/pdp-usage-note) - [Color swatches](https://storekit-eight.vercel.app/components/pdp-swatch-colors): Color-dot radiogroup with a gliding selected ring, live color label and a diagonal strike for sold out colors. (add @storekit/pdp-swatch-colors; commerce: variants) - [Photo swatches](https://storekit-eight.vercel.app/components/pdp-swatch-photo): Photographic finish or format swatches with the selected name, detail and price under the row. (add @storekit/pdp-swatch-photo; commerce: variants) - [Option matrix](https://storekit-eight.vercel.app/components/pdp-option-matrix): Dependent color x size selectors. Combos that are not made or sold out are disabled with the reason in a tooltip. (add @storekit/pdp-option-matrix; commerce: variants, inventory) - [Swatches plus more](https://storekit-eight.vercel.app/components/pdp-swatch-more): Featured swatches with a +N more panel grid grouped by family. A pick from the long tail is promoted into view. (add @storekit/pdp-swatch-more; commerce: variants) - [Dropdown stack](https://storekit-eight.vercel.app/components/pdp-dropdown-stack): Numbered native selects with label and value always visible, sequential unlock, price deltas and a running total. (add @storekit/pdp-dropdown-stack; commerce: variants) - [Pre-order state](https://storekit-eight.vercel.app/components/pdp-preorder): Pre-order CTA with release date, ship window, charge timing, due today and cancel terms right above it. (add @storekit/pdp-preorder; commerce: atc, preorder) - [Back in stock capture](https://storekit-eight.vercel.app/components/pdp-back-in-stock): For a sold out variant the add to cart becomes an email or SMS capture tied to that variant, with a confirmation state. (add @storekit/pdp-back-in-stock; commerce: variants, atc, capture) - [Low stock line](https://storekit-eight.vercel.app/components/pdp-low-stock): Exact count from real inventory, hidden above the threshold and at zero. Plain ink, no urgency color. (add @storekit/pdp-low-stock; commerce: inventory) - [Delivery estimate](https://storekit-eight.vercel.app/components/pdp-delivery-estimate): ZIP input and an arrival window computed from today in business days, with a pickup option row. (add @storekit/pdp-delivery-estimate; commerce: shipping, pickup) - [Rating row](https://storekit-eight.vercel.app/components/pdp-rating-row): Stars, average, review count and one short verified quote under the title, linking to the reviews section. (add @storekit/pdp-rating-row; commerce: reviews) ## Cart Drawer, line items, shipping bar, empty state. - [Cart drawer](https://storekit-eight.vercel.app/components/cart-drawer): Right-side cart with a free-shipping meter, animated line items, a two-item upsell, a collapsible discount code and totals. Focus trap, Escape, scroll lock. (add @storekit/cart-drawer; commerce: cart, quantity, discount, shipping-threshold, upsell) - [Cart line item](https://storekit-eight.vercel.app/components/cart-line-item): Cart row with thumb, variant chip, stepper, line price with compare-at and a hover-reveal remove. (add @storekit/cart-line-item; commerce: cart, quantity, compare-at) - [Free shipping bar](https://storekit-eight.vercel.app/components/cart-shipping-bar): Progress toward a free-shipping threshold that computes the remainder and flips to a confirmation. (add @storekit/cart-shipping-bar; commerce: shipping-threshold) - [Empty cart](https://storekit-eight.vercel.app/components/cart-empty): Token-drawn bag illustration, a human line of copy, a bestsellers action and a two-item rail. (add @storekit/cart-empty; commerce: cart, atc, recommendations) - [Mini cart](https://storekit-eight.vercel.app/components/cart-mini): Header cart icon with a count badge and a popover preview with View cart and Checkout. (add @storekit/cart-mini; commerce: cart) - [Cart page](https://storekit-eight.vercel.app/components/cart-page): Two-column cart page: line items with steppers on the left, a sticky order summary with shipping math and checkout on the right. Stacks on mobile. (add @storekit/cart-page; commerce: cart, quantity, compare-at, shipping-threshold) - [Cart bottom sheet](https://storekit-eight.vercel.app/components/cart-sheet): Mobile bottom sheet after add to cart with a drag handle, the added item, cart subtotal, View cart and Checkout. Focus trap, Escape, scroll lock. (add @storekit/cart-sheet; commerce: cart, atc) - [Add to cart toast](https://storekit-eight.vercel.app/components/atc-toast): Confirmation toast with thumbnail, item and a View cart action. Auto-dismisses after 4s and pauses on hover or focus. (add @storekit/atc-toast; commerce: atc, cart) - [Add to cart modal](https://storekit-eight.vercel.app/components/atc-modal): Centered confirmation with the item, cart subtotal, Continue shopping and Checkout. Focus trap, Escape, scroll lock, focus return. (add @storekit/atc-modal; commerce: atc, cart) - [Tiered rewards bar](https://storekit-eight.vercel.app/components/cart-tier-rewards): One progress track with three milestones at their real thresholds (free shipping, 10% off, free gift). Markers fill as reached. (add @storekit/cart-tier-rewards; commerce: shipping-threshold, discount, gift) - [Gift unlock](https://storekit-eight.vercel.app/components/cart-gift-unlock): Locked row that names the amount left, then opens a choose-one-of-three gift picker at the threshold. (add @storekit/cart-gift-unlock; commerce: gift, shipping-threshold) - [Upsell carousel](https://storekit-eight.vercel.app/components/cart-upsell-carousel): Horizontal snap carousel of add-on cards with one-tap add, arrow paging and end-aware arrows. (add @storekit/cart-upsell-carousel; commerce: upsell, atc) - [Complete the routine](https://storekit-eight.vercel.app/components/cart-routine-grid): Three numbered routine steps for the cart page; each explains its role, steps in the cart show as included, add the rest in one click. (add @storekit/cart-routine-grid; commerce: upsell, bundle, atc) - [Service add-ons](https://storekit-eight.vercel.app/components/cart-service-addon): One-tap switches for gift wrap and priority handling with prices on the label and a running add-on total. (add @storekit/cart-service-addon; commerce: addon) - [Cart subscribe switch](https://storekit-eight.vercel.app/components/cart-subscribe-switch): Per-line Subscribe and save switch that updates the line to the per-delivery price and reveals a cadence picker. (add @storekit/cart-subscribe-switch; commerce: subscribe, cart) - [Buy more, save more](https://storekit-eight.vercel.app/components/cart-buy-more): Line-level quantity break message with one-click add of the missing units; shows the applied discount once reached. (add @storekit/cart-buy-more; commerce: quantity, discount, bulk) - [Automatic best offer](https://storekit-eight.vercel.app/components/cart-auto-discount): Prices every eligible offer against the cart, applies the best one without a code and explains why in a disclosure. (add @storekit/cart-auto-discount; commerce: discount) - [Cart note and gift message](https://storekit-eight.vercel.app/components/cart-note): Labeled order note with a live character count and a gift switch that reveals a printed gift message. (add @storekit/cart-note; commerce: gift, note) - [Shipping protection](https://storekit-eight.vercel.app/components/cart-protection): Opt-in shipping protection switch, off by default, with a computed fee and plain-language terms. (add @storekit/cart-protection; commerce: addon, protection) - [Cart delivery estimate](https://storekit-eight.vercel.app/components/cart-delivery-eta): Arrival range in business days and a real warehouse cutoff countdown, computed after mount in the warehouse time zone. (add @storekit/cart-delivery-eta; commerce: shipping, delivery) - [Saved for later](https://storekit-eight.vercel.app/components/cart-saved-later): Cart with a saved-for-later list below it; lines move between the two and the subtotal only counts the cart. (add @storekit/cart-saved-later; commerce: cart, save-for-later) - [Typed quantity with undo](https://storekit-eight.vercel.app/components/cart-qty-undo): Validated typed quantity input that explains bad values, and removal with a 5-second Undo that restores the line in place. (add @storekit/cart-qty-undo; commerce: cart, quantity) - [Reservation timer](https://storekit-eight.vercel.app/components/cart-timer): Countdown to a real stock-hold expiry. Renders nothing without expiresAt and says plainly when the hold has ended. (add @storekit/cart-timer; commerce: reservation) - [Cart trust row](https://storekit-eight.vercel.app/components/cart-trust): Compact two-by-two trust grid, a guarantee line and accepted payment chips for under the checkout button. (add @storekit/cart-trust; commerce: trust) - [Loyalty points](https://storekit-eight.vercel.app/components/cart-points): Points balance and value, points earned on this order, and a redeem switch in fixed blocks. (add @storekit/cart-points; commerce: loyalty, discount) - [Free sample chooser](https://storekit-eight.vercel.app/components/cart-samples): Grid of free samples; choose up to two, the rest dim at the limit and say why. (add @storekit/cart-samples; commerce: samples, gift) - [Round-up donation](https://storekit-eight.vercel.app/components/cart-donation): Opt-in round-up row that computes the cents to the next dollar and names the cause. (add @storekit/cart-donation; commerce: donation) ## Checkout Steps, address, summary, express pay. - [Single-page checkout](https://storekit-eight.vercel.app/components/checkout-layout): Numbered Contact, Address, Method and Payment sections that collapse to summaries with Edit, beside a sticky order summary. (add @storekit/checkout-layout; commerce: checkout, shipping-method, payment, order-summary) - [Address form](https://storekit-eight.vercel.app/components/checkout-address): Shipping address with blur validation, an address combobox that fills city, state and ZIP, and a save checkbox. (add @storekit/checkout-address; commerce: checkout, address, autocomplete, validation) - [Order summary](https://storekit-eight.vercel.app/components/checkout-summary): Checkout sidebar card with quantity-badged thumbs, an expandable discount code and a display-face total. (add @storekit/checkout-summary; commerce: order-summary, discount, shipping-threshold, tax) - [Express checkout](https://storekit-eight.vercel.app/components/checkout-express): Three wallet buttons as mono text marks, an or divider and a short trust row. (add @storekit/checkout-express; commerce: checkout, express-pay, trust) - [Shipping method](https://storekit-eight.vercel.app/components/checkout-shipping-method): Radio cards with a gliding accent frame and delivery dates computed from today in business days. (add @storekit/checkout-shipping-method; commerce: checkout, shipping-method, delivery-estimate) ## Upsell Bundles, subscribe and save, bulk tiers. - [Bulk rate table](https://storekit-eight.vercel.app/components/upsell-bulk-tiers): Stock-up pricing by quantity band. The matching row highlights as the stepper changes. (add @storekit/upsell-bulk-tiers; commerce: quantity, bundle) - [Frequently bought together](https://storekit-eight.vercel.app/components/upsell-fbt): Three products with animated checkboxes, a flipping total, set savings and a single add button. (add @storekit/upsell-fbt; commerce: atc, bundle) - [Subscribe and save](https://storekit-eight.vercel.app/components/upsell-subscribe): One-time vs subscribe radio cards, frequency chips and a benefits list that opens on subscribe. (add @storekit/upsell-subscribe; commerce: subscribe) - [Cross-sell rail](https://storekit-eight.vercel.app/components/upsell-cross-sell-rail): Pairs well with: a compact snapping rail of mini cards with quick add buttons. (add @storekit/upsell-cross-sell-rail; commerce: atc) - [One-time or subscribe tabs](https://storekit-eight.vercel.app/components/upsell-purchase-tabs): Two tabs that each carry their own price, benefits and call to action, with a per-serving line. (add @storekit/upsell-purchase-tabs; commerce: subscribe, atc) - [Subscription-only buy box](https://storekit-eight.vercel.app/components/upsell-subscription-only): No one-time option: cadence, next charge date, how to cancel and the guarantee all sit above the button. (add @storekit/upsell-subscription-only; commerce: subscribe, atc) - [Prepaid duration cards](https://storekit-eight.vercel.app/components/upsell-prepaid-cards): 30, 60 and 90 day cards stating total today, the monthly equivalent and the saving. (add @storekit/upsell-prepaid-cards; commerce: prepaid, atc) - [Single vs best value tabs](https://storekit-eight.vercel.app/components/upsell-best-value-tabs): A single unit and a multipack as two tabs, with the per-unit price and saving shown on the pack. (add @storekit/upsell-best-value-tabs; commerce: bundle, atc) - [Mix and match builder](https://storekit-eight.vercel.app/components/upsell-mix-match): Pick a pack size, spread units across flavors with steppers, watch the meter fill and add when complete. (add @storekit/upsell-mix-match; commerce: bundle, atc) - [Add-on checkbox](https://storekit-eight.vercel.app/components/upsell-addon-checkbox): One optional add-on row: warranty, refill, sample or packaging. Unchecked by default. (add @storekit/upsell-addon-checkbox; commerce: addon) - [Quantity unlock meter](https://storekit-eight.vercel.app/components/upsell-quantity-unlock): A stepper drives a threshold meter and one line says what the next unit unlocks. (add @storekit/upsell-quantity-unlock; commerce: quantity, atc) - [Gift with purchase chooser](https://storekit-eight.vercel.app/components/upsell-gift-chooser): Locked gift options with the exact remainder to spend, then a single pick once the threshold is met. (add @storekit/upsell-gift-chooser; commerce: gwp) - [Gift options](https://storekit-eight.vercel.app/components/upsell-gift-options): This is a gift toggle that opens wrapping, a gift note with a character count and hidden prices. (add @storekit/upsell-gift-options; commerce: gift) - [Financing line](https://storekit-eight.vercel.app/components/upsell-financing): Or 4 interest-free payments under the price, with a modal showing the exact schedule and terms. (add @storekit/upsell-financing; commerce: financing) - [Pre-CTA policy strip](https://storekit-eight.vercel.app/components/upsell-policy-strip): Delivery window, returns and guarantee in one row above add to cart, each opening a short detail. (add @storekit/upsell-policy-strip; commerce: trust, shipping) - [Add to cart with express row](https://storekit-eight.vercel.app/components/upsell-express-row): Add to cart stays primary; express wallets sit beneath as a quieter row of text wordmarks. (add @storekit/upsell-express-row; commerce: atc, express) - [Dispatch cutoff](https://storekit-eight.vercel.app/components/upsell-dispatch-cutoff): A countdown to the real warehouse cutoff in its own time zone that names the next dispatch day after it passes. (add @storekit/upsell-dispatch-cutoff; commerce: shipping) ## Reviews Summaries, review lists, UGC walls. - [Review summary](https://storekit-eight.vercel.app/components/reviews-summary): Big average, star histogram that grows into view, write a review and most mentioned chips. (add @storekit/reviews-summary; commerce: reviews) - [Review list](https://storekit-eight.vercel.app/components/reviews-list): Filter chips, sort, review cards with verified badge, photo thumb and a springy helpful count. (add @storekit/reviews-list; commerce: reviews) - [UGC wall](https://storekit-eight.vercel.app/components/reviews-ugc-wall): Even grid of customer photos and pull quotes with a Shop this chip on hover. (add @storekit/reviews-ugc-wall; commerce: reviews) ## Marketing FAQ, comparison, how it works, CTA. - [FAQ accordion](https://storekit-eight.vercel.app/components/faq-accordion): Five questions, one open at a time, with a still-have-questions contact card beside it on desktop. (add @storekit/faq-accordion; commerce: faq, support) - [Comparison table](https://storekit-eight.vercel.app/components/comparison-table): Us vs typical vendor across six rows, the brand column tinted and marked, rows staggered in on view. (add @storekit/comparison-table; commerce: comparison, trust) - [How it works](https://storekit-eight.vercel.app/components/how-it-works): Three concrete steps on a spine that draws itself in view, each with a mono numeral and a tiny product photo. (add @storekit/how-it-works; commerce: education) - [CTA band](https://storekit-eight.vercel.app/components/cta-band): Full-bleed ink closing band with a display headline, inline email capture and a drifting product tile. (add @storekit/cta-band; commerce: email-capture, cta) - [Feature bento](https://storekit-eight.vercel.app/components/feature-bento): Five tiles of different kinds: product image, stat, customer quote and two benefits. Staggered in, 2px hover lift. (add @storekit/feature-bento; commerce: benefits, trust, social-proof) ## Compliance Age gate, email capture, disclaimers. - [Age gate](https://storekit-eight.vercel.app/components/age-gate): Full-screen 18+ interstitial that fades out on confirm and remembers the answer for 30 days. (add @storekit/age-gate; commerce: age-verification) - [Email capture popup](https://storekit-eight.vercel.app/components/email-capture): Split modal with a product render, 10% off offer, loading and success states, and every dismiss path. (add @storekit/email-capture; commerce: newsletter, discount) - [Disclaimer banner](https://storekit-eight.vercel.app/components/disclaimer-banner): Slim supplement disclaimer band with an expandable full statement. (add @storekit/disclaimer-banner; commerce: disclaimer) - [Cookie consent card](https://storekit-eight.vercel.app/components/cookie-consent): Bottom-left card with equal-weight reject and accept, a manage layer with per-category switches. Persists the choice. (add @storekit/cookie-consent; commerce: consent) ## Footer Columns, newsletter, trust reprise. - [Column footer with newsletter](https://storekit-eight.vercel.app/components/footer-columns): Brand blurb with an inline newsletter form, three link columns, payment marks, and legal row. (add @storekit/footer-columns; commerce: newsletter, payments) - [Minimal footer](https://storekit-eight.vercel.app/components/footer-minimal): One compact row: mark, inline links, social icons, and copyright. (add @storekit/footer-minimal) - [Proof footer](https://storekit-eight.vercel.app/components/footer-proof): Inverse color band that reprises testing, ingredients, dispatch, and guarantee, then ends on a clipped wordmark. (add @storekit/footer-proof; commerce: trust) ## Pages Complete storefronts composed from the blocks. - [Example store](https://storekit-eight.vercel.app/components/page-store): The full example storefront in one install: announcement, nav with a mobile drawer, hero, proof, categories, grid, product detail, lab results, reviews, guarantees, how it works, FAQ, CTA, footer and a working cart drawer. (add @storekit/page-store; commerce: cart, atc, subscribe, reviews, coa) ## Primitives Button, price, badge, stars, stepper, input. - [cn + money](https://storekit-eight.vercel.app/components/cn): Class merge helper and currency formatter every StoreKit item uses. (add @storekit/cn) - [Self-instrumentation hook](https://storekit-eight.vercel.app/components/sk-analytics): useSkBlock gives a block its data-sk-* attributes and emits view, interact and convert events to any analytics sink already on the page (GA4 dataLayer, PostHog, Clarity, Shopify, rrweb). (add @storekit/sk-analytics) - [Button](https://storekit-eight.vercel.app/components/button): Solid, outline, ghost and ink variants. Loading state, 2% press scale, visible focus ring. (add @storekit/button) - [Price](https://storekit-eight.vercel.app/components/price): Tabular price with compare-at strike, sale color, savings chip, and per-unit or per-serving pricing. (add @storekit/price) - [Badge](https://storekit-eight.vercel.app/components/badge): Product state label: new, sale, bundle, low stock, verified. Optional live dot. (add @storekit/badge) - [Stars](https://storekit-eight.vercel.app/components/stars): Fractional star rating with count, filled by a clipped overlay. (add @storekit/stars) - [Quantity stepper](https://storekit-eight.vercel.app/components/stepper): Accessible quantity control with min and max. (add @storekit/stepper) - [Input](https://storekit-eight.vercel.app/components/input): Labelled text input with hint and error states, sized to match Button. (add @storekit/input) - [Product image](https://storekit-eight.vercel.app/components/product-image): Image on the surface token with shimmer, fade-in, hover zoom and optional hover swap. (add @storekit/product-image)