Staaarter

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.

By Staaarter Team
Ecommerce
Docs
Live preview

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.json

Prefer 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

PropTypeDefaultDescription
headingstringundefinedOptional heading above the badge row.
itemsTrustBadgeItem[][]The badges to render, in order.
variant"default" | "compact" | "detailed""default"Controls badge size/density and whether the description line renders.
classNamestringnoneExtra 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.