Trust Badges Block React component
A store reassurance strip: shipping, returns, warranty and secure checkout badges with icons that draw themselves, each opening the three facts behind the promise, plus an overall rating with partially filled stars and the accepted payment types shown as neutral icons.
About the Trust Badges Block component
Trust Badges Block answers the questions that stop people from buying: what does shipping cost, can I return it, is it covered, is paying safe? Each promise fits on one badge, and one click shows the concrete facts behind it.
Below the badges, the store rating and accepted payment types round out the reassurance. Payment types use neutral icons, so there are no third-party logos to license or keep up to date.
When to use it
Use it on product pages under the buy button, in the cart, above the footer or on the homepage.
For a compact single-line version use the Incentives Block; for detailed reviews use the Rating Summary Breakdown.
Installation
Add the Trust Badges Block component to your project with the shadcn CLI. It lands in components/trust-badges-block.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/trust-badges-blockOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<TrustBadgesBlock /> accepts 6 props, all optional.
| Prop | Type | Default |
|---|---|---|
| badges | { id: string; icon: "truck" | "return" | "shield" | "lock" | "leaf" | "chat"; title: string; text: string; details: string[] }[] | BADGES |
| rating | number | 4.8 |
| reviewCount | number | 12480 |
| payments | string[] | PAYMENTS |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- badges{ id: string; icon: "truck" | "return" | "shield" | "lock" | "leaf" | "chat"; title: string; text: string; details: string[] }[]Default: BADGES
- ratingnumberDefault: 4.8
- reviewCountnumberDefault: 12480
- paymentsstring[]Default: PAYMENTS
- theme"dark" | "light"Default: "dark"
- classNamestring
Collections
Use-case pages that compare Trust Badges Block with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Trust Badges Block FAQ
- Can I show real payment logos?
- You can, if your agreements allow it. Replace PayIcon with the official artwork. The default uses neutral icons so the block works for any store without brand assets.
- How do the stars show 4.8?
- Each star fills by the exact fraction of the rating, so 4.8 shows four full stars and one 80% filled star.
- How many badges should I use?
- Three or four reads best. The grid shows four across on wide screens, two on tablets and one on phones.
- Which icons are available?
- truck, return, shield, lock, leaf and chat. Add more by extending the ICONS map with SVG path strings.
- Is it accessible?
- Badges are buttons with aria-expanded controlling a labelled region, icons are decorative, and the stars have a text label with the exact rating.
