Trust Badges Section
A row of trust badges covering shipping, returns, security, and support, in three supported layouts: default (icon and label), compact (smaller and denser), and detailed (icon, label, and a one-line description). Drops in below a product page, cart, or checkout to reassure shoppers.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/trust-badges-section.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/ecommerce/ecommerce24.tsx instead.
Usage
The file also exports ecommerce24Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Ecommerce24, ecommerce24Demo } from "@/components/blocks/ecommerce/ecommerce24"; export default function Page() { return <Ecommerce24 {...ecommerce24Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | undefined | Optional heading above the badge row. |
| items | TrustBadgeItem[] | [] | The badges to render, in order. |
| variant | "default" | "compact" | "detailed" | "default" | Controls badge size/density and whether the description line renders. |
| className | string | none | Extra classes for the outer section element. |
Types
type TrustBadgeItem = { icon: "shipping" | "returns" | "security" | "support"; title: string; description: string; };
Behavior notes
- Fully static and presentational: there are no click handlers or state anywhere in this block.
- icon is a fixed string key mapped internally to a Lucide icon component, not a component or function value, so the whole block stays a plain server component.
- description is accepted on every item regardless of variant, but only rendered when variant is "detailed"; "default" and "compact" both ignore it.
- The grid is fixed at up to 4 columns on large screens and wraps to 2 columns on smaller ones regardless of item count; more than 4 items just wraps to a second row.
More Ecommerce Blocks
View all →wishlist-manager
Wishlist Manager
Saved-items list with stock-status badges, move-to-cart and remove actions, and a real empty state.
product-information-tabs
Product Information Tabs
Tabbed product details with Description, Features, Specifications, Reviews, and Shipping panels.
collection-showcase-grid
Collection Showcase Grid
A large featured-collection hero card alongside a grid of smaller supporting collection tiles.
shop-by-brand-grid
Shop by Brand Grid
A grid of bordered brand tiles with a wordmark-style name, product count, and a hover affordance.
sale-countdown-timer
Sale Countdown Timer
A live days/hours/minutes/seconds countdown in default, compact, or full-width banner layouts.
gift-card-redemption-form
Gift Card Redemption Form
A code-entry form that validates against a fixed list of demo gift cards and shows a real success or error state.