Incentives Block React component
A 'why shop with us' section: a scrolling ticker of store perks, a headline, and four incentive cards (shipping, returns, recycled packaging, support) with code-drawn illustrations that come alive on hover, a big stat, a short explanation and a link.
About the Incentives Block component
Incentives Block tells shoppers why they should buy from you rather than somewhere else. A ticker keeps the main perks moving across the page, and four cards explain the promises that matter most with a big number and a short, concrete explanation.
Each card has its own small illustration drawn in code that animates when you point at it, which keeps a text-heavy section playful without any stock images.
When to use it
Use it on a store homepage, an about or 'why us' page, or above the footer of product pages.
For compact reassurance next to the buy button use the Trust Badges Block.
Installation
Add the Incentives Block component to your project with the shadcn CLI. It lands in components/incentives-block.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/incentives-blockOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<IncentivesBlock /> accepts 6 props, all optional.
| Prop | Type | Default |
|---|---|---|
| eyebrow | string | "Why Northline" |
| title | string | "Everything you'd expect, and a little more" |
| incentives | { id: string; art: "ship" | "return" | "recycle" | "support"; stat: string; title: string; body: string; link?: string }[] | INCENTIVES |
| ticker | string[] | TICKER |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- eyebrowstringDefault: "Why Northline"
- titlestringDefault: "Everything you'd expect, and a little more"
- incentives{ id: string; art: "ship" | "return" | "recycle" | "support"; stat: string; title: string; body: string; link?: string }[]Default: INCENTIVES
- tickerstring[]Default: TICKER
- theme"dark" | "light"Default: "dark"
- classNamestring
Collections
Use-case pages that compare Incentives Block with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Incentives Block FAQ
- Can I use my own illustrations?
- Yes. Replace the Art component with images or your own SVGs. The built-in ones are ship, return, recycle and support.
- How many incentives work best?
- Four fills the desktop row; three or two also work since the grid adapts. Keep stats short so they fit on one line.
- Does the ticker repeat seamlessly?
- Yes, the list is doubled and moved by exactly half its width, so it loops without a jump. It stops with reduced motion.
- Why does only one card animate?
- Only the hovered or focused card plays its illustration, which keeps attention on what the visitor is reading. The first card starts active.
- Is it accessible?
- The ticker is announced once as a single label instead of scrolling text, illustrations are decorative, and links are focusable with visible rings.
