CommerceIncentives
Value-prop band: a row of incentives (free shipping, returns, support, secure checkout) — each with an optional icon, title, and short body. Three or four columns. Presentational and theme-driven.
Installation
pnpm dlx @hex-core/cli add commerce-incentivesUsage
import { CommerceIncentives } from "@/components/ui/commerce-incentives"Storefront value-prop band
Three incentives under the product grid.
import { CommerceIncentives } from "@hex-core/components";
<CommerceIncentives
incentives={[
{ title: "Free shipping over $50", description: "On orders shipped within the US." },
{ title: "30-day returns", description: "Easy returns on everything, no questions asked." },
{ title: "Secure checkout", description: "Encrypted from cart to confirmation." },
]}
/>Variant values
columnsItems per row on desktop.| Value | Description |
|---|---|
threedefault | Three across. |
four | Four across. |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
incentivesrequired | object | — | ReadonlyArray<{ title; description?; icon?: ReactNode }>. The incentive cells. Icons are ReactNode — no icon set bundled. |
eyebrow | ReactNode | — | Section eyebrow above the title. |
title | ReactNode | — | Section heading. |
description | ReactNode | — | Section subcopy below the heading. |
columns | enum | three | Items per row on ≥lg: 'three' or 'four'. |
className | string | — | Additional classes applied to the root <section>. |
AI Guidance
When to use
Use as a trust band on the storefront homepage, below the product grid, or just above the footer. Three columns reads best; four when policies are short.
When not to use
Don't use for product features (use commerce-product-features) or marketing claims (use marketing-feature-grid). Don't promise things you can't deliver — keep the copy accurate.
Common mistakes
- Passing an <img> as an icon — the icon well is sized for a glyph (size-5); use an SVG.
- Long-paragraph descriptions — one short line keeps the band scannable.
- Mixing tone (formal + casual) across items — pick one voice.
Accessibility
Each cell title renders as <h3>. Decorative icons are presentational; if an icon conveys meaning (e.g. a shipping truck), the adjacent title text carries the meaning.
Related components
Token budget: 909
Verified against @hex-core/components@1.14.0